.page-products {
  --fx-rule: rgba(11, 36, 31, .14);
  --fx-soft: rgba(242, 235, 221, .78);
  --fx-soft-2: rgba(242, 235, 221, .6);
  --fx-gap: clamp(16px, 2.6vw, 28px);
  background: var(--paper);
  color: var(--text);
  overflow-wrap: break-word;
}

.page-products [id] {
  scroll-margin-top: 112px;
}

/* ---------- 首屏 ---------- */
.page-products .fx-hero {
  background: var(--ink);
  color: var(--paper);
  padding-bottom: clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--hairline-gold);
}

.page-products .fx-hero .breadcrumb {
  padding-top: clamp(14px, 2vw, 20px);
}

.page-products .fx-hero .breadcrumb__link,
.page-products .fx-hero .breadcrumb__sep {
  color: var(--gold-bright);
}

.page-products .fx-hero .breadcrumb__item {
  color: var(--fx-soft-2);
}

.page-products .fx-hero__inner {
  display: grid;
  gap: var(--fx-gap);
  padding-top: clamp(18px, 3vw, 34px);
}

.page-products .fx-hero .eyebrow {
  color: var(--gold);
}

.page-products .fx-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: clamp(10px, 1.6vw, 16px) 0 clamp(12px, 2vw, 20px);
}

.page-products .fx-hero__deck {
  max-width: 36em;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  color: var(--fx-soft);
  line-height: 1.85;
}

.page-products .fx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.page-products .fx-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hairline-gold);
}

.page-products .fx-hero__caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--fx-soft-2);
}

/* ---------- 区块基础 ---------- */
.page-products .fx-section {
  padding: clamp(38px, 6vw, 82px) 0;
  border-top: 1px solid var(--fx-rule);
}

.page-products .fx-section__head {
  display: grid;
  gap: 10px;
  max-width: 46em;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-products .fx-section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.24;
  margin: 0;
}

.page-products .fx-section__lede {
  margin: 0;
  max-width: 36em;
  color: var(--muted);
  line-height: 1.8;
}

.page-products .fx-prose {
  max-width: 36em;
  margin: 0 0 18px;
  line-height: 1.85;
}

/* ---------- 工具台面：索引 + Bento ---------- */
.page-products .fx-bench {
  background: var(--paper);
}

.page-products .fx-bench__grid {
  display: grid;
  gap: var(--fx-gap);
}

.page-products .fx-bench__main {
  min-width: 0;
}

.page-products .fx-index {
  background: var(--brick);
  color: var(--card);
  padding: 20px 18px;
  border-top: 3px solid var(--gold);
}

.page-products .fx-index__title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 14px;
}

.page-products .fx-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .fx-index__list li {
  border-top: 1px solid rgba(251, 247, 239, .22);
}

.page-products .fx-index__list li:first-child {
  border-top: 0;
}

.page-products .fx-index__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  color: var(--card);
  text-decoration: none;
  font-size: .92rem;
  transition: color 160ms var(--ease), padding-left 160ms var(--ease);
}

.page-products .fx-index__list a:hover,
.page-products .fx-index__list a:focus-visible {
  color: var(--gold-bright);
  padding-left: 4px;
}

.page-products .fx-index__list span {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(251, 247, 239, .62);
}

.page-products .fx-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.page-products .fx-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--card);
  border: 1px solid var(--fx-rule);
  color: var(--text);
  text-decoration: none;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), opacity 160ms var(--ease);
}

.page-products .fx-cell:hover,
.page-products .fx-cell:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
}

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

.page-products .fx-cell__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--brick);
}

.page-products .fx-cell__icon {
  color: var(--ink-2);
}

.page-products .fx-cell__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}

.page-products .fx-cell__desc {
  margin: 0;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .fx-cell__go {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--brick);
}

.page-products .fx-cell--lead {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--hairline-gold);
}

