.page-contact {
  --contact-line: rgba(159, 176, 173, 0.26);
  --contact-line-soft: rgba(159, 176, 173, 0.13);
  --contact-ink: #B94A13;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: clamp(18px, 3.6vw, 40px);
}

.page-contact .contact-hero__inner {
  display: grid;
  align-items: end;
  gap: clamp(22px, 4vw, 44px);
}

.page-contact .contact-hero__type {
  min-width: 0;
}

.page-contact .contact-hero__word {
  margin: 0.06em 0 0.16em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 22vw, 208px);
  line-height: 0.78;
  letter-spacing: 0.09em;
  text-indent: -0.05em;
  color: var(--paper-100);
}

.page-contact .contact-hero__type .lede {
  max-width: 46ch;
}

.page-contact .contact-hero__type .note {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}

.page-contact .contact-hero__figure {
  margin: 0;
  border: 1px solid var(--contact-line);
  overflow: hidden;
}

.page-contact .contact-hero__figure .figure__img {
  filter: saturate(0.92) contrast(1.02);
}

@media (min-width: 900px) {
  .page-contact .contact-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

/* ---------- 渠道面板 ---------- */
.page-contact .channels__intro {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-contact .channels__intro .section-title {
  max-width: 24ch;
}

.page-contact .channels__canvas {
  position: relative;
  padding: clamp(16px, 2.8vw, 30px);
  background-color: var(--ink-800);
  background-image:
    linear-gradient(to right, var(--contact-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--contact-line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  border: 1px solid var(--contact-line);
}

.page-contact .channels__canvas::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 55%, var(--lime) 100%);
}

.page-contact .channels__diagram {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--contact-line-soft);
}

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

.page-contact .chan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 28px);
  background: rgba(11, 31, 26, 0.78);
  border: 1px solid var(--contact-line);
  border-top: 2px solid transparent;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.page-contact .chan:hover {
  border-color: var(--contact-line);
  border-top-color: var(--orange);
  background: rgba(11, 31, 26, 0.92);
}

.page-contact .chan__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}

.page-contact .chan__value {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.22;
  color: var(--paper-100);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-contact .chan__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--silver-light);
}

.page-contact .chan--mail {
  background: rgba(28, 74, 62, 0.52);
  border-top-color: var(--lime);
}

.page-contact .chan--mail .chan__value {
  font-size: clamp(19px, 3.2vw, 32px);
  color: var(--lime);
}

.page-contact .chan--tel .chan__value {
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: 0.02em;
}

.page-contact .chan--addr .chan__value {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 500;
  line-height: 1.6;
}

@media (min-width: 780px) {
  .page-contact .channels__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

/* ---------- 复制按钮 ---------- */
.page-contact .copy-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--contact-line);
  background: transparent;
  color: var(--silver-light);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
    border-color 180ms var(--ease);
}

.page-contact .copy-btn:hover,
.page-contact .copy-btn:focus-visible {
  border-color: var(--orange);
  color: var(--paper-100);
}

.page-contact .copy-btn[data-copied],
.page-contact .copy-btn[data-copied="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink-900);
}

/* ---------- 分流入座 ---------- */
.page-contact .routing__head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(12px, 2vw, 20px);
}

.page-contact .routing__head .section-title {
  max-width: 22ch;
}

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

.page-contact .route__item {
  display: grid;
  gap: 8px 20px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--contact-line);
}

.page-contact .route__item:last-child {
  border-bottom: 1px solid var(--contact-line);
}

.page-contact .route__no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.page-contact .route__body {
  min-width: 0;
}

.page-contact .route__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper-100);
}

.page-contact .route__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--silver-light);
}

.page-contact .route__body a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 242, 78, 0.42);
}

.page-contact .route__body a:hover {
  border-bottom-color: var(--lime);
}

.page-contact .route__tag {
  justify-self: start;
  padding: 3px 12px;
  border: 1px solid var(--contact-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--silver);
}

@media (min-width: 760px) {
  .page-contact .route__item {
    grid-template-columns: 54px minmax(0, 1fr) 104px;
    align-items: start;
  }

  .page-contact .route__tag {
    justify-self: end;
  }
}

