.page-products {
  --svc-radius: 2px;
  --svc-edge: rgba(158, 179, 199, 0.18);
  background-color: var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.75;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  line-height: 1.22;
}

.page-products p {
  margin: 0;
}

.page-products .svc-inline-link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(140, 200, 255, 0.5);
}

.page-products .svc-inline-link:hover {
  color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .svc-hero {
  position: relative;
  padding: clamp(22px, 4.5vw, 48px) 0 clamp(40px, 7vw, 84px);
  background:
    radial-gradient(ellipse at 84% 6%, rgba(20, 103, 196, 0.62), transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(11, 85, 99, 0.6), transparent 56%),
    var(--night);
}

.page-products .svc-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--lime) 0 20%, var(--blue-stand) 20% 64%, var(--teal) 64% 100%);
}

.page-products .svc-hero .breadcrumb a {
  color: var(--info);
}

.page-products .svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  margin-top: clamp(20px, 4vw, 40px);
}

@media (min-width: 940px) {
  .page-products .svc-hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: end;
  }
}

.page-products .svc-hero h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: var(--white);
  text-wrap: balance;
}

.page-products .svc-hero__lede {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--mist);
}

.page-products .svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .svc-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

.page-products .svc-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.page-products .svc-board__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 2.4vw, 22px);
  background: rgba(11, 46, 89, 0.78);
}

.page-products .svc-board__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  line-height: 1;
  color: var(--lime);
}

.page-products .svc-board__label {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

/* ---------- 主体骨架 ---------- */
.page-products .svc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  padding-top: clamp(32px, 6vw, 64px);
  padding-bottom: clamp(40px, 7vw, 90px);
}

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

  .page-products .svc-rail {
    position: sticky;
    top: 88px;
    align-self: start;
  }
}

.page-products .svc-rail__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--mist);
}

.page-products .svc-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
}

@media (min-width: 1000px) {
  .page-products .svc-rail__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 2px;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.page-products .svc-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-left: 2px solid transparent;
  color: var(--mist);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-products .svc-rail__link:hover,
.page-products .svc-rail__link:focus-visible {
  color: var(--white);
  background: rgba(20, 103, 196, 0.22);
  border-left-color: var(--lime);
}

.page-products .svc-rail__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--blue-stand);
}

.page-products .svc-rail__link:hover .svc-rail__num {
  color: var(--lime);
}

.page-products .svc-pages {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  min-width: 0;
}

/* ---------- 服务页 ---------- */
.page-products .svc-sheet {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.2vw, 40px);
  background: linear-gradient(155deg, rgba(11, 46, 89, 0.62) 0%, rgba(6, 19, 31, 0.96) 72%);
  border-left: 3px solid var(--blue-stand);
  border-radius: var(--svc-radius);
  scroll-margin-top: 96px;
}

.page-products .svc-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: linear-gradient(135deg, rgba(201, 255, 61, 0.16), transparent 70%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

@media (min-width: 1000px) {
  .page-products .svc-sheet--offset {
    margin-left: 26px;
  }

  .page-products .svc-sheet--inset {
    margin-right: 26px;
  }
}

.page-products .svc-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.page-products .svc-sheet__num {
  padding: 2px 8px;
  border: 1px solid rgba(201, 255, 61, 0.42);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--lime);
}

.page-products .svc-sheet__title {
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  color: var(--white);
}

.page-products .svc-sheet__intro {
  max-width: 60ch;
  margin-bottom: 20px;
  font-size: 15.5px;
  color: var(--mist);
}

.page-products .svc-body {
  font-size: 15.5px;
  color: var(--mist);
}

.page-products .svc-body p + p {
  margin-top: 14px;
}

.page-products .svc-body strong {
  color: var(--white);
  font-weight: 600;
}

/* ---------- 筛选 ---------- */
.page-products .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.page-products .filter-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--svc-radius);
  background: transparent;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-products .filter-btn:hover {
  color: var(--white);
  border-color: var(--blue-stand);
}

.page-products .filter-btn[aria-pressed="true"] {
  color: var(--night);
  background: var(--lime);
  border-color: var(--lime);
}

/* ---------- 服务卡 ---------- */
.page-products .svc-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

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