.page-products .fx-cell--lead .fx-cell__name {
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.page-products .fx-cell--lead .fx-cell__desc {
  color: var(--fx-soft);
  max-width: 28em;
}

.page-products .fx-cell--lead .fx-cell__num,
.page-products .fx-cell--lead .fx-cell__go,
.page-products .fx-cell--lead .fx-cell__icon {
  color: var(--gold);
}

.page-products .fx-cell--a {
  background: var(--brick);
  color: var(--card);
  border-color: rgba(201, 162, 94, .4);
}

.page-products .fx-cell--a .fx-cell__desc {
  color: rgba(251, 247, 239, .84);
}

.page-products .fx-cell--a .fx-cell__num,
.page-products .fx-cell--a .fx-cell__go,
.page-products .fx-cell--a .fx-cell__icon {
  color: var(--gold-bright);
}

.page-products .fx-cell--c {
  background: var(--ink-2);
  color: var(--paper);
  border-color: var(--hairline-gold);
}

.page-products .fx-cell--c .fx-cell__desc {
  color: rgba(242, 235, 221, .76);
}

.page-products .fx-cell--c .fx-cell__num,
.page-products .fx-cell--c .fx-cell__go,
.page-products .fx-cell--c .fx-cell__icon {
  color: var(--gold);
}

/* ---------- 双栏 ---------- */
.page-products .fx-split {
  display: grid;
  gap: clamp(20px, 3vw, 38px);
}

.page-products .fx-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--fx-rule);
  border: 1px solid var(--fx-rule);
}

.page-products .fx-ways li {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
}

.page-products .fx-ways__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--brick);
  padding-top: 3px;
}

.page-products .fx-ways strong {
  display: block;
  font-size: .96rem;
  margin-bottom: 2px;
}

.page-products .fx-ways p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .fx-figure {
  margin: 0 0 clamp(16px, 2.4vw, 24px);
}

.page-products .fx-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--fx-rule);
}

.page-products .fx-figure figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
}

.page-products .fx-range {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(16px, 2.4vw, 22px);
  border-left: 3px solid var(--gold);
}

.page-products .fx-range__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-products .fx-range ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .fx-range li {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--fx-soft);
}

.page-products .fx-range .meta-mono {
  color: var(--gold-bright);
  margin-right: 8px;
}

/* ---------- 四步迁移 ---------- */
.page-products .fx-migrate {
  background: var(--ink-2);
  color: var(--paper);
  border-top: 0;
}

.page-products .fx-migrate .eyebrow {
  color: var(--gold);
}

.page-products .fx-migrate .fx-section__title {
  color: var(--paper);
}

.page-products .fx-migrate .fx-prose {
  color: var(--fx-soft);
}

.page-products .fx-migrate__head {
  display: grid;
  gap: var(--fx-gap);
  margin-bottom: clamp(20px, 3vw, 32px);
}

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

.page-products .fx-migrate .fx-figure img {
  border-color: var(--hairline-gold);
}

.page-products .fx-migrate .fx-figure figcaption {
  color: var(--fx-soft-2);
}

.page-products .fx-steps {
  display: grid;
  gap: 10px;
}

.page-products .fx-step {
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(11, 36, 31, .18);
  border-left: 3px solid var(--brick);
}

.page-products .fx-step[open] {
  border-left-color: var(--gold);
}

.page-products .fx-step__summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

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

.page-products .fx-step__num {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--brick);
  white-space: nowrap;
}

.page-products .fx-step__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
}

.page-products .fx-step__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}

.page-products .fx-step__summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gold);
}

.page-products .fx-step[open] .fx-step__summary::after {
  content: "–";
}

.page-products .fx-step__body {
  padding: 0 18px 20px;
}

.page-products .fx-step__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .fx-step__body li {
  position: relative;
  padding-left: 16px;
  font-size: .92rem;
  line-height: 1.75;
}

.page-products .fx-step__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.page-products .fx-step__tip {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--fx-rule);
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- 收藏 ---------- */
.page-products .fx-saved {
  background: var(--paper);
}

.page-products .fx-check {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .fx-check li {
  position: relative;
  padding-left: 20px;
  font-size: .93rem;
  line-height: 1.75;
}

.page-products .fx-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 9px;
  height: 9px;
  border: 1px solid var(--brick);
  transform: rotate(45deg);
}

.page-products .fx-check--gold li::before {
  border-color: var(--gold);
}

.page-products .fx-check a {
  color: var(--brick);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 83, 63, .45);
}

.page-products .fx-check a:hover,
.page-products .fx-check a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.page-products .fx-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: .85rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 导出 ---------- */
.page-products .fx-export {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}

.page-products .fx-export .eyebrow {
  color: var(--gold);
}

.page-products .fx-export .fx-section__title {
  color: var(--paper);
}

.page-products .fx-export .fx-prose {
  color: var(--fx-soft);
}

.page-products .fx-export .fx-check li {
  color: rgba(242, 235, 221, .88);
}

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

.page-products .fx-export .fx-figure img {
  border-color: var(--hairline-gold);
}