/* ---------- 材料清单 ---------- */
.page-contact .materials__paper {
  position: relative;
  padding: clamp(22px, 3.4vw, 46px);
  background: var(--paper-100);
  color: var(--brown);
  box-shadow: 9px 9px 0 var(--paper-200);
}

.page-contact .materials__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--brown);
}

.page-contact .materials__lead {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: #4A3D33;
}

.page-contact .materials__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .materials__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(42, 33, 27, 0.24);
}

.page-contact .materials__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .materials__no {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--contact-ink);
  padding-top: 2px;
}

.page-contact .materials__item-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brown);
}

.page-contact .materials__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: #4A3D33;
}

.page-contact .materials__foot {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--contact-ink);
}

.page-contact .materials__foot a {
  color: var(--contact-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 74, 19, 0.4);
}

.page-contact .materials__foot a:hover {
  border-bottom-color: var(--contact-ink);
}

.page-contact .materials__foot span {
  color: rgba(42, 33, 27, 0.4);
}

/* ---------- 响应节奏 ---------- */
.page-contact .timing__grid {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--contact-line);
  padding-top: clamp(20px, 3vw, 32px);
}

.page-contact .timing__intro .section-title {
  margin-bottom: 10px;
}

.page-contact .timing__intro p {
  margin: 0 0 12px;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--silver-light);
}

.page-contact .timing__intro .note {
  padding-left: 14px;
  border-left: 2px solid var(--contact-line);
}

.page-contact .timing__stats {
  display: grid;
  gap: 14px;
}

.page-contact .stat {
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--orange);
}

.page-contact .stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--lime);
  overflow-wrap: anywhere;
}

.page-contact .stat__cap {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--silver);
}

@media (min-width: 860px) {
  .page-contact .timing__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }

  .page-contact .timing__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .chan,
  .page-contact .copy-btn {
    transition: none;
  }
}


