.page-products {
  --pf-line: var(--hair);
  --pf-soft-line: rgba(21, 23, 19, 0.18);
  --pf-pad: clamp(44px, 7vw, 88px);
  background: var(--porcelain);
  color: var(--ink-black);
  font-family: var(--font-body);
  line-height: 1.75;
  overflow-x: hidden;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.page-products h2 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  line-height: 1.16;
}

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

.page-products .pf-text-link {
  color: var(--ink-green);
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
}

.page-products .pf-section {
  padding: var(--pf-pad) 0;
}

.page-products .pf-sand {
  background: var(--paper-yellow);
}

.page-products .pf-mist {
  background: var(--mist);
}

.page-products .pf-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 48px) 0 clamp(50px, 8vw, 96px);
  background: var(--ink-green);
  color: var(--porcelain);
}

.page-products .pf-hero::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -18%;
  width: 62%;
  height: 148%;
  background: var(--moss);
  opacity: 0.52;
  transform: skewX(-13deg);
  pointer-events: none;
}

.page-products .pf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(90px, 16vw, 220px);
  height: 8px;
  background: var(--sand);
}

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

.page-products .pf-hero .crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(28px, 6vw, 64px);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-products .pf-hero .crumbs__item {
  color: rgba(244, 240, 230, 0.66);
}

.page-products .pf-hero .crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--sand);
}

.page-products .pf-hero .crumbs__link {
  color: var(--paper-yellow);
  text-decoration: none;
}

.page-products .pf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

.page-products .pf-hero .eyebrow {
  color: var(--sand);
}

.page-products .pf-hero h1 {
  max-width: 15ch;
  margin: 14px 0 20px;
  color: var(--porcelain);
  font-size: clamp(2.35rem, 7.4vw, 5.2rem);
  line-height: 1.04;
}

.page-products .pf-hero__lede {
  max-width: 60ch;
  color: rgba(244, 240, 230, 0.84);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.85;
}

.page-products .pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pf-hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--sand);
  border-radius: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.page-products .pf-hero .btn--solid {
  background: var(--sand);
  color: var(--ink-green);
}

.page-products .pf-hero .btn--quiet {
  background: transparent;
  color: var(--porcelain);
}

.page-products .pf-fig {
  margin: 0;
}

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

.page-products .pf-fig__cap {
  margin-top: 8px;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.page-products .pf-hero__fig img {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(200, 164, 92, 0.52);
  filter: saturate(0.88);
}

.page-products .pf-hero__fig .pf-fig__cap {
  color: rgba(244, 240, 230, 0.62);
}

.page-products .pf-head {
  max-width: 860px;
  margin-bottom: clamp(24px, 4vw, 42px);
  padding-top: 18px;
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-head .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--moss);
}

.page-products .pf-head .no {
  color: var(--cinnabar);
}

.page-products .pf-sub {
  max-width: 64ch;
  color: var(--slate);
  font-size: 0.96rem;
}

.page-products .pf-rights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-right {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--pf-line);
}

.page-products .pf-right__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cinnabar);
}

.page-products .pf-right h3 {
  margin: 8px 0 10px;
  font-size: 1.38rem;
  line-height: 1.25;
}

.page-products .pf-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--sand);
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.page-products .pf-right__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 9px;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
}

.page-products .pf-right p:last-child {
  margin-bottom: 0;
  color: var(--slate);
  font-size: 0.93rem;
  line-height: 1.8;
}

.page-products .pf-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pf-panel__fig img {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--pf-line);
}

.page-products .pf-panel__keys {
  margin: 24px 0 0;
}

.page-products .pf-panel__keys > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--pf-soft-line);
}

.page-products .pf-panel__keys dt {
  color: var(--cinnabar);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.page-products .pf-panel__keys dd {
  margin: 0;
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.8;
}

.page-products .pf-panel__note {
  align-self: start;
  padding: 22px 22px 8px;
  border-left: 3px solid var(--sand);
  background: var(--mist);
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.85;
}

.page-products .pf-panel__note-title {
  margin-bottom: 10px;
  color: var(--ink-green);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 400;
}

.page-products .pf-compact {
  padding: var(--pf-pad) 0;
  background: var(--ink-green);
  color: var(--porcelain);
}

.page-products .pf-compact .pf-head {
  border-top-color: rgba(244, 240, 230, 0.34);
}

.page-products .pf-compact .pf-head .eyebrow {
  color: var(--sand);
}

.page-products .pf-compact h2 {
  color: var(--porcelain);
}

.page-products .pf-compact p {
  max-width: 64ch;
  color: rgba(244, 240, 230, 0.82);
}

.page-products .pf-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 28px 0 24px;
}