.page-products .svc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: rgba(243, 239, 228, 0.05);
  border-left: 2px solid var(--blue-stand);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .svc-card:hover {
  background: rgba(20, 103, 196, 0.18);
  border-left-color: var(--lime);
}

.page-products .svc-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--white);
}

.page-products .svc-card p {
  flex: 1;
  font-size: 14.5px;
  color: var(--mist);
}

.page-products .svc-card .tag {
  align-self: flex-start;
}

.page-products .svc-card .link-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--lime);
}

.page-products [data-filter-item][hidden] {
  display: none;
}

/* ---------- 图文分栏 ---------- */
.page-products .svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

@media (min-width: 860px) {
  .page-products .svc-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-products .svc-split--media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* ---------- 列表 ---------- */
.page-products .svc-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .svc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--lime);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.page-products .svc-list li strong {
  color: var(--white);
  font-weight: 600;
}

/* ---------- 图片 ---------- */
.page-products .svc-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--blue-deep);
}

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

.page-products .svc-figure--std img {
  aspect-ratio: 3 / 2;
}

.page-products .svc-figure--tall img {
  aspect-ratio: 3 / 2;
}

.page-products .svc-figure--wide img {
  aspect-ratio: 16 / 9;
}

.page-products .svc-figure--bleed {
  margin-top: 24px;
}

.page-products .svc-figure figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

/* ---------- 流程步骤 ---------- */
.page-products .svc-steps {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: svcstep;
}

.page-products .svc-steps li {
  counter-increment: svcstep;
  position: relative;
  padding: 14px 16px 14px 56px;
  background: rgba(20, 103, 196, 0.16);
  border-left: 2px solid var(--lime);
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-steps li::before {
  content: counter(svcstep, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--lime);
}

.page-products .svc-steps li strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15.5px;
  color: var(--white);
}

/* ---------- 折叠面板 ---------- */
.page-products .svc-details {
  border-top: 1px solid var(--line);
}

.page-products .svc-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

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

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

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

.page-products .svc-details__body {
  padding: 0 0 16px;
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-details__body p + p {
  margin-top: 12px;
}

/* ---------- 版本对比 ---------- */
.page-products .svc-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  background: rgba(6, 19, 31, 0.55);
}

.page-products .svc-compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-products .svc-compare caption {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

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

.page-products .svc-compare thead th {
  background: rgba(11, 46, 89, 0.7);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .svc-compare thead th:last-child {
  color: var(--lime);
}

.page-products .svc-compare tbody th {
  font-weight: 500;
  white-space: nowrap;
  color: var(--mist);
}

.page-products .svc-compare td {
  color: var(--paper);
}

.page-products .svc-compare td:last-child {
  color: var(--white);
  background: rgba(201, 255, 61, 0.06);
}

/* ---------- 使用节奏 ---------- */
.page-products .svc-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .svc-rhythm__item {
  padding: 18px;
  background: rgba(243, 239, 228, 0.05);
  border-top: 2px solid var(--teal);
}

.page-products .svc-rhythm__item:nth-child(2n) {
  border-top-color: var(--blue-stand);
}

.page-products .svc-rhythm__tag {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--info);
}

.page-products .svc-rhythm__item h3 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}

.page-products .svc-rhythm__item p {
  font-size: 14.5px;
  color: var(--mist);
}

.page-products .svc-rhythm__path {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--lime);
}

/* ---------- 收尾 ---------- */
.page-products .svc-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(28px, 5vw, 48px);
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(120deg, rgba(11, 46, 89, 0.85), rgba(11, 85, 99, 0.5));
}

@media (min-width: 820px) {
  .page-products .svc-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.page-products .svc-cta__title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--white);
}

.page-products .svc-cta__text {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .svc-cta__actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .svc-rail__link,
  .page-products .filter-btn,
  .page-products .svc-card {
    transition: none;
  }
}
<<<END>>>

哦不对，我多写了个 `<<<END>>>`。得删掉。输出应该停在 CSS 结束的地方。重来——最后一块应该只以 PAGE_CSS 内容结尾，不加多余的标记。

我得再检查一下之前在 `svc-table-wrap` 之前是不是留了重复的 `.page-products .svc-table-wrap` 代码块——对，我重复写了一次。最后版本里保留一份就好。

