/* ===== 联系品牌 · 页面专属样式（作用域：.page-contact） ===== */
.page-contact {
  --contact-hair: 1px solid rgba(31, 84, 128, .55);
  --contact-hair-soft: 1px solid rgba(169, 196, 217, .18);
  --contact-ink-soft: rgba(26, 26, 26, .72);
}

/* ---------- 展签式首屏 ---------- */
.page-contact .contact-lead {
  padding-block: 64px 32px;
}

.page-contact .contact-lead__body {
  max-width: 760px;
  margin-top: 32px;
}

.page-contact .contact-lead__annot {
  margin: 0 0 20px;
}

.page-contact .contact-lead__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin: 0 0 24px;
  color: var(--warm);
}

.page-contact .contact-lead__lede {
  margin: 0 0 34px;
  max-width: 38em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--mist);
}

.page-contact .contact-lead__lede b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--warm);
  word-break: break-all;
}

.page-contact .contact-lead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 通用区块标题（页面内复用） ---------- */
.page-contact .contact-block__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: var(--warm);
}

.page-contact .contact-block__desc {
  margin: 0;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 联系渠道说明牌 ---------- */
.page-contact .contact-channels {
  padding-block: 48px 72px;
}

.page-contact .contact-channels__grid {
  display: grid;
  gap: 36px;
}

.page-contact .contact-channels__media {
  margin: 0;
}

.page-contact .contact-channels__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.page-contact .contact-channels__caption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--mist);
  opacity: .8;
}

.page-contact .channel-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-bottom: var(--contact-hair-soft);
}

.page-contact .channel-row {
  display: grid;
  gap: 8px;
  padding: 22px 0;
  border-top: var(--contact-hair-soft);
}

.page-contact .channel-row__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-contact .channel-row__body {
  min-width: 0;
}

.page-contact .channel-row__val {
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  color: var(--warm);
  word-break: break-all;
}

.page-contact .channel-row__desc {
  margin: 8px 0 0;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 响应时间刻度条 ---------- */
.page-contact .contact-response {
  background: var(--warm);
  color: var(--black);
}

.page-contact .contact-response .contact-block__title {
  color: var(--ink-deep);
}

.page-contact .contact-response .contact-block__desc {
  color: var(--contact-ink-soft);
}

.page-contact .scale {
  margin-top: 40px;
}

.page-contact .scale__track {
  position: relative;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--celadon) 0%, var(--amber) 100%);
  overflow: hidden;
}

.page-contact .scale__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(247, 244, 239, .5) 0 1px, transparent 1px);
  background-size: 8.3333% 100%;
}

.page-contact .scale__labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(26, 26, 26, .6);
}

.page-contact .scale__labels li {
  white-space: nowrap;
}

.page-contact .scale__labels b {
  font-weight: 400;
  color: var(--ink-deep);
}

/* ---------- 自助查询四步 ---------- */
.page-contact .contact-self {
  padding-block: 72px;
}

.page-contact .contact-self__grid {
  display: grid;
  gap: 32px;
}

.page-contact .contact-self__annot {
  margin: 0 0 18px;
}

.page-contact .self-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-contact .self-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px 22px;
  padding: 24px;
  background: var(--ink-archive);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--step) var(--ease), transform var(--step) var(--ease);
}

.page-contact .self-step + .self-step {
  margin-top: 12px;
}

.page-contact .self-step:hover,
.page-contact .self-step:focus-within {
  border-left-color: var(--amber);
  transform: translateX(4px);
}

.page-contact .self-step__num {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
  color: var(--amber);
}

.page-contact .self-step__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--warm);
}

.page-contact .self-step__desc {
  margin: 0;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .contact-self__figure {
  margin: 0;
}

.page-contact .contact-self__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.page-contact .contact-self__figure .media-caption {
  margin-top: 14px;
}

/* ---------- 常见联系场景 ---------- */
.page-contact .contact-scenes {
  padding-block: 64px 88px;
}

.page-contact .scene-grid {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-contact .scene-card {
  display: flex;
}

.page-contact .scene-card a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 26px 24px 24px;
  background: var(--ink-archive);
  border: 1px solid rgba(31, 84, 128, .55);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform var(--step) var(--ease), border-color var(--step) var(--ease),
              box-shadow var(--step) var(--ease);
}

.page-contact .scene-card a:hover,
.page-contact .scene-card a:focus-visible {
  transform: translateY(-4px);
  border-color: var(--celadon);
  box-shadow: var(--shadow);
}

.page-contact .scene-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--celadon);
  border: 1px solid rgba(58, 155, 140, .5);
  border-radius: 999px;
  padding: 4px 12px;
}

