.page-products {
  --fx-line: rgba(56, 242, 176, .16);
  --fx-line-soft: rgba(244, 247, 245, .10);
  background: var(--ink);
  color: var(--fog);
  font-family: var(--font-body);
  line-height: 1.78;
  overflow-x: hidden;
}

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

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

.page-products a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

.page-products a:hover {
  border-bottom-color: var(--mint);
}

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

/* ---------- 首屏 ---------- */
.page-products .fx-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 44px) 0 58px;
  background:
    radial-gradient(110% 80% at 4% -12%, rgba(56, 242, 176, .20), transparent 56%),
    radial-gradient(72% 62% at 100% 0%, rgba(91, 200, 255, .16), transparent 62%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 60%, var(--char) 100%);
}

.page-products .fx-hero::after {
  content: "";
  position: absolute;
  right: -16vw;
  top: 8%;
  width: 48vw;
  height: 48vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 46% 54% 40% 60% / 56% 44% 58% 44%;
  background: linear-gradient(140deg, rgba(255, 106, 61, .20), rgba(56, 242, 176, .10) 55%, transparent 78%);
  pointer-events: none;
}

.page-products .fx-hero .container {
  position: relative;
  z-index: 1;
}

.page-products .fx-hero h1 {
  font-size: clamp(2rem, 8.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: .5rem 0 1rem;
  max-width: 18ch;
  color: var(--fog);
}

.page-products .fx-hero .lede {
  max-width: 40ch;
  color: rgba(244, 247, 245, .82);
}

.page-products .fx-preview {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--fx-line-soft);
  border-top: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
}

.page-products .fx-preview a {
  display: grid;
  gap: .18rem;
  padding: 1rem .9rem 1.05rem;
  background: rgba(12, 15, 14, .58);
  color: var(--fog);
  border-bottom: 2px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.page-products .fx-preview a:hover,
.page-products .fx-preview a:focus-visible {
  background: rgba(17, 59, 49, .8);
  border-bottom-color: var(--mint);
}

.page-products .fx-preview-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--mint);
}

.page-products .fx-preview-label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
}

.page-products .fx-preview-desc {
  font-size: .82rem;
  color: var(--sage);
}

/* ---------- 通用区块 ---------- */
.page-products .fx-section {
  padding: 3.2rem 0;
}

.page-products .fx-section--wall {
  background: linear-gradient(180deg, rgba(17, 59, 49, .55), rgba(7, 26, 20, .92));
  border-top: 1px solid var(--fx-line-soft);
  border-bottom: 1px solid var(--fx-line-soft);
}

.page-products .fx-section--panel {
  background: var(--char);
}

.page-products .fx-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem 2rem;
  margin-bottom: 1.7rem;
}

.page-products .fx-sec-head .section-title {
  margin-bottom: 0;
  max-width: 22ch;
}

.page-products .fx-sec-note {
  margin: 0;
  max-width: 34ch;
  font-size: .88rem;
  color: var(--sage);
}

/* ---------- 功能地图 ---------- */
.page-products .fx-map {
  display: grid;
  gap: 1.3rem;
}

.page-products .fx-map-rail {
  padding: 1.15rem 1.05rem 1.25rem;
  border: 1px solid var(--fx-line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(17, 59, 49, .85), rgba(7, 26, 20, .95));
}

.page-products .fx-rail-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
}

.page-products .fx-rail-note {
  margin: .9rem 0 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--sage);
}

.page-products .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .85rem 0 0;
}

.page-products .filter-btn {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  padding: .42rem .78rem;
  border-radius: 999px;
  border: 1px solid var(--fx-line-soft);
  background: rgba(12, 15, 14, .65);
  color: var(--sage);
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.page-products .filter-btn:hover {
  color: var(--fog);
  border-color: var(--mint);
}

.page-products .filter-btn.is-active,
.page-products .filter-btn[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink);
}

.page-products .fx-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.page-products .fx-map-item {
  padding: 1.1rem 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--fx-line-soft);
  border-left: 3px solid var(--mint);
  border-radius: 14px;
  background: rgba(12, 15, 14, .62);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

.page-products .fx-map-item:nth-child(2) {
  border-left-color: var(--orange);
}

.page-products .fx-map-item:nth-child(3) {
  border-left-color: var(--ice);
}

.page-products .fx-map-item:nth-child(4) {
  border-left-color: var(--lime);
}

.page-products .fx-map-item:hover {
  transform: translateY(-3px);
  background: rgba(17, 59, 49, .62);
}

.page-products .fx-map-item h3 {
  font-size: 1.08rem;
  margin: .35rem 0 .4rem;
}

.page-products .fx-map-item p {
  margin: 0 0 .7rem;
  font-size: .89rem;
  color: var(--sage);
}

.page-products .fx-map-code {
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--mint);
}

/* ---------- 安卓端 ---------- */
.page-products .fx-split {
  display: grid;
  gap: 1.6rem;
}