输出最终版。
<main id="main-content" class="page-products">

  <section class="svc-hero">
    <div class="container">
      <nav class="breadcrumb" aria-label="当前位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">赛事服务台</li>
        </ol>
      </nav>

      <div class="svc-hero__grid">
        <div class="svc-hero__lead">
          <p class="eyebrow">赛事服务台</p>
          <h1>赛事时间与周末场次，在这里一次办妥</h1>
          <p class="svc-hero__lede">欧宝体育看台把赛程查询、周末两场预约和回看已约场次做成一条顺手的路径。福州、厦门、泉州在内的 18 个城市，篮球、足球、羽毛球、路跑、电竞等 9 个项目的场次都收在这里，今天想看什么、这周末能约哪一场，打开就能定。</p>
          <div class="svc-hero__actions">
            <a class="btn btn--primary" href="#weekend">预约周末两场</a>
            <a class="btn btn--ghost" href="#updates">查今日更新</a>
          </div>
        </div>

        <div class="svc-board" aria-label="看台服务数据">
          <div class="svc-board__cell">
            <span class="svc-board__num">120–160</span>
            <span class="svc-board__label">每周维护的赛事条目</span>
          </div>
          <div class="svc-board__cell">
            <span class="svc-board__num">98.6%</span>
            <span class="svc-board__label">赛事更新及时率</span>
          </div>
          <div class="svc-board__cell">
            <span class="svc-board__num">32</span>
            <span class="svc-board__label">合作城市场馆</span>
          </div>
          <div class="svc-board__cell">
            <span class="svc-board__num">18.6万</span>
            <span class="svc-board__label">本赛季观赛预约人次</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="container svc-shell">

    <aside class="svc-rail" aria-label="服务页索引">
      <p class="svc-rail__title">服务清单</p>
      <ul class="svc-rail__list">
        <li><a class="svc-rail__link" href="#services"><span class="svc-rail__num">01</span>六项服务</a></li>
        <li><a class="svc-rail__link" href="#updates"><span class="svc-rail__num">02</span>查更新时间</a></li>
        <li><a class="svc-rail__link" href="#weekend"><span class="svc-rail__num">03</span>周末双场</a></li>
        <li><a class="svc-rail__link" href="#watchlist"><span class="svc-rail__num">04</span>关注列表</a></li>
        <li><a class="svc-rail__link" href="#upgrade"><span class="svc-rail__num">05</span>升级版入口</a></li>
        <li><a class="svc-rail__link" href="#scenes"><span class="svc-rail__num">06</span>使用节奏</a></li>
        <li><a class="svc-rail__link" href="#support"><span class="svc-rail__num">07</span>服务保障</a></li>
      </ul>
    </aside>

    <div class="svc-pages">

      <section class="svc-sheet" id="services" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">01</span>
          <h2 class="svc-sheet__title">六项服务，一张清单看清楚</h2>
        </div>
        <p class="svc-sheet__intro">先看手上是什么事：想查今天有什么比赛、想把周末两场定下来、想回到已经约好的场次，或者想知道会员多拿到什么。按类别筛一下，对应入口就出来了。</p>

        <div data-filter-root>
          <div class="filter-bar">
            <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部</button>
            <button type="button" class="filter-btn" data-filter="query" aria-pressed="false">查询</button>
            <button type="button" class="filter-btn" data-filter="book" aria-pressed="false">预约</button>
            <button type="button" class="filter-btn" data-filter="return" aria-pressed="false">回访</button>
            <button type="button" class="filter-btn" data-filter="benefit" aria-pressed="false">权益</button>
          </div>

          <div class="svc-cards">
            <article class="svc-card" data-filter-item data-category="query">
              <span class="tag tag--lime">查询</span>
              <h3>查今日更新与本周开赛</h3>
              <p>打开就落在今天的条目列表，按项目和开赛时间排好，不用一层层点进去找。</p>
              <a class="link-arrow" href="#updates">看查询路径</a>
            </article>

            <article class="svc-card" data-filter-item data-category="book">
              <span class="tag tag--orange">预约</span>
              <h3>约周末两场名额</h3>
              <p>会员权益里的预约服务，每周放两个场次名额组合，提前选好，周末直接到场。</p>
              <a class="link-arrow" href="#weekend">看预约流程</a>
            </article>

            <article class="svc-card" data-filter-item data-category="return">
              <span class="tag tag--lime">回访</span>
              <h3>回到已约场次</h3>
              <p>把常看的场次存下来，下次回来两步就能进到已经约好的那一场。</p>
              <a class="link-arrow" href="#watchlist">看回访方式</a>
            </article>

            <article class="svc-card" data-filter-item data-category="query book">
              <span class="tag tag--lime">入口</span>
              <h3>走更短的升级版入口</h3>
              <p>首页第二栏直接进，从想看的那场到预约确认，动作从 5 步收到 2 步。</p>
              <a class="link-arrow" href="#upgrade">看版本差异</a>
            </article>

            <article class="svc-card" data-filter-item data-category="benefit book">
              <span class="tag tag--orange">权益</span>
              <h3>看懂三档会员权益</h3>
              <p>看台通行、周末双场、城市主场，从查询到提醒各自覆盖到哪一步，一眼对比。</p>
              <a class="link-arrow" href="#weekend">看权益范围</a>
            </article>

            <article class="svc-card" data-filter-item data-category="return benefit">
              <span class="tag tag--lime">提醒</span>
              <h3>接住场次变动提醒</h3>
              <p>时间调整或开场临近，提醒会跟着你关注的场次走，不用自己反复刷新。</p>
              <a class="link-arrow" href="#watchlist">看提醒规则</a>
            </article>
          </div>
        </div>
      </section>

      <section class="svc-sheet svc-sheet--offset" id="updates" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">02</span>
          <h2 class="svc-sheet__title">查更新时间：一步直达</h2>
        </div>

        <div class="svc-split">
          <div class="svc-body">
            <p>查 OB 体育赛事更新时间，从顶部动作栏点「查更新」，页面直接落到今天的条目列表，中间没有过渡页。回访用户也可以从关注列表里常看的那一项跳过去，路径一样短。</p>

            <ul class="svc-list">
              <li><strong>今日更新</strong>：当天新增与调整过的条目集中在上方，先看变化再看全部。</li>
              <li><strong>本周开赛</strong>：按星期排列，适合临时有空时快速挑一场。</li>
              <li><strong>周末双场</strong>：把可以在本周末成行的场次单独拎出来。</li>
              <li><strong>回访提醒</strong>：已经存过的场次有变动，就在这里出现。</li>
            </ul>

            <p>所有时间统一按北京时间标注，页面上一律写全日期、星期与开赛时刻。每周维护 120–160 条赛事条目，覆盖篮球、足球、羽毛球、路跑、电竞等 9 个项目，福建及周边 18 个城市都能查到对应场次。</p>
          </div>

          <figure class="svc-figure svc-figure--std">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛事信息屏上的比分牌与开赛时间数字特写，画面无品牌露出" loading="lazy" decoding="async">
            <figcaption>今日更新 · 本周开赛 · 周末双场 · 回访提醒</figcaption>
          </figure>
        </div>
      </section>

      <section class="svc-sheet" id="weekend" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">03</span>
          <h2 class="svc-sheet__title">周末双场：会员权益里的预约服务</h2>
        </div>
        <p class="svc-sheet__intro">每周开放 2 个场次名额组合，覆盖 32 个合作场馆。本赛季已开放 46 周，累计服务 18.6 万人次观赛预约。想约欧宝娱乐体育周末看两场，提前把场次定下来，周末到场就能直接用。</p>

        <ol class="svc-steps">
          <li><strong>选场</strong>：在本周开赛列表里挑出两个想去的场次，看到名额状态再决定，不必来回翻页面。</li>
          <li><strong>确认</strong>：名额确认后生成预约记录，场次时间、场馆位置和入场提示一并给出。</li>
          <li><strong>回访</strong>：开场前收到提醒，看完回到关注列表记一笔，下次预约直接从这个记录接上。</li>
        </ol>

        <ul class="svc-list">
          <li><strong>看台通行</strong>：赛事查询、条目收藏与基础提醒。</li>
          <li><strong>周末双场</strong>：在通行权益之上，开放每周两场的预约名额。</li>
          <li><strong>城市主场</strong>：涵盖查询、预约、回访与提醒全流程，适合每周末固定观赛的人。</li>
        </ul>

        <p class="svc-body">场次名额视各场馆开放情况而定，具体场次、入场时间与座位安排以预约确认信息为准。</p>

        <figure class="svc-figure svc-figure--wide svc-figure--bleed">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="低角度拍摄的周末看台观众席剪影与场馆灯光" loading="lazy" decoding="async">
          <figcaption>周末双场 · 32 个合作场馆</figcaption>
        </figure>
      </section>

      <section class="svc-sheet svc-sheet--offset" id="watchlist" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">04</span>
          <h2 class="svc-sheet__title">关注列表：回访时的工作台</h2>
        </div>

        <div class="svc-split svc-split--media">
          <div class="svc-body">
            <p>关注列表用来放你常看的那几场。存进场次之后，这里同时承担三件事：记住你约过什么、把更新提醒送到你手上、下次回来直接把你放回原来那一场。</p>

            <ul class="svc-list">
              <li><strong>保存场次</strong>：把想去的场次放进来，下次打开就在第一位。</li>
              <li><strong>更新提醒</strong>：时间调整、场馆变更、开场临近，按保存的顺序提示。</li>
              <li><strong>快速回访</strong>：回访用户平均 2 步进入已约场次，不用重新查一遍。</li>
            </ul>

            <p>关注列表默认保存在你自己的设备本地，换设备或在公共电脑上使用时，重新保存一遍即可。回访用户占周活跃用户的 58%，多数人在周末前后各进来一次，处理预约和回看。</p>
          </div>

          <figure class="svc-figure svc-figure--tall">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="抽象的关注列表与标签界面示意，青柠与暖橙色高亮，无真实用户信息" loading="lazy" decoding="async">
            <figcaption>保存 · 提醒 · 回访</figcaption>
          </figure>
        </div>
      </section>

      <section class="svc-sheet" id="upgrade" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">05</span>
          <h2 class="svc-sheet__title">升级版入口收在哪里，变了什么</h2>
        </div>
        <p class="svc-sheet__intro">升级版入口位于首页第二栏，是现在的主路径。2024 年发布后，从进入页面到完成一次预约，动作由 5 步缩短到 2 步；2025 年又把移动端底部快捷条改了一版，核心操作一步触达。</p>

        <div class="svc-split svc-split--media">
          <div class="svc-body">
            <ul class="svc-list">
              <li><strong>大字号比分牌</strong>：时间与比分放大显示，站着扫一眼也看得清。</li>
              <li><strong>关注列表固定位</strong>：常看的场次留在固定位置，不必每次重新查找。</li>
              <li><strong>周末场次快捷预约</strong>：从第二栏直接进入本周末的名额选择。</li>
            </ul>
          </div>

          <figure class="svc-figure svc-figure--std">
            <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="五步路径收束为两步的抽象箭头与光轨示意图" loading="lazy" decoding="async">
            <figcaption>从 5 步到 2 步</figcaption>
          </figure>
        </div>

        <div class="svc-table-wrap">
          <table class="svc-compare">
            <caption>标准版与升级版入口对照</caption>
            <thead>
              <tr>
                <th scope="col">对比项</th>
                <th scope="col">标准版</th>
                <th scope="col">升级版</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">入口位置</th>
                <td>页面顶部动作栏</td>
                <td>首页第二栏</td>
              </tr>
              <tr>
                <th scope="row">到达预约</th>
                <td>5 步</td>
                <td>2 步</td>
              </tr>
              <tr>
                <th scope="row">比分牌字号</th>
                <td>常规字号</td>
                <td>支持大字号</td>
              </tr>
              <tr>
                <th scope="row">关注列表</th>
                <td>从二级页面进入</td>
                <td>固定位常驻</td>
              </tr>
              <tr>
                <th scope="row">周末场次</th>
                <td>逐场查找</td>
                <td>快捷预约</td>
              </tr>
              <tr>
                <th scope="row">移动端操作</th>
                <td>顶栏菜单展开</td>
                <td>底部快捷条直达</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="svc-sheet svc-sheet--inset" id="scenes" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">06</span>
          <h2 class="svc-sheet__title">你是哪一种看台节奏</h2>
        </div>
        <p class="svc-sheet__intro">同样一套服务，不同人的用法差别很大。对一下自己的习惯，照着建议路径走一遍，第二次就顺了。</p>

        <div class="svc-split svc-split--media">
          <ul class="svc-rhythm">
            <li class="svc-rhythm__item">
              <span class="svc-rhythm__tag">固定访问</span>
              <h3>工作日每天扫一眼</h3>
              <p>早上打开首页看今日更新，晚上确认第二天的开赛时间，形成习惯后几乎不用找。</p>
              <p class="svc-rhythm__path">建议路径：查更新 → 关注列表</p>
            </li>
            <li class="svc-rhythm__item">
              <span class="svc-rhythm__tag">周末观赛</span>
              <h3>周中定场，周末到场</h3>
              <p>周四前把两场约好，周五看一眼提醒，周末带上证件直接进场。</p>
              <p class="svc-rhythm__path">建议路径：周末双场 → 确认 → 回访</p>
            </li>
            <li class="svc-rhythm__item">
              <span class="svc-rhythm__tag">临时查询</span>
              <h3>临时有空才想起来</h3>
              <p>直接看本周开赛，按时间和距离挑一场，看到名额再决定要不要约。</p>
              <p class="svc-rhythm__path">建议路径：本周开赛 → 场次详情</p>
            </li>
            <li class="svc-rhythm__item">
              <span class="svc-rhythm__tag">会员回访</span>
              <h3>回来只为确认那一场</h3>
              <p>从关注列表进去，两步回到已约场次，改时间或看提醒都在同一处。</p>
              <p class="svc-rhythm__path">建议路径：关注列表 → 已约场次</p>
            </li>
          </ul>

          <figure class="svc-figure svc-figure--tall">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="三张会员权益卡错位叠放，带印刷边框与分类标签" loading="lazy" decoding="async">
            <figcaption>看台通行 · 周末双场 · 城市主场</figcaption>
          </figure>
        </div>
      </section>

      <section class="svc-sheet" id="support" data-reveal>
        <div class="svc-sheet__head">
          <span class="svc-sheet__num">07</span>
          <h2 class="svc-sheet__title">信息准不准，靠什么撑住</h2>
        </div>
        <p class="svc-sheet__intro">赛事条目要经三道手续才出现在页面上：来源采集、编辑复核、发布前抽检。内容团队 9 人分成赛程编辑、城市看台笔记和专题策划三个小组，赛事运营团队 8 人负责场馆沟通与场次确认。</p>

        <details class="svc-details" open>
          <summary>更新时效与抽检</summary>
          <div class="svc-details__body">
            <p>更新及时率维持在 98.6%，节假日和大型赛事期间保持更新，值班表提前 3 天公布。场馆临时调整的场次会标在今日更新顶部，并在回访提醒里同步出现。</p>
          </div>
        </details>

        <details class="svc-details">
          <summary>预约问题怎么找客服</summary>
          <div class="svc-details__body">
            <p>客服团队 12 人，工作日 9:00–18:00 提供邮件与电话支持，平均首次回复 3.5 小时。预约类问题当日响应率 92%，反馈工单平均处理时长 6.8 小时。</p>
            <p>客服邮箱 service@ob-oubao.com.cn，赛事更新与预约问题可优先通过官网「关注列表」入口提交。</p>
          </div>
        </details>

        <details class="svc-details">
          <summary>技术团队在维护什么</summary>
          <div class="svc-details__body">
            <p>技术团队 17 人负责查询、预约、关注列表和入口版本迭代。2020 年上线关注列表，2022 年推出会员权益，2023 年升级为周末双场预约，2024 年发布升级版入口，2025 年完成移动端底部快捷条改版。</p>
          </div>
        </details>

        <details class="svc-details">
          <summary>信息与数据怎么保管</summary>
          <div class="svc-details__body">
            <p>已通过信息安全管理体系认证，用户数据分级存储，关注列表默认仅保存在本地设备。具体处理方式可查看 <a class="svc-inline-link" href="/personal-data/">个人信息说明</a>。</p>
          </div>
        </details>
      </section>

      <div class="svc-cta">
        <div>
          <h2 class="svc-cta__title">下周想看哪一场，现在就能定</h2>
          <p class="svc-cta__text">先翻一眼本周开赛，把周末两场约下来；操作上遇到卡点，问答页里有分步骤说明，也可以直接找我们。</p>
        </div>
        <div class="svc-cta__actions">
          <a class="btn btn--primary" href="#weekend">预约周末两场</a>
          <a class="btn btn--ghost" href="/faqs/">翻看常见问答</a>
          <a class="btn btn--ghost" href="/feedback/">联系看台客服</a>
        </div>
      </div>

    </div>
  </div>