.page-products .pf-frame-desktop {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid rgba(244, 240, 230, 0.44);
}

.page-products .pf-frame-desktop__bar {
  display: block;
  width: 42%;
  height: 8px;
  margin-bottom: 12px;
  background: var(--sand);
}

.page-products .pf-frame-phone {
  width: 108px;
  padding: 9px 8px;
  border: 1px solid var(--sand);
}

.page-products .pf-frame-phone__bar {
  display: block;
  width: 58%;
  height: 6px;
  margin-bottom: 9px;
  background: var(--cinnabar);
}

.page-products .pf-bar {
  display: block;
  width: 100%;
  height: 4px;
  margin-bottom: 7px;
  background: rgba(244, 240, 230, 0.3);
}

.page-products .pf-bar:nth-child(3n) {
  width: 78%;
}

.page-products .pf-bar:nth-child(4n) {
  width: 62%;
}

.page-products .pf-frame-phone .pf-bar {
  height: 3px;
  margin-bottom: 5px;
}

.page-products .pf-compact__fig {
  grid-column: 1 / -1;
}

.page-products .pf-compact__fig img {
  max-width: 320px;
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(244, 240, 230, 0.34);
}

.page-products .pf-compact__fig .pf-fig__cap {
  color: rgba(244, 240, 230, 0.6);
}

.page-products .pf-compact__steps {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: pfstep;
}

.page-products .pf-compact__steps li {
  position: relative;
  padding-left: 36px;
  color: rgba(244, 240, 230, 0.86);
  font-size: 0.94rem;
  counter-increment: pfstep;
}

.page-products .pf-compact__steps li::before {
  content: counter(pfstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-products .pf-compact .btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1px solid var(--sand);
  border-radius: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.page-products .pf-compact .btn--solid {
  background: var(--sand);
  color: var(--ink-green);
}

.page-products .pf-favorites {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pf-return {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pf-return li {
  padding: 14px 0;
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-return a {
  color: var(--ink-green);
  font-family: var(--font-display);
  font-size: 1.18rem;
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
}

.page-products .pf-return span {
  display: block;
  margin-top: 4px;
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.8;
}

.page-products .pf-favorites__tip {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--cinnabar);
  color: var(--slate);
  font-size: 0.9rem;
}

.page-products .pf-favorites__fig img {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--pf-line);
}

.page-products .pf-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pf-steps {
  display: grid;
  gap: 0;
}

.page-products .pf-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--pf-soft-line);
}

.page-products .pf-step__no {
  color: var(--cinnabar);
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 0.86;
}

.page-products .pf-step h3 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  line-height: 1.3;
}

.page-products .pf-step p {
  margin: 0;
  color: var(--slate);
  font-size: 0.93rem;
  line-height: 1.85;
}

.page-products .pf-setup__fig img {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--pf-line);
}

.page-products .pf-scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-scene {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--pf-line);
}

.page-products .pf-scene__no {
  color: var(--cinnabar);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

.page-products .pf-scene h3 {
  margin: 6px 0 6px;
  font-size: 1.14rem;
}

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

.page-products .pf-status {
  background: var(--mist);
}

.page-products .pf-status__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-products .pf-timeline {
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  border-left: 1px solid var(--pf-line);
}

.page-products .pf-timeline li {
  position: relative;
  padding-bottom: 22px;
}

.page-products .pf-timeline li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--sand);
  border: 1px solid var(--ink-green);
}

.page-products .pf-timeline li:last-child {
  padding-bottom: 0;
}

.page-products .pf-timeline__year {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.page-products .pf-timeline p {
  margin: 0;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.8;
}

.page-products .pf-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-stat {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--pf-line);
}

.page-products .pf-stat__num {
  display: block;
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1;
}

.page-products .pf-stat__label {
  display: block;
  margin-top: 8px;
  color: var(--slate);
  font-size: 0.8rem;
  line-height: 1.65;
}