.page-products .fx-device-shot {
  margin: 0;
}

.page-products .fx-device-shot .media-frame {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--fx-line);
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .92);
}

.page-products .fx-device-shot figcaption {
  margin-top: .7rem;
}

.page-products .fx-split-body .section-title {
  max-width: 20ch;
}

.page-products .fx-split-body > p {
  color: rgba(244, 247, 245, .82);
}

.page-products .fx-steps {
  list-style: none;
  counter-reset: fxstep;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.page-products .fx-steps li {
  position: relative;
  counter-increment: fxstep;
  padding-left: 2.7rem;
  font-size: .89rem;
  color: var(--sage);
}

.page-products .fx-steps li::before {
  content: counter(fxstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .06rem;
  padding: .1rem .42rem;
  border-radius: 6px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.6;
}

.page-products .fx-steps strong {
  display: block;
  margin-bottom: .1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fog);
}

/* ---------- 主客场双轨 ---------- */
.page-products .fx-duel-shot {
  margin: 0 0 1.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--fx-line);
}

.page-products .fx-duel-lead {
  max-width: 46ch;
  color: rgba(244, 247, 245, .84);
}

.page-products .fx-duel {
  display: grid;
  gap: 1rem;
}

.page-products .fx-duel-col {
  padding: 1.3rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--fx-line-soft);
  background: rgba(12, 15, 14, .72);
}

.page-products .fx-duel-col--home {
  border-left: 4px solid var(--orange);
  background: linear-gradient(120deg, rgba(255, 106, 61, .14), rgba(12, 15, 14, .82) 62%);
}

.page-products .fx-duel-col--away {
  border-left: 4px solid var(--ice);
  background: linear-gradient(120deg, rgba(91, 200, 255, .14), rgba(12, 15, 14, .82) 62%);
}

.page-products .fx-duel-kicker {
  margin: 0 0 .8rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.page-products .fx-duel-col--home .fx-duel-kicker {
  color: var(--orange);
}

.page-products .fx-duel-col--away .fx-duel-kicker {
  color: var(--ice);
}

.page-products .fx-duel-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.page-products .fx-duel-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .42rem;
  border-bottom: 1px dashed rgba(143, 166, 155, .22);
  font-size: .88rem;
  color: var(--sage);
}

.page-products .fx-duel-rows li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .fx-duel-rows strong {
  font-family: var(--font-mono);
  font-size: .86rem;
  font-weight: 600;
  color: var(--fog);
}

.page-products .fx-duel-note {
  margin: 1.2rem 0 0;
  max-width: 44ch;
  font-size: .88rem;
  color: var(--sage);
}

/* ---------- 终端差异 ---------- */
.page-products .fx-term {
  display: grid;
  gap: 1.3rem;
}

.page-products .fx-term figure {
  margin: 0;
}

.page-products .fx-term .media-frame {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--fx-line-soft);
}

.page-products .fx-term figcaption {
  margin-top: .65rem;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--sage);
}

.page-products .fx-term-notes {
  display: grid;
  gap: .8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--fx-line-soft);
}

.page-products .fx-term-note {
  padding-left: .9rem;
  border-left: 2px solid var(--mint);
}

.page-products .fx-term-note-num {
  margin: 0 0 .15rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mint);
}

.page-products .fx-term-note p {
  margin: 0;
  font-size: .86rem;
  color: var(--sage);
}

/* ---------- 订阅 ---------- */
.page-products .fx-sub-shot {
  margin: 0 0 1.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--fx-line);
}

.page-products .fx-sub-filter {
  margin-bottom: .2rem;
}

.page-products .fx-sub-grid {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.page-products .fx-sub-grid li {
  padding: 1.05rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--fx-line-soft);
  background: rgba(17, 59, 49, .5);
}

.page-products .fx-sub-grid h3 {
  font-size: 1.02rem;
  margin: .55rem 0 .35rem;
}

.page-products .fx-sub-grid p {
  margin: 0;
  font-size: .87rem;
  color: var(--sage);
}

/* ---------- 上手流程 ---------- */
.page-products .fx-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.page-products .fx-flow details {
  border: 1px solid var(--fx-line-soft);
  border-radius: 14px;
  background: rgba(12, 15, 14, .62);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

.page-products .fx-flow details[open] {
  border-color: rgba(56, 242, 176, .45);
  background: rgba(17, 59, 49, .55);
}

.page-products .fx-flow summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.05rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--fog);
}

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

.page-products .fx-flow-num {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--mint);
  flex: none;
}