.page-products .fx-export .fx-figure figcaption {
  color: var(--fx-soft-2);
}

/* ---------- 答疑与联系 ---------- */
.page-products .fx-help {
  background: var(--paper);
}

.page-products .fx-help__grid {
  display: grid;
  gap: var(--fx-gap);
}

.page-products .fx-help__card {
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--card);
  border: 1px solid var(--fx-rule);
  border-top: 3px solid var(--brick);
}

.page-products .fx-help__card h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  margin: 8px 0 14px;
}

.page-products .fx-help__card--dark {
  background: var(--ink-2);
  border-color: var(--hairline-gold);
  border-top-color: var(--gold);
  color: var(--paper);
}

.page-products .fx-help__card--dark .eyebrow {
  color: var(--gold);
}

.page-products .fx-help__card--dark p {
  color: var(--fx-soft);
  line-height: 1.8;
}

.page-products .fx-help__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .fx-help__list li {
  position: relative;
  padding-left: 18px;
  font-size: .93rem;
  line-height: 1.75;
}

.page-products .fx-help__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brick);
}

.page-products .fx-help__mail {
  margin: 14px 0 18px;
  color: var(--gold-bright);
  letter-spacing: .02em;
  word-break: break-all;
}

.page-products .fx-help__card--dark .fx-help__mail {
  color: var(--gold-bright);
}

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

  .page-products .fx-cell--lead {
    grid-column: span 4;
    grid-row: span 2;
  }

  .page-products .fx-cell--a,
  .page-products .fx-cell--b {
    grid-column: span 2;
  }

  .page-products .fx-cell--c,
  .page-products .fx-cell--d {
    grid-column: span 3;
  }
}

