.page-products {
  --pd-line: rgba(11, 13, 12, .12);
  --pd-line-soft: rgba(247, 245, 239, .2);
  --pd-card: #ffffff;
}

.page-products .pd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-products .pd-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange);
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
  padding-top: clamp(14px, 2.6vw, 26px);
  padding-bottom: clamp(38px, 6vw, 76px);
}

.page-products .pd-hero::before {
  content: "";
  position: absolute;
  left: 38%;
  right: -14%;
  bottom: -34%;
  height: 72%;
  z-index: -1;
  transform: skewY(-7deg);
  background: linear-gradient(118deg, rgba(62, 142, 90, .38), rgba(255, 107, 53, .16) 72%, rgba(20, 33, 61, 0) 100%);
}

.page-products .pd-hero__inner {
  display: grid;
  gap: clamp(24px, 3.6vw, 44px);
  padding-top: clamp(16px, 3vw, 34px);
}

.page-products .pd-hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-products .pd-hero__lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.78;
  color: rgba(247, 245, 239, .82);
}

.page-products .pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-products .pd-hero__actions .btn--ghost {
  border-color: var(--pd-line-soft);
  color: var(--paper);
}

.page-products .pd-facts {
  display: grid;
  gap: 10px;
  margin: clamp(22px, 3.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  font-size: .94rem;
  color: rgba(247, 245, 239, .74);
}

.page-products .pd-facts li {
  position: relative;
  padding-left: 18px;
  line-height: 1.6;
}

.page-products .pd-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bamboo);
}

.page-products .pd-facts strong {
  display: inline-block;
  min-width: 3.4em;
  margin-right: 6px;
  color: var(--paper);
  font-size: 1.02rem;
}

.page-products .pd-version {
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--pd-line-soft);
  border-radius: var(--radius-l);
  background: rgba(247, 245, 239, .07);
  backdrop-filter: blur(2px);
}

.page-products .pd-version__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, .6);
}

.page-products .pd-version__num {
  margin: 6px 0 4px;
  font-size: clamp(3.4rem, 12vw, 6.2rem);
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--focus);
}

.page-products .pd-version__note {
  margin: 0 0 18px;
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(247, 245, 239, .74);
}

.page-products .pd-version__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pd-line-soft);
  list-style: none;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(247, 245, 239, .86);
}

.page-products .pd-version__list li {
  display: flex;
  gap: 10px;
}

.page-products .pd-version__list .mono {
  flex: none;
  color: var(--bamboo);
  font-size: .82rem;
}

.page-products .pd-hero__shot {
  margin: clamp(26px, 4vw, 44px) 0 0;
  border: 1px solid var(--pd-line-soft);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.page-products .pd-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- Bento 三视图 ---------- */
.page-products .pd-bento {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
}

.page-products .pd-cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-l);
  background: var(--pd-card);
  box-shadow: var(--shadow-1);
}

.page-products .pd-cell--focus {
  background: var(--mist);
  border-color: rgba(62, 142, 90, .34);
}

.page-products .pd-cell--book {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  justify-content: space-between;
}

.page-products .pd-cell--book .pd-cell__text {
  color: rgba(247, 245, 239, .82);
}

.page-products .pd-cell--book .pd-cell__idx {
  color: var(--orange);
}

.page-products .pd-cell--book .pd-cell__title {
  color: var(--paper);
}

.page-products .pd-cell__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-products .pd-cell__idx {
  font-size: .82rem;
  color: var(--bamboo-deep);
}

.page-products .pd-cell__title {
  margin: 0;
  font-size: clamp(1.16rem, 2vw, 1.42rem);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-products .pd-cell__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .pd-thumb {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--sand);
}

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

.page-products .pd-thumb--square img {
  aspect-ratio: 5 / 4;
}

/* ---------- 版本主干与分支 ---------- */
.page-products .pd-tree {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-products .pd-tree__trunk {
  padding: clamp(22px, 3.2vw, 34px);
  border-radius: var(--radius-l);
  background: var(--navy);
  color: var(--paper);
}

.page-products .pd-tree__label {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, .58);
}

.page-products .pd-tree__num {
  margin: 8px 0 6px;
  font-size: clamp(3rem, 10vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--paper);
}

.page-products .pd-tree__caption {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.7;
  color: rgba(247, 245, 239, .8);
}