.page-products .fx-flow-arrow {
  margin-left: auto;
  width: .62rem;
  height: .62rem;
  flex: none;
  border-right: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  transform: rotate(45deg);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.page-products .fx-flow details[open] .fx-flow-arrow {
  transform: rotate(225deg);
  border-color: var(--mint);
}

.page-products .fx-flow-body {
  padding: 0 1.05rem 1.05rem;
  font-size: .88rem;
  color: var(--sage);
}

.page-products .fx-flow-body p {
  margin: 0;
}

/* ---------- 收尾 ---------- */
.page-products .fx-cta {
  padding: 2.8rem 0 3.8rem;
}

.page-products .fx-cta-box {
  position: relative;
  overflow: hidden;
  padding: 1.8rem 1.2rem;
  border-radius: 22px;
  border: 1px solid var(--fx-line);
  background: linear-gradient(120deg, rgba(56, 242, 176, .16), rgba(91, 200, 255, .10) 46%, rgba(255, 106, 61, .12));
}

.page-products .fx-cta-box .section-title {
  max-width: 22ch;
}

.page-products .fx-cta-box > p {
  max-width: 52ch;
  color: rgba(244, 247, 245, .84);
  font-size: .92rem;
}

.page-products .fx-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.2rem 0 1rem;
}

.page-products .fx-cta-note {
  margin: 0;
  font-size: .84rem;
  color: var(--sage);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-products .fx-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .page-products .fx-term-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .page-products .fx-cta-box {
    padding: 2.4rem 2.2rem;
  }
}

@media (min-width: 760px) {
  .page-products .fx-duel {
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    align-items: start;
  }

  .page-products .fx-duel-col--away {
    text-align: right;
  }

  .page-products .fx-duel-col--away .fx-duel-rows li {
    flex-direction: row-reverse;
  }
}

@media (min-width: 880px) {
  .page-products .fx-section {
    padding: 4.6rem 0;
  }

  .page-products .fx-hero {
    padding: calc(var(--header-h) + 76px) 0 84px;
  }

  .page-products .fx-split {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
  }

  .page-products .fx-term {
    grid-template-columns: 7fr 5fr;
    gap: 2rem;
    align-items: start;
  }

  .page-products .fx-cta {
    padding: 3.6rem 0 4.8rem;
  }
}

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

  .page-products .fx-map {
    grid-template-columns: 258px minmax(0, 1fr);
    gap: 2.2rem;
    align-items: start;
  }

  .page-products .fx-map-rail {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}


