.page-contact {
  --contact-notch: 16px;
  --contact-card-notch: 24px;
  background: var(--c-mist);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  background:
    repeating-linear-gradient(115deg, rgba(124, 194, 66, .10) 0 2px, transparent 2px 22px),
    var(--c-mist);
  padding-block-start: calc(var(--header-h) + 40px);
  padding-block-end: 48px;
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: 24px;
}

.page-contact .contact-hero h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(30px, 7.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--c-seed);
  margin: 14px 0 0;
  max-width: 16em;
}

.page-contact .contact-hero .lead {
  color: var(--c-ink-soft);
  max-width: 36em;
}

.page-contact .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: 48px;
  }
  .page-contact .contact-hero {
    padding-block-end: 64px;
  }
}

/* ---------- 公共小标题 ---------- */
.page-contact .contact-block-head {
  max-width: 46em;
}

.page-contact .contact-block-head .eyebrow {
  margin-bottom: 10px;
}

.page-contact .contact-block-head .lead {
  color: var(--c-ink-soft);
  margin-top: 14px;
}

/* ---------- 主体左右分屏 ---------- */
.page-contact .contact-body {
  background: var(--c-white);
  padding-block: 56px;
}

.page-contact .contact-body__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .page-contact .contact-body__grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: start;
  }
  .page-contact .contact-body {
    padding-block: 72px;
  }
}

/* ---------- 分段控件 ---------- */
.page-contact .contact-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 20px;
}

.page-contact .seg-btn {
  border: 0;
  background: var(--c-mist);
  color: var(--c-ink-soft);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  padding: 11px 18px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

.page-contact .seg-btn:hover {
  background: var(--c-leaf);
}

.page-contact .seg-btn[aria-selected="true"] {
  background: var(--c-kiwi);
  color: var(--c-seed);
  font-weight: 700;
}

.page-contact .seg-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--c-court);
}

/* ---------- 主题面板 ---------- */
.page-contact .seg-panel {
  background: var(--c-leaf);
  border-inline-start: 4px solid var(--c-kiwi);
  padding: 22px 22px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-notch)), calc(100% - var(--contact-notch)) 100%, 0 100%);
}

.page-contact .seg-panel__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-seed);
  margin: 0 0 14px;
}

.page-contact .seg-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .seg-panel li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.page-contact .seg-panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  background: var(--c-kiwi);
  transform: rotate(45deg);
}

/* ---------- 准备清单条 ---------- */
.page-contact .prep-strip {
  margin-top: 26px;
  background: var(--c-mist);
  padding: 22px 22px 24px;
  display: grid;
  gap: 14px;
  clip-path: polygon(0 0, calc(100% - var(--contact-notch)) 0, 100% var(--contact-notch), 100% 100%, 0 100%);
}

.page-contact .prep-strip__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-seed);
  margin: 0;
}

.page-contact .prep-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-contact .prep-strip__list li {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--c-leaf-deep);
  background: var(--c-white);
  padding: 6px 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.page-contact .copy-btn--solid {
  justify-self: start;
  font-size: 13px;
  padding: 9px 16px;
  background: var(--c-seed);
  color: var(--c-white);
  border: 0;
}

/* ---------- 右侧联系方式 ---------- */
.page-contact .contact-aside {
  display: grid;
  gap: 26px;
}

@media (min-width: 1024px) {
  .page-contact .contact-aside {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }
}

.page-contact .contact-card {
  background: linear-gradient(158deg, var(--c-night) 0%, var(--c-seed) 100%);
  color: var(--c-white);
  padding: 26px 22px 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-card-notch)), calc(100% - var(--contact-card-notch)) 100%, 0 100%);
}

.page-contact .contact-card__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-kiwi);
  margin: 0 0 12px;
}

.page-contact .contact-card__note {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 22px;
}

.page-contact .contact-line {
  border-top: 1px solid var(--line-dark);
  padding-top: 14px;
  margin-top: 14px;
  display: grid;
  gap: 7px;
}

.page-contact .contact-line__label {
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .58);
}

.page-contact .contact-line__value {
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-white);
  word-break: break-all;
}

.page-contact .contact-line__value--text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .92);
  word-break: normal;
}