@media (min-width: 880px) {
  .page-products .fx-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: end;
  }

  .page-products .fx-bench__grid {
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
  }

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

  .page-products .fx-split--rev > :first-child {
    order: 2;
  }

  .page-products .fx-migrate__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
  }

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

  .page-products .fx-step__summary {
    padding: 18px 22px;
  }

  .page-products .fx-step__body {
    padding: 0 22px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .fx-cell,
  .page-products .fx-index__list a {
    transition: none;
  }

  .page-products .fx-cell:hover,
  .page-products .fx-cell:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <div class="fx-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">品牌首页</a></li>
          <li class="breadcrumb__sep" aria-hidden="true">/</li>
          <li class="breadcrumb__item" aria-current="page">功能中心</li>
        </ol>
      </nav>
      <div class="fx-hero__inner">
        <div class="fx-hero__lead">
          <p class="eyebrow">工具台 · 3.2 版</p>
          <h1 class="fx-hero__title">查号、筛期、换设备，一张工具台配齐</h1>
          <p class="fx-hero__deck">皇冠体彩把查记录会用到的几件事凑在一处：找某一期，交给筛选器；要比一段时间，交给区间对照；换了手机怕入口丢，就照四步搬过去。每一格都能直接点开对应做法。</p>
          <div class="fx-hero__actions">
            <a class="btn btn--gold" href="#migrate">跟着做换机四步</a>
            <a class="btn btn--ghost" href="#tools">看五类工具</a>
          </div>
        </div>
        <figure class="fx-hero__media">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="墨绿桌面上排列着票根、金色刻度尺与档案卡，俯拍局部">
          <figcaption class="fx-hero__caption">工具台 · 从筛期到导出，一条线走完</figcaption>
        </figure>
      </div>
    </div>
  </div>

  <section class="fx-section fx-bench" id="tools" aria-labelledby="tools-title">
    <div class="shell">
      <div class="fx-bench__grid">
        <nav class="fx-index" aria-label="工具索引">
          <p class="fx-index__title">工具索引</p>
          <ul class="fx-index__list">
            <li><a href="#filter"><span>01</span>期号筛选器</a></li>
            <li><a href="#filter"><span>02</span>时间区间对照</a></li>
            <li><a href="#saved"><span>03</span>收藏夹</a></li>
            <li><a href="#migrate"><span>04</span>设备迁移</a></li>
            <li><a href="#export"><span>05</span>数据导出</a></li>
          </ul>
        </nav>
        <div class="fx-bench__main">
          <div class="fx-section__head">
            <p class="eyebrow">总览</p>
            <h2 class="fx-section__title" id="tools-title">五类工具，各管一件事</h2>
            <p class="fx-section__lede">彩票产品线工具使用说明已经更新到 3.2 版，把筛选、对照、收藏、迁移、导出放到同一张台面上。先看哪一格对上你现在的处境，再决定往哪儿点。</p>
          </div>
          <div class="fx-bento">
            <a class="fx-cell fx-cell--lead" href="#filter">
              <span class="fx-cell__top">
                <span class="fx-cell__num">01</span>
                <svg class="fx-cell__icon" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M3 4h18l-7 8v8l-4-2v-6L3 4Z"/></svg>
              </span>
              <h3 class="fx-cell__name">期号筛选器</h3>
              <p class="fx-cell__desc">按彩种、年份、月份或期号四种方式定位，几秒钟就锁定想看的那一条记录，不用一页页往下翻。</p>
              <span class="fx-cell__go">查看做法 →</span>
            </a>
            <a class="fx-cell fx-cell--a" href="#filter">
              <span class="fx-cell__top">
                <span class="fx-cell__num">02</span>
                <svg class="fx-cell__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M4 8h16M4 8l3-3M4 8l3 3M20 16H4m16 0-3-3m3 3-3 3"/></svg>
              </span>
              <h3 class="fx-cell__name">时间区间对照</h3>
              <p class="fx-cell__desc">自然年、自然月、自定义起止期号，三种区间随手切换。</p>
              <span class="fx-cell__go">查看做法 →</span>
            </a>
            <a class="fx-cell fx-cell--b" href="#saved">
              <span class="fx-cell__top">
                <span class="fx-cell__num">03</span>
                <svg class="fx-cell__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4V3Z"/></svg>
              </span>
              <h3 class="fx-cell__name">收藏夹</h3>
              <p class="fx-cell__desc">常看的页面收进常用入口，下次一点就到。</p>
              <span class="fx-cell__go">查看做法 →</span>
            </a>
            <a class="fx-cell fx-cell--c" href="#migrate">
              <span class="fx-cell__top">
                <span class="fx-cell__num">04</span>
                <svg class="fx-cell__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><rect x="3" y="4" width="8" height="16" rx="1"/><rect x="14" y="7" width="7" height="12" rx="1"/><path d="M11 12h3"/></svg>
              </span>
              <h3 class="fx-cell__name">设备迁移</h3>
              <p class="fx-cell__desc">换了苹果设备，四步把账号和收藏一起搬过去，整段约两分钟。</p>
              <span class="fx-cell__go">查看做法 →</span>
            </a>
            <a class="fx-cell fx-cell--d" href="#export">
              <span class="fx-cell__top">
                <span class="fx-cell__num">05</span>
                <svg class="fx-cell__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M4 4h10l3 3v13H4V4Z"/><path d="M9 11v5m0 0-2-2m2 2 2-2"/></svg>
              </span>
              <h3 class="fx-cell__name">数据导出</h3>
              <p class="fx-cell__desc">导出 CSV 之前先看字段，列名和顺序对上了再存。</p>
              <span class="fx-cell__go">查看做法 →</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fx-section fx-filter" id="filter" aria-labelledby="filter-title">
    <div class="shell">
      <div class="fx-split">
        <div>
          <p class="eyebrow">筛期</p>
          <h2 class="fx-section__title" id="filter-title">先选对筛法，再谈对照</h2>
          <p class="fx-prose">站内历年开奖记录覆盖 18 个彩种，累计整理超过 96,000 条期号记录。找一条旧记录，从彩种一路收窄最快；想把一段时间横向比一比，用区间对照更省事。四条筛法按你手上已知的信息挑一条就行。</p>
          <ul class="fx-ways">
            <li>
              <span class="fx-ways__num">A</span>
              <div><strong>按彩种</strong><p>彩种按名称排开，先圈定范围，再决定往下加什么条件。</p></div>
            </li>
            <li>
              <span class="fx-ways__num">B</span>
              <div><strong>按年份</strong><p>心里有大概年份时直接跳过去，省掉中间几步。</p></div>
            </li>
            <li>
              <span class="fx-ways__num">C</span>
              <div><strong>按月份</strong><p>月份粒度适合回看一整段，月末做小结很顺手。</p></div>
            </li>
            <li>
              <span class="fx-ways__num">D</span>
              <div><strong>按期号</strong><p>记得期号时最快，填进去就到达，不必再筛。</p></div>
            </li>
          </ul>
        </div>
        <div>
          <figure class="fx-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="等宽数字卡片与金色筛选标签层叠排列，抽象表达筛期过程" loading="lazy" decoding="async">
            <figcaption>筛选结果以紧凑列表呈现，一屏能多看几期</figcaption>
          </figure>
          <div class="fx-range">
            <p class="fx-range__title">区间对照的三种看法</p>
            <ul>
              <li><span class="meta-mono">自然年</span>按整年查看，适合做年度回顾。</li>
              <li><span class="meta-mono">自然月</span>按月比对，两个月的节奏放在一起就能看出差别。</li>
              <li><span class="meta-mono">自定义</span>指定起止期号，跨月跨年也能连成一段看。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fx-section fx-migrate" id="migrate" aria-labelledby="migrate-title">
    <div class="shell">
      <div class="fx-migrate__head">
        <div>
          <p class="eyebrow">换机</p>
          <h2 class="fx-section__title" id="migrate-title">苹果换设备后重新登录，四步走完</h2>
          <p class="fx-prose">刚拆封的新 iPhone 最容易让人发愁的是常用入口全不见。按顺序做完这四步，整段约两分钟；点开每一步能看到具体要做的事。</p>
        </div>
        <figure class="fx-figure">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="两块深色设备轮廓之间以金色虚线连接，四周散落档案卡" loading="lazy" decoding="async">
          <figcaption>旧机 → 新机，四步接上</figcaption>
        </figure>
      </div>
      <div class="fx-steps">
        <details class="fx-step" open>
          <summary class="fx-step__summary">
            <span class="fx-step__num">步骤 01</span>
            <span class="fx-step__name">确认账号</span>
            <span class="fx-step__time">约 30 秒</span>
          </summary>
          <div class="fx-step__body">
            <ul>
              <li>在新设备上打开登录页，填入一直使用的那个账号。</li>
              <li>记不清当初用哪个邮箱登记，先翻一遍收件箱里的旧邮件。</li>
            </ul>
            <p class="fx-step__tip">这一步只确认身份，不涉及任何付费操作。</p>
          </div>
        </details>
        <details class="fx-step">
          <summary class="fx-step__summary">
            <span class="fx-step__num">步骤 02</span>
            <span class="fx-step__name">验证新设备</span>
            <span class="fx-step__time">约 30 秒</span>
          </summary>
          <div class="fx-step__body">
            <ul>
              <li>按页面提示在新设备上完成验证。</li>
              <li>验证通过后，个人栏目才会在这台设备上显示出来。</li>
            </ul>
            <p class="fx-step__tip">只有换机后的第一次登录需要验证，之后设备会被记住。</p>
          </div>
        </details>
        <details class="fx-step">
          <summary class="fx-step__summary">
            <span class="fx-step__num">步骤 03</span>
            <span class="fx-step__name">同步收藏</span>
            <span class="fx-step__time">约 30 秒</span>
          </summary>
          <div class="fx-step__body">
            <ul>
              <li>进入收藏夹点同步，把旧设备存下的常用入口拉过来。</li>
              <li>逐条看显示状态，没到位的再同步一次即可。</li>
            </ul>
            <p class="fx-step__tip">同步完成后，收藏位里原有的页面会重新出现。</p>
          </div>
        </details>
        <details class="fx-step">
          <summary class="fx-step__summary">
            <span class="fx-step__num">步骤 04</span>
            <span class="fx-step__name">恢复常用入口</span>
            <span class="fx-step__time">约 30 秒</span>
          </summary>
          <div class="fx-step__body">
            <ul>
              <li>把最常打开的几个页面重新放回首页顶部。</li>
              <li>下次打开就是一点即达，不用再翻菜单找。</li>
            </ul>
            <p class="fx-step__tip">中途退出也没关系，回到第二步接着做就能续上。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="fx-section fx-saved" id="saved" aria-labelledby="saved-title">
    <div class="shell">
      <div class="fx-split fx-split--rev">
        <figure class="fx-figure">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="米白资料卡与金色别针、分类标签组合的局部特写" loading="lazy" decoding="async">
          <figcaption>收藏位 · 只留最常打开的那几页</figcaption>
        </figure>
        <div>
          <p class="eyebrow">收藏</p>
          <h2 class="fx-section__title" id="saved-title">常看的页面，攒进常用入口</h2>
          <p class="fx-prose">收藏专区最多保留 12 个收藏项，能放月份归档、工具说明和常见问题三类页面。把用得最勤的那几页放上去，日常访问就不必再从首页一层层点下去。</p>
          <ul class="fx-check">
            <li><a href="/journal/">月份归档</a>：按月往回找新手专题时随手打开。</li>
            <li>工具说明：换设备、导数据的时候当场对照。</li>
            <li>常见问题：操作卡住先翻一条，省掉发邮件的等待。</li>
          </ul>
          <p class="fx-note">位置用满以后，先腾一条不常看的出来，再把新的页面加进去。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fx-section fx-export" id="export" aria-labelledby="export-title">
    <div class="shell">
      <div class="fx-split">
        <div>
          <p class="eyebrow">导出</p>
          <h2 class="fx-section__title" id="export-title">想把数据自己再整理一遍</h2>
          <p class="fx-prose">需要拿到本地做表格或画图，就走数据导出。输出的是 CSV 格式，单次最多 5,000 条期号记录；导出前可以先预览字段，看清楚列名和顺序再落盘。</p>
          <ul class="fx-check fx-check--gold">
            <li>格式为 CSV，常见表格软件都能直接打开。</li>
            <li>单次上限 5,000 条，超过就把区间收窄再导一次。</li>
            <li>预览里能看到列名、排列顺序和示例行，确认无误再保存。</li>
          </ul>
        </div>
        <figure class="fx-figure">
          <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="等宽字符与表格线组成的抽象数据纹理，墨绿底配暖金细线" loading="lazy" decoding="async">
          <figcaption>导出前先看字段，省得回头返工</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="fx-section fx-help" id="help" aria-labelledby="help-title">
    <div class="shell">
      <div class="fx-help__grid">
        <div class="fx-help__card">
          <p class="eyebrow">答疑</p>
          <h2 id="help-title">操作卡住，先看这几条</h2>
          <ul class="fx-help__list">
            <li>筛出来是空的，多半是彩种和年份没对上，先只留一个条件试试。</li>
            <li>新设备上看不到收藏，回到第三步重新同步一次。</li>
            <li>导出中途停下，把区间缩到 5,000 条以内再走一遍。</li>
          </ul>
          <a class="btn btn--ghost" href="/answers/">去答疑中心</a>
        </div>
        <div class="fx-help__card fx-help__card--dark">
          <p class="eyebrow">联系</p>
          <h2>需要人工看一眼</h2>
          <p>把设备型号和卡住的步骤写进邮件，工作日 9:00-18:00 内会有人回你。想电话沟通，就在邮件里留下联系方式与方便接听的时段，我们按你给的时间回拨。</p>
          <p class="fx-help__mail meta-mono">email@firststep-huangguan.com.cn</p>
          <a class="btn btn--gold" href="/reach-us/">走联系入口</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-products {
  --fx-rule: rgba(11, 36, 31, .14);
  --fx-soft: rgba(242, 235, 221, .78);
  --fx-soft-2: rgba(242, 235, 221, .6);
  --fx-gap: clamp(16px, 2.6vw, 28px);
  background: var(--paper);
  color: var(--text);
  overflow-wrap: break-word;
}

.page-products [id] {
  scroll-margin-top: 112px;
}

/* ---------- 首屏 ---------- */
.page-products .fx-hero {
  background: var(--ink);
  color: var(--paper);
  padding-bottom: clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--hairline-gold);
}

