.page-contact {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(46, 242, 195, 0.09), transparent 62%),
    radial-gradient(760px 420px at 4% 6%, rgba(255, 90, 54, 0.07), transparent 60%),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-contact .breadcrumbs {
  padding-block: 22px 6px;
}

.page-contact .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.page-contact .breadcrumbs__link {
  color: var(--mute);
  text-decoration: none;
  transition: color 0.18s ease;
}

.page-contact .breadcrumbs__link:hover,
.page-contact .breadcrumbs__link:focus-visible {
  color: var(--flame);
}

.page-contact .breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: var(--hair-strong);
}

.page-contact .breadcrumbs__item--current {
  color: var(--ice);
}

.page-contact .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  padding-bottom: clamp(38px, 6vw, 82px);
}

.page-contact .contact-h1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(54px, 13.2vw, 146px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--paper);
}

.page-contact .contact-h1__en {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--flame);
}

.page-contact .hero-lede {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.78;
  color: var(--ice);
}

.page-contact .live-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(46, 242, 195, 0.32);
  background: rgba(46, 242, 195, 0.06);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--live);
}

.page-contact .live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--live);
  animation: cp-breathe 2.4s ease-in-out infinite;
}

@keyframes cp-breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

.page-contact .hero-figure {
  position: relative;
  margin: 30px 0 0;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
  box-shadow: 8px 8px 0 rgba(215, 226, 234, 0.09);
}

.page-contact .hero-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06) brightness(0.94);
}

.page-contact .hero-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mute);
}

/* ---------- 渠道面板 ---------- */
.page-contact .channel-panel {
  position: relative;
  padding: 22px clamp(16px, 2.4vw, 28px) 6px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(180deg, rgba(14, 42, 58, 0.96), rgba(10, 31, 44, 0.97));
  box-shadow: var(--lift);
}

.page-contact .channel-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flame) 0%, rgba(255, 90, 54, 0) 78%);
}

.page-contact .panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair-strong);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--paper);
}

.page-contact .panel-head .mono {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--live);
}

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

.page-contact .channel-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}

.page-contact .channel-row:last-child {
  border-bottom: 0;
}

.page-contact .channel-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  color: var(--flame);
}

.page-contact .channel-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.page-contact .channel-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.page-contact .channel-label {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--mute);
}

.page-contact .channel-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(13.5px, 1.6vw, 16px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .channel-value--text {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-contact .channel-note {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mute);
}

.page-contact .copy-btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-top: 12px;
  padding: 7px 13px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.page-contact .copy-btn:hover {
  border-color: var(--flame);
  color: var(--flame);
}

.page-contact .copy-btn:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 2px;
}

.page-contact .copy-btn[data-state="done"] {
  border-color: var(--live);
  color: var(--live);
  background: rgba(46, 242, 195, 0.1);
}

.page-contact .copy-btn[data-state="fail"] {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---------- 通用段落节奏 ---------- */
.page-contact .section {
  padding-block: clamp(42px, 6vw, 86px);
}

.page-contact .section-head {
  max-width: 62ch;
  margin-bottom: clamp(22px, 3vw, 38px);
}

.page-contact .section-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.page-contact .section-lede {
  max-width: 52ch;
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.76;
  color: var(--ice);
}

/* ---------- 冷白纸面：按问题找入口 ---------- */
.page-contact .section--paper {
  background: var(--paper);
  color: var(--black);
  border-top: 1px solid var(--ice);
  border-bottom: 1px solid var(--ice);
}

.page-contact .section--paper .eyebrow {
  color: var(--ink-2);
  opacity: 0.72;
}

.page-contact .section--paper .section-heading {
  color: var(--black);
}

.page-contact .section--paper .section-lede {
  color: var(--ink-2);
}

.page-contact .route-board {
  padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 34px) clamp(10px, 2vw, 16px);
  border: 1px solid var(--ice);
  background: var(--white);
  box-shadow: 10px 10px 0 rgba(14, 42, 58, 0.1);
}

.page-contact .route-board .fold {
  border-top: 1px solid rgba(10, 12, 16, 0.14);
}

.page-contact .route-board .fold:first-child {
  border-top: 0;
}