.page-products .pd-tree__meta {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pd-line-soft);
  list-style: none;
  font-size: .9rem;
  color: rgba(247, 245, 239, .84);
}

.page-products .pd-tree__meta .mono {
  display: inline-block;
  min-width: 4.2em;
  color: var(--bamboo);
  font-size: .82rem;
}

.page-products .pd-tree__branches {
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 22px;
}

.page-products .pd-tree__branches::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--bamboo), var(--orange));
  opacity: .55;
}

.page-products .pd-branch {
  position: relative;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-m);
  background: var(--pd-card);
}

.page-products .pd-branch::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bamboo);
  box-shadow: 0 0 0 3px rgba(62, 142, 90, .18);
}

.page-products .pd-branch__title {
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 900;
  color: var(--ink);
}

.page-products .pd-branch p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.78;
  color: var(--slate);
}

/* ---------- 四步路径 ---------- */
.page-products .pd-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: clamp(20px, 3vw, 30px);
  padding-top: 4px;
}

.page-products .pd-progress__seg {
  height: 5px;
  border-radius: 4px;
  background: var(--bamboo);
}

.page-products .pd-progress__seg:nth-child(2) {
  background: linear-gradient(90deg, var(--bamboo), rgba(62, 142, 90, .55));
}

.page-products .pd-progress__seg:nth-child(3) {
  background: rgba(62, 142, 90, .55);
}

.page-products .pd-progress__seg:nth-child(4) {
  background: var(--orange);
}

.page-products .pd-steps {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 26px;
}

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

.page-products .pd-step::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 4px;
  width: 2px;
  background: rgba(62, 142, 90, .3);
}

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

.page-products .pd-step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--bamboo);
  background: var(--paper);
  color: var(--bamboo-deep);
  font-size: .9rem;
}

.page-products .pd-step:last-child .pd-step__num {
  border-color: var(--orange);
  color: var(--orange);
}

.page-products .pd-step__body {
  padding-top: 4px;
}

.page-products .pd-step__title {
  margin: 0 0 6px;
  font-size: 1.06rem;
  font-weight: 900;
  color: var(--ink);
}

.page-products .pd-step__body p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .pd-path__figure {
  margin: clamp(24px, 3.6vw, 38px) 0 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--sand);
}

.page-products .pd-path__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

.page-products .pd-caption {
  padding: 14px clamp(16px, 3vw, 24px);
  font-size: .86rem;
  line-height: 1.7;
  color: var(--slate);
  background: var(--sand);
}

/* ---------- 场景 ---------- */
.page-products .pd-scene-grid {
  display: grid;
  gap: clamp(14px, 2.2vw, 20px);
}

.page-products .pd-scene {
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-m);
  border: 1px solid rgba(62, 142, 90, .26);
  background: var(--mist);
}

.page-products .pd-scene:nth-child(2n) {
  background: var(--sand);
  border-color: rgba(11, 13, 12, .1);
}

.page-products .pd-scene__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--bamboo-deep);
  font-size: .74rem;
  letter-spacing: .08em;
}

.page-products .pd-scene__title {
  margin: 0 0 8px;
  font-size: 1.04rem;
  font-weight: 900;
  color: var(--ink);
}

.page-products .pd-scene p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.76;
  color: var(--slate);
}

/* ---------- 下载与帮助 ---------- */
.page-products .pd-help {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-products .pd-help__figure {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--sand);
}

.page-products .pd-help__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-products .pd-help__title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
}

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

.page-products .pd-checklist li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: .94rem;
  line-height: 1.72;
  color: var(--slate);
}

.page-products .pd-checklist .mono {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--paper);
  font-size: .78rem;
}

.page-products .pd-help__side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .pd-acc {
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-m);
  background: var(--pd-card);
  overflow: hidden;
}

.page-products .pd-acc[open] {
  border-color: rgba(62, 142, 90, .36);
}

.page-products .pd-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
}

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

.page-products .pd-acc summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--bamboo-deep);
}

.page-products .pd-acc[open] summary::after {
  content: "−";
  color: var(--orange);
}

.page-products .pd-acc__body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--pd-line);
}

.page-products .pd-acc__body p {
  margin: 12px 0 0;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--slate);
}

.page-products .pd-cta {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(26px, 4vw, 44px);
  padding: clamp(24px, 3.6vw, 40px);
  border-radius: var(--radius-l);
  background: var(--navy);
  color: var(--paper);
}

