.page-products {
  --p-card-bg: rgba(13, 53, 82, 0.72);
  --p-soft: rgba(247, 232, 214, 0.72);
  --p-faint: rgba(247, 232, 214, 0.52);
}

.page-products .p-sec {
  padding: clamp(2.8rem, 7vw, 5.4rem) 0;
}

.page-products .p-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(3rem, 7vw, 5rem);
}

.page-products .p-hero::after {
  content: "";
  position: absolute;
  left: 20%;
  right: -18%;
  bottom: -34%;
  height: 58%;
  background: linear-gradient(115deg, rgba(97, 242, 208, 0.10), rgba(201, 71, 44, 0.06) 55%, transparent 78%);
  transform: skewY(-6deg);
  pointer-events: none;
}

.page-products .p-hero .layout-shell {
  position: relative;
  z-index: 1;
}

.page-products .breadcrumbs {
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .breadcrumbs__link,
.page-products .breadcrumbs__current {
  color: var(--p-soft);
}

.page-products .breadcrumbs__link:hover {
  color: var(--cyan);
}

.page-products .p-hero__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}

.page-products .p-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .p-hero__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-head);
  font-size: clamp(1.95rem, 6.2vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--cream);
  overflow-wrap: break-word;
}

.page-products .p-hero__title em {
  font-style: normal;
  color: var(--cyan);
  box-shadow: inset 0 -0.16em 0 rgba(201, 71, 44, 0.55);
}

.page-products .p-hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(0.98rem, 2.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--p-soft);
}

.page-products .p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.page-products .p-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.9rem;
  margin: 1.9rem 0 0;
  padding: 1.15rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line-cream);
}

.page-products .p-metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 5.6rem;
}

.page-products .p-metrics b {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-products .p-metrics span {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--p-faint);
}

.page-products .p-hero__media {
  margin: 0;
}

.page-products .p-hero__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

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

.page-products .p-head {
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 62ch;
}

.page-products .marker-number {
  font-family: var(--font-mono);
  color: var(--red);
  margin-right: 0.6rem;
}

.page-products .band--night .section-head__title,
.page-products .band--navy .section-head__title {
  color: var(--cream);
}

.page-products .band--night .section-head__note,
.page-products .band--navy .section-head__note {
  color: var(--p-soft);
}

.page-products .band--paper .section-head__title {
  color: var(--ink);
}

.page-products .band--paper .section-head__note {
  color: var(--slate);
}

.page-products .p-matrix {
  display: grid;
  gap: 0.9rem;
}

.page-products .p-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  background: var(--p-card-bg);
  color: var(--cream);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.page-products .p-card:hover {
  transform: translateY(-4px);
  border-color: rgba(97, 242, 208, 0.5);
}

.page-products .p-card--paper {
  background: var(--cream);
  border-color: var(--paper-shadow);
  color: var(--ink);
}

.page-products .p-card__index {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--coral);
}

.page-products .p-card--paper .p-card__index {
  color: var(--red);
}

.page-products .p-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.06rem, 3vw, 1.24rem);
  line-height: 1.4;
}

.page-products .p-card__text {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.78;
  color: var(--p-soft);
}

.page-products .p-card--paper .p-card__text {
  color: rgba(36, 26, 21, 0.78);
}

.page-products .p-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding-top: 0.5rem;
}

.page-products .p-collect__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.page-products .p-collect__body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

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

.page-products .p-layer {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 2px solid rgba(201, 71, 44, 0.7);
  border-bottom: 1px solid var(--line-cream);
}

.page-products .p-layer__key {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .p-layer__val {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--p-soft);
}

.page-products .p-filter {
  border-radius: var(--radius-md);
  border: 1px solid var(--line-cream);
  background: rgba(6, 24, 38, 0.55);
  color: var(--cream);
}

.page-products .p-filter__title {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--p-soft);
}

.page-products .p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.page-products .p-chip {
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line-cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--p-soft);
  white-space: nowrap;
}

.page-products .p-chip.is-active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--night);
  font-weight: 600;
}

.page-products .p-filter__hint {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--p-faint);
}

.page-products .p-collect__media {
  margin: 0;
}

.page-products .p-collect__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-products .p-mobile__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}

.page-products .p-mobile__media {
  margin: 0;
}

.page-products .p-mobile__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(36, 26, 21, 0.16);
}

.page-products .p-mobile__body .p-head {
  margin-bottom: 1.4rem;
}

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

.page-products .p-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(221, 248, 240, 0.62);
  border: 1px solid rgba(73, 101, 122, 0.22);
}