.page-products .fx-hero .breadcrumb {
  padding-top: clamp(14px, 2vw, 20px);
}

.page-products .fx-hero .breadcrumb__link,
.page-products .fx-hero .breadcrumb__sep {
  color: var(--gold-bright);
}

.page-products .fx-hero .breadcrumb__item {
  color: var(--fx-soft-2);
}

.page-products .fx-hero__inner {
  display: grid;
  gap: var(--fx-gap);
  padding-top: clamp(18px, 3vw, 34px);
}

.page-products .fx-hero .eyebrow {
  color: var(--gold);
}

.page-products .fx-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: clamp(10px, 1.6vw, 16px) 0 clamp(12px, 2vw, 20px);
}

.page-products .fx-hero__deck {
  max-width: 36em;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  color: var(--fx-soft);
  line-height: 1.85;
}

.page-products .fx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.page-products .fx-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hairline-gold);
}

.page-products .fx-hero__caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--fx-soft-2);
}

/* ---------- 区块基础 ---------- */
.page-products .fx-section {
  padding: clamp(38px, 6vw, 82px) 0;
  border-top: 1px solid var(--fx-rule);
}

.page-products .fx-section__head {
  display: grid;
  gap: 10px;
  max-width: 46em;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-products .fx-section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.24;
  margin: 0;
}