.page-contact .route-board .fold__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 2px 17px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--black);
}

.page-contact .route-board .fold__head::-webkit-details-marker {
  display: none;
}

.page-contact .route-board .fold__head::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--flame);
}

.page-contact .route-board .fold[open] .fold__head::after {
  content: "−";
}

.page-contact .route-board .fold__head:focus-visible {
  outline: 2px solid var(--ink-2);
  outline-offset: 3px;
}

.page-contact .fold-tag {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
}

.page-contact .fold-tag--hot {
  background: var(--flame);
  color: var(--white);
}

.page-contact .route-board .fold__body {
  padding: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--ink-2);
}

.page-contact .route-board .fold__body p {
  max-width: 66ch;
  margin: 0;
}

.page-contact .route-board .link-more {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--flame);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.18s ease;
}

.page-contact .route-board .link-more:hover,
.page-contact .route-board .link-more:focus-visible {
  color: var(--flame);
}

/* ---------- 合作流程条带 ---------- */
.page-contact .coop-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .coop-step {
  padding: 24px clamp(16px, 2.4vw, 30px) 28px;
  background: var(--ink-2);
  border-top: 3px solid var(--hair-strong);
  transition: border-color 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.page-contact .coop-step:hover,
.page-contact .coop-step:focus-within {
  border-top-color: var(--flame);
  background: var(--ink-3);
  transform: translateY(-2px);
}

.page-contact .coop-step__no {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--flame);
}

.page-contact .coop-step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

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

/* ---------- 回复节奏 ---------- */
.page-contact .reply-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.page-contact .reply-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hair-strong);
  filter: saturate(0.82) contrast(1.06) brightness(0.94);
}

.page-contact .reply-list {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}

.page-contact .reply-list > div {
  display: grid;
  gap: 5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}

.page-contact .reply-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .reply-list dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--flame);
}

.page-contact .reply-list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ice);
}

/* ---------- 快速路径 ---------- */
.page-contact .path-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-contact .path-card {
  display: grid;
  gap: 8px;
  padding: 22px 20px 24px;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.page-contact .path-card:hover,
.page-contact .path-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--flame);
  background: var(--ink-3);
}

.page-contact .path-card__no {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--live);
}

.page-contact .path-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-contact .path-card__text {
  font-size: 14px;
  line-height: 1.76;
  color: var(--ice);
}

.page-contact .path-card__go {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--flame);
}

.page-contact .paths-note {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--mute);
}

.page-contact .paths-note a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid var(--flame);
}