</main>

.page-products {
  --svc-radius: 2px;
  --svc-edge: rgba(158, 179, 199, 0.18);
  background-color: var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.75;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  line-height: 1.22;
}

.page-products p {
  margin: 0;
}

.page-products .svc-inline-link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(140, 200, 255, 0.5);
}

.page-products .svc-inline-link:hover {
  color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .svc-hero {
  position: relative;
  padding: clamp(22px, 4.5vw, 48px) 0 clamp(40px, 7vw, 84px);
  background:
    radial-gradient(ellipse at 84% 6%, rgba(20, 103, 196, 0.62), transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(11, 85, 99, 0.6), transparent 56%),
    var(--night);
}

.page-products .svc-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--lime) 0 20%, var(--blue-stand) 20% 64%, var(--teal) 64% 100%);
}

.page-products .svc-hero .breadcrumb a {
  color: var(--info);
}

.page-products .svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  margin-top: clamp(20px, 4vw, 40px);
}

@media (min-width: 940px) {
  .page-products .svc-hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: end;
  }
}

.page-products .svc-hero h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: var(--white);
  text-wrap: balance;
}

.page-products .svc-hero__lede {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--mist);
}

.page-products .svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .svc-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

.page-products .svc-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.page-products .svc-board__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 2.4vw, 22px);
  background: rgba(11, 46, 89, 0.78);
}