<main id="main-content" class="page-contact">
  <div class="wrap">
    <nav class="breadcrumbs" aria-label="面包屑">
      <a href="/">首页</a>
      <span class="breadcrumbs__sep" aria-hidden="true">/</span>
      <span aria-current="page">联系通道</span>
    </nav>
  </div>

  <section class="section contact-hero" aria-labelledby="contact-hero-title">
    <div class="wrap contact-hero__inner">
      <div class="contact-hero__type">
        <p class="eyebrow">投注指南 · 客服对接</p>
        <h1 id="contact-hero-title" class="contact-hero__word">联系</h1>
        <p class="lede">第一次找入口卡住、想查清自己的访问记录，或者移动端栏目位置忽然变了，都可以直接找投注指南的客服。把材料带齐，多数问题一次沟通就能往下推进。</p>
        <p class="note">工作日 9:00–18:00 有人值守，邮件平均 4 小时内回复。</p>
      </div>
      <figure class="figure contact-hero__figure" style="--figure-ratio:16/9">
        <img class="figure__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间城市光轨与信号波纹交汇，冷银灰与橙色高光">
        <figcaption class="figure__caption">夜间通道示意：多条光带最终汇入一处信号节点</figcaption>
      </figure>
    </div>
  </section>

  <section class="section channels" aria-labelledby="channels-title">
    <div class="wrap">
      <div class="channels__intro">
        <h2 id="channels-title" class="section-title">三条通道，按事情的轻重挑一条</h2>
        <p class="note">带截图、要写清来龙去脉的问题走邮箱；需要马上确认的拨电话；寄送材料与来访登记用地址。</p>
      </div>

      <div class="channels__canvas">
        <figure class="figure channels__diagram" style="--figure-ratio:16/7">
          <img class="figure__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="三个抽象信号节点通过细线连接到中心亮点，深绿底" loading="lazy" decoding="async">
        </figure>

        <div class="channels__grid">
          <article class="chan chan--mail">
            <p class="chan__label">01 / 电子邮件</p>
            <p class="chan__value">support@onepin-dele88.com.cn</p>
            <p class="chan__desc">适合附截图、写清操作过程的问题，也是记录类问题的首选通道。工作日 9:00–18:00 内回复，平均 4 小时以内有回音。</p>
            <button class="copy-btn" type="button" data-copy="support@onepin-dele88.com.cn" data-copy-label="复制邮箱">复制邮箱</button>
          </article>

          <article class="chan chan--tel">
            <p class="chan__label">02 / 服务电话</p>
            <p class="chan__value">400-2265-6021</p>
            <p class="chan__desc">入口打不开、安装包下到一半没了、手机端栏目位置不对，电话里说得更直接。</p>
            <button class="copy-btn" type="button" data-copy="400-2265-6021" data-copy-label="复制电话">复制电话</button>
          </article>

          <article class="chan chan--addr">
            <p class="chan__label">03 / 通讯地址</p>
            <p class="chan__value">浙江省杭州市西湖区文三路478号</p>
            <p class="chan__desc">用于寄送书面材料与来访登记，来信请注明你的联系方式。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section routing" aria-labelledby="routing-title">
    <div class="wrap">
      <div class="routing__head">
        <h2 id="routing-title" class="section-title">先对号，再联系，少走一趟</h2>
        <p class="note">下面三类来信占了客服每天处理量的大半，按对应通道提交，通常第一封邮件就能进入处理环节。</p>
      </div>

      <ul class="route__list">
        <li class="route__item">
          <span class="route__no">01</span>
          <div class="route__body">
            <h3 class="route__title">记录查不到，或者内容和预期对不上</h3>
            <p>用邮箱提交，附上页面截图与发生时间。想先自己走一遍查询流程，可以打开<a href="/support/">支持中心的记录查询说明</a>，步骤都写在里面。</p>
          </div>
          <span class="route__tag">邮箱</span>
        </li>
        <li class="route__item">
          <span class="route__no">02</span>
          <div class="route__body">
            <h3 class="route__title">不确定手上的版本，安装包也没装成功</h3>
            <p>要马上确认版本，拨电话最快；想先自己试一遍，<a href="/features/">入口与下载</a>里列了 V3 的系统要求和逐步安装方法。</p>
          </div>
          <span class="route__tag">电话</span>
        </li>
        <li class="route__item">
          <span class="route__no">03</span>
          <div class="route__body">
            <h3 class="route__title">移动端栏目位置变了，某一块显示不出来</h3>
            <p>用邮箱提交，写清手机型号与浏览器。<a href="/stories/">更新与说明</a>里记录了最近一次移动端栏目调整的来龙去脉，对照着看能省下一轮来回。</p>
          </div>
          <span class="route__tag">邮箱</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section materials" id="records-materials" aria-labelledby="materials-title">
    <div class="wrap">
      <div class="materials__paper">
        <h2 id="materials-title" class="materials__title">记录类问题，随信带上这三样</h2>
        <p class="materials__lead">材料齐全的工单平均 1 个工作日内给出处理进展。三样东西不用写得正式，讲清楚就够。</p>

        <ul class="materials__list">
          <li class="materials__item">
            <span class="materials__no">01</span>
            <div>
              <h3 class="materials__item-title">页面截图</h3>
              <p>整屏截下来，让栏目名、时间与页面上的提示都能看清，比只截一小块管用得多。</p>
            </div>
          </li>
          <li class="materials__item">
            <span class="materials__no">02</span>
            <div>
              <h3 class="materials__item-title">问题发生的时间</h3>
              <p>大致到几点就行，例如「昨天下午三点左右」。时间范围越具体，定位越快。</p>
            </div>
          </li>
          <li class="materials__item">
            <span class="materials__no">03</span>
            <div>
              <h3 class="materials__item-title">设备类型</h3>
              <p>说明是 Android 还是 iOS，带上系统版本与使用的浏览器，能省掉反复确认环境的环节。</p>
            </div>
          </li>
        </ul>

        <p class="materials__foot">
          <a href="/privacy/">隐私政策</a>
          <span aria-hidden="true">·</span>
          <a href="/terms-of-use/">使用条款</a>
          <span aria-hidden="true">·</span>
          <a href="/">回到首页</a>
        </p>
      </div>
    </div>
  </section>

  <section class="section timing" aria-labelledby="timing-title">
    <div class="wrap timing__grid">
      <div class="timing__intro">
        <h2 id="timing-title" class="section-title">什么时候能收到回音</h2>
        <p>客服邮箱在工作日 9:00–18:00 内回复，平均 4 小时以内给出答复。夜间与节假日提交的问题，会顺延到下一个工作日一早处理。</p>
        <p class="note">站点稳定性由 7×24 小时可用性监控保障。如果你遇到的是整页打不开，来信时带上大致时间点与所在网络，定位会快很多。</p>
      </div>

      <div class="timing__stats">
        <div class="stat">
          <span class="stat__num">9:00–18:00</span>
          <span class="stat__cap">工作日值守时段</span>
        </div>
        <div class="stat">
          <span class="stat__num">4 小时</span>
          <span class="stat__cap">邮件平均回复时长</span>
        </div>
        <div class="stat">
          <span class="stat__num">1 个工作日</span>
          <span class="stat__cap">记录类工单给出进展</span>
        </div>
      </div>
    </div>
  </section>

  <section class="section next-step" aria-labelledby="next-step-title">
    <div class="wrap next-step__inner">
      <h2 id="next-step-title" class="next-step__title">还差一步就说完</h2>
      <p class="next-step__text">写邮件前把三样材料放在一起，标题写清问题类型，处理起来最省时间。</p>
      <div class="next-step__actions">
        <a class="btn btn--primary" href="#records-materials">看材料清单</a>
        <a class="btn btn--ghost" href="/support/">查常见问题</a>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --contact-line: rgba(159, 176, 173, 0.26);
  --contact-line-soft: rgba(159, 176, 173, 0.13);
  --contact-ink: #B94A13;
}