.page-contact .paths-note a:hover,
.page-contact .paths-note a:focus-visible {
  color: var(--flame);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-contact .reply-list > div {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

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

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

@media (min-width: 900px) {
  .page-contact .reply-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
  }
}

@media (min-width: 980px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
    padding-top: 10px;
  }

  .page-contact .hero-figure {
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .live-dot {
    animation: none;
    opacity: 1;
  }

  .page-contact .copy-btn,
  .page-contact .coop-step,
  .page-contact .path-card,
  .page-contact .breadcrumbs__link {
    transition: none;
  }

  .page-contact .coop-step:hover,
  .page-contact .coop-step:focus-within,
  .page-contact .path-card:hover,
  .page-contact .path-card:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等，我需要检查一下最后的标记。指令说的是按顺序输出这三个标记，每个出现一次：

...

...
而且没有说 <<<END>>>。让我删掉它。

同时检查 `--ink-3` 是否存在于 design tokens 中：是的，`--ink-3:#0A1F2C;`。很好。

`--hair`、`--hair-strong` 存在吗？是的。

所有用到的变量：--ink、--ink-2、--ink-3、--paper、--ice、--flame、--live、--black、--mute、--amber、--white、--font-display、--font-body、--font-mono、--lift、--hair、--hair-strong。都没问题。

删掉 <<<END>>>。
<main id="main-content" class="page-contact">
  <div class="container">
    <nav class="breadcrumbs" aria-label="当前位置">
      <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">首页</a></li>
        <li class="breadcrumbs__item breadcrumbs__item--current"><span aria-current="page">服务联络</span></li>
      </ol>
    </nav>
  </div>

  <section class="container contact-hero" aria-labelledby="contact-title">
    <div class="hero-left">
      <p class="eyebrow">联络台 / REACH US</p>
      <h1 class="contact-h1" id="contact-title">
        服务联络
        <span class="contact-h1__en">JINBO SPORTS / CONTACT</span>
      </h1>
      <p class="hero-lede">金博体育的客服邮箱与电话在工作日接应资料、直播、名单和赛区合作的问题。把赛区、项目和要办的环节先说清，回信就能直接对上处理人。</p>
      <p class="live-line"><span class="live-dot" aria-hidden="true"></span>工作日回复 · 电话 9:00–18:00</p>
      <figure class="hero-figure">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="场馆入口灯带沿斜面向内延伸，冷白地面反射出长条光带">
        <figcaption class="meta">赛区通道 · 夜间入场口</figcaption>
      </figure>
    </div>

    <div class="hero-right">
      <section class="channel-panel" aria-labelledby="channel-title">
        <h2 class="panel-head" id="channel-title">联络渠道 <span class="mono">DIRECT</span></h2>
        <ul class="channel-list">
          <li class="channel-row">
            <span class="channel-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2.6" y="4.8" width="18.8" height="14.4" rx="1.4"></rect>
                <path d="M3.2 6.2 12 13l8.8-6.8"></path>
              </svg>
            </span>
            <div class="channel-body">
              <p class="channel-label">客服邮箱</p>
              <p class="channel-value mono">kefu@sports-e-jinbo.com.cn</p>
              <p class="channel-note">资料、直播、名单与赛区合作都从这里开始，写清赛区与轮次回得更快。</p>
            </div>
            <button class="copy-btn" type="button" data-copy="kefu@sports-e-jinbo.com.cn">复制邮箱</button>
          </li>

          <li class="channel-row">
            <span class="channel-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                <path d="M5.2 3.6h3.2l1.7 4.3-2.2 1.5a11.6 11.6 0 0 0 5.7 5.7l1.5-2.2 4.3 1.7v3.2a2.2 2.2 0 0 1-2.4 2.2A17.4 17.4 0 0 1 3 6a2.2 2.2 0 0 1 2.2-2.4Z"></path>
              </svg>
            </span>
            <div class="channel-body">
              <p class="channel-label">客服电话</p>
              <p class="channel-value mono">400-1918-2332</p>
              <p class="channel-note">工作日 9:00–18:00 接入咨询，临时变更和临近开赛的问题打电话更省时间。</p>
            </div>
            <button class="copy-btn" type="button" data-copy="400-1918-2332">复制号码</button>
          </li>

          <li class="channel-row">
            <span class="channel-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 21s6.6-6.1 6.6-10.6A6.6 6.6 0 0 0 12 3.8a6.6 6.6 0 0 0-6.6 6.6C5.4 14.9 12 21 12 21Z"></path>
                <circle cx="12" cy="10.3" r="2.4"></circle>
              </svg>
            </span>
            <div class="channel-body">
              <p class="channel-label">通信地址</p>
              <p class="channel-value channel-value--text">黑龙江省哈尔滨市南岗区红旗大街178号</p>
              <p class="channel-note">邮寄或递送材料前，先发一封邮件确认收件信息与送达时间。</p>
            </div>
            <button class="copy-btn" type="button" data-copy="黑龙江省哈尔滨市南岗区红旗大街178号">复制地址</button>
          </li>
        </ul>
        <p class="sr-only" data-copy-status aria-live="polite"></p>
      </section>
    </div>
  </section>

  <section class="section section--paper" aria-labelledby="routes-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">02 / 按问题找入口</p>
        <h2 class="section-heading" id="routes-title">同一封邮件，四种写法</h2>
        <p class="section-lede">标题决定邮件落到谁手上。把要素一次写全，往返就少一轮。</p>
      </div>

      <div class="route-board">
        <details class="fold" open>
          <summary class="fold__head"><span class="fold-tag">邮箱</span>资料领取 · 阵容表与赛程表</summary>
          <div class="fold__body">
            <p>标题写“项目 + 赛区 + 轮次”，正文说明需要哪几类资料。赛事资料库工具当前是 6.2 版，阵容表、赛程表、场馆交通卡和名单核对清单可以一起领，回信里给取用方式。</p>
            <a class="link-more" href="/product/">查看资料与直播</a>
          </div>
        </details>

        <details class="fold">
          <summary class="fold__head"><span class="fold-tag">邮箱</span>直播预约 · 开赛提醒</summary>
          <div class="fold__body">
            <p>邮件里写清开赛时间、场馆与赛区。提醒在开赛前 48 小时创建，开赛前 30 分钟推送；比赛改期后重新发一封，我们按新时间再排一次。</p>
            <a class="link-more" href="/product/">查看直播预约</a>
          </div>
        </details>

        <details class="fold">
          <summary class="fold__head"><span class="fold-tag fold-tag--hot">合作</span>赛区合作 · 场馆与运营方</summary>
          <div class="fold__body">
            <p>场馆、赛区运营方和球队领队走同一条对接路径。邮件写明赛区、项目、可用档期和需要配合的环节，剩下的按流程往下推。</p>
            <a class="link-more" href="#coop">查看对接流程</a>
          </div>
        </details>

        <details class="fold">
          <summary class="fold__head"><span class="fold-tag">邮箱</span>名单核对 · 阵容差异</summary>
          <div class="fold__body">
            <p>发现阵容名单和手上版本不一致时，把赛区、球队、轮次和你那份版本的时间发过来。差异项会标出来，方便你和队伍确认。</p>
            <a class="link-more" href="/questions/">去问答中心</a>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="section coop" id="coop" aria-labelledby="coop-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">03 / 赛区合作</p>
        <h2 class="section-heading" id="coop-title">从一封邮件到排期落地</h2>
        <p class="section-lede">场馆和赛区运营方按这三步推进。条件说清，资料和直播提醒就能提前排进日程。</p>
      </div>

      <ol class="coop-flow">
        <li class="coop-step">
          <span class="coop-step__no mono">01</span>
          <h3>提交需求</h3>
          <p>邮件标题写“赛区 + 项目 + 合作意向”，正文附场馆名称、预计场次和需要配合的环节。开赛日期明确的，放在第一行。</p>
        </li>
        <li class="coop-step">
          <span class="coop-step__no mono">02</span>
          <h3>赛区确认</h3>
          <p>场馆与赛区联络同事对接档期和责任分工，回复里给出对接人和后续沟通方式。12 人的联络团队按赛区划分，问题不会来回转手。</p>
        </li>
        <li class="coop-step">
          <span class="coop-step__no mono">03</span>
          <h3>资料与直播排期</h3>
          <p>确认之后把阵容表、赛程表和场馆交通卡归到对应轮次；直播提醒按开赛前 48 小时创建、开赛前 30 分钟推送执行。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section" aria-labelledby="reply-title">
    <div class="container reply-inner">
      <div class="reply-media">
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="无人物控制台上的耳机与状态灯局部特写，冷光落在按键边缘" loading="lazy" decoding="async">
      </div>
      <div class="reply-body">
        <p class="eyebrow">04 / 回复节奏</p>
        <h2 class="section-heading" id="reply-title">什么时候能收到回音</h2>
        <dl class="reply-list">
          <div>
            <dt>邮件</dt>
            <dd>工作日内在客服邮箱回复。写明赛区与轮次，回信可以直接对上处理人。</dd>
          </div>
          <div>
            <dt>电话</dt>
            <dd>工作日 9:00–18:00 接入咨询，临近开赛的变更走电话更省时间。</dd>
          </div>
          <div>
            <dt>合作</dt>
            <dd>涉及场馆档期的需求，在赛区确认之后另行回复排期，不用反复追问进度。</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <section class="section paths" aria-labelledby="paths-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">05 / 直接进入</p>
        <h2 class="section-heading" id="paths-title">不用等回信，这几处自己就能看</h2>
      </div>

      <div class="path-grid">
        <a class="path-card" href="/product/">
          <span class="path-card__no">01</span>
          <span class="path-card__title">资料与直播</span>
          <span class="path-card__text">领阵容表与赛程表，为一场比赛建好开赛提醒。</span>
          <span class="path-card__go">进入 →</span>
        </a>
        <a class="path-card" href="/column/">
          <span class="path-card__no">02</span>
          <span class="path-card__title">联赛专题库</span>
          <span class="path-card__text">按项目、赛区和赛程阶段翻赛程观察与阵容变化。</span>
          <span class="path-card__go">进入 →</span>
        </a>
        <a class="path-card" href="/questions/">
          <span class="path-card__no">03</span>
          <span class="path-card__title">问答中心</span>
          <span class="path-card__text">资料怎么领、提醒怎么改、名单怎么对，先在这里找答案。</span>
          <span class="path-card__go">进入 →</span>
        </a>
      </div>

      <p class="paths-note">沟通中留下的联系方式依照<a href="/privacy-notice/">隐私声明</a>使用。</p>
    </div>
  </section>
</main>

.page-contact {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(46, 242, 195, 0.09), transparent 62%),
    radial-gradient(760px 420px at 4% 6%, rgba(255, 90, 54, 0.07), transparent 60%),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-contact .breadcrumbs {
  padding-block: 22px 6px;
}

.page-contact .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.page-contact .breadcrumbs__link {
  color: var(--mute);
  text-decoration: none;
  transition: color 0.18s ease;
}

.page-contact .breadcrumbs__link:hover,
.page-contact .breadcrumbs__link:focus-visible {
  color: var(--flame);
}

.page-contact .breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: var(--hair-strong);
}

.page-contact .breadcrumbs__item--current {
  color: var(--ice);
}

.page-contact .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  padding-bottom: clamp(38px, 6vw, 82px);
}