.page-products .svc-board__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  line-height: 1;
  color: var(--lime);
}

.page-products .svc-board__label {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

/* ---------- 主体骨架 ---------- */
.page-products .svc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  padding-top: clamp(32px, 6vw, 64px);
  padding-bottom: clamp(40px, 7vw, 90px);
}

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

  .page-products .svc-rail {
    position: sticky;
    top: 88px;
    align-self: start;
  }
}

.page-products .svc-rail__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--mist);
}

.page-products .svc-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
}

@media (min-width: 1000px) {
  .page-products .svc-rail__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 2px;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.page-products .svc-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-left: 2px solid transparent;
  color: var(--mist);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-products .svc-rail__link:hover,
.page-products .svc-rail__link:focus-visible {
  color: var(--white);
  background: rgba(20, 103, 196, 0.22);
  border-left-color: var(--lime);
}

.page-products .svc-rail__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--blue-stand);
}

.page-products .svc-rail__link:hover .svc-rail__num {
  color: var(--lime);
}

.page-products .svc-pages {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  min-width: 0;
}

/* ---------- 服务页 ---------- */
.page-products .svc-sheet {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.2vw, 40px);
  background: linear-gradient(155deg, rgba(11, 46, 89, 0.62) 0%, rgba(6, 19, 31, 0.96) 72%);
  border-left: 3px solid var(--blue-stand);
  border-radius: var(--svc-radius);
  scroll-margin-top: 96px;
}