<main id="main-content" class="page-products">
  <section class="fx-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <ol>
          <li><a href="/">赛场首页</a></li>
          <li aria-current="page">功能与设备</li>
        </ol>
      </nav>
      <p class="eyebrow">功能中心 · 设备与场景</p>
      <h1>把一场比赛的读法，拆成能上手的每一步</h1>
      <p class="lede">开赛之前，你通常想知道三件事：谁在主场、最近状态怎么样、下一个变动什么时候到。BSPORT赛场把它们收进同一个控制台——订阅一次，安卓端随身翻、电脑端坐下来复盘、手机网页端临时看一眼，换台设备登录，偏好还在原处。</p>
      <ol class="fx-preview">
        <li>
          <a href="#android">
            <span class="fx-preview-num">01</span>
            <span class="fx-preview-label">安卓端看赛事</span>
            <span class="fx-preview-desc">订阅、赛程、提醒一条线排完</span>
          </a>
        </li>
        <li>
          <a href="#home-away">
            <span class="fx-preview-num">02</span>
            <span class="fx-preview-label">主客场左右分列</span>
            <span class="fx-preview-desc">主队橙、客队蓝，位置固定</span>
          </a>
        </li>
        <li>
          <a href="#devices">
            <span class="fx-preview-num">03</span>
            <span class="fx-preview-label">两种终端节奏</span>
            <span class="fx-preview-desc">电脑端整季回看，手机端最近三轮</span>
          </a>
        </li>
        <li>
          <a href="#subscribe">
            <span class="fx-preview-num">04</span>
            <span class="fx-preview-label">订阅与转会</span>
            <span class="fx-preview-desc">四类订阅，荧光黄绿只给转会</span>
          </a>
        </li>
      </ol>
    </div>
  </section>

  <section class="fx-section" id="fmap">
    <div class="container">
      <div class="fx-sec-head">
        <div>
          <p class="eyebrow">功能地图</p>
          <h2 class="section-title">日常看球就那几个动作，都在一屏之内</h2>
        </div>
        <p class="fx-sec-note">选一个你手上常用的设备，看看这一端最先露出来的是哪几项。</p>
      </div>

      <div class="fx-map" data-filter-scope="device-map">
        <aside class="fx-map-rail">
          <p class="fx-rail-title">按设备筛选</p>
          <div class="filter-bar" data-filter-group="device" data-filter-scope="device-map">
            <button class="filter-btn is-active" type="button" data-filter="all">全部</button>
            <button class="filter-btn" type="button" data-filter="android">安卓</button>
            <button class="filter-btn" type="button" data-filter="desktop">电脑</button>
            <button class="filter-btn" type="button" data-filter="mobile">手机网页</button>
          </div>
          <p class="fx-rail-note">订阅绑在账号上，换设备重新登录，关注的联赛和推送时段会自己回来。</p>
        </aside>

        <ul class="fx-map-list">
          <li class="fx-map-item" data-topics="android desktop mobile">
            <span class="fx-map-code mono">01</span>
            <h3>赛事订阅栏</h3>
            <p>联赛、球队、球员和转会动态四类订阅都在这一栏。勾好之后，开赛前与关键变动都按你设的时段送到。</p>
            <span class="tag">全端通用</span>
          </li>
          <li class="fx-map-item" data-topics="android mobile">
            <span class="fx-map-code mono">02</span>
            <h3>主客场左右分列</h3>
            <p>主队固定占左、客队固定占右，比分与胜率各归一侧。竖屏握在手里，这个顺序也不会变。</p>
            <span class="tag tag--orange">主队左侧</span>
            <span class="tag tag--ice">客队右侧</span>
          </li>
          <li class="fx-map-item" data-topics="android desktop mobile">
            <span class="fx-map-code mono">03</span>
            <h3>排名速查</h3>
            <p>先选联赛、再选赛季阶段，最后用积分或胜率切换视角，常看的榜单三步就能落到眼前。</p>
            <span class="tag">全端通用</span>
          </li>
          <li class="fx-map-item" data-topics="android desktop mobile">
            <span class="fx-map-code mono">04</span>
            <h3>转会动态标签</h3>
            <p>荧光黄绿只标转会信息，窗口期每天至少汇总三次，非窗口期遇到重要变动才亮灯。</p>
            <span class="tag tag--lime">新版入口</span>
          </li>
          <li class="fx-map-item" data-topics="desktop">
            <span class="fx-map-code mono">05</span>
            <h3>完整更新记录</h3>
            <p>电脑端把整季记录摊开，能按联赛、球队、日期阶段和事件类型逐层收窄。</p>
            <span class="tag">电脑端</span>
          </li>
          <li class="fx-map-item" data-topics="android mobile">
            <span class="fx-map-code mono">06</span>
            <h3>最近三轮摘要</h3>
            <p>手机上只留最近三轮，翻得快、看得清，在路上就能判断这场的走势走向。</p>
            <span class="tag">手机端</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="fx-section fx-section--wall" id="android">
    <div class="container">
      <div class="fx-split">
        <figure class="fx-device-shot">
          <div class="media-frame media-frame--tall">
            <img src="{zhanqunpic:h:1400w:1000}" width="1000" height="1400" alt="竖屏安卓设备显示赛事列表与订阅按钮，深色界面，信息层级清晰">
          </div>
          <figcaption class="media-caption">赛事列表与订阅入口在同一屏，握着一只手就能排完一轮。</figcaption>
        </figure>

        <div class="fx-split-body">
          <p class="eyebrow">安卓端 · 赛事查看</p>
          <h2 class="section-title">BSPORT安卓设备看体育赛事，订阅到赛程只隔一屏</h2>
          <p>打开赛事页，列表按你订阅的联赛与球队排在前面，杯赛轮次单独标出来。点开任意一场，主客两队的数据并排展开，下方接最近三轮摘要，通勤路上十几秒就能决定这场值不值得留到晚上看。</p>

          <ol class="fx-steps">
            <li>
              <strong>登录后偏好自动带回</strong>
              用同一个账号进赛事页，关注的联赛、主客场视角和推送时段都不用重新设。
            </li>
            <li>
              <strong>在订阅栏挑好关注对象</strong>
              联赛、球队、球员分三处勾选，转会动态单独一项，需要时再打开。
            </li>
            <li>
              <strong>按开赛时间翻列表</strong>
              列表默认按时间排序，点星标即加入订阅，赛前提醒会自动接上。
            </li>
            <li>
              <strong>进详情看主客分列</strong>
              比分、胜率与近期状态同屏对照，单场比赛的判断在这里一次做足。
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="fx-section" id="home-away">
    <div class="container">
      <div class="fx-sec-head">
        <div>
          <p class="eyebrow">双轨读法</p>
          <h2 class="section-title">左边永远是主队，右边永远是客队</h2>
        </div>
        <p class="fx-sec-note">位置固定下来，眼睛就不必每次重新找数据。</p>
      </div>

      <div class="media-frame media-frame--wide fx-duel-shot">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深色数据界面左右两栏，橙色主队与蓝色客队数据条清晰分列">
      </div>

      <p class="fx-duel-lead">体育赛事主客场表现BSPORT 的读法从颜色开始：熔岩橙一律代表主队，冰川蓝一律代表客队。比分、胜率、近期状态各占一行，同一种数据永远待在同一侧，看熟之后连标签都不用读。</p>

      <div class="fx-duel">
        <article class="fx-duel-col fx-duel-col--home">
          <p class="fx-duel-kicker">主队 · 熔岩橙</p>
          <ul class="fx-duel-rows">
            <li><span>比分</span><strong>左侧第一行</strong></li>
            <li><span>胜率</span><strong>左侧第二行</strong></li>
            <li><span>近期状态</span><strong>最近三轮</strong></li>
          </ul>
        </article>
        <article class="fx-duel-col fx-duel-col--away">
          <p class="fx-duel-kicker">客队 · 冰川蓝</p>
          <ul class="fx-duel-rows">
            <li><span>比分</span><strong>右侧第一行</strong></li>
            <li><span>胜率</span><strong>右侧第二行</strong></li>
            <li><span>近期状态</span><strong>最近三轮</strong></li>
          </ul>
        </article>
      </div>

      <p class="fx-duel-note">换一场比赛，两侧位置保持原样，视线回落的落点也就保持原样。想比较两队走势，从中间往下扫一遍就够。</p>
    </div>
  </section>

  <section class="fx-section fx-section--panel" id="devices">
    <div class="container">
      <div class="fx-sec-head">
        <div>
          <p class="eyebrow">终端差异</p>
          <h2 class="section-title">电脑端翻整季，手机端看最近三轮</h2>
        </div>
        <p class="fx-sec-note">同一场比赛，坐下来的和走在路上的，需要的信息量本来就不一样。</p>
      </div>

      <div class="fx-term">
        <figure class="fx-term-item">
          <div class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="桌面显示器显示较长的更新记录列表与筛选栏，界面细节清晰可读" loading="lazy" decoding="async">
          </div>
          <figcaption>电脑端：完整更新记录按联赛、球队、日期阶段与事件类型收窄，赛后写复盘时逐条对照。</figcaption>
        </figure>
        <figure class="fx-term-item">
          <div class="media-frame media-frame--tall">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机竖屏显示最近三轮数据卡片，信息密度适中便于快速扫读" loading="lazy" decoding="async">
          </div>
          <figcaption>手机端：最近三轮摘要一屏装下，赶时间时先抓最近走势。</figcaption>
        </figure>
      </div>

      <div class="fx-term-notes">
        <div class="fx-term-note">
          <p class="mono fx-term-note-num">30 分钟</p>
          <p>常规联赛数据在赛后半小时内更新到位，回到电脑前基本能查到完整一轮。</p>
        </div>
        <div class="fx-term-note">
          <p class="mono fx-term-note-num">15 分钟</p>
          <p>重大杯赛在加时结束后十五分钟内补上关键事件，加时段的记录同样能回看。</p>
        </div>
        <div class="fx-term-note">
          <p class="mono fx-term-note-num">3 步</p>
          <p>常用排名查询在两种终端上路径一致，从入口到结果不超过三步。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fx-section" id="subscribe">
    <div class="container">
      <div class="fx-sec-head">
        <div>
          <p class="eyebrow">订阅栏</p>
          <h2 class="section-title">四类订阅，转会动态有自己的颜色</h2>
        </div>
        <p class="fx-sec-note">列表刷得快的时候，颜色比文字先被认出来。</p>
      </div>

      <div class="media-frame fx-sub-shot">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛事订阅栏局部，荧光黄绿转会标签与联赛、球队标签并列排布" loading="lazy" decoding="async">
      </div>

      <div class="filter-bar fx-sub-filter" data-filter-group="subscribe" data-filter-scope="sub-grid">
        <button class="filter-btn is-active" type="button" data-filter="all">全部</button>
        <button class="filter-btn" type="button" data-filter="league">联赛</button>
        <button class="filter-btn" type="button" data-filter="team">球队</button>
        <button class="filter-btn" type="button" data-filter="player">球员</button>
        <button class="filter-btn" type="button" data-filter="transfer">转会动态</button>
      </div>

      <ul class="fx-sub-grid" data-filter-scope="sub-grid">
        <li data-topics="league">
          <span class="tag">联赛</span>
          <h3>跟着一个联赛看整季</h3>
          <p>选定联赛后，赛程和排名入口固定排在列表顶部，杯赛轮次单独标出，不用每次重新找。</p>
        </li>
        <li data-topics="team">
          <span class="tag">球队</span>
          <h3>盯住一支球队的主客两副面孔</h3>
          <p>订阅球队时把主客场视角一起设好，之后每场都按你习惯的那一侧开头。</p>
        </li>
        <li data-topics="player">
          <span class="tag">球员</span>
          <h3>关注单个球员的出场变化</h3>
          <p>适合盯某条位置线的球迷，出场与表现变动会在对应赛事里给出提示。</p>
        </li>
        <li data-topics="transfer">
          <span class="tag tag--lime">转会动态</span>
          <h3>转会信息和比赛提醒分开走</h3>
          <p>窗口期每天至少汇总三次，荧光黄绿标签单独点亮，不与比分提醒搅在一起。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="fx-section fx-section--wall" id="flow">
    <div class="container">
      <div class="fx-sec-head">
        <div>
          <p class="eyebrow">上手流程</p>
          <h2 class="section-title">从赛前到赛后，四个动作串成一条线</h2>
        </div>
        <p class="fx-sec-note">点开任意一步，看这一步具体怎么操作。</p>
      </div>

      <ol class="fx-flow">
        <li>
          <details>
            <summary>
              <span class="fx-flow-num">01</span>
              赛前：先看主客，再订提醒
              <span class="fx-flow-arrow" aria-hidden="true"></span>
            </summary>
            <div class="fx-flow-body">
              <p>进赛事列表，先扫一眼这场的主客分栏和最近三轮，再点星标加入订阅。推送时段可以设成开赛前半小时，避开整晚的打扰。</p>
            </div>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <span class="fx-flow-num">02</span>
              赛中：左右两栏对照着看
              <span class="fx-flow-arrow" aria-hidden="true"></span>
            </summary>
            <div class="fx-flow-body">
              <p>比分变化时两侧数据同步跟上。想比较近期状态，从中间往下扫一遍即可，主队橙、客队蓝，位置不会中途对调。</p>
            </div>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <span class="fx-flow-num">03</span>
              赛后：回到电脑端翻整季
              <span class="fx-flow-arrow" aria-hidden="true"></span>
            </summary>
            <div class="fx-flow-body">
              <p>在电脑端按日期阶段筛出这一轮，事件类型分开列，加时阶段的记录也在其中。写赛后笔记时把联赛和球队一起勾上，下次回看会快很多。</p>
            </div>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <span class="fx-flow-num">04</span>
              排名：三步定位一张榜
              <span class="fx-flow-arrow" aria-hidden="true"></span>
            </summary>
            <div class="fx-flow-body">
              <p>从排名入口选联赛，再选赛季阶段，最后用积分或胜率切换视图。临时想知道谁排在前面，不必绕去赛程页。</p>
            </div>
          </details>
        </li>
      </ol>
    </div>
  </section>

  <section class="fx-cta">
    <div class="container">
      <div class="fx-cta-box">
        <h2 class="section-title">先按你手上的设备，挑一条顺手的入口</h2>
        <p>安卓端适合随手翻，电脑端适合坐下来复盘，手机网页端适合在别人的设备上临时看一眼。订阅跟账号走，换了设备重新登录同一账号就能接着读。遇到赛事数据对不上，把截图和机型一起发来，处理会快一些。</p>
        <div class="fx-cta-actions">
          <a class="btn btn--primary" href="/questions/">查看常见问题</a>
          <a class="btn btn--ghost" href="/contact-us/">联系客服</a>
        </div>
        <p class="fx-cta-note">想先摸清用法，可以读一读<a href="/articles/">赛事动态里的使用指南</a>，也可以<a href="/">回到赛场首页</a>从订阅栏开始。</p>
      </div>
    </div>
  </section>
