.page-contact {
  --contact-radius-cut: var(--r-xl);
}

.page-contact .contact-hero {
  padding-block: 1.25rem 3.25rem;
}

.page-contact .hero-grid {
  display: grid;
  gap: 2rem;
  margin-top: 1.25rem;
}

.page-contact .hero-copy .eyebrow {
  margin-bottom: .75rem;
}

.page-contact .hero-copy .h-display {
  margin: 0 0 1rem;
  line-height: 1.06;
}

.page-contact .hero-copy .lead {
  margin: 0;
  max-width: 40ch;
}

/* 纵向信息轴 */
.page-contact .rail {
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
}

.page-contact .rail-item {
  display: grid;
  gap: .3rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .rail-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
}

.page-contact .rail-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .rail-value--mail {
  font-size: clamp(15px, 4.2vw, 19px);
  color: var(--lime);
}

.page-contact .rail-value--phone {
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: .02em;
  color: var(--paper);
}

.page-contact .rail-value--addr {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* 首屏视觉 */
.page-contact .hero-visual {
  position: relative;
}

.page-contact .hero-frame {
  margin: 0;
  border-radius: var(--r-lg) var(--r-lg) var(--contact-radius-cut) var(--r-lg);
  overflow: hidden;
}

.page-contact .hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 渠道区 */
.page-contact .channel-section {
  padding-block: 3.25rem;
  border-top: 1px solid var(--line);
}

.page-contact .section-head {
  max-width: 62ch;
  margin-bottom: 2rem;
}

.page-contact .section-head .h-section {
  margin: 0 0 .6rem;
}

.page-contact .section-sub {
  margin: 0;
  color: var(--muted);
}

.page-contact .channel-list {
  border-bottom: 1px solid var(--line);
}

.page-contact .channel-row {
  display: grid;
  gap: .6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.page-contact .channel-num {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1;
  color: var(--orange);
}

.page-contact .channel-body .h-sub {
  margin: 0 0 .45rem;
}

.page-contact .channel-body p {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-contact .channel-link {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 255, 96, .42);
  padding-bottom: 2px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.page-contact .channel-link:hover,
.page-contact .channel-link:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* 回复节奏主题带 */
.page-contact .reply-band {
  padding-block: 3rem;
}

.page-contact .reply-grid {
  display: grid;
  gap: 2rem;
}

.page-contact .reply-intro .eyebrow {
  margin-bottom: .6rem;
}

.page-contact .eyebrow--light {
  color: var(--cyan);
}

.page-contact .reply-intro .h-section {
  margin: 0 0 .75rem;
  color: var(--paper);
}

.page-contact .reply-intro .lead {
  margin: 0;
  max-width: 46ch;
  color: rgba(232, 246, 238, .82);
}

.page-contact .reply-hours {
  display: inline-block;
  margin: 1.25rem 0 0;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 246, 238, .35);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: .04em;
}

.page-contact .reply-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  align-content: start;
}

.page-contact .reply-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(232, 246, 238, .18);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(232, 246, 238, .92);
}

.page-contact .reply-points li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-contact .point-dot {
  width: 8px;
  height: 8px;
  margin-top: .65rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(168, 255, 96, .16);
}

/* 流程区 */
.page-contact .flow-section {
  padding-block: 3.25rem;
}

.page-contact .flow-media {
  margin: 0 0 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.page-contact .flow-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-contact .flow-step {
  position: relative;
  padding: 1.15rem 1.15rem 1.15rem 1.4rem;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, rgba(14, 42, 35, .92), rgba(14, 42, 35, 0));
}

.page-contact .flow-step .step-num {
  display: block;
  margin-bottom: .5rem;
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
}

.page-contact .flow-step .h-sub {
  margin: 0 0 .4rem;
  font-size: 18px;
}

.page-contact .flow-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* 准备清单 */
.page-contact .prep-section {
  padding-block: 3.25rem;
  border-top: 1px solid var(--line);
}

.page-contact .prep-accordion {
  margin-top: .5rem;
}

.page-contact .accordion-label {
  font-weight: 600;
}

.page-contact .prep-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* 地址卡 */
.page-contact .address-section {
  padding-block: 1rem 4rem;
}

.page-contact .address-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg) var(--contact-radius-cut) var(--r-lg) var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.page-contact .eyebrow--dark {
  margin: 0 0 .75rem;
  color: rgba(7, 26, 22, .55);
}