.page-products .pd-cta__title {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-products .pd-cta__text p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.78;
  color: rgba(247, 245, 239, .82);
}

.page-products .pd-cta__note {
  margin-top: 12px !important;
  font-size: .88rem !important;
  color: rgba(247, 245, 239, .66) !important;
}

.page-products .pd-cta__note .mono {
  color: var(--focus);
}

.page-products .pd-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pd-cta__actions .btn--ghost {
  border-color: var(--pd-line-soft);
  color: var(--paper);
}

.page-products .pd-more {
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--slate);
}

.page-products .pd-more a {
  color: var(--bamboo-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-products .pd-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
  }

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

@media (min-width: 900px) {
  .page-products .pd-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: start;
  }

  .page-products .pd-bento {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .page-products .pd-cell--focus {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-products .pd-cell--tag {
    grid-column: 2;
    grid-row: 1;
  }

  .page-products .pd-cell--book {
    grid-column: 2;
    grid-row: 2;
  }

  .page-products .pd-tree {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 34px;
  }

  .page-products .pd-step {
    grid-template-columns: 54px minmax(0, 1fr);
    padding-bottom: 0;
  }

  .page-products .pd-step::before {
    display: none;
  }

  .page-products .pd-step__num {
    width: 54px;
    height: 54px;
    font-size: 1rem;
  }

  .page-products .pd-help {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
  }

  .page-products .pd-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-hero::before {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <div class="breadcrumbs-wrap">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">赛事入口</a></li>
        <li class="breadcrumbs__sep" aria-hidden="true">/</li>
        <li class="breadcrumbs__item"><span class="breadcrumbs__link" aria-current="page">赛事面板</span></li>
      </ol>
    </nav>
  </div>

  <section class="pd-hero" aria-labelledby="pd-hero-title">
    <div class="shell pd-hero__grid">
      <div class="pd-hero__copy">
        <p class="pd-eyebrow">2025赛季 · 第8326批次</p>
        <h1 id="pd-hero-title">轮次看得清，比赛约得上</h1>
        <p class="pd-hero__lead">熊猫体育主站的赛事面板把整季轮次、你关注的标签和预约入口放在同一块工作区里。打开电脑就能对照场次表，看准哪一场，就地提交预约，不用在几个页面之间来回找。</p>
        <div class="pd-hero__actions">
          <a class="btn btn--accent" href="#pd-download">下载面板</a>
          <a class="btn btn--ghost" href="#pd-book">约比赛</a>
        </div>
        <ul class="pd-hero__points">
          <li><span class="mono">1860</span> 场轮次记录按赛期排好</li>
          <li><span class="mono">12</span> 个体育大类同屏切换</li>
          <li><span class="mono">58</span> 个分类标签供你收藏</li>
        </ul>
      </div>

      <div class="pd-version" data-reveal>
        <div class="pd-version__head">
          <span class="pd-version__kicker mono">CURRENT RELEASE</span>
          <span class="pd-version__badge">2025赛季最新版本</span>
        </div>
        <p class="pd-version__num mono">8326</p>
        <p class="pd-version__batch">第8326批次</p>
        <ul class="pd-version__list">
          <li><span class="mono">01</span>轮次视图 · 整季场次按时间纵览</li>
          <li><span class="mono">02</span>标签视图 · 项目地区人群分组筛选</li>
          <li><span class="mono">03</span>预约入口 · 看中场次直接发起</li>
        </ul>
        <p class="pd-version__note">赛季中每两周推送一次小版本，每赛季发布一次大版本。</p>
      </div>
    </div>
  </section>

  <div class="pd-hero__media shell" data-reveal>
    <img class="pd-hero__img" src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="电脑端赛事面板总览界面，左侧轮次时间轴与右侧标签栏、预约按钮排布清晰">
  </div>

  <section class="section pd-views" aria-labelledby="pd-views-title">
    <div class="shell">
      <div class="section__head">
        <p class="section__eyebrow">面板总览</p>
        <h2 class="section__title" id="pd-views-title">一个工作区，三种看法</h2>
        <p class="section__lead">查赛程的人看时间线，长期跟赛事的人靠标签，临时想约一场的人直接点预约。三个视图同一份数据，切过去不用重新找位置。</p>
      </div>

      <div class="pd-bento" data-reveal-group>
        <article class="pd-cell pd-cell--focus" data-reveal>
          <div class="pd-cell__head">
            <span class="pd-cell__idx mono">01</span>
            <h3 class="pd-cell__title">轮次视图</h3>
          </div>
          <p class="pd-cell__text">整季场次按时间轴排开，场次编号、项目、场馆和开赛时间在同一行看得全。等宽编号对齐显示，扫一眼就知道下一场是哪天、在哪儿。</p>
          <figure class="pd-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="轮次表与场次编号的局部界面特写，等宽数字排列整齐" loading="lazy" decoding="async">
          </figure>
        </article>

        <article class="pd-cell" data-reveal>
          <div class="pd-cell__head">
            <span class="pd-cell__idx mono">02</span>
            <h3 class="pd-cell__title">标签视图</h3>
          </div>
          <p class="pd-cell__text">项目、地区、赛期、人群、场馆、难度六组标签分开摆放，点选即筛，收藏留下的关注项下次打开还在。</p>
          <figure class="pd-figure pd-figure--tight">
            <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="分类标签分组与收藏星标的界面示意，竹青绿与信号橙标记节点" loading="lazy" decoding="async">
          </figure>
        </article>

        <article class="pd-cell pd-cell--book" data-reveal>
          <div class="pd-cell__head">
            <span class="pd-cell__idx mono">03</span>
            <h3 class="pd-cell__title">预约入口</h3>
          </div>
          <p class="pd-cell__text">看中的场次不用另开页面，填联系人、确认场次、拿到回复都在这里完成。变更时提供场次编号即可核对。</p>
          <a class="btn btn--accent btn--sm" href="#pd-book">看预约步骤</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section pd-tree" id="pd-release" aria-labelledby="pd-release-title">
    <div class="shell">
      <div class="section__head">
        <p class="section__eyebrow">版本与分叉</p>
        <h2 class="section__title" id="pd-release-title">第8326批次往前，长出三条路</h2>
        <p class="section__lead">同一个版本主干，分出下载、标签、预约三条使用路径。你按自己最常用的那条走，另外两条随时接上。</p>
      </div>

      <div class="pd-tree__layout">
        <aside class="pd-trunk" data-reveal>
          <span class="pd-trunk__label mono">RELEASE TRUNK</span>
          <p class="pd-trunk__num mono">8326</p>
          <p class="pd-trunk__caption">第8326批次 · 2025赛季最新版本</p>
          <ul class="pd-trunk__meta">
            <li><span class="mono">节奏</span> 赛季中每两周小版本</li>
            <li><span class="mono">大版本</span> 每赛季发布一次</li>
            <li><span class="mono">模式</span> 浅色与深色两种显示</li>
          </ul>
        </article>
        </aside>

        <div class="pd-branches">
          <article class="pd-branch" data-reveal>
            <h3 class="pd-branch__title">下载这条线</h3>
            <p>第8326批次优化了轮次筛选速度与标签分组，下载后开局就是最新视图。赛季内每两周一次小版本，跟着更新就不会看到过期的场次。</p>
            <a class="pd-branch__link" href="#pd-download">查看下载与安装说明</a>
          </article>
          <article class="pd-branch" data-reveal>
            <h3 class="pd-branch__title">标签这条线</h3>
            <p>六组共58个标签，覆盖项目到人群的各个维度。收藏上限20个，够你盯住几支队伍又不会把视野塞满；记录存在本地，换台设备重新收藏一次即可。</p>
            <a class="pd-branch__link" href="/knowledge/">了解标签怎么组合</a>
          </article>
          <article class="pd-branch" data-reveal>
            <h3 class="pd-branch__title">预约这条线</h3>
            <p>从轮次视图选场次，到拿到确认平均在四个工作小时内完成。想改期，把场次编号写进邮件就行，客服按编号定位原预约。</p>
            <a class="pd-branch__link" href="#pd-book">走一遍四步预约</a>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section pd-steps-section" id="pd-book" aria-labelledby="pd-steps-title">
    <div class="shell">
      <div class="section__head">
        <p class="section__eyebrow">四步路径</p>
        <h2 class="section__title" id="pd-steps-title">从看中一场到确认到场</h2>
        <p class="section__lead">约熊猫体育比赛不绕弯：选赛事、确认场次、填联系人、拿确认，四步走完就等开赛。</p>
      </div>

      <div class="pd-steps-layout">
        <ol class="pd-steps" data-reveal-group>
          <li class="pd-step" data-reveal>
            <span class="pd-step__num mono">01</span>
            <div class="pd-step__body">
              <h3 class="pd-step__title">选择赛事</h3>
              <p>在轮次视图里按项目或时间找到目标场次，也可以先用标签把范围缩到某个地区、某个赛期。</p>
            </div>
          </li>
          <li class="pd-step" data-reveal>
            <span class="pd-step__num mono">02</span>
            <div class="pd-step__body">
              <h3 class="pd-step__title">确认场次</h3>
              <p>核对场次编号、场馆与开赛时间。编号建议先记下来，后面查询和改期都用得上。</p>
            </div>
          </li>
          <li class="pd-step" data-reveal>
            <span class="pd-step__num mono">03</span>
            <div class="pd-step__body">
              <h3 class="pd-step__title">填写联系人</h3>
              <p>留下可联系的手机与邮箱，同行人数或特殊需求一并写上，客服回复时能一次说清。</p>
            </div>
          </li>
          <li class="pd-step" data-reveal>
            <span class="pd-step__num mono">04</span>
            <div class="pd-step__body">
              <h3 class="pd-step__title">获取确认</h3>
              <p>工作时间内提交，平均四个工作小时收到回复。确认后按提示到场，行程有变提前告知即可调整。</p>
            </div>
          </li>
        </ol>

        <figure class="pd-steps__figure" data-reveal>
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="四步预约流程信息图，用编号和箭头连接选择赛事、确认场次、填写联系人与获取确认" loading="lazy" decoding="async">
          <figcaption class="pd-figure__caption">预约过程中产生的场次编号，是后续查询与改期的唯一依据。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section pd-scenes" aria-labelledby="pd-scenes-title">
    <div class="shell">
      <div class="section__head">
        <p class="section__eyebrow">适用场景</p>
        <h2 class="section__title" id="pd-scenes-title">谁在用这块面板</h2>
      </div>
      <div class="pd-scene-grid" data-reveal-group>
        <article class="pd-scene" data-reveal>
          <span class="pd-scene__tag mono">临时查</span>
          <h3 class="pd-scene__title">周末想找场比赛看</h3>
          <p>打开首屏轮次视图，按赛期扫一遍，几分钟就能定下行程。看完不必记住整张表，收藏标签下次接着看。</p>
        </article>
        <article class="pd-scene" data-reveal>
          <span class="pd-scene__tag mono">长期跟</span>
          <h3 class="pd-scene__title">盯着一支队伍一整个赛季</h3>
          <p>把队伍相关的项目与场馆标签收藏起来，20个关注位足够覆盖主客场。新轮次出来后自动落在你能看到的位置。</p>
        </article>
        <article class="pd-scene" data-reveal>
          <span class="pd-scene__tag mono">带孩子</span>
          <h3 class="pd-scene__title">给家里小选手找青少年赛事</h3>
          <p>用人群标签筛出青少年赛事，场馆位置与开赛时间写在同一条里，安排周末出行不用再逐条打听。</p>
        </article>
        <article class="pd-scene" data-reveal>
          <span class="pd-scene__tag mono">办赛事</span>
          <h3 class="pd-scene__title">场馆与俱乐部发布轮次</h3>
          <p>已与42家场馆、俱乐部和赛事组织建立内容合作，轮次发布后同步进入面板，观众看到的与发布方一致。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section pd-help" id="pd-download" aria-labelledby="pd-help-title">
    <div class="shell">
      <div class="section__head">
        <p class="section__eyebrow">下载与帮助</p>
        <h2 class="section__title" id="pd-help-title">拿一份面板，顺手把问题问清</h2>
        <p class="section__lead">想下载最新版本体育赛事面板，先看清单再动手；装好之后遇到情况，下面的条目大多能直接对上。</p>
      </div>

      <div class="pd-help__layout">
        <div class="pd-help__main" data-reveal>
          <figure class="pd-help__figure">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="笔记本电脑与移动设备并排展示赛事面板界面，光线干净，画面不含品牌标识" loading="lazy" decoding="async">
          </figure>
          <h3 class="pd-help__subtitle">下载前检查四项</h3>
          <ul class="pd-check">
            <li><span class="mono">A</span> 用常用浏览器打开面板页面，兼容性影响更小</li>
            <li><span class="mono">B</span> 确认显示模式，浅色或深色可随环境切换</li>
            <li><span class="mono">C</span> 核对版本号是否为第8326批次</li>
            <li><span class="mono">D</span> 赛季中每两周会有小版本，保持更新避免看到旧轮次</li>
          </ul>
        </div>

        <div class="pd-help__side" data-reveal>
          <details class="pd-acc" open>
            <summary>第8326批次更新了哪些内容</summary>
            <div class="pd-acc__body">
              <p>轮次筛选提速，切换项目或赛期时列表响应更快；标签分组重新整理，六组标签的归类更清楚；预约入口前置，看中场次后少点一次。</p>
            </div>
          </details>
          <details class="pd-acc">
            <summary>下载后打开显示不全怎么办</summary>
            <div class="pd-acc__body">
              <p>先换一个常用浏览器重试，多数情况与浏览器版本有关。仍然异常时，把设备型号和浏览器名称发到客服邮箱，工作时间内会有同事跟进。</p>
            </div>
          </details>
          <details class="pd-acc">
            <summary>收藏的标签换设备还在吗</summary>
            <div class="pd-acc__body">
              <p>标签收藏保存在当前浏览器的本地存储里，换设备或清理浏览器数据后需要重新收藏。长期关注的组合建议固定在一台常用设备上维护。</p>
            </div>
          </details>
          <details class="pd-acc">
            <summary>预约后想改场次怎么处理</summary>
            <div class="pd-acc__body">
              <p>邮件说明原场次编号和想改到的场次即可，客服按编号定位原预约后回复。场次编号在轮次视图每一场比赛旁都能看到。</p>
            </div>
          </details>
          <details class="pd-acc">
            <summary>轮次表多久会刷新一次</summary>
            <div class="pd-acc__body">
              <p>按赛季阶段维护，每周至少更新三次，重大赛期每日复核。遇到临时调整，轮次视图先更新，随后并入下一个小版本。</p>
            </div>
          </details>
        </div>
      </div>

      <div class="pd-cta" data-reveal>
        <div class="pd-cta__copy">
          <h3 class="pd-cta__title">还没想好约哪一场？</h3>
          <p>先把第8326批次面板拿到手，边看轮次边收藏标签；定下来之后，同一块面板里就能提交预约。</p>
          <p class="pd-cta__contact">客服邮箱 <span class="mono">service@h5-e-xiongmao.com.cn</span>，工作日 9:00–21:00 回复；紧急问题请在邮件主题标注「加急」。</p>
        </div>
        <div class="pd-cta__actions">
          <a class="btn btn--accent" href="/">回到赛事入口</a>
          <a class="btn btn--ghost" href="/find-us/">联系客服</a>
        </div>
      </div>

      <p class="pd-more" data-reveal>想弄清标签怎么组合最省事，可以看<a href="/knowledge/">知识中心的用法说明</a>；想知道面板这些年怎么迭代过来，可以读<a href="/story/">品牌故事</a>；版本说明与预约指南的更新，都在<a href="/news/">赛场动态</a>里。</p>
    </div>
  </section>
</main>

.page-products {
  --pd-line: rgba(11, 13, 12, .12);
  --pd-line-soft: rgba(247, 245, 239, .2);
  --pd-card: #ffffff;
}

.page-products .breadcrumbs-wrap {
  padding: 14px 0 0;
  background: var(--paper);
}

.page-products .pd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-products .pd-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange);
}

/* 首屏 */
.page-products .pd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
  padding: clamp(28px, 4.4vw, 56px) 0 clamp(34px, 5vw, 60px);
}

.page-products .pd-hero::before {
  content: "";
  position: absolute;
  left: 42%;
  right: -16%;
  bottom: -38%;
  height: 76%;
  z-index: -1;
  transform: skewY(-7deg);
  background: linear-gradient(118deg, rgba(62, 142, 90, .38), rgba(255, 107, 53, .16) 72%, rgba(20, 33, 61, 0) 100%);
}

.page-products .pd-hero__grid {
  display: grid;
  gap: clamp(24px, 3.6vw, 44px);
}

.page-products .pd-hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-products .pd-hero__lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.78;
  color: rgba(247, 245, 239, .82);
}