.page-contact .contact-card .copy-btn {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .08);
  color: var(--c-white);
  border: 1px solid var(--line-dark);
  cursor: pointer;
}

.page-contact .contact-card .copy-btn:hover {
  background: var(--c-kiwi);
  color: var(--c-seed);
  border-color: var(--c-kiwi);
}

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

/* ---------- 处理流程 ---------- */
.page-contact .contact-flow {
  background: var(--c-leaf);
  padding-block: 56px;
}

.page-contact .contact-flow__head {
  max-width: 44em;
}

.page-contact .contact-flow__figure {
  margin: 32px 0 36px;
}

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

.page-contact .flow-step {
  background: var(--c-white);
  padding: 22px 20px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-contact .flow-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--c-court);
  margin-bottom: 10px;
}

.page-contact .flow-step__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--c-seed);
  margin: 0 0 8px;
}

.page-contact .flow-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

@media (min-width: 1024px) {
  .page-contact .contact-flow {
    padding-block: 72px;
  }
  .page-contact .flow-track {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
}

/* ---------- 自助入口 ---------- */
.page-contact .contact-selfhelp {
  background: var(--c-white);
  padding-block: 56px;
}

.page-contact .selfhelp-grid {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.page-contact .selfhelp-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-mist);
  padding: 24px 22px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}

.page-contact .selfhelp-card:hover {
  background: var(--c-leaf);
  transform: translateY(-3px);
}

.page-contact .selfhelp-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--c-leaf-deep);
}

.page-contact .selfhelp-card__index {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--c-leaf-deep);
  margin-bottom: 12px;
}

.page-contact .selfhelp-card__title {
  font-size: 21px;
  font-weight: 800;
  color: var(--c-seed);
  margin: 0 0 10px;
}

.page-contact .selfhelp-card p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.page-contact .selfhelp-card__go {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-leaf-deep);
}