.page-contact .address-title {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(22px, 4.6vw, 32px);
  line-height: 1.35;
}

.page-contact .address-note {
  margin: 0 0 1.5rem;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(7, 26, 22, .78);
}

.page-contact .address-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 0;
}

.page-contact .address-links a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #12443A;
  text-decoration: none;
  border-bottom: 1px solid rgba(18, 68, 58, .4);
  padding-bottom: 2px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.page-contact .address-links a:hover,
.page-contact .address-links a:focus-visible {
  color: #071A16;
  border-color: #071A16;
}

/* 平板与桌面 */
@media (min-width: 860px) {
  .page-contact .contact-hero {
    padding-block: 1.5rem 4rem;
  }

  .page-contact .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
    margin-top: 2rem;
  }

  .page-contact .channel-row {
    grid-template-columns: 4rem minmax(0, 1fr) 8rem;
    gap: 1.5rem;
    align-items: start;
    padding: 1.6rem 0;
  }

  .page-contact .channel-link {
    justify-self: end;
    margin-top: .35rem;
  }

  .page-contact .reply-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
    align-items: start;
  }

  .page-contact .flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .page-contact .flow-step {
    border-left: none;
    border-top: 2px solid var(--line-strong);
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: rgba(14, 42, 35, .72);
    padding: 1.6rem 1.1rem 1.4rem;
  }

  .page-contact .flow-step::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 1.1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 61, .18);
  }
}