.page-products .pf-status__note {
  margin: 22px 0 0;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.85;
}

.page-products .pf-end {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .pf-end .btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1px solid var(--ink-green);
  border-radius: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.page-products .pf-end .btn--solid {
  background: var(--ink-green);
  color: var(--porcelain);
}

.page-products .pf-end .btn--quiet {
  background: transparent;
  color: var(--ink-green);
}

@media (min-width: 640px) {
  .page-products .pf-rights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }

  .page-products .pf-scenes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }

  .page-products .pf-compare {
    grid-template-columns: minmax(0, 1fr) 132px;
  }

  .page-products .pf-frame-desktop {
    grid-column: auto;
  }

  .page-products .pf-compact__fig {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .page-products .pf-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.78fr);
    align-items: end;
    gap: 48px;
  }

  .page-products .pf-hero__fig {
    margin-bottom: 8px;
  }

  .page-products .pf-panel {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .pf-panel__note {
    margin-top: 76px;
  }

  .page-products .pf-favorites {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .pf-setup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .pf-setup__fig {
    margin-top: 22px;
  }

  .page-products .pf-status__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 48px;
  }

  .page-products .pf-compare {
    grid-template-columns: minmax(0, 1fr) 132px minmax(0, 260px);
    align-items: end;
  }

  .page-products .pf-compact__fig {
    grid-column: auto;
  }
}

@media (min-width: 1080px) {
  .page-products .pf-rights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pf-line);
  }

  .page-products .pf-right {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .page-products .pf-scenes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pf-line);
  }

  .page-products .pf-scene {
    border-bottom: 0;
  }
}