.page-contact .selfhelp-note {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-contact .selfhelp-note a {
  color: var(--c-leaf-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .page-contact .contact-selfhelp {
    padding-block: 72px;
  }
  .page-contact .selfhelp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .selfhelp-card {
    transition: none;
  }
  .page-contact .selfhelp-card:hover {
    transform: none;
  }
}
</main>
<<<END>>>

等等，上面的输出有个问题：结尾的 `<<<END>>>` 不属于要求的三标记。我需要严格按顺序只输出 ``、`` 这两个标记。

而且我在 MAIN_HTML 里最后误加了 `</main>` 后面的内容，其实结束标签那里应该是：

```
</main>

```

我重新检查一下。

另外 `.page-contact .contact-hero` 里的 `contact-hero__intro` 和 `contact-hero__lead` 没有单独定义样式，不过因为它们是 grid 子项，所以没问题。

还有 `.page-contact .contact-aside__figure` 用了 `media-frame--1x1`，共享类会负责图片容器样式。

在 `.contact-selfhelp` 那一块，`.selfhelp-note a` 的链接颜色和 `.hero-actions` 里的按钮样式都定义了。

`.flow-step__num` 用的是橙红色高亮，整个页面的色彩节奏是：首屏雾灰 + 斜纹，主体白底，右侧夜果绿深色卡片，流程区浅绿背景，自助区白底。没问题。

现在我需要把这次生成的结果整理成两个标记的分段输出，不能有别的废话。
<main id="main-content" class="page-contact">

  <section class="section section--first contact-hero">
    <div class="container contact-hero__grid">
      <div class="contact-hero__intro" data-reveal>
        <nav class="breadcrumbs" aria-label="当前位置">
          <a href="/">首页</a>
          <span aria-hidden="true">/</span>
          <span>意见反馈</span>
        </nav>
        <p class="eyebrow">意见反馈</p>
        <h1>安装、登录、订阅出问题，直接交给我们</h1>
      </div>
      <div class="contact-hero__lead" data-reveal>
        <p class="lead">大屏装不上、换了新设备登不进去、iOS 端订阅入口没反应、某场比赛的射门统计看着不对——这些都可以直接找奇异果体育站的客服。把设备型号和操作到出错的步骤写清楚发过来，我们按问题类型转给对应的技术或内容团队。</p>
        <div class="hero-actions">
          <a class="btn btn-primary" href="#contact-topics">选一个反馈主题</a>
          <a class="btn btn-outline" href="/troubleshooting/">先自己做一次排查</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--wide contact-body" id="contact-topics">
    <div class="container contact-body__grid">

      <div class="contact-body__main">
        <header class="contact-block-head" data-reveal>
          <p class="eyebrow">01 / 反馈主题</p>
          <h2 class="section-title">先选一个主题，清单会跟着换</h2>
          <p class="lead">每一类问题需要的线索不一样。选好主题之后，下面写的就是这一类问题通常要带的材料，照着准备，基本不用来回补。</p>
        </header>

        <div class="segmented contact-seg" data-segmented role="tablist" aria-label="反馈主题">
          <button class="seg-btn" type="button" role="tab" id="tab-install" aria-controls="panel-install" data-segment="install" aria-selected="true">安装调试</button>
          <button class="seg-btn" type="button" role="tab" id="tab-login" aria-controls="panel-login" data-segment="login" aria-selected="false">登录与账号</button>
          <button class="seg-btn" type="button" role="tab" id="tab-subscribe" aria-controls="panel-subscribe" data-segment="subscribe" aria-selected="false">订阅与支付</button>
          <button class="seg-btn" type="button" role="tab" id="tab-match" aria-controls="panel-match" data-segment="match" aria-selected="false">赛事与数据</button>
          <button class="seg-btn" type="button" role="tab" id="tab-quality" aria-controls="panel-quality" data-segment="quality" aria-selected="false">播放质量</button>
          <button class="seg-btn" type="button" role="tab" id="tab-other" aria-controls="panel-other" data-segment="other" aria-selected="false">建议与合作</button>
        </div>

        <div class="seg-panel" role="tabpanel" id="panel-install" data-segment-panel="install" aria-labelledby="tab-install">
          <p class="seg-panel__title">安装调试要准备的信息</p>
          <ul>
            <li>电视或电视盒子的品牌与型号，方便判断属于哪一类安装环境。</li>
            <li>你用的是哪一种方式：扫码安装、应用市场安装还是 U 盘安装。</li>
            <li>卡在哪一步：找不到应用、安装中途停下、装完点开没反应。</li>
            <li>屏幕上出现的提示原文，拍照或者照抄一句都行。</li>
          </ul>
        </div>

        <div class="seg-panel" role="tabpanel" id="panel-login" data-segment-panel="login" aria-labelledby="tab-login">
          <p class="seg-panel__title">登录与账号要准备的信息</p>
          <ul>
            <li>原来在用的设备类型，以及这次要登录的新设备类型。</li>
            <li>登录失败时页面给出的提示文字。</li>
            <li>同一个账号在别的终端能不能正常打开，这条能帮我们快速定位。</li>
            <li>目前保留登录状态的常用设备有几台。</li>
          </ul>
        </div>

        <div class="seg-panel" role="tabpanel" id="panel-subscribe" data-segment-panel="subscribe" aria-labelledby="tab-subscribe">
          <p class="seg-panel__title">订阅与支付要准备的信息</p>
          <ul>
            <li>iOS 端当前的版本号，入口在应用内「我的」页面底部可以看到。</li>
            <li>订阅入口打开后停在哪一步，是空白、转圈还是有报错提示。</li>
            <li>购买时屏幕上出现的提示文字，以及大致的操作时间。</li>
            <li>同一账号在手机或大屏上是否还能正常观看。</li>
          </ul>
        </div>

        <div class="seg-panel" role="tabpanel" id="panel-match" data-segment-panel="match" aria-labelledby="tab-match">
          <p class="seg-panel__title">赛事与数据要准备的信息</p>
          <ul>
            <li>比赛名称与场次的大致时间，越具体越好定位。</li>
            <li>出问题的是直播、回看，还是射门统计、联赛排名这类数据看板。</li>
            <li>哪一项统计对不上，以及你认为正确的数值。</li>
            <li>当时使用的终端与账号，方便我们核对你看到的画面。</li>
          </ul>
        </div>

        <div class="seg-panel" role="tabpanel" id="panel-quality" data-segment-panel="quality" aria-labelledby="tab-quality">
          <p class="seg-panel__title">播放质量要准备的信息</p>
          <ul>
            <li>终端类型：手机、平板、智能电视、电视盒子还是网页端。</li>
            <li>网络环境：家庭宽带、移动数据还是公共网络。</li>
            <li>卡顿出现的频率与每次持续的大致时长。</li>
            <li>是只有某一场比赛出问题，还是多个场次都这样。</li>
          </ul>
        </div>

        <div class="seg-panel" role="tabpanel" id="panel-other" data-segment-panel="other" aria-labelledby="tab-other">
          <p class="seg-panel__title">建议与合作要说明的内容</p>
          <ul>
            <li>你想调整的是哪个环节，比如筛选栏的字段、连看的切换方式。</li>
            <li>你期望达到的效果是什么，说得具体一点更好落地。</li>
            <li>线下观赛合作请写明场地类型、可容纳人数与所在城市。</li>
            <li>留下方便联系的邮箱或电话，我们会在受理时段内回你。</li>
          </ul>
        </div>

        <div class="prep-strip" data-reveal>
          <p class="prep-strip__title">每次都要带上的三样</p>
          <ul class="prep-strip__list">
            <li>设备型号</li>
            <li>客户端版本号</li>
            <li>操作到出错的完整步骤</li>
          </ul>
          <button class="copy-btn copy-btn--solid" type="button" data-copy="设备型号： ／ 客户端版本号： ／ 操作步骤： ／ 提示原文：">复制信息模板</button>
        </div>
      </div>

      <aside class="contact-aside">
        <div class="contact-card" data-reveal>
          <p class="contact-card__eyebrow mono">工作日 9:00–18:00 受理</p>
          <p class="contact-card__note">邮件与电话在这个时段都有人应答。大屏安装、换设备登录和 iOS 端订阅这三类问题，我们会转给专门处理它们的同事。</p>

          <div class="contact-line">
            <span class="contact-line__label">客服邮箱</span>
            <span class="contact-line__value mono">service@kiwi-install-now.com.cn</span>
            <button class="copy-btn" type="button" data-copy="service@kiwi-install-now.com.cn">复制邮箱</button>
          </div>

          <div class="contact-line">
            <span class="contact-line__label">客服电话</span>
            <span class="contact-line__value mono">18857048143</span>
            <button class="copy-btn" type="button" data-copy="18857048143">复制号码</button>
          </div>

          <div class="contact-line">
            <span class="contact-line__label">服务地址</span>
            <span class="contact-line__value contact-line__value--text">内蒙古省呼和浩特市赛罕区鄂尔多斯大街88号奇异果体育数字中心</span>
          </div>
        </div>

        <figure class="media-frame media-frame--1x1 contact-aside__figure">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="用抽象线条表示客服受理时段与沟通渠道的示意图" loading="lazy" decoding="async">
          <figcaption class="media-caption">受理时段内，邮件与电话两条通道同时开放。</figcaption>
        </figure>
      </aside>

    </div>
  </section>

  <section class="section section--wide contact-flow">
    <div class="container">
      <header class="contact-block-head contact-flow__head" data-reveal>
        <p class="eyebrow">02 / 处理流程</p>
        <h2 class="section-title">发出去之后，它会经过这四步</h2>
        <p class="lead">从登记到回复一共四个环节，每一步由谁接手都写得清楚，你大致能知道自己的问题走到了哪里。</p>
      </header>

      <figure class="media-frame media-frame--wide contact-flow__figure" data-reveal>
        <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="问题提交后按类型分流到技术支持、订阅支持与内容运营的抽象示意图" loading="lazy" decoding="async">
        <figcaption class="media-caption">按主题分流，是这套流程里最省时间的一环。</figcaption>
      </figure>

      <ol class="flow-track">
        <li class="flow-step" data-reveal>
          <span class="flow-step__num">01</span>
          <h3 class="flow-step__title">登记</h3>
          <p>客服在工作日 9:00–18:00 查看邮箱与电话记录，把问题按主题登记，同时核对你的终端信息和联系方式。</p>
        </li>
        <li class="flow-step" data-reveal>
          <span class="flow-step__num">02</span>
          <h3 class="flow-step__title">分流</h3>
          <p>安装调试转技术支持，订阅与支付转订阅支持，赛事与数据转内容运营，登录与账号单独走一条通道。</p>
        </li>
        <li class="flow-step" data-reveal>
          <span class="flow-step__num">03</span>
          <h3 class="flow-step__title">复现</h3>
          <p>处理团队按你给的设备型号、版本号和操作步骤走一遍，确认问题卡在哪一环，而不是靠猜。</p>
        </li>
        <li class="flow-step" data-reveal>
          <span class="flow-step__num">04</span>
          <h3 class="flow-step__title">回复</h3>
          <p>通过你留下的邮箱或电话告知处理结果；如果还需要补充材料，会直接说明缺哪一项。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--narrow contact-selfhelp">
    <div class="container">
      <header class="contact-block-head" data-reveal>
        <p class="eyebrow">03 / 自助入口</p>
        <h2 class="section-title">能自己顺手的，不用等回复</h2>
        <p class="lead">大部分安装和登录问题都已经被写成了可以照着做的步骤，先看一遍，往往比等邮件更快。</p>
      </header>

      <div class="selfhelp-grid">
        <a class="selfhelp-card" href="/troubleshooting/" data-reveal>
          <span class="selfhelp-card__index mono">T-01</span>
          <h3 class="selfhelp-card__title">问题排查</h3>
          <p>安装失败、换设备登不进去、订阅异常、播放卡顿，120 条以上常见问题分成六个类别排好，按步骤点下去就行。</p>
          <span class="selfhelp-card__go" aria-hidden="true">去看看 →</span>
        </a>
        <a class="selfhelp-card" href="/platform/" data-reveal>
          <span class="selfhelp-card__index mono">T-02</span>
          <h3 class="selfhelp-card__title">平台服务</h3>
          <p>扫码、应用市场、U 盘三种大屏安装方式写在同一个页面里，换设备登录平均耗时约 40 秒，iOS 订阅入口同样在这里进入。</p>
          <span class="selfhelp-card__go" aria-hidden="true">去看看 →</span>
        </a>
      </div>

      <p class="selfhelp-note" data-reveal>提交问题时我们会用到你的设备与账号信息，处理方式可以先看<a href="/privacy-notice/">隐私声明</a>。</p>
    </div>
  </section>

</main>

.page-contact {
  --contact-notch: 16px;
  --contact-card-notch: 24px;
  background: var(--c-mist);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  background:
    repeating-linear-gradient(115deg, rgba(124, 194, 66, .10) 0 2px, transparent 2px 22px),
    var(--c-mist);
  padding-block-start: calc(var(--header-h) + 40px);
  padding-block-end: 48px;
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: 24px;
}

.page-contact .contact-hero h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(30px, 7.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--c-seed);
  margin: 14px 0 0;
  max-width: 16em;
}

.page-contact .contact-hero .lead {
  color: var(--c-ink-soft);
  max-width: 36em;
}

.page-contact .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: 48px;
  }
  .page-contact .contact-hero {
    padding-block-end: 64px;
  }
}