.page-products .fx-section__lede {
  margin: 0;
  max-width: 36em;
  color: var(--muted);
  line-height: 1.8;
}

.page-products .fx-prose {
  max-width: 36em;
  margin: 0 0 18px;
  line-height: 1.85;
}

/* ---------- 工具台面 ---------- */
.page-products .fx-bench {
  background: var(--paper);
}

.page-products .fx-bench__grid {
  display: grid;
  gap: var(--fx-gap);
}

.page-products .fx-bench__main {
  min-width: 0;
}

.page-products .fx-index {
  background: var(--brick);
  color: var(--card);
  padding: 20px 18px;
  border-top: 3px solid var(--gold);
}

.page-products .fx-index__title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 14px;
}

.page-products .fx-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .fx-index__list li {
  border-top: 1px solid rgba(251, 247, 239, .22);
}

.page-products .fx-index__list li:first-child {
  border-top: 0;
}

.page-products .fx-index__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  color: var(--card);
  text-decoration: none;
  font-size: .92rem;
  transition: color 160ms var(--ease), padding-left 160ms var(--ease);
}

.page-products .fx-index__list a:hover,
.page-products .fx-index__list a:focus-visible {
  color: var(--gold-bright);
  padding-left: 4px;
}

.page-products .fx-index__list span {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(251, 247, 239, .62);
}