<main id="main-content" class="page-products">
  <section class="pf-hero">
    <div class="shell">
      <nav class="crumbs" aria-label="面包屑">
        <ol class="crumbs__list">
          <li class="crumbs__item"><a class="crumbs__link" href="/">首页</a></li>
          <li class="crumbs__item"><span aria-current="page">权益与工具</span></li>
        </ol>
      </nav>
      <div class="pf-hero__grid">
        <div class="pf-hero__copy">
          <p class="eyebrow"><span class="no">01</span> 权益与工具</p>
          <h1>把会员权益，配成你顺手的四件事</h1>
          <p class="lede pf-hero__lede">百利宫新把内容查阅、服务预约、收藏同步和适配设置收进同一块会员权益面板。先看清哪一项适合自己，再花几分钟完成设置，之后在手机、窄屏窗口和桌面上都能接着用。</p>
          <div class="pf-hero__actions">
            <a class="btn btn--solid" href="#rights">查看四类权益</a>
            <a class="btn btn--quiet" href="#setup">三步完成配置</a>
          </div>
        </div>
        <figure class="pf-fig pf-hero__fig">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="深墨绿面板开关与暖金刻度的特写，俯拍构图，标签以抽象几何块呈现">
          <figcaption class="pf-fig__cap">面板开关与分区：每项权益都能在面板里找到对应入口</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pf-section" id="rights">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">02</span> 权益总览</p>
        <h2>四项权益，各有入口和适用对象</h2>
        <p class="pf-sub">注册后就能查看内容；预约和收藏会跟着你的会员状态出现。每项权益都写明适用对象、从哪里进入，以及能帮你处理什么。</p>
      </header>
      <div class="pf-rights">
        <article class="pf-right">
          <span class="pf-right__no">01</span>
          <h3>内容查阅</h3>
          <p class="pf-right__meta"><span class="pf-tag">全部注册会员</span> 入口：面板首屏「内容查阅」</p>
          <p>按栏目浏览服务说明、版本记录和品牌专栏，长文可调整字号与正文栏宽。</p>
        </article>
        <article class="pf-right">
          <span class="pf-right__no">02</span>
          <h3>服务预约</h3>
          <p class="pf-right__meta"><span class="pf-tag">已开通预约权限</span> 入口：面板「服务预约」</p>
          <p>选择服务类型与方便时段，提交后回到个人入口查看办理进度。</p>
        </article>
        <article class="pf-right">
          <span class="pf-right__no">03</span>
          <h3>收藏同步</h3>
          <p class="pf-right__meta"><span class="pf-tag">已登录会员</span> 入口：页面标题旁的收藏按钮</p>
          <p>把权益面板、服务说明和帮助条目收进个人列表，换设备后仍能接着看。</p>
        </article>
        <article class="pf-right">
          <span class="pf-right__no">04</span>
          <h3>适配设置</h3>
          <p class="pf-right__meta"><span class="pf-tag">全部注册会员</span> 入口：命令栏「小屏对照」</p>
          <p>收窄正文栏宽，预览手机与窄屏窗口下的栏目顺序，不必左右拖动。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="pf-section pf-sand" id="panel">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">03</span> 面板导览</p>
        <h2>短标签说明是什么，状态提示说明能不能用</h2>
        <p class="pf-sub">面板里的每一项权益都按同一顺序展开：短标签、适用等级、使用入口、状态提示。老用户不必重新熟悉位置，顺着原来的结构就能找到自己的那一项。</p>
      </header>
      <div class="pf-panel">
        <div class="pf-panel__body">
          <figure class="pf-fig pf-panel__fig">
            <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" loading="lazy" decoding="async" alt="精密开关与细线网格的微距局部，暖砂金触点嵌在深色面板上，画面不出现文字">
            <figcaption class="pf-fig__cap">面板局部：短标签、等级与入口在同一列对齐</figcaption>
          </figure>
          <dl class="pf-panel__keys">
            <div>
              <dt>短标签</dt>
              <dd>用两到四个字说明这项权益处理什么，例如「内容查阅」「服务预约」。</dd>
            </div>
            <div>
              <dt>等级标识</dt>
              <dd>显示当前账号可用的范围。未登录时，公开说明仍可阅读，登录后入口会按你的会员状态排列。</dd>
            </div>
            <div>
              <dt>使用入口</dt>
              <dd>直接写在标签下方，点进去就是对应页面，不需要在多个栏目之间来回查找。</dd>
            </div>
            <div>
              <dt>状态提示</dt>
              <dd>朱砂红点表示你正在查看的条目；灰色细线表示该项暂时没有可用入口，并附一行原因说明。</dd>
            </div>
          </dl>
        </div>
        <aside class="pf-panel__note">
          <p class="pf-panel__note-title">会员等级怎么理解</p>
          <p>等级决定哪些入口对当前账号显示，不改变你已经能阅读的内容说明。服务预约需要先开通对应权限；收藏同步与适配设置对所有注册会员开放。登录后，面板会把可用项目排在前面，方便你先处理眼前的事。</p>
          <p>如果你的入口显示与预期不同，可以到<a class="pf-text-link" href="/faqs/">帮助中心</a>查看登录状态与会员状态的说明，或直接写信给客服。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="pf-compact" id="compact">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">04</span> 小屏对照</p>
        <h2>百利宫新页面小屏对照，让手机上的阅读顺序不变</h2>
        <p>2023 年完成的适配 2.0 覆盖主流手机屏幕宽度和横竖屏切换。开启后正文栏宽收窄，栏目标题、章节编号与正文层级保持原有先后，读长文时不必反复放大缩小。</p>
      </header>
      <div class="pf-compare" aria-hidden="true">
        <div class="pf-frame-desktop">
          <span class="pf-frame-desktop__bar"></span>
          <i class="pf-bar"></i><i class="pf-bar"></i><i class="pf-bar"></i><i class="pf-bar"></i><i class="pf-bar"></i>
        </div>
        <div class="pf-frame-phone">
          <span class="pf-frame-phone__bar"></span>
          <i class="pf-bar"></i><i class="pf-bar"></i><i class="pf-bar"></i><i class="pf-bar"></i>
        </div>
        <figure class="pf-fig pf-compact__fig">
          <img src="{zhanqunpic:h:1400w:1000}" width="1000" height="1400" loading="lazy" decoding="async" alt="手机窄屏线框与桌面宽屏线框的几何拼贴，米白底配深墨绿描边，版面元素抽象化">
          <figcaption class="pf-fig__cap">窄栏与宽栏并列时，标题和编号仍按同一顺序往下走</figcaption>
        </figure>
      </div>
      <ol class="pf-compact__steps">
        <li>在命令栏点「小屏对照」，正文栏宽会收窄到接近手机预览的宽度。</li>
        <li>横竖屏切换时，栏目顺序和字体层级保持一致，返回宽栏再点一次即可。</li>
        <li>手机浏览器直接打开页面也会按窄屏排版呈现，不需要额外安装应用。</li>
      </ol>
      <button class="btn btn--solid pf-compact__btn" type="button" data-compact-toggle>预览窄栏排版</button>
    </div>
  </section>

  <section class="pf-section" id="favorites">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">05</span> 收藏同步</p>
        <h2>收藏一次，从个人入口回到三个常用位置</h2>
        <p class="pf-sub">登录后收藏权益面板、服务说明或帮助条目，会同步到个人入口。换手机、换浏览器后重新登录，收藏列表还在原处，不用从头翻找。</p>
      </header>
      <div class="pf-favorites">
        <div class="pf-favorites__body">
          <ul class="pf-return">
            <li>
              <a href="/apps/">回到权益与工具</a>
              <span>查看四类权益、当前可用的入口和小屏对照开关。</span>
            </li>
            <li>
              <a href="/company/">回到品牌档案</a>
              <span>了解内地服务说明、服务协同网络和团队分工。</span>
            </li>
            <li>
              <a href="/faqs/">回到帮助中心</a>
              <span>查登录、收藏、窄屏浏览和联系支持的常见问题。</span>
            </li>
          </ul>
          <p class="pf-favorites__tip">收藏动作只影响你自己的列表。取消收藏后，对应条目会从个人入口移除，已阅读过的说明仍可在原栏目找到。</p>
        </div>
        <figure class="pf-fig pf-favorites__fig">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="桌面上的纸质索引标签与细绳排列，几何裁切构图，暖砂金与深墨绿形成低饱和对比">
          <figcaption class="pf-fig__cap">索引标签：收藏后的条目会按栏目归到个人入口</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pf-section pf-mist" id="setup">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">06</span> 三步配置</p>
        <h2>看权益、开对照、收进收藏</h2>
        <p class="pf-sub">第一次使用大约需要几分钟。按顺序做完这三步，之后每次回来都能从个人入口直接进入常用页面。</p>
      </header>
      <div class="pf-setup">
        <div class="pf-steps">
          <article class="pf-step">
            <span class="pf-step__no">01</span>
            <div>
              <h3>看四类权益</h3>
              <p>在权益与工具页从上往下读一遍，记下你需要的那一项，以及对应的适用等级和入口位置。</p>
            </div>
          </article>
          <article class="pf-step">
            <span class="pf-step__no">02</span>
            <div>
              <h3>开小屏对照</h3>
              <p>点命令栏的「小屏对照」，或直接用手机打开页面。窄栏下标题、编号和正文保持同一顺序。</p>
            </div>
          </article>
          <article class="pf-step">
            <span class="pf-step__no">03</span>
            <div>
              <h3>收藏常用页面</h3>
              <p>登录后点标题旁的收藏按钮，把权益面板、服务说明或帮助条目收进个人入口，下次直接返回。</p>
            </div>
          </article>
        </div>
        <figure class="pf-fig pf-setup__fig">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="手部将纸质标签卡插入收藏夹的动作，不露脸，瓷白桌面与深墨绿夹册形成几何分割">
          <figcaption class="pf-fig__cap">第三步完成后，常用页面会集中出现在个人入口</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pf-section" id="scenes">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">07</span> 适用场景</p>
        <h2>遇到这四种情况，可以直接照着做</h2>
      </header>
      <div class="pf-scenes">
        <article class="pf-scene">
          <span class="pf-scene__no">场景 01</span>
          <h3>第一次访问</h3>
          <p>先看四项权益的适用对象，再决定是否登录。建议动作：读一遍权益总览，点开一个与当前需求最接近的入口。</p>
        </article>
        <article class="pf-scene">
          <span class="pf-scene__no">场景 02</span>
          <h3>换了新手机</h3>
          <p>登录同一账号后收藏会自动出现。建议动作：先开小屏对照，再从个人入口打开收藏列表。</p>
        </article>
        <article class="pf-scene">
          <span class="pf-scene__no">场景 03</span>
          <h3>确认权益变化</h3>
          <p>面板会按当前会员状态显示可用入口。建议动作：对照短标签和等级标识，确认入口是否出现在预期位置。</p>
        </article>
        <article class="pf-scene">
          <span class="pf-scene__no">场景 04</span>
          <h3>给家人说明</h3>
          <p>把常看的页面收藏后分享操作路径更容易讲清。建议动作：收藏权益面板与帮助中心，再按三步顺序演示一次。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="pf-section pf-status" id="status">
    <div class="shell">
      <header class="pf-head">
        <p class="eyebrow"><span class="no">08</span> 版本与可用性</p>
        <h2>权益面板和小屏适配是怎么走到今天的</h2>
        <p class="pf-sub">从品牌资讯查询到集中式权益面板，每一次调整都围绕同一件事：让常用入口更短，让说明更清楚。</p>
      </header>
      <div class="pf-status__grid">
        <ol class="pf-timeline">
          <li>
            <span class="pf-timeline__year">2017</span>
            <p>品牌数字服务面向内地用户开放，早期以品牌资讯和服务查询为主。</p>
          </li>
          <li>
            <span class="pf-timeline__year">2021</span>
            <p>会员权益面板 1.0 上线，把权益说明、使用步骤与常见问题集中到同一栏目。</p>
          </li>
          <li>
            <span class="pf-timeline__year">2023</span>
            <p>小屏对照适配 2.0 完成，覆盖主流手机屏幕宽度和横竖屏切换。</p>
          </li>
          <li>
            <span class="pf-timeline__year">2024</span>
            <p>内地服务说明栏目重构，跨区域差异与办理步骤分开呈现。</p>
          </li>
          <li>
            <span class="pf-timeline__year">2025</span>
            <p>服务体验改进计划包含权益面板搜索、服务说明打印版与无障碍字号切换，具体上线时间以版本说明为准。</p>
          </li>
        </ol>
        <div class="pf-status__side">
          <div class="pf-stats">
            <div class="pf-stat">
              <span class="pf-stat__num">46</span>
              <span class="pf-stat__label">篇服务说明与帮助条目，随版本补充</span>
            </div>
            <div class="pf-stat">
              <span class="pf-stat__num">32</span>
              <span class="pf-stat__label">人客服团队，分内容运营、会员支持与技术保障</span>
            </div>
            <div class="pf-stat">
              <span class="pf-stat__num">14</span>
              <span class="pf-stat__label">家内容、支付与技术服务伙伴，接口按季度巡检</span>
            </div>
            <div class="pf-stat">
              <span class="pf-stat__num">2</span>
              <span class="pf-stat__label">小时内平均首次响应，工作日 9:00—18:00</span>
            </div>
          </div>
          <p class="pf-status__note">权益面板、收藏同步和小屏对照在使用中遇到问题时，可以先查帮助中心；需要人工协助时，工作日 9:00—18:00 可通过在线与邮件获得支持。</p>
          <div class="pf-end">
            <a class="btn btn--solid" href="/contact/">联系客服</a>
            <a class="btn btn--quiet" href="/topics/">读版本说明</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pf-line: var(--hair);
  --pf-soft-line: rgba(21, 23, 19, 0.18);
  --pf-pad: clamp(44px, 7vw, 88px);
  background: var(--porcelain);
  color: var(--ink-black);
  font-family: var(--font-body);
  line-height: 1.75;
  overflow-x: hidden;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.page-products h2 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  line-height: 1.16;
}

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