</main>


.page-products {
  --fx-line: rgba(56, 242, 176, .16);
  --fx-line-soft: rgba(244, 247, 245, .10);
  background: var(--ink);
  color: var(--fog);
  font-family: var(--font-body);
  line-height: 1.78;
  overflow-x: hidden;
}

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

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

.page-products a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

.page-products a:hover {
  border-bottom-color: var(--mint);
}

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

/* ---------- 首屏 ---------- */
.page-products .fx-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 44px) 0 58px;
  background:
    radial-gradient(110% 80% at 4% -12%, rgba(56, 242, 176, .20), transparent 56%),
    radial-gradient(72% 62% at 100% 0%, rgba(91, 200, 255, .16), transparent 62%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 60%, var(--char) 100%);
}

.page-products .fx-hero::after {
  content: "";
  position: absolute;
  right: -16vw;
  top: 8%;
  width: 48vw;
  height: 48vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 46% 54% 40% 60% / 56% 44% 58% 44%;
  background: linear-gradient(140deg, rgba(255, 106, 61, .20), rgba(56, 242, 176, .10) 55%, transparent 78%);
  pointer-events: none;
}

.page-products .fx-hero .container {
  position: relative;
  z-index: 1;
}

.page-products .fx-hero h1 {
  font-size: clamp(2rem, 8.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: .5rem 0 1rem;
  max-width: 18ch;
  color: var(--fog);
}

.page-products .fx-hero .lede {
  max-width: 40ch;
  color: rgba(244, 247, 245, .82);
}

.page-products .fx-preview {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--fx-line-soft);
  border-top: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
}