.page-products .svc-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: linear-gradient(135deg, rgba(201, 255, 61, 0.16), transparent 70%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

@media (min-width: 1000px) {
  .page-products .svc-sheet--offset {
    margin-left: 26px;
  }

  .page-products .svc-sheet--inset {
    margin-right: 26px;
  }
}

.page-products .svc-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.page-products .svc-sheet__num {
  padding: 2px 8px;
  border: 1px solid rgba(201, 255, 61, 0.42);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--lime);
}

.page-products .svc-sheet__title {
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  color: var(--white);
}

.page-products .svc-sheet__intro {
  max-width: 60ch;
  margin-bottom: 20px;
  font-size: 15.5px;
  color: var(--mist);
}

.page-products .svc-body {
  font-size: 15.5px;
  color: var(--mist);
}

.page-products .svc-body p + p {
  margin-top: 14px;
}

.page-products .svc-body strong {
  color: var(--white);
  font-weight: 600;
}

.page-products .svc-sheet .svc-body {
  margin-top: 16px;
}

/* ---------- 筛选 ---------- */
.page-products .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.page-products .filter-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--svc-radius);
  background: transparent;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-products .filter-btn:hover {
  color: var(--white);
  border-color: var(--blue-stand);
}

.page-products .filter-btn[aria-pressed="true"] {
  color: var(--night);
  background: var(--lime);
  border-color: var(--lime);
}