@media (min-width: 1180px) {
  .page-contact .hero-frame {
    border-radius: var(--r-lg) var(--contact-radius-cut) var(--contact-radius-cut) var(--r-lg);
  }

  .page-contact .reply-band {
    padding-block: 3.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-link,
  .page-contact .address-links a {
    transition: none;
  }
}

<main id="main-content" class="page-contact">

  <section class="contact-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="页面位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">合作联系</li>
        </ol>
      </nav>

      <div class="hero-grid">
        <div class="hero-copy">
          <p class="eyebrow">客服与反馈</p>
          <h1 class="h-display">把问题交到合适的人手上</h1>
          <p class="lead">会员查询、设备适配、内容反馈与业务合作，新利赛事都安排了固定渠道。把遇到的情况写清楚，客服会在工作日 9:00–18:00 内处理并回复您。</p>

          <dl class="rail">
            <div class="rail-item">
              <dt class="rail-label">客服邮箱</dt>
              <dd class="rail-value rail-value--mail">kefu@access-xinli.com.cn</dd>
            </div>
            <div class="rail-item">
              <dt class="rail-label">客服电话</dt>
              <dd class="rail-value rail-value--phone">400-7283-9513</dd>
            </div>
            <div class="rail-item">
              <dt class="rail-label">工作时段</dt>
              <dd class="rail-value"><span class="pill pill--lime">工作日 9:00–18:00</span></dd>
            </div>
            <div class="rail-item">
              <dt class="rail-label">联系地址</dt>
              <dd class="rail-value rail-value--addr">陕西省西安市雁塔区科技路18号新利赛事服务中心</dd>
            </div>
          </dl>
        </div>

        <figure class="media-frame media-frame--wide hero-frame">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="夜间服务中心的桌面局部，屏幕光与青柠色状态点映在深墨绿控制台上">
          <figcaption>客服按工作日排班处理来信，邮箱与电话由同一组人员跟进</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="channel-section">
    <div class="container">
      <div class="section-head">
        <h2 class="h-section">四类问题，各自走哪条渠道</h2>
        <p class="section-sub">邮件是主要入口，电话用来处理需要当场说清的情况。先判断问题属于哪一类，写进邮件标题，能少一轮来回。</p>
      </div>

      <div class="channel-list">
        <article class="channel-row">
          <span class="channel-num mono">01</span>
          <div class="channel-body">
            <h3 class="h-sub">会员查询与个人中心</h3>
            <p>会员中心查询已经并入个人中心栏目，登录后可以看到会员状态与历史记录。如果显示与您的预期不一致，请把注册手机号后四位写进邮件，客服能直接定位账号核对。</p>
          </div>
          <a class="channel-link" href="/questions/">查看问答</a>
        </article>

        <article class="channel-row">
          <span class="channel-num mono">02</span>
          <div class="channel-body">
            <h3 class="h-sub">设备适配</h3>
            <p>手机上排版错位、平板上操作不跟手、某个浏览器打开联赛目录时显示不全，请一并说明设备型号与浏览器版本。客服会对照手机与平板两类终端的适配清单，给出可以直接照做的调整建议。</p>
          </div>
          <a class="channel-link" href="/projects/">适配清单</a>
        </article>

        <article class="channel-row">
          <span class="channel-num mono">03</span>
          <div class="channel-body">
            <h3 class="h-sub">内容与时间码反馈</h3>
            <p>赛程条目、回看集锦或时间码标注发现问题，请写明所在页面、场次编号和具体时间码，客服会交给回看标注组定位后修正，并在处理完毕后回信告知结果。</p>
          </div>
          <a class="channel-link" href="/press/">赛事动态</a>
        </article>

        <article class="channel-row">
          <span class="channel-num mono">04</span>
          <div class="channel-body">
            <h3 class="h-sub">业务合作</h3>
            <p>栏目共建、内容分发或其他商务沟通，请在邮件中说明合作方向、希望涉及的联赛栏目以及大致的推进节奏，客服会转给对应同事与您对接。</p>
          </div>
          <a class="channel-link" href="/company/">品牌档案</a>
        </article>
      </div>
    </div>
  </section>

  <section class="band band--violet reply-band">
    <div class="container reply-grid">
      <div class="reply-intro">
        <p class="eyebrow eyebrow--light">回复节奏</p>
        <h2 class="h-section">工作时间内来信，当天进入处理队列</h2>
        <p class="lead">客服按工作日排班查看来信与来电。信息一次写全，处理起来最快；需要补充材料时，回信里会说明还缺哪几项。</p>
        <p class="reply-hours mono">周一至周五 · 9:00–18:00</p>
      </div>

      <ul class="reply-points">
        <li>
          <span class="point-dot" aria-hidden="true"></span>
          <span>邮件在工作日 9:00–18:00 内依次查看并回复；夜间与周末发出的来信，顺延到下一个工作日处理。</span>
        </li>
        <li>
          <span class="point-dot" aria-hidden="true"></span>
          <span>电话在同一时段有人接听；遇到占线，先发一封邮件说明情况，客服看到后会回信或回电与您确认。</span>
        </li>
        <li>
          <span class="point-dot" aria-hidden="true"></span>
          <span>每轮比赛结束后咨询相对集中，回看与时间码类问题按来信先后排队，请预留一些处理时间。</span>
        </li>
        <li>
          <span class="point-dot" aria-hidden="true"></span>
          <span>涉及账号的疑问请附注册手机号后四位，核对之后才能查询会员中心里的具体记录。</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="flow-section">
    <div class="container">
      <div class="section-head">
        <h2 class="h-section">从发出到有结果，四步走完</h2>
        <p class="section-sub">把该带的信息一次带到，往返次数自然就少。下面四步是客服建议的写法。</p>
      </div>

      <figure class="media-frame media-frame--film flow-media">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="四步反馈流程的编号示意，从提交问题到跟进结果的连接线与节点" loading="lazy" decoding="async">
        <figcaption>提交问题 · 附必要信息 · 等待回复 · 跟进结果</figcaption>
      </figure>

      <ol class="flow-steps">
        <li class="flow-step">
          <span class="step-num mono">01</span>
          <h3 class="h-sub">写清问题类型</h3>
          <p>在邮件标题里直接点明是会员查询、设备适配、内容反馈还是合作沟通，客服打开就能分派。</p>
        </li>
        <li class="flow-step">
          <span class="step-num mono">02</span>
          <h3 class="h-sub">附上必要信息</h3>
          <p>手机号后四位、设备型号与浏览器版本、问题页面与时间码，按下方清单逐项补齐。</p>
        </li>
        <li class="flow-step">
          <span class="step-num mono">03</span>
          <h3 class="h-sub">等待确认与回复</h3>
          <p>客服在工作日 9:00–18:00 内确认问题并给出处理方案；信息不足时会说明还需要哪几项。</p>
        </li>
        <li class="flow-step">
          <span class="step-num mono">04</span>
          <h3 class="h-sub">跟进到有结果</h3>
          <p>需要补充材料时按回信继续提供；处理完成后可以再回一封确认，这件事就算办完了。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="prep-section">
    <div class="container">
      <div class="section-head">
        <h2 class="h-section">发信前，先把这几项备在手边</h2>
        <p class="section-sub">按问题类型展开，照着填进邮件正文，客服核对起来会快很多。</p>
      </div>

      <div class="accordion prep-accordion" data-accordion>
        <div class="accordion-item" data-accordion-item data-open="true">
          <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="true" aria-controls="prep-panel-1" id="prep-trigger-1">
            <span class="accordion-label">会员查询与个人中心</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel id="prep-panel-1" role="region" aria-labelledby="prep-trigger-1">
            <ul class="prep-list">
              <li>注册手机号后四位，用于核对账号归属。</li>
              <li>登录时使用的手机号，方便在个人中心里查找记录。</li>
              <li>问题出现的页面，例如个人中心或帮助中心。</li>
              <li>问题发生的大致时间，以及页面上显示的内容描述。</li>
            </ul>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="prep-panel-2" id="prep-trigger-2">
            <span class="accordion-label">手机与平板适配</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel id="prep-panel-2" role="region" aria-labelledby="prep-trigger-2">
            <ul class="prep-list">
              <li>设备类型：手机还是平板。</li>
              <li>设备型号，以及当前的操作系统版本。</li>
              <li>所用浏览器及版本号。</li>
              <li>出现异常的联赛目录页面与具体表现，例如排版错位、按钮点不动或加载不完整。</li>
            </ul>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="prep-panel-3" id="prep-trigger-3">
            <span class="accordion-label">回看集锦与时间码</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel id="prep-panel-3" role="region" aria-labelledby="prep-trigger-3">
            <ul class="prep-list">
              <li>场次编号；回看条目按编号排序，写编号最省事。</li>
              <li>具体时间码，格式为时:分:秒，方便直接定位到那一帧。</li>
              <li>画面或标注的具体描述，说明是标注缺漏还是内容有误。</li>
            </ul>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="prep-panel-4" id="prep-trigger-4">
            <span class="accordion-label">合作与内容共建</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel id="prep-panel-4" role="region" aria-labelledby="prep-trigger-4">
            <ul class="prep-list">
              <li>合作方向与期望的合作形式。</li>
              <li>希望覆盖的联赛栏目或内容范围。</li>
              <li>方便对接的时间安排，以及对接人的称呼与联系方式。</li>
              <li>若涉及具体内容反馈，请附上对应页面与条目位置。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="address-section">
    <div class="container">
      <div class="address-card">
        <p class="eyebrow eyebrow--dark">联系地址</p>
        <h2 class="h-section address-title">陕西省西安市雁塔区科技路18号<br>新利赛事服务中心</h2>
        <p class="address-note">需要面谈、递交材料或现场沟通的事情，请先用客服邮箱或电话约好时间，我们会安排对应同事接待。日常的会员查询与设备适配问题，通过邮箱处理更快。</p>
        <p class="address-links">
          <a href="/questions/">先去帮助中心看常见问题</a>
          <a href="/projects/">查看联赛目录与终端适配</a>
        </p>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --contact-cut: var(--r-xl);
}