.page-products .pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-products .pd-hero__actions .btn--ghost {
  border-color: var(--pd-line-soft);
  color: var(--paper);
}

.page-products .pd-hero__points {
  display: grid;
  gap: 10px;
  margin: clamp(22px, 3.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  font-size: .94rem;
  line-height: 1.6;
  color: rgba(247, 245, 239, .76);
}

.page-products .pd-hero__points li {
  position: relative;
  padding-left: 18px;
}

.page-products .pd-hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bamboo);
}

.page-products .pd-hero__points .mono {
  display: inline-block;
  min-width: 3.2em;
  margin-right: 6px;
  color: var(--paper);
  font-size: 1.02rem;
}

/* 版本大数字面板 */
.page-products .pd-version {
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--pd-line-soft);
  border-radius: var(--radius-l);
  background: rgba(247, 245, 239, .07);
}

.page-products .pd-version__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-products .pd-version__kicker {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, .6);
}

.page-products .pd-version__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(62, 142, 90, .3);
  color: var(--mist);
  font-size: .74rem;
  letter-spacing: .06em;
}

.page-products .pd-version__num {
  margin: 10px 0 0;
  font-size: clamp(3.4rem, 12vw, 6.2rem);
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--focus);
}

.page-products .pd-version__batch {
  margin: 6px 0 18px;
  font-size: .92rem;
  color: rgba(247, 245, 239, .74);
}