.page-products .fx-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.page-products .fx-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--card);
  border: 1px solid var(--fx-rule);
  color: var(--text);
  text-decoration: none;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease);
}

.page-products .fx-cell:hover,
.page-products .fx-cell:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
}

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

.page-products .fx-cell__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--brick);
}

.page-products .fx-cell__icon {
  color: var(--ink-2);
}

.page-products .fx-cell__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}

.page-products .fx-cell__desc {
  margin: 0;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .fx-cell__go {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--brick);
}

.page-products .fx-cell--lead {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--hairline-gold);
}

.page-products .fx-cell--lead .fx-cell__name {
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.page-products .fx-cell--lead .fx-cell__desc {
  max-width: 28em;
  color: var(--fx-soft);
}

.page-products .fx-cell--lead .fx-cell__num,
.page-products .fx-cell--lead .fx-cell__go,
.page-products .fx-cell--lead .fx-cell__icon {
  color: var(--gold);
}

.page-products .fx-cell--a {
  background: var(--brick);
  color: var(--card);
  border-color: rgba(201, 162, 94, .4);
}

.page-products .fx-cell--a .fx-cell__desc {
  color: rgba(251, 247, 239, .84);
}

.page-products .fx-cell--a .fx-cell__num,
.page-products .fx-cell--a .fx-cell__go,
.page-products .fx-cell--a .fx-cell__icon {
  color: var(--gold-bright);
}

.page-products .fx-cell--c {
  background: var(--ink-2);
  color: var(--paper);
  border-color: var(--hairline-gold);
}

.page-products .fx-cell--c .fx-cell__desc {
  color: rgba(242, 235, 221, .76);
}

.page-products .fx-cell--c .fx-cell__num,
.page-products .fx-cell--c .fx-cell__go,
.page-products .fx-cell--c .fx-cell__icon {
  color: var(--gold);
}

/* ---------- 双栏与筛期 ---------- */
.page-products .fx-split {
  display: grid;
  gap: clamp(20px, 3vw, 38px);
}

.page-products .fx-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--fx-rule);
  border: 1px solid var(--fx-rule);
}

.page-products .fx-ways li {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
}

.page-products .fx-ways__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--brick);
  padding-top: 3px;
}

.page-products .fx-ways strong {
  display: block;
  font-size: .96rem;
  margin-bottom: 2px;
}

.page-products .fx-ways p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .fx-figure {
  margin: 0 0 clamp(16px, 2.4vw, 24px);
}

.page-products .fx-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--fx-rule);
}

.page-products .fx-figure figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
}

.page-products .fx-range {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(16px, 2.4vw, 22px);
  border-left: 3px solid var(--gold);
}

.page-products .fx-range__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-products .fx-range ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .fx-range li {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--fx-soft);
}

.page-products .fx-range .meta-mono {
  color: var(--gold-bright);
  margin-right: 8px;
}

/* ---------- 四步迁移 ---------- */
.page-products .fx-migrate {
  background: var(--ink-2);
  color: var(--paper);
  border-top: 0;
}

.page-products .fx-migrate .eyebrow {
  color: var(--gold);
}

.page-products .fx-migrate .fx-section__title {
  color: var(--paper);
}

.page-products .fx-migrate .fx-prose {
  color: var(--fx-soft);
}