.page-contact .contact-hero {
  padding-block: 1.25rem 3.25rem;
}

.page-contact .hero-grid {
  display: grid;
  gap: 2rem;
  margin-top: 1.25rem;
}

.page-contact .hero-copy .eyebrow {
  margin-bottom: .75rem;
}

.page-contact .hero-copy .h-display {
  margin: 0 0 1rem;
  line-height: 1.06;
}

.page-contact .hero-copy .lead {
  margin: 0;
  max-width: 40ch;
}

/* 纵向信息轴 */
.page-contact .rail {
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
}

.page-contact .rail-item {
  display: grid;
  gap: .3rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .rail-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
}

.page-contact .rail-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .rail-value--mail {
  font-size: clamp(15px, 4.2vw, 19px);
  color: var(--lime);
}

.page-contact .rail-value--phone {
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: .02em;
  color: var(--paper);
}

.page-contact .rail-value--addr {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .hero-frame {
  margin: 0;
  border-radius: var(--r-lg) var(--r-lg) var(--contact-cut) var(--r-lg);
  overflow: hidden;
}

.page-contact .hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 渠道区 */
.page-contact .channel-section {
  padding-block: 3.25rem;
  border-top: 1px solid var(--line);
}

.page-contact .section-head {
  max-width: 62ch;
  margin-bottom: 2rem;
}

.page-contact .section-head .h-section {
  margin: 0 0 .6rem;
}

.page-contact .section-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-contact .channel-list {
  border-bottom: 1px solid var(--line);
}

.page-contact .channel-row {
  display: grid;
  gap: .6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.page-contact .channel-num {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1;
  color: var(--orange);
}

.page-contact .channel-body .h-sub {
  margin: 0 0 .45rem;
}

.page-contact .channel-body p {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-contact .channel-link {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 255, 96, .42);
  padding-bottom: 2px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.page-contact .channel-link:hover,
.page-contact .channel-link:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* 回复节奏主题带 */
.page-contact .reply-band {
  padding-block: 3rem;
}

.page-contact .reply-grid {
  display: grid;
  gap: 2rem;
}

.page-contact .reply-intro .eyebrow {
  margin-bottom: .6rem;
}

.page-contact .eyebrow--light {
  color: var(--cyan);
}

.page-contact .reply-intro .h-section {
  margin: 0 0 .75rem;
  color: var(--paper);
}

.page-contact .reply-intro .lead {
  margin: 0;
  max-width: 46ch;
  color: rgba(232, 246, 238, .82);
}

.page-contact .reply-hours {
  display: inline-block;
  margin: 1.25rem 0 0;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 246, 238, .35);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: .04em;
}

.page-contact .reply-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  align-content: start;
}

.page-contact .reply-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(232, 246, 238, .18);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(232, 246, 238, .92);
}