/* ---------- 服务卡 ---------- */
.page-products .svc-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

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

.page-products .svc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: rgba(243, 239, 228, 0.05);
  border-left: 2px solid var(--blue-stand);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .svc-card:hover {
  background: rgba(20, 103, 196, 0.18);
  border-left-color: var(--lime);
}

.page-products .svc-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--white);
}

.page-products .svc-card p {
  flex: 1;
  font-size: 14.5px;
  color: var(--mist);
}

.page-products .svc-card .tag {
  align-self: flex-start;
}

.page-products .svc-card .link-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--lime);
}

.page-products [data-filter-item][hidden] {
  display: none;
}

/* ---------- 图文分栏 ---------- */
.page-products .svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

@media (min-width: 860px) {
  .page-products .svc-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-products .svc-split--media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* ---------- 列表 ---------- */
.page-products .svc-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .svc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--lime);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.page-products .svc-list li strong {
  color: var(--white);
  font-weight: 600;
}

/* ---------- 图片 ---------- */
.page-products .svc-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--blue-deep);
}

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

.page-products .svc-figure--std img {
  aspect-ratio: 3 / 2;
}

.page-products .svc-figure--tall img {
  aspect-ratio: 3 / 2;
}

.page-products .svc-figure--wide img {
  aspect-ratio: 16 / 9;
}