.page-contact .contact-h1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(54px, 13.2vw, 146px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--paper);
}

.page-contact .contact-h1__en {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--flame);
}

.page-contact .hero-lede {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.78;
  color: var(--ice);
}

.page-contact .live-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(46, 242, 195, 0.32);
  background: rgba(46, 242, 195, 0.06);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--live);
}

.page-contact .live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--live);
  animation: cp-breathe 2.4s ease-in-out infinite;
}

@keyframes cp-breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

.page-contact .hero-figure {
  position: relative;
  margin: 30px 0 0;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
  box-shadow: 8px 8px 0 rgba(215, 226, 234, 0.09);
}

.page-contact .hero-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06) brightness(0.94);
}

.page-contact .hero-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mute);
}

/* ---------- 渠道面板 ---------- */
.page-contact .channel-panel {
  position: relative;
  padding: 22px clamp(16px, 2.4vw, 28px) 6px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(180deg, rgba(14, 42, 58, 0.96), rgba(10, 31, 44, 0.97));
  box-shadow: var(--lift);
}

.page-contact .channel-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flame) 0%, rgba(255, 90, 54, 0) 78%);
}

.page-contact .panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair-strong);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--paper);
}

.page-contact .panel-head .mono {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--live);
}

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

.page-contact .channel-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}