/* ---------- 面包屑下的首屏 ---------- */
.page-contact .contact-hero {
  padding-top: clamp(18px, 3.6vw, 40px);
}

.page-contact .contact-hero__inner {
  display: grid;
  align-items: end;
  gap: clamp(22px, 4vw, 44px);
}

.page-contact .contact-hero__type {
  min-width: 0;
}

.page-contact .contact-hero__word {
  margin: 0.06em 0 0.16em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(78px, 21vw, 204px);
  line-height: 0.78;
  letter-spacing: 0.09em;
  text-indent: -0.05em;
  color: var(--paper-100);
}

.page-contact .contact-hero__type .lede {
  max-width: 46ch;
}

.page-contact .contact-hero__type .note {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}

.page-contact .contact-hero__figure {
  margin: 0;
  border: 1px solid var(--contact-line);
  overflow: hidden;
}

.page-contact .contact-hero__figure .figure__img {
  filter: saturate(0.92) contrast(1.02);
}

@media (min-width: 900px) {
  .page-contact .contact-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

/* ---------- 渠道面板 ---------- */
.page-contact .channels__intro {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-contact .channels__intro .section-title {
  max-width: 24ch;
}

.page-contact .channels__canvas {
  position: relative;
  padding: clamp(16px, 2.8vw, 30px);
  background-color: var(--ink-800);
  background-image:
    linear-gradient(to right, var(--contact-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--contact-line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  border: 1px solid var(--contact-line);
}

.page-contact .channels__canvas::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 58%, var(--lime) 100%);
}

.page-contact .channels__diagram {
  margin: 0 0 clamp(16px, 2.6vw, 26px);
  border: 1px solid var(--contact-line-soft);
}

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

.page-contact .chan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 28px);
  min-width: 0;
  background: rgba(11, 31, 26, 0.78);
  border: 1px solid var(--contact-line);
  border-top: 2px solid transparent;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-contact .chan:hover {
  border-top-color: var(--orange);
  background: rgba(11, 31, 26, 0.94);
}

.page-contact .chan__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}

.page-contact .chan__value {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.22;
  color: var(--paper-100);
  overflow-wrap: anywhere;
}

.page-contact .chan__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--silver-light);
}

.page-contact .chan--mail {
  background: rgba(28, 74, 62, 0.5);
  border-top-color: var(--lime);
}