.page-contact .scene-card__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.45;
  margin: 0;
  color: var(--warm);
}

.page-contact .scene-card__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .scene-card__more {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--amber);
}

/* ---------- 备案与联系说明 ---------- */
.page-contact .contact-record {
  padding-block: 0 96px;
}

.page-contact .record-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  padding: 24px 0;
  border-top: var(--contact-hair);
  border-bottom: var(--contact-hair);
}

.page-contact .record-bar__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-contact .record-bar__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mist);
}

.page-contact .record-bar__val {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--warm);
}

.page-contact .record-note {
  margin: 22px 0 0;
  max-width: 38em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-contact .channel-row {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

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

@media (min-width: 960px) {
  .page-contact .contact-channels__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 56px;
    align-items: start;
  }

  .page-contact .contact-self__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }

  .page-contact .contact-self__head {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .page-contact .scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .page-contact .scale__labels {
    font-size: 10px;
    letter-spacing: 0;
  }

  .page-contact .scale__labels li:nth-child(2),
  .page-contact .scale__labels li:nth-child(4) {
    display: none;
  }

  .page-contact .self-step {
    padding: 20px 18px;
    gap: 14px 16px;
  }

  .page-contact .self-step__num {
    font-size: 18px;
  }
}
<<<END>>>

等一下，最后一个标记。要求是每个标记只出现一次，且必须严格按顺序输出。我需要以 `` 和 `` 这两个标记来输出。不能添加 `<<<END>>>` 或其他内容。让我修正一下。其实我上面的答案里已经加了 `<<<END>>>`，那是不对的。我应该只输出这两个标记。

所以最后的输出应该以 PAGE_CSS 部分结束，不加任何结尾标记。让我把它清理一下。
<main id="main-content" class="page-contact">

  <section class="section contact-lead">
    <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 class="crumbs__current">联系品牌</span></li>
        </ol>
      </nav>

      <div class="contact-lead__body">
        <p class="annot annot--tilt contact-lead__annot">联系品牌 · FYA · 06</p>
        <h1 class="contact-lead__title">联系泛亚品牌站：邮箱、电话与自助查询</h1>
        <p class="contact-lead__lede">
          对外公开的联系方式只有一组——<b>kefu@fanya-archive.com.cn</b> 与 <b>service@fanya-archive.com.cn</b>
          两个客服邮箱，加上 <b>400-4592-2595</b> 这部电话。手机访问档位、分类标签收费、当季会员权益和记录的历史版本，
          大部分疑问登录会员中心就能自己查到答案；确实需要人工确认的，工作日里 24 小时内会给您回复。
        </p>
        <div class="contact-lead__actions">
          <a class="btn btn--primary" href="#channels">查看联系渠道</a>
          <a class="btn btn--outline" href="#self-service">先去自助查询</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section contact-channels" id="channels">
    <div class="shell">
      <div class="contact-channels__grid">

        <figure class="contact-channels__media">
          <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800"
               alt="俯拍的档案查询台面，摊开的索引卡旁放着一支笔与一部电话机局部">
          <figcaption class="contact-channels__caption">查询台 · 索引卡与受理电话</figcaption>
        </figure>

        <div class="contact-channels__list">
          <h2 class="contact-block__title">四个入口，各管一类事</h2>
          <p class="contact-block__desc">
            按您手上的问题挑入口，比反复转述更快拿到答案。邮箱适合带截图和说明的长问题，电话适合当场确认的小问题。
          </p>

          <ul class="channel-list">
            <li class="channel-row">
              <span class="channel-row__key">客服邮箱</span>
              <div class="channel-row__body">
                <span class="channel-row__val">kefu@fanya-archive.com.cn</span>
                <p class="channel-row__desc">会员账号相关的问题走这里：当前档位是多少、换了档之后能看哪些栏目、某个板块里有多少个可用标签。</p>
              </div>
            </li>
            <li class="channel-row">
              <span class="channel-row__key">服务邮箱</span>
              <div class="channel-row__body">
                <span class="channel-row__val">service@fanya-archive.com.cn</span>
                <p class="channel-row__desc">对账与申请类问题走这里：分类标签收费核对、当季权益版本确认、记录回溯申请，以及发现说明写得不对时的更正反馈。</p>
              </div>
            </li>
            <li class="channel-row">
              <span class="channel-row__key">客服电话</span>
              <div class="channel-row__body">
                <span class="channel-row__val">400-4592-2595</span>
                <p class="channel-row__desc">工作日内人工接听。适合三两句能说清的事，比如确认自己该进哪个入口、某条更新公告发布在哪一期。</p>
              </div>
            </li>
            <li class="channel-row">
              <span class="channel-row__key">通信地址</span>
              <div class="channel-row__body">
                <span class="channel-row__val">湖北省武汉市洪山区光谷大道77号金融港A3栋12层</span>
                <p class="channel-row__desc">需要寄送书面材料时使用。纸质函件到件后由内容团队登记并转交对应岗位处理。</p>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </section>

  <section class="section section--light contact-response" id="response">
    <div class="shell">
      <h2 class="contact-block__title">工作日当天受理，24 小时内回复</h2>
      <p class="contact-block__desc">
        电话与邮箱在工作日全天有人值守，收到的每一条询问都会在当天登记并分派到具体岗位。线上服务覆盖 31 个省级区域，
        备案归属湖北，各地客户走同一条受理通道，不因所在地区不同而改变处理顺序。
      </p>

      <div class="scale">
        <div class="scale__track" aria-hidden="true"></div>
        <ul class="scale__labels">
          <li><b>0</b> 来信</li>
          <li><b>6</b> 登记分派</li>
          <li><b>12</b> 查阅处理</li>
          <li><b>18</b> 复核</li>
          <li><b>24</b> 回复</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section contact-self" id="self-service">
    <div class="shell">
      <div class="contact-self__grid">

        <div class="contact-self__head">
          <p class="annot annot--vertical contact-self__annot">会员中心 · 自助查询</p>
          <h2 class="contact-block__title">四类查询，登录后自己就能完成</h2>
          <p class="contact-block__desc">
            费用明细、标签收费、权益对照与记录回溯都放在同一个账号下。切换档位时，可用栏目范围会跟着一起变，
            不用来回问，也不用等回复。
          </p>
        </div>

        <ol class="self-steps">
          <li class="self-step">
            <span class="self-step__num">01</span>
            <div class="self-step__body">
              <h3 class="self-step__title">费用明细</h3>
              <p class="self-step__desc">三档手机访问方案的适用说明、本账号当前所在档位，以及升降档后能用的栏目数量，一屏看完。</p>
            </div>
          </li>
          <li class="self-step">
            <span class="self-step__num">02</span>
            <div class="self-step__body">
              <h3 class="self-step__title">标签收费</h3>
              <p class="self-step__desc">42 个分类标签按所属栏目板块分组列出，点开任一板块即可看到该组标签与对应计价方式。</p>
            </div>
          </li>
          <li class="self-step">
            <span class="self-step__num">03</span>
            <div class="self-step__body">
              <h3 class="self-step__title">权益对照</h3>
              <p class="self-step__desc">当季会员权益的标准版与增强版逐条并排，两个版本的差异一行一行对上，不必来回翻页比对。</p>
            </div>
          </li>
          <li class="self-step">
            <span class="self-step__num">04</span>
            <div class="self-step__body">
              <h3 class="self-step__title">记录回溯</h3>
              <p class="self-step__desc">任一条记录按时间倒序列出近三个历史版本，修改前后的内容可以直接对照查看。</p>
            </div>
          </li>
        </ol>

        <figure class="contact-self__figure">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async"
               alt="四张编号索引卡按顺序排列，卡面箭头共同指向右侧的一份清单">
          <figcaption class="media-caption">四类查询入口都在会员中心同一栏目下</figcaption>
        </figure>

      </div>
    </div>
  </section>

  <section class="section contact-scenes" id="scenes">
    <div class="shell">
      <h2 class="contact-block__title">先看这里，大多数问题不用等回复</h2>
      <p class="contact-block__desc">下面几种情况在实际对接中出现得最多，照着走一遍通常就有答案了。</p>

      <ul class="scene-grid">
        <li class="scene-card">
          <a href="/projects/">
            <span class="scene-card__tag">档位与栏目</span>
            <h3 class="scene-card__title">不确定自己这一档能看多少内容</h3>
            <p class="scene-card__desc">基础查阅档开放 4 个常用栏目板块，进阶查阅档覆盖全部 9 个。差在哪几个板块，两档对照页里列得很清楚。</p>
            <span class="scene-card__more">看档位与栏目对照</span>
          </a>
        </li>
        <li class="scene-card">
          <a href="/support/">
            <span class="scene-card__tag">费用核对</span>
            <h3 class="scene-card__title">想把手机访问的费用再确认一遍</h3>
            <p class="scene-card__desc">具体金额在会员中心按账号实时显示。您看到的就是当前生效的数字，不必等回复，也不用担心版本过时。</p>
            <span class="scene-card__more">前往支持中心</span>
          </a>
        </li>
        <li class="scene-card">
          <a href="/topics/">
            <span class="scene-card__tag">记录回溯</span>
            <h3 class="scene-card__title">需要找回修改之前的那一版说明</h3>
            <p class="scene-card__desc">每条记录保留三个历史版本。翻到对应条目展开时间线，就能看到改动前写的是什么。</p>
            <span class="scene-card__more">去专题与更新</span>
          </a>
        </li>
        <li class="scene-card">
          <a href="/notice/">
            <span class="scene-card__tag">内容更正</span>
            <h3 class="scene-card__title">发现某条说明与实际情况对不上</h3>
            <p class="scene-card__desc">把页面位置和您掌握的情况发到服务邮箱，我们会登记复核；确认有误的直接更正，并留下修改痕迹。</p>
            <span class="scene-card__more">查看使用说明</span>
          </a>
        </li>
        <li class="scene-card">
          <a href="/team/">
            <span class="scene-card__tag">初次接触</span>
            <h3 class="scene-card__title">第一次来，想先弄清这里在做什么</h3>
            <p class="scene-card__desc">先看团队与品牌，了解内容由谁整理、一条记录从采集到发布经过哪些环节，再决定要不要往下谈合作。</p>
            <span class="scene-card__more">了解团队与品牌</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="section contact-record" id="record">
    <div class="shell">
      <div class="record-bar">
        <div class="record-bar__item">
          <span class="record-bar__key">备案号</span>
          <span class="record-bar__val">鄂ICP备84616517号</span>
        </div>
        <div class="record-bar__item">
          <span class="record-bar__key">服务地区</span>
          <span class="record-bar__val">湖北</span>
        </div>
        <div class="record-bar__item">
          <span class="record-bar__key">人工服务时段</span>
          <span class="record-bar__val">工作日全天</span>
        </div>
      </div>
      <p class="record-note">
        电话与地址仅用于本页说明的咨询与函件往来，不承接其他业务。若您收到的联系信息与上述内容不一致，请以本页与页脚列示的为准，
        并可通过服务邮箱反馈给我们。
      </p>
    </div>
  </section>

</main>

/* ===== 联系品牌 · 页面专属样式（作用域：.page-contact） ===== */
.page-contact {
  --contact-hair: 1px solid rgba(31, 84, 128, .55);
  --contact-hair-soft: 1px solid rgba(169, 196, 217, .18);
  --contact-ink-soft: rgba(26, 26, 26, .72);
}

/* ---------- 展签式首屏 ---------- */
.page-contact .contact-lead {
  padding-block: 64px 32px;
}

.page-contact .contact-lead__body {
  max-width: 760px;
  margin-top: 32px;
}

.page-contact .contact-lead__annot {
  margin: 0 0 20px;
}

.page-contact .contact-lead__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin: 0 0 24px;
  color: var(--warm);
}