.page-products .fx-migrate__head {
  display: grid;
  gap: var(--fx-gap);
  margin-bottom: clamp(20px, 3vw, 32px);
}

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

.page-products .fx-migrate .fx-figure img {
  border-color: var(--hairline-gold);
}

.page-products .fx-migrate .fx-figure figcaption {
  color: var(--fx-soft-2);
}

.page-products .fx-steps {
  display: grid;
  gap: 10px;
}

.page-products .fx-step {
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(11, 36, 31, .18);
  border-left: 3px solid var(--brick);
}

.page-products .fx-step[open] {
  border-left-color: var(--gold);
}

.page-products .fx-step__summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

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

.page-products .fx-step__num {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--brick);
  white-space: nowrap;
}

.page-products .fx-step__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
}

.page-products .fx-step__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}

.page-products .fx-step__summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gold);
}

.page-products .fx-step[open] .fx-step__summary::after {
  content: "–";
}

.page-products .fx-step__body {
  padding: 0 18px 20px;
}

.page-products .fx-step__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .fx-step__body li {
  position: relative;
  padding-left: 16px;
  font-size: .92rem;
  line-height: 1.75;
}

.page-products .fx-step__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.page-products .fx-step__tip {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--fx-rule);
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- 收藏 ---------- */
.page-products .fx-saved {
  background: var(--paper);
}

.page-products .fx-check {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .fx-check li {
  position: relative;
  padding-left: 20px;
  font-size: .93rem;
  line-height: 1.75;
}

.page-products .fx-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 9px;
  height: 9px;
  border: 1px solid var(--brick);
  transform: rotate(45deg);
}

.page-products .fx-check--gold li::before {
  border-color: var(--gold);
}

.page-products .fx-check a {
  color: var(--brick);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 83, 63, .45);
}

.page-products .fx-check a:hover,
.page-products .fx-check a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.page-products .fx-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: .85rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 导出 ---------- */
.page-products .fx-export {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}

.page-products .fx-export .eyebrow {
  color: var(--gold);
}

.page-products .fx-export .fx-section__title {
  color: var(--paper);
}

.page-products .fx-export .fx-prose {
  color: var(--fx-soft);
}

.page-products .fx-export .fx-check li {
  color: rgba(242, 235, 221, .88);
}

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

.page-products .fx-export .fx-figure img {
  border-color: var(--hairline-gold);
}

.page-products .fx-export .fx-figure figcaption {
  color: var(--fx-soft-2);
}

/* ---------- 答疑与联系 ---------- */
.page-products .fx-help {
  background: var(--paper);
}

.page-products .fx-help__grid {
  display: grid;
  gap: var(--fx-gap);
}

.page-products .fx-help__card {
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--card);
  border: 1px solid var(--fx-rule);
  border-top: 3px solid var(--brick);
}

.page-products .fx-help__card h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  margin: 8px 0 14px;
}

.page-products .fx-help__card--dark {
  background: var(--ink-2);
  border-color: var(--hairline-gold);
  border-top-color: var(--gold);
  color: var(--paper);
}

.page-products .fx-help__card--dark .eyebrow {
  color: var(--gold);
}

.page-products .fx-help__card--dark p {
  color: var(--fx-soft);
  line-height: 1.8;
}

.page-products .fx-help__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .fx-help__list li {
  position: relative;
  padding-left: 18px;
  font-size: .93rem;
  line-height: 1.75;
}

.page-products .fx-help__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brick);
}

.page-products .fx-help__mail {
  margin: 14px 0 18px;
  color: var(--gold-bright);
  letter-spacing: .02em;
  word-break: break-all;
}

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

  .page-products .fx-cell--lead {
    grid-column: span 4;
    grid-row: span 2;
  }

  .page-products .fx-cell--a,
  .page-products .fx-cell--b {
    grid-column: span 2;
  }

  .page-products .fx-cell--c,
  .page-products .fx-cell--d {
    grid-column: span 3;
  }
}

@media (min-width: 880px) {
  .page-products .fx-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: end;
  }

  .page-products .fx-bench__grid {
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
  }

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

  .page-products .fx-split--rev > :first-child {
    order: 2;
  }

  .page-products .fx-migrate__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
  }

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

  .page-products .fx-step__summary {
    padding: 18px 22px;
  }

  .page-products .fx-step__body {
    padding: 0 22px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .fx-cell,
  .page-products .fx-index__list a {
    transition: none;
  }

  .page-products .fx-cell:hover,
  .page-products .fx-cell:focus-visible {
    transform: none;
  }
}