.page-contact .reply-points li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-contact .point-dot {
  width: 8px;
  height: 8px;
  margin-top: .65rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(168, 255, 96, .16);
}

/* 流程区 */
.page-contact .flow-section {
  padding-block: 3.25rem;
}

.page-contact .flow-media {
  margin: 0 0 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.page-contact .flow-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-contact .flow-step {
  position: relative;
  padding: 1.15rem 1.15rem 1.15rem 1.4rem;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, rgba(14, 42, 35, .92), rgba(14, 42, 35, 0));
}

.page-contact .flow-step .step-num {
  display: block;
  margin-bottom: .5rem;
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
}

.page-contact .flow-step .h-sub {
  margin: 0 0 .4rem;
  font-size: 18px;
}

.page-contact .flow-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* 准备清单 */
.page-contact .prep-section {
  padding-block: 3.25rem;
  border-top: 1px solid var(--line);
}

.page-contact .prep-accordion {
  margin-top: .5rem;
}

.page-contact .accordion-label {
  font-weight: 600;
}

.page-contact .prep-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* 地址卡 */
.page-contact .address-section {
  padding-block: 1rem 4rem;
}

.page-contact .address-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg) var(--contact-cut) var(--r-lg) var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.page-contact .eyebrow--dark {
  margin: 0 0 .75rem;
  color: rgba(7, 26, 22, .55);
}

.page-contact .address-title {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(22px, 4.6vw, 32px);
  line-height: 1.35;
}

.page-contact .address-note {
  margin: 0 0 1.5rem;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(7, 26, 22, .78);
}

.page-contact .address-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 0;
}

.page-contact .address-links a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #12443A;
  text-decoration: none;
  border-bottom: 1px solid rgba(18, 68, 58, .4);
  padding-bottom: 2px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.page-contact .address-links a:hover,
.page-contact .address-links a:focus-visible {
  color: #071A16;
  border-color: #071A16;
}

/* 平板与桌面 */
@media (min-width: 860px) {
  .page-contact .contact-hero {
    padding-block: 1.5rem 4rem;
  }

  .page-contact .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
    margin-top: 2rem;
  }

  .page-contact .channel-row {
    grid-template-columns: 4rem minmax(0, 1fr) 8rem;
    gap: 1.5rem;
    align-items: start;
    padding: 1.6rem 0;
  }

  .page-contact .channel-link {
    justify-self: end;
    margin-top: .35rem;
  }

  .page-contact .reply-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
    align-items: start;
  }

  .page-contact .flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .page-contact .flow-step {
    border-left: none;
    border-top: 2px solid var(--line-strong);
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: rgba(14, 42, 35, .72);
    padding: 1.6rem 1.1rem 1.4rem;
  }

  .page-contact .flow-step::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 1.1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 61, .18);
  }
}

@media (min-width: 1180px) {
  .page-contact .hero-frame {
    border-radius: var(--r-lg) var(--contact-cut) var(--contact-cut) var(--r-lg);
  }

  .page-contact .reply-band {
    padding-block: 3.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-link,
  .page-contact .address-links a {
    transition: none;
  }
}