.page-contact .contact-lead__lede {
  margin: 0 0 34px;
  max-width: 38em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--mist);
}

.page-contact .contact-lead__lede b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--warm);
  word-break: break-all;
}

.page-contact .contact-lead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 通用区块标题（页面内复用） ---------- */
.page-contact .contact-block__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: var(--warm);
}

.page-contact .contact-block__desc {
  margin: 0;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 联系渠道说明牌 ---------- */
.page-contact .contact-channels {
  padding-block: 48px 72px;
}

.page-contact .contact-channels__grid {
  display: grid;
  gap: 36px;
}

.page-contact .contact-channels__media {
  margin: 0;
}

.page-contact .contact-channels__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.page-contact .contact-channels__caption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--mist);
  opacity: .8;
}

.page-contact .channel-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-bottom: var(--contact-hair-soft);
}

.page-contact .channel-row {
  display: grid;
  gap: 8px;
  padding: 22px 0;
  border-top: var(--contact-hair-soft);
}

.page-contact .channel-row__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-contact .channel-row__body {
  min-width: 0;
}

.page-contact .channel-row__val {
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  color: var(--warm);
  word-break: break-all;
}

.page-contact .channel-row__desc {
  margin: 8px 0 0;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 响应时间刻度条 ---------- */
.page-contact .contact-response {
  background: var(--warm);
  color: var(--black);
}

.page-contact .contact-response .contact-block__title {
  color: var(--ink-deep);
}

.page-contact .contact-response .contact-block__desc {
  color: var(--contact-ink-soft);
}

.page-contact .scale {
  margin-top: 40px;
}

.page-contact .scale__track {
  position: relative;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--celadon) 0%, var(--amber) 100%);
  overflow: hidden;
}