.page-contact .channel-row:last-child {
  border-bottom: 0;
}

.page-contact .channel-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  color: var(--flame);
}

.page-contact .channel-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.page-contact .channel-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.page-contact .channel-label {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--mute);
}

.page-contact .channel-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(13.5px, 1.6vw, 16px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .channel-value--text {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-contact .channel-note {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mute);
}

.page-contact .copy-btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-top: 12px;
  padding: 7px 13px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.page-contact .copy-btn:hover {
  border-color: var(--flame);
  color: var(--flame);
}

.page-contact .copy-btn:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 2px;
}

.page-contact .copy-btn[data-state="done"] {
  border-color: var(--live);
  color: var(--live);
  background: rgba(46, 242, 195, 0.1);
}

.page-contact .copy-btn[data-state="fail"] {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---------- 通用段落节奏 ---------- */
.page-contact .section {
  padding-block: clamp(42px, 6vw, 86px);
}

.page-contact .section-head {
  max-width: 62ch;
  margin-bottom: clamp(22px, 3vw, 38px);
}

.page-contact .section-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.page-contact .section-lede {
  max-width: 52ch;
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.76;
  color: var(--ice);
}

/* ---------- 冷白纸面：按问题找入口 ---------- */
.page-contact .section--paper {
  background: var(--paper);
  color: var(--black);
  border-top: 1px solid var(--ice);
  border-bottom: 1px solid var(--ice);
}

.page-contact .section--paper .eyebrow {
  color: var(--ink-2);
  opacity: 0.72;
}

.page-contact .section--paper .section-heading {
  color: var(--black);
}

.page-contact .section--paper .section-lede {
  color: var(--ink-2);
}

.page-contact .route-board {
  padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 34px) clamp(10px, 2vw, 16px);
  border: 1px solid var(--ice);
  background: var(--white);
  box-shadow: 10px 10px 0 rgba(14, 42, 58, 0.1);
}