.page-products .pf-text-link {
  color: var(--ink-green);
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
}

.page-products .pf-section {
  padding: var(--pf-pad) 0;
}

.page-products .pf-sand {
  background: var(--paper-yellow);
}

.page-products .pf-mist {
  background: var(--mist);
}

.page-products .pf-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 48px) 0 clamp(50px, 8vw, 96px);
  background: var(--ink-green);
  color: var(--porcelain);
}

.page-products .pf-hero::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -18%;
  width: 62%;
  height: 148%;
  background: var(--moss);
  opacity: 0.52;
  transform: skewX(-13deg);
  pointer-events: none;
}

.page-products .pf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(90px, 16vw, 220px);
  height: 8px;
  background: var(--sand);
}

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

.page-products .pf-hero .crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(28px, 6vw, 64px);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-products .pf-hero .crumbs__item {
  color: rgba(244, 240, 230, 0.66);
}

.page-products .pf-hero .crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--sand);
}

.page-products .pf-hero .crumbs__link {
  color: var(--paper-yellow);
  text-decoration: none;
}

.page-products .pf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

.page-products .pf-hero .eyebrow {
  color: var(--sand);
}

.page-products .pf-hero h1 {
  max-width: 15ch;
  margin: 14px 0 20px;
  color: var(--porcelain);
  font-size: clamp(2.35rem, 7.4vw, 5.2rem);
  line-height: 1.04;
}