.page-products .pd-version__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pd-line-soft);
  list-style: none;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(247, 245, 239, .86);
}

.page-products .pd-version__list li {
  display: flex;
  gap: 10px;
}

.page-products .pd-version__list .mono {
  flex: none;
  color: var(--bamboo);
  font-size: .82rem;
}

.page-products .pd-version__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--pd-line-soft);
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(247, 245, 239, .6);
}

.page-products .pd-hero__media {
  margin-top: clamp(24px, 3.6vw, 40px);
}

.page-products .pd-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: 1px solid var(--pd-line-soft);
}

/* Bento 三视图 */
.page-products .pd-bento {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
}

.page-products .pd-cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-l);
  background: var(--pd-card);
  box-shadow: var(--shadow-1);
}

.page-products .pd-cell--focus {
  background: var(--mist);
  border-color: rgba(62, 142, 90, .32);
}

.page-products .pd-cell--book {
  justify-content: space-between;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.page-products .pd-cell--book .pd-cell__idx {
  color: var(--orange);
}

.page-products .pd-cell--book .pd-cell__title {
  color: var(--paper);
}

.page-products .pd-cell--book .pd-cell__text {
  color: rgba(247, 245, 239, .82);
}

.page-products .pd-cell__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-products .pd-cell__idx {
  font-size: .82rem;
  color: var(--bamboo-deep);
}

.page-products .pd-cell__title {
  margin: 0;
  font-size: clamp(1.16rem, 2vw, 1.42rem);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-products .pd-cell__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .pd-figure {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--sand);
}

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

.page-products .pd-figure--tight img {
  aspect-ratio: 5 / 4;
}

.page-products .pd-figure__caption {
  padding: 12px 16px;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--slate);
  background: var(--sand);
}