.page-products .fx-preview a {
  display: grid;
  gap: .18rem;
  padding: 1rem .9rem 1.05rem;
  background: rgba(12, 15, 14, .58);
  color: var(--fog);
  border-bottom: 2px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.page-products .fx-preview a:hover,
.page-products .fx-preview a:focus-visible {
  background: rgba(17, 59, 49, .8);
  border-bottom-color: var(--mint);
}

.page-products .fx-preview-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--mint);
}

.page-products .fx-preview-label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
}

.page-products .fx-preview-desc {
  font-size: .82rem;
  color: var(--sage);
}

/* ---------- 通用区块 ---------- */
.page-products .fx-section {
  padding: 3.2rem 0;
}

.page-products .fx-section--wall {
  background: linear-gradient(180deg, rgba(17, 59, 49, .55), rgba(7, 26, 20, .92));
  border-top: 1px solid var(--fx-line-soft);
  border-bottom: 1px solid var(--fx-line-soft);
}

.page-products .fx-section--panel {
  background: var(--char);
}

.page-products .fx-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem 2rem;
  margin-bottom: 1.7rem;
}

.page-products .fx-sec-head .section-title {
  margin-bottom: 0;
  max-width: 22ch;
}

.page-products .fx-sec-note {
  margin: 0;
  max-width: 34ch;
  font-size: .88rem;
  color: var(--sage);
}