.page-products .pf-hero__lede {
  max-width: 60ch;
  color: rgba(244, 240, 230, 0.84);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.85;
}

.page-products .pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pf-hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--sand);
  border-radius: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.page-products .pf-hero .btn--solid {
  background: var(--sand);
  color: var(--ink-green);
}

.page-products .pf-hero .btn--quiet {
  background: transparent;
  color: var(--porcelain);
}

.page-products .pf-fig {
  margin: 0;
}

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

.page-products .pf-fig__cap {
  margin-top: 8px;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.page-products .pf-hero__fig img {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(200, 164, 92, 0.52);
  filter: saturate(0.88);
}

.page-products .pf-hero__fig .pf-fig__cap {
  color: rgba(244, 240, 230, 0.62);
}

.page-products .pf-head {
  max-width: 860px;
  margin-bottom: clamp(24px, 4vw, 42px);
  padding-top: 18px;
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-head .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--moss);
}

.page-products .pf-head .no {
  color: var(--cinnabar);
}

.page-products .pf-sub {
  max-width: 64ch;
  color: var(--slate);
  font-size: 0.96rem;
}

.page-products .pf-rights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-right {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--pf-line);
}

.page-products .pf-right__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cinnabar);
}

.page-products .pf-right h3 {
  margin: 8px 0 10px;
  font-size: 1.38rem;
  line-height: 1.25;
}