/* 版本主干 + 分支 */
.page-products .pd-tree__layout {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-products .pd-trunk {
  padding: clamp(22px, 3.2vw, 34px);
  border-radius: var(--radius-l);
  background: var(--navy);
  color: var(--paper);
}

.page-products .pd-trunk__label {
  display: block;
  font-size: .74rem;
  letter-spacing: .18em;
  color: rgba(247, 245, 239, .58);
}

.page-products .pd-trunk__num {
  margin: 8px 0 4px;
  font-size: clamp(3rem, 10vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--paper);
}

.page-products .pd-trunk__caption {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.7;
  color: rgba(247, 245, 239, .8);
}

.page-products .pd-trunk__meta {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pd-line-soft);
  list-style: none;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(247, 245, 239, .84);
}

.page-products .pd-trunk__meta .mono {
  display: inline-block;
  min-width: 4em;
  color: var(--bamboo);
  font-size: .82rem;
}

.page-products .pd-branches {
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 22px;
}

.page-products .pd-branches::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--bamboo), var(--orange));
  opacity: .55;
}

.page-products .pd-branch {
  position: relative;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-m);
  background: var(--pd-card);
}

.page-products .pd-branch::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bamboo);
  box-shadow: 0 0 0 3px rgba(62, 142, 90, .18);
}