/* ---------- 公共小标题 ---------- */
.page-contact .contact-block-head {
  max-width: 46em;
}

.page-contact .contact-block-head .eyebrow {
  margin-bottom: 10px;
}

.page-contact .contact-block-head .lead {
  color: var(--c-ink-soft);
  margin-top: 14px;
}

/* ---------- 主体左右分屏 ---------- */
.page-contact .contact-body {
  background: var(--c-white);
  padding-block: 56px;
}

.page-contact .contact-body__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .page-contact .contact-body__grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: start;
  }
  .page-contact .contact-body {
    padding-block: 72px;
  }
}

/* ---------- 分段控件 ---------- */
.page-contact .contact-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 20px;
}

.page-contact .seg-btn {
  border: 0;
  background: var(--c-mist);
  color: var(--c-ink-soft);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  padding: 11px 18px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

.page-contact .seg-btn:hover {
  background: var(--c-leaf);
}

.page-contact .seg-btn[aria-selected="true"] {
  background: var(--c-kiwi);
  color: var(--c-seed);
  font-weight: 700;
}

.page-contact .seg-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--c-court);
}

/* ---------- 主题面板 ---------- */
.page-contact .seg-panel {
  background: var(--c-leaf);
  border-inline-start: 4px solid var(--c-kiwi);
  padding: 22px 22px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-notch)), calc(100% - var(--contact-notch)) 100%, 0 100%);
}