.page-contact .chan--mail .chan__value {
  font-size: clamp(19px, 3.2vw, 32px);
  color: var(--lime);
}

.page-contact .chan--tel .chan__value {
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: 0.02em;
}

.page-contact .chan--addr .chan__value {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 500;
  line-height: 1.6;
}

@media (min-width: 780px) {
  .page-contact .channels__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

/* ---------- 复制按钮 ---------- */
.page-contact .copy-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--contact-line);
  background: transparent;
  color: var(--silver-light);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
    border-color 180ms var(--ease);
}

.page-contact .copy-btn:hover,
.page-contact .copy-btn:focus-visible {
  border-color: var(--orange);
  color: var(--paper-100);
}

.page-contact .copy-btn[data-copied],
.page-contact .copy-btn[data-copied="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink-900);
}

/* ---------- 分流入座 ---------- */
.page-contact .routing__head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(12px, 2vw, 20px);
}

.page-contact .routing__head .section-title {
  max-width: 22ch;
}

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

.page-contact .route__item {
  display: grid;
  gap: 8px 20px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--contact-line);
}

.page-contact .route__item:last-child {
  border-bottom: 1px solid var(--contact-line);
}

.page-contact .route__no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.page-contact .route__body {
  min-width: 0;
}

.page-contact .route__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper-100);
}

.page-contact .route__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--silver-light);
}

.page-contact .route__body a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 242, 78, 0.4);
}

.page-contact .route__body a:hover {
  border-bottom-color: var(--lime);
}

.page-contact .route__tag {
  justify-self: start;
  padding: 3px 12px;
  border: 1px solid var(--contact-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--silver);
}

@media (min-width: 760px) {
  .page-contact .route__item {
    grid-template-columns: 54px minmax(0, 1fr) 104px;
    align-items: start;
  }

  .page-contact .route__tag {
    justify-self: end;
  }
}

/* ---------- 材料清单纸面 ---------- */
.page-contact .materials__paper {
  position: relative;
  padding: clamp(22px, 3.4vw, 46px);
  background: var(--paper-100);
  color: var(--brown);
  box-shadow: 9px 9px 0 var(--paper-200);
}

.page-contact .materials__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--brown);
}

.page-contact .materials__lead {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: #4A3D33;
}

.page-contact .materials__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .materials__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(42, 33, 27, 0.24);
}

.page-contact .materials__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .materials__no {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--contact-ink);
}

.page-contact .materials__item-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brown);
}

.page-contact .materials__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: #4A3D33;
}

.page-contact .materials__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.page-contact .materials__foot a {
  color: var(--contact-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 74, 19, 0.4);
}

.page-contact .materials__foot a:hover {
  border-bottom-color: var(--contact-ink);
}

.page-contact .materials__foot span {
  color: rgba(42, 33, 27, 0.34);
}

/* ---------- 响应节奏 ---------- */
.page-contact .timing__grid {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--contact-line);
}

.page-contact .timing__intro .section-title {
  margin-bottom: 10px;
}

.page-contact .timing__intro p {
  margin: 0 0 12px;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--silver-light);
}

.page-contact .timing__intro .note {
  padding-left: 14px;
  border-left: 2px solid var(--contact-line);
}

.page-contact .timing__stats {
  display: grid;
  gap: 14px;
}

.page-contact .stat {
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--orange);
}

.page-contact .stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--lime);
  overflow-wrap: anywhere;
}

.page-contact .stat__cap {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--silver);
}

@media (min-width: 860px) {
  .page-contact .timing__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }

  .page-contact .timing__stats {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 收尾一步 ---------- */
.page-contact .next-step__inner {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--ink-800);
  border-left: 3px solid var(--orange);
}

.page-contact .next-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--paper-100);
}

.page-contact .next-step__text {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--silver-light);
}

.page-contact .next-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

@media (min-width: 820px) {
  .page-contact .next-step__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 32px;
  }

  .page-contact .next-step__title {
    grid-column: 1;
  }

  .page-contact .next-step__text {
    grid-column: 1;
  }

  .page-contact .next-step__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .chan,
  .page-contact .copy-btn {
    transition: none;
  }
}