.page-products .pd-branch__title {
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 900;
  color: var(--ink);
}

.page-products .pd-branch p {
  margin: 0 0 10px;
  font-size: .94rem;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .pd-branch__link {
  font-size: .88rem;
  font-weight: 700;
  color: var(--bamboo-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 四步路径 */
.page-products .pd-steps-layout {
  display: grid;
  gap: clamp(22px, 3.4vw, 36px);
}

.page-products .pd-steps {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 26px;
}

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

.page-products .pd-step::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 48px;
  bottom: 4px;
  width: 2px;
  background: rgba(62, 142, 90, .3);
}

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

.page-products .pd-step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--bamboo);
  background: var(--paper);
  color: var(--bamboo-deep);
  font-size: .9rem;
}

.page-products .pd-step:last-child .pd-step__num {
  border-color: var(--orange);
  color: var(--orange);
}

.page-products .pd-step__body {
  padding-top: 4px;
}

.page-products .pd-step__title {
  margin: 0 0 6px;
  font-size: 1.06rem;
  font-weight: 900;
  color: var(--ink);
}

.page-products .pd-step__body p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .pd-steps__figure {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--sand);
  align-self: start;
}

.page-products .pd-steps__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

/* 场景 */
.page-products .pd-scene-grid {
  display: grid;
  gap: clamp(14px, 2.2vw, 20px);
}