.page-contact .seg-panel__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-seed);
  margin: 0 0 14px;
}

.page-contact .seg-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .seg-panel li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.page-contact .seg-panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  background: var(--c-kiwi);
  transform: rotate(45deg);
}

/* ---------- 准备清单条 ---------- */
.page-contact .prep-strip {
  margin-top: 26px;
  background: var(--c-mist);
  padding: 22px 22px 24px;
  display: grid;
  gap: 14px;
  clip-path: polygon(0 0, calc(100% - var(--contact-notch)) 0, 100% var(--contact-notch), 100% 100%, 0 100%);
}

.page-contact .prep-strip__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-seed);
  margin: 0;
}

.page-contact .prep-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-contact .prep-strip__list li {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--c-leaf-deep);
  background: var(--c-white);
  padding: 6px 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.page-contact .copy-btn--solid {
  justify-self: start;
  font-size: 13px;
  padding: 9px 16px;
  background: var(--c-seed);
  color: var(--c-white);
  border: 0;
  cursor: pointer;
}

/* ---------- 右侧联系方式 ---------- */
.page-contact .contact-aside {
  display: grid;
  gap: 26px;
}

@media (min-width: 1024px) {
  .page-contact .contact-aside {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }
}

.page-contact .contact-card {
  background: linear-gradient(158deg, var(--c-night) 0%, var(--c-seed) 100%);
  color: var(--c-white);
  padding: 26px 22px 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-card-notch)), calc(100% - var(--contact-card-notch)) 100%, 0 100%);
}