.page-contact .route-board .fold {
  border-top: 1px solid rgba(10, 12, 16, 0.14);
}

.page-contact .route-board .fold:first-child {
  border-top: 0;
}

.page-contact .route-board .fold__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 2px 17px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--black);
}

.page-contact .route-board .fold__head::-webkit-details-marker {
  display: none;
}

.page-contact .route-board .fold__head::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--flame);
}

.page-contact .route-board .fold[open] .fold__head::after {
  content: "−";
}

.page-contact .route-board .fold__head:focus-visible {
  outline: 2px solid var(--ink-2);
  outline-offset: 3px;
}

.page-contact .fold-tag {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
}

.page-contact .fold-tag--hot {
  background: var(--flame);
  color: var(--white);
}

.page-contact .route-board .fold__body {
  padding: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--ink-2);
}

.page-contact .route-board .fold__body p {
  max-width: 66ch;
  margin: 0;
}

.page-contact .route-board .link-more {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--flame);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.18s ease;
}

.page-contact .route-board .link-more:hover,
.page-contact .route-board .link-more:focus-visible {
  color: var(--flame);
}

/* ---------- 合作流程条带 ---------- */
.page-contact .coop-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .coop-step {
  padding: 24px clamp(16px, 2.4vw, 30px) 28px;
  background: var(--ink-2);
  border-top: 3px solid var(--hair-strong);
  transition: border-color 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.page-contact .coop-step:hover,
.page-contact .coop-step:focus-within {
  border-top-color: var(--flame);
  background: var(--ink-3);
  transform: translateY(-2px);
}

.page-contact .coop-step__no {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--flame);
}

.page-contact .coop-step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

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

/* ---------- 回复节奏 ---------- */
.page-contact .reply-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.page-contact .reply-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hair-strong);
  filter: saturate(0.82) contrast(1.06) brightness(0.94);
}

.page-contact .reply-list {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}

.page-contact .reply-list > div {
  display: grid;
  gap: 5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}

.page-contact .reply-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .reply-list dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--flame);
}

.page-contact .reply-list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ice);
}

/* ---------- 快速路径 ---------- */
.page-contact .path-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-contact .path-card {
  display: grid;
  gap: 8px;
  padding: 22px 20px 24px;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.page-contact .path-card:hover,
.page-contact .path-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--flame);
  background: var(--ink-3);
}

.page-contact .path-card__no {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--live);
}

.page-contact .path-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-contact .path-card__text {
  font-size: 14px;
  line-height: 1.76;
  color: var(--ice);
}

.page-contact .path-card__go {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--flame);
}

.page-contact .paths-note {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--mute);
}

.page-contact .paths-note a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid var(--flame);
}

.page-contact .paths-note a:hover,
.page-contact .paths-note a:focus-visible {
  color: var(--flame);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-contact .reply-list > div {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

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

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

@media (min-width: 900px) {
  .page-contact .reply-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
  }
}

@media (min-width: 980px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
    padding-top: 10px;
  }

  .page-contact .hero-figure {
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .live-dot {
    animation: none;
    opacity: 1;
  }

  .page-contact .copy-btn,
  .page-contact .coop-step,
  .page-contact .path-card,
  .page-contact .breadcrumbs__link {
    transition: none;
  }

  .page-contact .coop-step:hover,
  .page-contact .coop-step:focus-within,
  .page-contact .path-card:hover,
  .page-contact .path-card:focus-visible {
    transform: none;
  }
}