/* ---------- 功能地图 ---------- */
.page-products .fx-map {
  display: grid;
  gap: 1.3rem;
}

.page-products .fx-map-rail {
  padding: 1.15rem 1.05rem 1.25rem;
  border: 1px solid var(--fx-line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(17, 59, 49, .85), rgba(7, 26, 20, .95));
}

.page-products .fx-rail-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
}

.page-products .fx-rail-note {
  margin: .9rem 0 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--sage);
}

.page-products .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .85rem 0 0;
}

.page-products .filter-btn {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  padding: .42rem .78rem;
  border-radius: 999px;
  border: 1px solid var(--fx-line-soft);
  background: rgba(12, 15, 14, .65);
  color: var(--sage);
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.page-products .filter-btn:hover {
  color: var(--fog);
  border-color: var(--mint);
}

.page-products .filter-btn.is-active,
.page-products .filter-btn[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink);
}

.page-products .fx-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.page-products .fx-map-item {
  padding: 1.1rem 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--fx-line-soft);
  border-left: 3px solid var(--mint);
  border-radius: 14px;
  background: rgba(12, 15, 14, .62);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

.page-products .fx-map-item:nth-child(2) {
  border-left-color: var(--orange);
}

.page-products .fx-map-item:nth-child(3) {
  border-left-color: var(--ice);
}

.page-products .fx-map-item:nth-child(4) {
  border-left-color: var(--lime);
}

.page-products .fx-map-item:hover {
  transform: translateY(-3px);
  background: rgba(17, 59, 49, .62);
}

.page-products .fx-map-item h3 {
  font-size: 1.08rem;
  margin: .35rem 0 .4rem;
}

.page-products .fx-map-item p {
  margin: 0 0 .7rem;
  font-size: .89rem;
  color: var(--sage);
}

.page-products .fx-map-code {
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--mint);
}

/* ---------- 安卓端 ---------- */
.page-products .fx-split {
  display: grid;
  gap: 1.6rem;
}

.page-products .fx-device-shot {
  margin: 0;
}

.page-products .fx-device-shot .media-frame {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--fx-line);
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .92);
}

.page-products .fx-device-shot figcaption {
  margin-top: .7rem;
}

.page-products .fx-split-body .section-title {
  max-width: 20ch;
}

.page-products .fx-split-body > p {
  color: rgba(244, 247, 245, .82);
}

.page-products .fx-steps {
  list-style: none;
  counter-reset: fxstep;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.page-products .fx-steps li {
  position: relative;
  counter-increment: fxstep;
  padding-left: 2.7rem;
  font-size: .89rem;
  color: var(--sage);
}

.page-products .fx-steps li::before {
  content: counter(fxstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .06rem;
  padding: .1rem .42rem;
  border-radius: 6px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.6;
}

.page-products .fx-steps strong {
  display: block;
  margin-bottom: .1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fog);
}

/* ---------- 主客场双轨 ---------- */
.page-products .fx-duel-shot {
  margin: 0 0 1.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--fx-line);
}

.page-products .fx-duel-lead {
  max-width: 46ch;
  color: rgba(244, 247, 245, .84);
}

.page-products .fx-duel {
  display: grid;
  gap: 1rem;
}

.page-products .fx-duel-col {
  padding: 1.3rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--fx-line-soft);
  background: rgba(12, 15, 14, .72);
}

.page-products .fx-duel-col--home {
  border-left: 4px solid var(--orange);
  background: linear-gradient(120deg, rgba(255, 106, 61, .14), rgba(12, 15, 14, .82) 62%);
}

.page-products .fx-duel-col--away {
  border-left: 4px solid var(--ice);
  background: linear-gradient(120deg, rgba(91, 200, 255, .14), rgba(12, 15, 14, .82) 62%);
}

.page-products .fx-duel-kicker {
  margin: 0 0 .8rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.page-products .fx-duel-col--home .fx-duel-kicker {
  color: var(--orange);
}

.page-products .fx-duel-col--away .fx-duel-kicker {
  color: var(--ice);
}

.page-products .fx-duel-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.page-products .fx-duel-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .42rem;
  border-bottom: 1px dashed rgba(143, 166, 155, .22);
  font-size: .88rem;
  color: var(--sage);
}