.page-products .p-steps__num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--red);
  line-height: 1.4;
}

.page-products .p-steps__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--ink);
}

.page-products .p-steps__item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.78;
  color: rgba(36, 26, 21, 0.76);
}

.page-products .p-mobile__note {
  margin: 1.3rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--coral);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--slate);
}

.page-products .p-bigscreen__media {
  margin: 0 0 clamp(1.4rem, 4vw, 2.2rem);
}

.page-products .p-bigscreen__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-products .p-bigscreen__grid {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .p-bigscreen__lead p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--p-soft);
}

.page-products .p-bigscreen__lead .btn {
  margin-top: 0.4rem;
}

.page-products .p-step {
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  background: rgba(13, 53, 82, 0.6);
  color: var(--cream);
  overflow: hidden;
}

.page-products .p-step + .p-step {
  margin-top: 0.55rem;
}

.page-products .p-step__summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s var(--ease);
}

.page-products .p-step__summary::-webkit-details-marker {
  display: none;
}

.page-products .p-step__summary:hover {
  background: rgba(97, 242, 208, 0.08);
}

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

.page-products .p-step__num {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--cyan);
}

.page-products .p-step__name {
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-size: 0.95rem;
  line-height: 1.5;
}

.page-products .p-step__hint {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--p-faint);
}

.page-products .p-step[open] .p-step__hint {
  color: var(--cyan);
}

.page-products .p-step__body {
  padding: 0 1rem 1rem;
}

.page-products .p-step__body p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.8;
  color: var(--p-soft);
}

.page-products .p-step--paper {
  background: rgba(221, 248, 240, 0.7);
  border-color: rgba(73, 101, 122, 0.24);
  color: var(--ink);
}

.page-products .p-step--paper .p-step__num {
  color: var(--red);
}

.page-products .p-step--paper .p-step__hint {
  color: var(--slate);
}

.page-products .p-step--paper .p-step__summary:hover {
  background: rgba(97, 242, 208, 0.28);
}

.page-products .p-step--paper .p-step__body p {
  color: rgba(36, 26, 21, 0.78);
}

.page-products .p-teams__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.page-products .p-teams__facts {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-products .p-teams__facts li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(232, 213, 192, 0.42);
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(36, 26, 21, 0.82);
}

.page-products .p-teams__facts .mono {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--red);
}

.page-products .p-teams__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.page-products .p-teams__media {
  margin: 0;
}

.page-products .p-teams__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(36, 26, 21, 0.16);
}

.page-products .p-scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.page-products .p-scene {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  background: rgba(6, 24, 38, 0.5);
  color: var(--cream);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.page-products .p-scene:hover {
  transform: translateY(-3px);
  border-color: rgba(97, 242, 208, 0.45);
}

.page-products .p-scene__num {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--coral);
}

.page-products .p-scene__title {
  margin: 0.45rem 0 0.5rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
}

.page-products .p-scene__text {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.78;
  color: var(--p-soft);
}

.page-products .p-scene__path {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .p-outro {
  margin-top: clamp(1.8rem, 5vw, 2.8rem);
  padding: clamp(1.2rem, 3.5vw, 1.9rem);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(97, 242, 208, 0.38);
  background: linear-gradient(120deg, rgba(13, 53, 82, 0.85), rgba(6, 24, 38, 0.7));
}

.page-products .p-outro__text {
  margin: 0 0 1.1rem;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--p-soft);
}

.page-products .p-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