.page-contact .scale__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(247, 244, 239, .5) 0 1px, transparent 1px);
  background-size: 8.3333% 100%;
}

.page-contact .scale__labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(26, 26, 26, .6);
}

.page-contact .scale__labels li {
  white-space: nowrap;
}

.page-contact .scale__labels b {
  font-weight: 400;
  color: var(--ink-deep);
}

/* ---------- 自助查询四步 ---------- */
.page-contact .contact-self {
  padding-block: 72px;
}

.page-contact .contact-self__grid {
  display: grid;
  gap: 32px;
}

.page-contact .contact-self__annot {
  margin: 0 0 18px;
}

.page-contact .self-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-contact .self-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px 22px;
  padding: 24px;
  background: var(--ink-archive);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--step) var(--ease), transform var(--step) var(--ease);
}

.page-contact .self-step + .self-step {
  margin-top: 12px;
}

.page-contact .self-step:hover,
.page-contact .self-step:focus-within {
  border-left-color: var(--amber);
  transform: translateX(4px);
}

.page-contact .self-step__num {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
  color: var(--amber);
}

.page-contact .self-step__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--warm);
}

.page-contact .self-step__desc {
  margin: 0;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .contact-self__figure {
  margin: 0;
}

.page-contact .contact-self__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.page-contact .contact-self__figure .media-caption {
  margin-top: 14px;
}

/* ---------- 常见联系场景 ---------- */
.page-contact .contact-scenes {
  padding-block: 64px 88px;
}

.page-contact .scene-grid {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-contact .scene-card {
  display: flex;
}

.page-contact .scene-card a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 26px 24px 24px;
  background: var(--ink-archive);
  border: 1px solid rgba(31, 84, 128, .55);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform var(--step) var(--ease), border-color var(--step) var(--ease),
              box-shadow var(--step) var(--ease);
}

.page-contact .scene-card a:hover,
.page-contact .scene-card a:focus-visible {
  transform: translateY(-4px);
  border-color: var(--celadon);
  box-shadow: var(--shadow);
}

.page-contact .scene-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--celadon);
  border: 1px solid rgba(58, 155, 140, .5);
  border-radius: 999px;
  padding: 4px 12px;
}

.page-contact .scene-card__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.45;
  margin: 0;
  color: var(--warm);
}

.page-contact .scene-card__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .scene-card__more {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--amber);
}

/* ---------- 备案与联系说明 ---------- */
.page-contact .contact-record {
  padding-block: 0 96px;
}

.page-contact .record-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  padding: 24px 0;
  border-top: var(--contact-hair);
  border-bottom: var(--contact-hair);
}

.page-contact .record-bar__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-contact .record-bar__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mist);
}

.page-contact .record-bar__val {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--warm);
}

.page-contact .record-note {
  margin: 22px 0 0;
  max-width: 38em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-contact .channel-row {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

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

@media (min-width: 960px) {
  .page-contact .contact-channels__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 56px;
    align-items: start;
  }

  .page-contact .contact-self__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }

  .page-contact .contact-self__head {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .page-contact .scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .page-contact .scale__labels {
    font-size: 10px;
    letter-spacing: 0;
  }

  .page-contact .scale__labels li:nth-child(2),
  .page-contact .scale__labels li:nth-child(4) {
    display: none;
  }

  .page-contact .self-step {
    padding: 20px 18px;
    gap: 14px 16px;
  }

  .page-contact .self-step__num {
    font-size: 18px;
  }
}