.page-contact .contact-card__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-kiwi);
  margin: 0 0 12px;
}

.page-contact .contact-card__note {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 22px;
}

.page-contact .contact-line {
  border-top: 1px solid var(--line-dark);
  padding-top: 14px;
  margin-top: 14px;
  display: grid;
  gap: 7px;
}

.page-contact .contact-line__label {
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .58);
}

.page-contact .contact-line__value {
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-white);
  word-break: break-all;
}

.page-contact .contact-line__value--text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .92);
  word-break: normal;
}

.page-contact .contact-card .copy-btn {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .08);
  color: var(--c-white);
  border: 1px solid var(--line-dark);
  cursor: pointer;
}

.page-contact .contact-card .copy-btn:hover {
  background: var(--c-kiwi);
  color: var(--c-seed);
  border-color: var(--c-kiwi);
}

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

/* ---------- 处理流程 ---------- */
.page-contact .contact-flow {
  background: var(--c-leaf);
  padding-block: 56px;
}

.page-contact .contact-flow__head {
  max-width: 44em;
}

.page-contact .contact-flow__figure {
  margin: 32px 0 36px;
}

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

.page-contact .flow-step {
  background: var(--c-white);
  padding: 22px 20px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-contact .flow-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--c-court);
  margin-bottom: 10px;
}

.page-contact .flow-step__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--c-seed);
  margin: 0 0 8px;
}

.page-contact .flow-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

@media (min-width: 1024px) {
  .page-contact .contact-flow {
    padding-block: 72px;
  }
  .page-contact .flow-track {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
}

/* ---------- 自助入口 ---------- */
.page-contact .contact-selfhelp {
  background: var(--c-white);
  padding-block: 56px;
}

.page-contact .selfhelp-grid {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.page-contact .selfhelp-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-mist);
  padding: 24px 22px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}

.page-contact .selfhelp-card:hover {
  background: var(--c-leaf);
  transform: translateY(-3px);
}

.page-contact .selfhelp-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--c-leaf-deep);
}

.page-contact .selfhelp-card__index {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--c-leaf-deep);
  margin-bottom: 12px;
}

.page-contact .selfhelp-card__title {
  font-size: 21px;
  font-weight: 800;
  color: var(--c-seed);
  margin: 0 0 10px;
}

.page-contact .selfhelp-card p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.page-contact .selfhelp-card__go {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-leaf-deep);
}

.page-contact .selfhelp-note {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-contact .selfhelp-note a {
  color: var(--c-leaf-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .page-contact .contact-selfhelp {
    padding-block: 72px;
  }
  .page-contact .selfhelp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .selfhelp-card {
    transition: none;
  }
  .page-contact .selfhelp-card:hover {
    transform: none;
  }
}
<<<END>>>