.page-products .fx-duel-rows li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .fx-duel-rows strong {
  font-family: var(--font-mono);
  font-size: .86rem;
  font-weight: 600;
  color: var(--fog);
}

.page-products .fx-duel-note {
  margin: 1.2rem 0 0;
  max-width: 44ch;
  font-size: .88rem;
  color: var(--sage);
}

/* ---------- 终端差异 ---------- */
.page-products .fx-term {
  display: grid;
  gap: 1.3rem;
}

.page-products .fx-term figure {
  margin: 0;
}

.page-products .fx-term .media-frame {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--fx-line-soft);
}

.page-products .fx-term figcaption {
  margin-top: .65rem;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--sage);
}

.page-products .fx-term-notes {
  display: grid;
  gap: .8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--fx-line-soft);
}

.page-products .fx-term-note {
  padding-left: .9rem;
  border-left: 2px solid var(--mint);
}

.page-products .fx-term-note-num {
  margin: 0 0 .15rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mint);
}

.page-products .fx-term-note p {
  margin: 0;
  font-size: .86rem;
  color: var(--sage);
}

/* ---------- 订阅 ---------- */
.page-products .fx-sub-shot {
  margin: 0 0 1.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--fx-line);
}

.page-products .fx-sub-filter {
  margin-bottom: .2rem;
}

.page-products .fx-sub-grid {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.page-products .fx-sub-grid li {
  padding: 1.05rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--fx-line-soft);
  background: rgba(17, 59, 49, .5);
}

.page-products .fx-sub-grid h3 {
  font-size: 1.02rem;
  margin: .55rem 0 .35rem;
}

.page-products .fx-sub-grid p {
  margin: 0;
  font-size: .87rem;
  color: var(--sage);
}

/* ---------- 上手流程 ---------- */
.page-products .fx-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.page-products .fx-flow details {
  border: 1px solid var(--fx-line-soft);
  border-radius: 14px;
  background: rgba(12, 15, 14, .62);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

.page-products .fx-flow details[open] {
  border-color: rgba(56, 242, 176, .45);
  background: rgba(17, 59, 49, .55);
}

.page-products .fx-flow summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.05rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--fog);
}

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

.page-products .fx-flow-num {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--mint);
  flex: none;
}

.page-products .fx-flow-arrow {
  margin-left: auto;
  width: .62rem;
  height: .62rem;
  flex: none;
  border-right: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  transform: rotate(45deg);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.page-products .fx-flow details[open] .fx-flow-arrow {
  transform: rotate(225deg);
  border-color: var(--mint);
}

.page-products .fx-flow-body {
  padding: 0 1.05rem 1.05rem;
  font-size: .88rem;
  color: var(--sage);
}

.page-products .fx-flow-body p {
  margin: 0;
}

/* ---------- 收尾 ---------- */
.page-products .fx-cta {
  padding: 2.8rem 0 3.8rem;
}

.page-products .fx-cta-box {
  position: relative;
  overflow: hidden;
  padding: 1.8rem 1.2rem;
  border-radius: 22px;
  border: 1px solid var(--fx-line);
  background: linear-gradient(120deg, rgba(56, 242, 176, .16), rgba(91, 200, 255, .10) 46%, rgba(255, 106, 61, .12));
}

.page-products .fx-cta-box .section-title {
  max-width: 22ch;
}

.page-products .fx-cta-box > p {
  max-width: 52ch;
  color: rgba(244, 247, 245, .84);
  font-size: .92rem;
}

.page-products .fx-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.2rem 0 1rem;
}

.page-products .fx-cta-note {
  margin: 0;
  font-size: .84rem;
  color: var(--sage);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-products .fx-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .page-products .fx-term-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .page-products .fx-cta-box {
    padding: 2.4rem 2.2rem;
  }
}

@media (min-width: 760px) {
  .page-products .fx-duel {
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    align-items: start;
  }

  .page-products .fx-duel-col--away {
    text-align: right;
  }

  .page-products .fx-duel-col--away .fx-duel-rows li {
    flex-direction: row-reverse;
  }
}

@media (min-width: 880px) {
  .page-products .fx-section {
    padding: 4.6rem 0;
  }

  .page-products .fx-hero {
    padding: calc(var(--header-h) + 76px) 0 84px;
  }

  .page-products .fx-split {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
  }

  .page-products .fx-term {
    grid-template-columns: 7fr 5fr;
    gap: 2rem;
    align-items: start;
  }

  .page-products .fx-cta {
    padding: 3.6rem 0 4.8rem;
  }
}

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

  .page-products .fx-map {
    grid-template-columns: 258px minmax(0, 1fr);
    gap: 2.2rem;
    align-items: start;
  }

  .page-products .fx-map-rail {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}