.page-products .pf-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--sand);
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.page-products .pf-right__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 9px;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
}

.page-products .pf-right p:last-child {
  margin-bottom: 0;
  color: var(--slate);
  font-size: 0.93rem;
  line-height: 1.8;
}

.page-products .pf-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pf-panel__fig img {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--pf-line);
}

.page-products .pf-panel__keys {
  margin: 24px 0 0;
}

.page-products .pf-panel__keys > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--pf-soft-line);
}

.page-products .pf-panel__keys dt {
  color: var(--cinnabar);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.page-products .pf-panel__keys dd {
  margin: 0;
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.8;
}

.page-products .pf-panel__note {
  align-self: start;
  padding: 22px 22px 8px;
  border-left: 3px solid var(--sand);
  background: var(--mist);
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.85;
}

.page-products .pf-panel__note-title {
  margin-bottom: 10px;
  color: var(--ink-green);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 400;
}

.page-products .pf-compact {
  padding: var(--pf-pad) 0;
  background: var(--ink-green);
  color: var(--porcelain);
}

.page-products .pf-compact .pf-head {
  border-top-color: rgba(244, 240, 230, 0.34);
}

.page-products .pf-compact .pf-head .eyebrow {
  color: var(--sand);
}

.page-products .pf-compact h2 {
  color: var(--porcelain);
}

.page-products .pf-compact p {
  max-width: 64ch;
  color: rgba(244, 240, 230, 0.82);
}

.page-products .pf-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 28px 0 24px;
}

.page-products .pf-frame-desktop {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid rgba(244, 240, 230, 0.44);
}

.page-products .pf-frame-desktop__bar {
  display: block;
  width: 42%;
  height: 8px;
  margin-bottom: 12px;
  background: var(--sand);
}

.page-products .pf-frame-phone {
  width: 108px;
  padding: 9px 8px;
  border: 1px solid var(--sand);
}

.page-products .pf-frame-phone__bar {
  display: block;
  width: 58%;
  height: 6px;
  margin-bottom: 9px;
  background: var(--cinnabar);
}

.page-products .pf-bar {
  display: block;
  width: 100%;
  height: 4px;
  margin-bottom: 7px;
  background: rgba(244, 240, 230, 0.3);
}

.page-products .pf-bar:nth-child(3n) {
  width: 78%;
}

.page-products .pf-bar:nth-child(4n) {
  width: 62%;
}

.page-products .pf-frame-phone .pf-bar {
  height: 3px;
  margin-bottom: 5px;
}

.page-products .pf-compact__fig {
  grid-column: 1 / -1;
}

.page-products .pf-compact__fig img {
  max-width: 320px;
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(244, 240, 230, 0.34);
}