@media (min-width: 640px) {
  .page-products .p-scene-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-products .p-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-products .p-matrix {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .p-card:nth-child(1) {
    grid-column: span 4;
  }

  .page-products .p-card:nth-child(2) {
    grid-column: span 2;
  }

  .page-products .p-card:nth-child(3) {
    grid-column: span 2;
  }

  .page-products .p-card:nth-child(4) {
    grid-column: span 4;
  }

  .page-products .p-collect__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-products .p-mobile__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: center;
  }

  .page-products .p-bigscreen__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-products .p-teams__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

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

@media (min-width: 1180px) {
  .page-products .p-hero__lede {
    max-width: 46ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .p-card,
  .page-products .p-scene,
  .page-products .p-step__summary {
    transition: none;
  }

  .page-products .p-card:hover,
  .page-products .p-scene:hover {
    transform: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>
```

等等，我不能再加额外的标记，必须严格按标记来：
- ``
- ``

而且每个只能出现一次。我刚才在末尾多加了 `<<<PAGE_CSS_END>>>` 和 `<<<END>>>`，这不行，得去掉。

重新检查一下 CSS 里面的注释，HTML 里没有，没问题。

还有一点：media-frame 的宽高比是不是在 site kit 的共享 CSS 里定义的？site kit 里说了有 `.media-frame` 之类的类，应该没问题。

HTML 里的按钮用了 `btn btn--coral`、`btn btn--ghost`、`btn btn--cyan btn--compact`，都在允许的类列表里。

`data-reveal` 也用了，这个是允许的，没问题。

好，现在把多余的标记去掉，只保留 `` 和 `` 这两个标记。同时确认一下 main_html 部分从 `<main id="main-content" class="page-products">` 开始，到 `</main>` 结束。

再检查图片 alt 和尺寸是否合理，链接是否都指向 `/answers/`、`/cooperation/`、`/journal/`、`/values/`。

没有问题。我把多余的标记删掉重发即可。还要注意，HTML 里不能出现 `Markdown` 和解释性文字，我现在这部分没有问题。

另外我得确认一下，`` 和 `` 这两个标记都是单独一行，而且是最外层，不应该再有别的东西夹在中间。

我在修改的时候需要在脑子里把那个多余的 `<<<PAGE_CSS_END>>>` 和 `<<<END>>>` 删掉，让输出以 `` 下面的 CSS 内容自然结束。

但问题是要求说每个标记只能出现一次，而且标记必须是三个尖括号。我现在用的 `` 就是三个尖括号开头和结束，符号是合规的。

只是要注意，里面的内容里如果出现别的三个尖括号会被解析器误认为标记，我应该检查一下 CSS 里有没有意外出现 `<<<` 这样的东西。目前没有。

好的，那就输出最终版本。其实我在上一轮已经基本写好了，只是结尾多了一些东西。现在直接给出去掉多余标记的版本。

另外再检查一下：CSS 作用域都在 `.page-products` 之下吗？是的，每条规则都以 `.page-products` 开头。媒体查询里的选择器也都加了 `.page-products`，没问题。

我用到了 `var(--ease)`、`var(--line-cream)`、`var(--radius-lg)` 这些变量，都是 site kit 里有的，没问题。

还用了 `var(--cyan)`、`var(--coral)`、`var(--cream)`、`var(--ink)`、`var(--navy)`、`var(--night)`、`var(--red)`、`var(--slate)`、`var(--paper-shadow)`、`var(--mist)` 这些也都有。

我还在 `.page-products` 里定义了 `--p-card-bg`、`--p-soft`、`--p-faint`，这些是在页面作用域内、用之前定义的，没问题。

可以了。输出。
<main id="main-content" class="page-products">

  <section class="section-band band--night p-hero">
    <div class="layout-shell">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <ol class="breadcrumbs__list">
          <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">首页</a></li>
          <li class="breadcrumbs__item"><span class="breadcrumbs__current">赛事产品与球队库</span></li>
        </ol>
      </nav>

      <div class="p-hero__grid">
        <div class="p-hero__copy">
          <p class="p-kicker mono">CHINA 中文专区 · 产品版本 V3.1</p>
          <h1 class="p-hero__title">收藏、筛选、订阅，<br>把常看的赛事<em>一次安排妥当</em></h1>
          <p class="p-hero__lede">
            博鱼赛场把散落在不同联赛里的赛程整理成一张可收藏的清单：按轮次挑出这周要看的那几场，按球队锁定整季的关注对象，
            再把关注项推到大屏上。移动端从打开页面到进入常用联赛的收藏卡片，中间只有两步。
          </p>

          <div class="p-hero__actions">
            <a class="btn btn--coral" href="/answers/">查看使用答疑</a>
            <a class="btn btn--ghost" href="/journal/">看版本更新</a>
          </div>

          <ul class="p-metrics">
            <li><b>18</b><span>赛事品类</span></li>
            <li><b>26</b><span>联赛条目</span></li>
            <li><b>12,000+</b><span>赛事条目</span></li>
            <li><b>320</b><span>球队条目</span></li>
          </ul>
        </div>

        <figure class="p-hero__media">
          <div class="media-frame">
            <img class="media-frame__img" src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="赛事收藏清单抽象界面，卡片按联赛、轮次和球队标签分层排列，界面中没有真实赛事标志">
            <figcaption class="media-frame__caption mono">收藏清单 · 标签层级示意</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section-band band--night p-sec p-overview">
    <div class="layout-shell">
      <div class="section-head p-head">
        <p class="section-head__eyebrow mono"><span class="marker-number">01</span> 能力总览</p>
        <h2 class="section-head__title">四项能力，按你的观赛习惯各就各位</h2>
        <p class="section-head__note">深夜守着直播的、周末连着看几场的、全家围着电视的，需要的东西不一样。下面四块能力可以单独用，也可以叠着用。</p>
      </div>

      <div class="p-matrix">
        <article class="p-card" data-reveal>
          <p class="p-card__index mono">A / 清单</p>
          <h3 class="p-card__title">博鱼体育赛事收藏清单</h3>
          <p class="p-card__text">四个层级的标签叠在一张卡片上，联赛、轮次、球队、开赛时段都能直接切。常看的几场固定在前面，翻季之后不用重新找。</p>
          <p class="p-card__meta"><span class="tag tag--cyan">26 个联赛条目</span></p>
        </article>

        <article class="p-card p-card--paper" data-reveal>
          <p class="p-card__index mono">B / 移动</p>
          <h3 class="p-card__title">移动端赛事入口</h3>
          <p class="p-card__text">首页直接摆出常用联赛的收藏卡片，通勤路上点两下就能看到今晚的场次。</p>
          <p class="p-card__meta"><span class="tag tag--ink">两步到达</span></p>
        </article>

        <article class="p-card p-card--paper" data-reveal>
          <p class="p-card__index mono">C / 大屏</p>
          <h3 class="p-card__title">大屏订阅指南</h3>
          <p class="p-card__text">球队关注、赛程提醒、多屏适配、订阅管理四部分写清楚，换设备不用重新摸索。</p>
          <p class="p-card__meta"><span class="tag tag--ink">本季第 3 版</span></p>
        </article>

        <article class="p-card" data-reveal>
          <p class="p-card__index mono">D / 球队库</p>
          <h3 class="p-card__title">测试版赛事球队库</h3>
          <p class="p-card__text">按联赛和轮次查看关注球队的条目，用下来觉得哪里不顺，反馈入口一直开着。</p>
          <p class="p-card__meta"><span class="tag tag--cyan">320 支球队</span><span class="tag tag--coral">反馈常开</span></p>
        </article>
      </div>
    </div>
  </section>

  <section class="section-band band--navy p-sec p-collect">
    <div class="layout-shell">
      <div class="section-head p-head">
        <p class="section-head__eyebrow mono"><span class="marker-number">02</span> 收藏清单</p>
        <h2 class="section-head__title">四级标签，把整季赛程理成一张清单</h2>
        <p class="section-head__note">先按联赛圈定范围，再用轮次往前推，球队和开赛时段负责最后一道取舍。</p>
      </div>

      <div class="p-collect__grid">
        <div class="p-collect__body">
          <ul class="p-layers">
            <li class="p-layer">
              <span class="p-layer__key mono">联赛</span>
              <span class="p-layer__val">26 个联赛条目按品类归组，足球、篮球、网球、排球、电竞都能找到自己的那一格。</span>
            </li>
            <li class="p-layer">
              <span class="p-layer__key mono">轮次</span>
              <span class="p-layer__val">一季多轮，轮次标签直接跳转，不必从第一轮一路翻下来。</span>
            </li>
            <li class="p-layer">
              <span class="p-layer__key mono">球队</span>
              <span class="p-layer__val">长期跟同一支队伍的关注项单独成列，赛季换了也不丢。</span>
            </li>
            <li class="p-layer">
              <span class="p-layer__key mono">开赛时段</span>
              <span class="p-layer__val">午夜场与周末场分开展示，先看赶得上的那几场。</span>
            </li>
          </ul>

          <div class="panel p-filter" data-reveal>
            <div class="panel__head">
              <span class="mono p-filter__title">按轮次快速筛选</span>
              <span class="tag tag--cyan">当前 第 12 轮</span>
            </div>
            <div class="panel__body">
              <div class="p-chips">
                <span class="p-chip is-active">第 12 轮</span>
                <span class="p-chip">第 11 轮</span>
                <span class="p-chip">第 10 轮</span>
                <span class="p-chip">第 9 轮</span>
                <span class="p-chip">全部轮次</span>
              </div>
              <p class="p-filter__hint">选中轮次后，卡片只保留该轮的场次，已收藏的会排在前面。</p>
            </div>
          </div>
        </div>

        <figure class="p-collect__media">
          <div class="media-frame">
            <img class="media-frame__img" src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="放大的轮次筛选标签与运动轨迹线组合图形，当前轮次用荧光青高亮" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption mono">轮次标签 · 选中状态</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section-band band--paper p-sec p-mobile">
    <div class="layout-shell">
      <div class="p-mobile__grid">
        <figure class="p-mobile__media">
          <div class="media-frame media-frame--tall">
            <img class="media-frame__img" src="{zhanqunpic:h:1200w:800}" width="800" height="1200" alt="手持手机查看赛事收藏卡片的抽象特写，画面中没有可识别人物面孔和真实品牌标识" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption mono">移动端 · 收藏卡片</figcaption>
          </div>
        </figure>

        <div class="p-mobile__body">
          <div class="section-head p-head">
            <p class="section-head__eyebrow mono"><span class="marker-number">03</span> 移动端入口</p>
            <h2 class="section-head__title">打开到收藏卡片，中间只隔两步</h2>
            <p class="section-head__note">手机上最怕点进去一层又一层。这里的路径砍到最短，只剩两个动作。</p>
          </div>

          <ol class="p-steps">
            <li class="p-steps__item">
              <span class="p-steps__num mono">01</span>
              <div>
                <h3 class="p-steps__title">在首页点开常用联赛</h3>
                <p>首页首屏就是联赛收藏区，拇指范围内能点到，不用先滑一屏找入口。</p>
              </div>
            </li>
            <li class="p-steps__item">
              <span class="p-steps__num mono">02</span>
              <div>
                <h3 class="p-steps__title">在卡片上切换收藏状态</h3>
                <p>点一下收藏、再点一下取消，卡片原地变化，页面不会跳走，回来还是刚才的位置。</p>
              </div>
            </li>
          </ol>

          <p class="p-mobile__note">移动端访问占比约 68%，界面按这个比例调过信息密度：一屏之内看得到联赛、轮次和开赛时段三行关键信息。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section-band band--night p-sec p-bigscreen">
    <div class="layout-shell">
      <div class="section-head p-head">
        <p class="section-head__eyebrow mono"><span class="marker-number">04</span> 大屏订阅</p>
        <h2 class="section-head__title">把球队关注搬上大屏，从指南第 3 版开始</h2>
        <p class="section-head__note">换了电视、换了盒子，关注列表也得跟着走。这份指南把容易卡住的地方提前说清楚。</p>
      </div>

      <figure class="p-bigscreen__media">
        <div class="media-frame media-frame--wide">
          <img class="media-frame__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="大屏幕上的多球队关注面板与赛程提醒抽象界面，采用深海蓝与荧光青配色" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption mono">多球队关注面板 · 大屏视图</figcaption>
        </div>
      </figure>

      <div class="p-bigscreen__grid">
        <div class="p-bigscreen__lead">
          <p>《大屏看体育赛事订阅球队指南》已经更新到本季第 3 版，四个部分按顺序排好，照着做就能把关注列表放到客厅屏幕上。</p>
          <p>指南里还整理了 12 个常见大屏设备的适配提示，投影、电视盒子、智能电视都能对上号。</p>
          <a class="btn btn--cyan btn--compact" href="/answers/">查看分步说明</a>
        </div>

        <div class="p-bigscreen__steps">
          <details class="p-step">
            <summary class="p-step__summary">
              <span class="p-step__num mono">01</span>
              <span class="p-step__name">球队关注</span>
              <span class="p-step__hint mono">展开</span>
            </summary>
            <div class="p-step__body"><p>先在账号里选定要长期关注的球队，关注项会跟着账号走，换设备时不用重新挑选一遍。</p></div>
          </details>

          <details class="p-step">
            <summary class="p-step__summary">
              <span class="p-step__num mono">02</span>
              <span class="p-step__name">赛程提醒</span>
              <span class="p-step__hint mono">展开</span>
            </summary>
            <div class="p-step__body"><p>按球队或按轮次开启提醒，临近开赛会提前提示，适合把手机放在一边、专心用大屏看的场合。</p></div>
          </details>

          <details class="p-step">
            <summary class="p-step__summary">
              <span class="p-step__num mono">03</span>
              <span class="p-step__name">多屏适配</span>
              <span class="p-step__hint mono">展开</span>
            </summary>
            <div class="p-step__body"><p>不同屏幕的显示比例不一样，指南按设备类型给出排版建议，避免卡片被切掉或字太小。</p></div>
          </details>

          <details class="p-step">
            <summary class="p-step__summary">
              <span class="p-step__num mono">04</span>
              <span class="p-step__name">订阅管理</span>
              <span class="p-step__hint mono">展开</span>
            </summary>
            <div class="p-step__body"><p>赛季中途想加关注、减关注，或者把某一支球队移出提醒，都在订阅管理里统一处理。</p></div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="section-band band--paper p-sec p-teams">
    <div class="layout-shell">
      <div class="section-head p-head">
        <p class="section-head__eyebrow mono"><span class="marker-number">05</span> 球队库</p>
        <h2 class="section-head__title">测试版球队库：320 支球队，随时可提反馈</h2>
        <p class="section-head__note">球队条目按联赛和轮次排布，正在测试阶段，用起来顺手的地方和不顺手的地方都欢迎说。</p>
      </div>

      <div class="p-teams__grid">
        <div class="p-teams__body">
          <ul class="p-teams__facts">
            <li><span class="mono">320</span> 支球队条目已收录，覆盖多个联赛</li>
            <li><span class="mono">2</span> 个维度查看：按所属联赛、按当前轮次</li>
            <li><span class="mono">4</span> 类反馈分类：功能建议、资料纠错、使用问题、合作咨询</li>
            <li><span class="mono">4</span> 小时以内，工作日提交的反馈平均获得回应</li>
          </ul>

          <details class="p-step p-step--paper">
            <summary class="p-step__summary">
              <span class="p-step__num mono">+</span>
              <span class="p-step__name">怎么从球队库找到一支球队</span>
              <span class="p-step__hint mono">展开</span>
            </summary>
            <div class="p-step__body"><p>先选联赛缩小范围，再用轮次看这支球队当前排到第几场，最后在卡片上打开关注开关。</p></div>
          </details>

          <details class="p-step p-step--paper">
            <summary class="p-step__summary">
              <span class="p-step__num mono">+</span>
              <span class="p-step__name">反馈提交之后会经历什么</span>
              <span class="p-step__hint mono">展开</span>
            </summary>
            <div class="p-step__body"><p>提交后按四类分流，资料纠错和功能建议会分别记录并跟进；需要回信的，用你填写的联系方式回复。</p></div>
          </details>

          <div class="p-teams__cta">
            <a class="btn btn--coral" href="/cooperation/">提交球队库反馈</a>
            <a class="btn btn--ghost" href="/values/">了解我们的整理方式</a>
          </div>
        </div>

        <figure class="p-teams__media">
          <div class="media-frame">
            <img class="media-frame__img" src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="球队库反馈面板与四类分类标签的抽象界面图，页面中没有真实用户信息" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption mono">球队库 · 反馈分类面板</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section-band band--navy p-sec p-scenes">
    <div class="layout-shell">
      <div class="section-head p-head">
        <p class="section-head__eyebrow mono"><span class="marker-number">06</span> 适用场景</p>
        <h2 class="section-head__title">四种常见用法，照着走就行</h2>
        <p class="section-head__note">先找到自己最像的那一类，再按建议的那几步开始，剩下的边走边调。</p>
      </div>

      <ul class="p-scene-list">
        <li class="p-scene">
          <span class="p-scene__num mono">01</span>
          <h3 class="p-scene__title">夜间观赛</h3>
          <p class="p-scene__text">下班晚、场次散。用开赛时段标签把午夜场单独拎出来，只收藏确定看得到的几场。</p>
          <p class="p-scene__path mono">从收藏清单开始</p>
        </li>
        <li class="p-scene">
          <span class="p-scene__num mono">02</span>
          <h3 class="p-scene__title">周末追赛</h3>
          <p class="p-scene__text">连着两天好几场要排顺序。按轮次筛选，把同一轮的场次并排看，时间不撞车。</p>
          <p class="p-scene__path mono">从轮次筛选开始</p>
        </li>
        <li class="p-scene">
          <span class="p-scene__num mono">03</span>
          <h3 class="p-scene__title">家庭大屏</h3>
          <p class="p-scene__text">客厅电视要照顾几个人。先把各自关注的球队加进列表，再按指南调一次排版。</p>
          <p class="p-scene__path mono">从订阅指南开始</p>
        </li>
        <li class="p-scene">
          <span class="p-scene__num mono">04</span>
          <h3 class="p-scene__title">资料整理</h3>
          <p class="p-scene__text">要把赛程和球队信息落成文档。用球队库按联赛、按轮次两个维度排出条目的阅读顺序。</p>
          <p class="p-scene__path mono">从球队库开始</p>
        </li>
      </ul>

      <div class="p-outro">
        <p class="p-outro__text">赛季开赛前一周，当季的收藏清单与订阅指南版本说明会一起发布；平时每周三更新轮次数据与指南条目，赛季高峰期加到每周两次。</p>
        <div class="p-outro__actions">
          <a class="btn btn--coral" href="/answers/">进入答疑中心</a>
          <a class="btn btn--ghost" href="/journal/">看赛季专题</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  --p-card-bg: rgba(13, 53, 82, 0.72);
  --p-soft: rgba(247, 232, 214, 0.72);
  --p-faint: rgba(247, 232, 214, 0.52);
}

.page-products .p-sec {
  padding: clamp(2.8rem, 7vw, 5.4rem) 0;
}

.page-products .p-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(3rem, 7vw, 5rem);
}

.page-products .p-hero::after {
  content: "";
  position: absolute;
  left: 20%;
  right: -18%;
  bottom: -34%;
  height: 58%;
  background: linear-gradient(115deg, rgba(97, 242, 208, 0.10), rgba(201, 71, 44, 0.06) 55%, transparent 78%);
  transform: skewY(-6deg);
  pointer-events: none;
}

.page-products .p-hero .layout-shell {
  position: relative;
  z-index: 1;
}

.page-products .breadcrumbs {
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .breadcrumbs__link,
.page-products .breadcrumbs__current {
  color: var(--p-soft);
}

.page-products .breadcrumbs__link:hover {
  color: var(--cyan);
}

.page-products .p-hero__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}

.page-products .p-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .p-hero__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-head);
  font-size: clamp(1.95rem, 6.2vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--cream);
  overflow-wrap: break-word;
}

.page-products .p-hero__title em {
  font-style: normal;
  color: var(--cyan);
  box-shadow: inset 0 -0.16em 0 rgba(201, 71, 44, 0.55);
}

.page-products .p-hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(0.98rem, 2.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--p-soft);
}

.page-products .p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.page-products .p-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.9rem;
  margin: 1.9rem 0 0;
  padding: 1.15rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line-cream);
}

.page-products .p-metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 5.6rem;
}

.page-products .p-metrics b {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-products .p-metrics span {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--p-faint);
}

.page-products .p-hero__media {
  margin: 0;
}

.page-products .p-hero__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

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

.page-products .p-head {
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 62ch;
}

.page-products .marker-number {
  font-family: var(--font-mono);
  color: var(--red);
  margin-right: 0.6rem;
}

.page-products .band--night .section-head__title,
.page-products .band--navy .section-head__title {
  color: var(--cream);
}

.page-products .band--night .section-head__note,
.page-products .band--navy .section-head__note {
  color: var(--p-soft);
}

.page-products .band--paper .section-head__title {
  color: var(--ink);
}

.page-products .band--paper .section-head__note {
  color: var(--slate);
}

.page-products .p-matrix {
  display: grid;
  gap: 0.9rem;
}

.page-products .p-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  background: var(--p-card-bg);
  color: var(--cream);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.page-products .p-card:hover {
  transform: translateY(-4px);
  border-color: rgba(97, 242, 208, 0.5);
}

.page-products .p-card--paper {
  background: var(--cream);
  border-color: var(--paper-shadow);
  color: var(--ink);
}

.page-products .p-card__index {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--coral);
}

.page-products .p-card--paper .p-card__index {
  color: var(--red);
}

.page-products .p-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.06rem, 3vw, 1.24rem);
  line-height: 1.4;
}

.page-products .p-card__text {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.78;
  color: var(--p-soft);
}

.page-products .p-card--paper .p-card__text {
  color: rgba(36, 26, 21, 0.78);
}

.page-products .p-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding-top: 0.5rem;
}

.page-products .p-collect__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.page-products .p-collect__body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

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

.page-products .p-layer {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 2px solid rgba(201, 71, 44, 0.7);
  border-bottom: 1px solid var(--line-cream);
}

.page-products .p-layer__key {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .p-layer__val {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--p-soft);
}

.page-products .p-filter {
  border-radius: var(--radius-md);
  border: 1px solid var(--line-cream);
  background: rgba(6, 24, 38, 0.55);
  color: var(--cream);
}

.page-products .p-filter__title {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--p-soft);
}

.page-products .p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.page-products .p-chip {
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line-cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--p-soft);
  white-space: nowrap;
}

.page-products .p-chip.is-active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--night);
  font-weight: 600;
}

.page-products .p-filter__hint {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--p-faint);
}

.page-products .p-collect__media {
  margin: 0;
}

.page-products .p-collect__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-products .p-mobile__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}

.page-products .p-mobile__media {
  margin: 0;
}

.page-products .p-mobile__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(36, 26, 21, 0.16);
}

.page-products .p-mobile__body .p-head {
  margin-bottom: 1.4rem;
}

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

.page-products .p-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(221, 248, 240, 0.62);
  border: 1px solid rgba(73, 101, 122, 0.22);
}

.page-products .p-steps__num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--red);
  line-height: 1.4;
}

.page-products .p-steps__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--ink);
}

.page-products .p-steps__item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.78;
  color: rgba(36, 26, 21, 0.76);
}

.page-products .p-mobile__note {
  margin: 1.3rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--coral);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--slate);
}

.page-products .p-bigscreen__media {
  margin: 0 0 clamp(1.4rem, 4vw, 2.2rem);
}

.page-products .p-bigscreen__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-products .p-bigscreen__grid {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .p-bigscreen__lead p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--p-soft);
}

.page-products .p-bigscreen__lead .btn {
  margin-top: 0.4rem;
}

.page-products .p-step {
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  background: rgba(13, 53, 82, 0.6);
  color: var(--cream);
  overflow: hidden;
}

.page-products .p-step + .p-step {
  margin-top: 0.55rem;
}

.page-products .p-step__summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s var(--ease);
}

.page-products .p-step__summary::-webkit-details-marker {
  display: none;
}

.page-products .p-step__summary:hover {
  background: rgba(97, 242, 208, 0.08);
}

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

.page-products .p-step__num {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--cyan);
}

.page-products .p-step__name {
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-size: 0.95rem;
  line-height: 1.5;
}

.page-products .p-step__hint {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--p-faint);
}

.page-products .p-step[open] .p-step__hint {
  color: var(--cyan);
}

.page-products .p-step__body {
  padding: 0 1rem 1rem;
}

.page-products .p-step__body p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.8;
  color: var(--p-soft);
}

.page-products .p-step--paper {
  background: rgba(221, 248, 240, 0.7);
  border-color: rgba(73, 101, 122, 0.24);
  color: var(--ink);
}

.page-products .p-step--paper .p-step__num {
  color: var(--red);
}

.page-products .p-step--paper .p-step__hint {
  color: var(--slate);
}

.page-products .p-step--paper .p-step__summary:hover {
  background: rgba(97, 242, 208, 0.28);
}

.page-products .p-step--paper .p-step__body p {
  color: rgba(36, 26, 21, 0.78);
}

.page-products .p-teams__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.page-products .p-teams__facts {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-products .p-teams__facts li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(232, 213, 192, 0.42);
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(36, 26, 21, 0.82);
}

.page-products .p-teams__facts .mono {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--red);
}

.page-products .p-teams__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.page-products .p-teams__media {
  margin: 0;
}

.page-products .p-teams__media .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(36, 26, 21, 0.16);
}

.page-products .p-scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.page-products .p-scene {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  background: rgba(6, 24, 38, 0.5);
  color: var(--cream);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.page-products .p-scene:hover {
  transform: translateY(-3px);
  border-color: rgba(97, 242, 208, 0.45);
}

.page-products .p-scene__num {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--coral);
}

.page-products .p-scene__title {
  margin: 0.45rem 0 0.5rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
}

.page-products .p-scene__text {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.78;
  color: var(--p-soft);
}

.page-products .p-scene__path {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .p-outro {
  margin-top: clamp(1.8rem, 5vw, 2.8rem);
  padding: clamp(1.2rem, 3.5vw, 1.9rem);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(97, 242, 208, 0.38);
  background: linear-gradient(120deg, rgba(13, 53, 82, 0.85), rgba(6, 24, 38, 0.7));
}

.page-products .p-outro__text {
  margin: 0 0 1.1rem;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--p-soft);
}

.page-products .p-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

@media (min-width: 640px) {
  .page-products .p-scene-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-products .p-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-products .p-matrix {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .p-card:nth-child(1) {
    grid-column: span 4;
  }

  .page-products .p-card:nth-child(2) {
    grid-column: span 2;
  }

  .page-products .p-card:nth-child(3) {
    grid-column: span 2;
  }

  .page-products .p-card:nth-child(4) {
    grid-column: span 4;
  }

  .page-products .p-collect__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-products .p-mobile__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: center;
  }

  .page-products .p-bigscreen__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-products .p-teams__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

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

@media (min-width: 1180px) {
  .page-products .p-hero__lede {
    max-width: 46ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .p-card,
  .page-products .p-scene,
  .page-products .p-step__summary {
    transition: none;
  }

  .page-products .p-card:hover,
  .page-products .p-scene:hover {
    transform: none;
  }
}