.page-products .pd-scene {
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-m);
  border: 1px solid rgba(62, 142, 90, .26);
  background: var(--mist);
}

.page-products .pd-scene:nth-child(2n) {
  background: var(--sand);
  border-color: rgba(11, 13, 12, .1);
}

.page-products .pd-scene__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--bamboo-deep);
  font-size: .74rem;
  letter-spacing: .08em;
}

.page-products .pd-scene__title {
  margin: 0 0 8px;
  font-size: 1.04rem;
  font-weight: 900;
  color: var(--ink);
}

.page-products .pd-scene p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.76;
  color: var(--slate);
}

/* 下载与帮助 */
.page-products .pd-help__layout {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-products .pd-help__figure {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--sand);
}

.page-products .pd-help__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-products .pd-help__subtitle {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
}

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

.page-products .pd-check li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: .94rem;
  line-height: 1.72;
  color: var(--slate);
}

.page-products .pd-check .mono {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--paper);
  font-size: .78rem;
}

.page-products .pd-help__side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .pd-acc {
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-m);
  background: var(--pd-card);
  overflow: hidden;
}

.page-products .pd-acc[open] {
  border-color: rgba(62, 142, 90, .36);
}

.page-products .pd-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
}

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

.page-products .pd-acc summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--bamboo-deep);
}

.page-products .pd-acc[open] summary::after {
  content: "−";
  color: var(--orange);
}

.page-products .pd-acc__body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--pd-line);
}

.page-products .pd-acc__body p {
  margin: 12px 0 0;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--slate);
}

/* 收尾 CTA */
.page-products .pd-cta {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(26px, 4vw, 44px);
  padding: clamp(24px, 3.6vw, 40px);
  border-radius: var(--radius-l);
  background: var(--navy);
  color: var(--paper);
}

.page-products .pd-cta__title {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-products .pd-cta__copy p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.78;
  color: rgba(247, 245, 239, .82);
}

.page-products .pd-cta__contact {
  margin-top: 12px;
  font-size: .88rem;
  color: rgba(247, 245, 239, .68) !important;
}

.page-products .pd-cta__contact .mono {
  color: var(--focus);
}

.page-products .pd-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pd-cta__actions .btn--ghost {
  border-color: var(--pd-line-soft);
  color: var(--paper);
}

.page-products .pd-more {
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--slate);
}

.page-products .pd-more a {
  color: var(--bamboo-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 断点 */
@media (min-width: 640px) {
  .page-products .pd-hero__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
  }

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

@media (min-width: 900px) {
  .page-products .pd-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: start;
  }

  .page-products .pd-bento {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .page-products .pd-cell--focus {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-products .pd-cell:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .page-products .pd-cell--book {
    grid-column: 2;
    grid-row: 2;
  }

  .page-products .pd-tree__layout {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
  }

  .page-products .pd-steps-layout {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
  }

  .page-products .pd-help__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
  }

  .page-products .pd-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-hero::before {
    transform: none;
  }
}