.page-products .pf-compact__fig .pf-fig__cap {
  color: rgba(244, 240, 230, 0.6);
}

.page-products .pf-compact__steps {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: pfstep;
}

.page-products .pf-compact__steps li {
  position: relative;
  padding-left: 36px;
  color: rgba(244, 240, 230, 0.86);
  font-size: 0.94rem;
  counter-increment: pfstep;
}

.page-products .pf-compact__steps li::before {
  content: counter(pfstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-products .pf-compact .btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1px solid var(--sand);
  border-radius: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.page-products .pf-compact .btn--solid {
  background: var(--sand);
  color: var(--ink-green);
}

.page-products .pf-favorites {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pf-return {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pf-return li {
  padding: 14px 0;
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-return a {
  color: var(--ink-green);
  font-family: var(--font-display);
  font-size: 1.18rem;
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
}

.page-products .pf-return span {
  display: block;
  margin-top: 4px;
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.8;
}

.page-products .pf-favorites__tip {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--cinnabar);
  color: var(--slate);
  font-size: 0.9rem;
}

.page-products .pf-favorites__fig img {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--pf-line);
}

.page-products .pf-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pf-steps {
  display: grid;
  gap: 0;
}

.page-products .pf-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--pf-soft-line);
}

.page-products .pf-step__no {
  color: var(--cinnabar);
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 0.86;
}

.page-products .pf-step h3 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  line-height: 1.3;
}

.page-products .pf-step p {
  margin: 0;
  color: var(--slate);
  font-size: 0.93rem;
  line-height: 1.85;
}

.page-products .pf-setup__fig img {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--pf-line);
}

.page-products .pf-scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-scene {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--pf-line);
}

.page-products .pf-scene__no {
  color: var(--cinnabar);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

.page-products .pf-scene h3 {
  margin: 6px 0 6px;
  font-size: 1.14rem;
}

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

.page-products .pf-status {
  background: var(--mist);
}

.page-products .pf-status__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-products .pf-timeline {
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  border-left: 1px solid var(--pf-line);
}

.page-products .pf-timeline li {
  position: relative;
  padding-bottom: 22px;
}

.page-products .pf-timeline li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--sand);
  border: 1px solid var(--ink-green);
}

.page-products .pf-timeline li:last-child {
  padding-bottom: 0;
}

.page-products .pf-timeline__year {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.page-products .pf-timeline p {
  margin: 0;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.8;
}

.page-products .pf-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--pf-line);
}

.page-products .pf-stat {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--pf-line);
}

.page-products .pf-stat__num {
  display: block;
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1;
}

.page-products .pf-stat__label {
  display: block;
  margin-top: 8px;
  color: var(--slate);
  font-size: 0.8rem;
  line-height: 1.65;
}

.page-products .pf-status__note {
  margin: 22px 0 0;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.85;
}

.page-products .pf-end {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .pf-end .btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1px solid var(--ink-green);
  border-radius: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.page-products .pf-end .btn--solid {
  background: var(--ink-green);
  color: var(--porcelain);
}

.page-products .pf-end .btn--quiet {
  background: transparent;
  color: var(--ink-green);
}

@media (min-width: 640px) {
  .page-products .pf-rights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }

  .page-products .pf-scenes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }

  .page-products .pf-compare {
    grid-template-columns: minmax(0, 1fr) 132px;
  }

  .page-products .pf-frame-desktop {
    grid-column: auto;
  }

  .page-products .pf-compact__fig {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .page-products .pf-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.78fr);
    align-items: end;
    gap: 48px;
  }

  .page-products .pf-hero__fig {
    margin-bottom: 8px;
  }

  .page-products .pf-panel {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .pf-panel__note {
    margin-top: 76px;
  }

  .page-products .pf-favorites {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .pf-setup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .pf-setup__fig {
    margin-top: 22px;
  }

  .page-products .pf-status__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 48px;
  }

  .page-products .pf-compare {
    grid-template-columns: minmax(0, 1fr) 132px minmax(0, 260px);
    align-items: end;
  }

  .page-products .pf-compact__fig {
    grid-column: auto;
  }
}

@media (min-width: 1080px) {
  .page-products .pf-rights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pf-line);
  }

  .page-products .pf-right {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .page-products .pf-scenes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pf-line);
  }

  .page-products .pf-scene {
    border-bottom: 0;
  }
}