.page-products .svc-figure--bleed {
  margin-top: 24px;
}

.page-products .svc-figure figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

/* ---------- 流程步骤 ---------- */
.page-products .svc-steps {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: svcstep;
}

.page-products .svc-steps li {
  counter-increment: svcstep;
  position: relative;
  padding: 14px 16px 14px 56px;
  background: rgba(20, 103, 196, 0.16);
  border-left: 2px solid var(--lime);
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-steps li::before {
  content: counter(svcstep, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--lime);
}

.page-products .svc-steps li strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15.5px;
  color: var(--white);
}

/* ---------- 折叠面板 ---------- */
.page-products .svc-details {
  border-top: 1px solid var(--line);
}

.page-products .svc-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

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

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

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

.page-products .svc-details__body {
  padding: 0 0 16px;
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-details__body p + p {
  margin-top: 12px;
}

/* ---------- 版本对比 ---------- */
.page-products .svc-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  background: rgba(6, 19, 31, 0.55);
}

.page-products .svc-compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-products .svc-compare caption {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

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

.page-products .svc-compare thead th {
  background: rgba(11, 46, 89, 0.7);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .svc-compare thead th:last-child {
  color: var(--lime);
}

.page-products .svc-compare tbody th {
  font-weight: 500;
  white-space: nowrap;
  color: var(--mist);
}

.page-products .svc-compare td {
  color: var(--paper);
}

.page-products .svc-compare td:last-child {
  color: var(--white);
  background: rgba(201, 255, 61, 0.06);
}

/* ---------- 使用节奏 ---------- */
.page-products .svc-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .svc-rhythm__item {
  padding: 18px;
  background: rgba(243, 239, 228, 0.05);
  border-top: 2px solid var(--teal);
}

.page-products .svc-rhythm__item:nth-child(2n) {
  border-top-color: var(--blue-stand);
}

.page-products .svc-rhythm__tag {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--info);
}

.page-products .svc-rhythm__item h3 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}

.page-products .svc-rhythm__item p {
  font-size: 14.5px;
  color: var(--mist);
}

.page-products .svc-rhythm__path {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--lime);
}

/* ---------- 收尾 ---------- */
.page-products .svc-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(28px, 5vw, 48px);
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(120deg, rgba(11, 46, 89, 0.85), rgba(11, 85, 99, 0.5));
}

@media (min-width: 820px) {
  .page-products .svc-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.page-products .svc-cta__title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--white);
}

.page-products .svc-cta__text {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 15px;
  color: var(--mist);
}

.page-products .svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .svc-cta__actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .svc-rail__link,
  .page-products .filter-btn,
  .page-products .svc-card {
    transition: none;
  }
}