.page-contact {
  --contact-line: var(--rule);
  --contact-radius: var(--radius);
  display: block;
}

.page-contact .contact-hero {
  position: relative;
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--rule);
}

.page-contact .contact-hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 6vw, 52px);
  line-height: 1.2;
  color: var(--ink);
  max-width: 22ch;
}

.page-contact .contact-hero__lede {
  max-width: 62ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: #3b4a42;
}

.page-contact .contact-hero__mark {
  display: none;
}

.page-contact .contact-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--rule);
  list-style: none;
}

.page-contact .contact-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: #4a5a52;
}

.page-contact .contact-hero__facts b {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 19px;
  color: var(--dirt-deep);
  font-variant-numeric: tabular-nums;
}

.page-contact .contact-channels {
  padding-top: 44px;
}

.page-contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

.page-contact .channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--contact-radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 46px -34px rgba(18, 25, 28, 0.55);
  outline: none;
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease),
    transform 200ms var(--ease), backdrop-filter 200ms var(--ease),
    border-color 200ms var(--ease);
}

.page-contact .channel-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  border-radius: var(--contact-radius) var(--contact-radius) 0 0;
  background: linear-gradient(90deg, var(--pitch-deep), var(--pitch) 55%, var(--ember));
}

.page-contact .channel-card:hover,
.page-contact .channel-card:focus-visible {
  background: #ffffff;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  border-color: var(--rule);
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -30px rgba(110, 42, 23, 0.42);
}

.page-contact .channel-card:focus-visible {
  outline: 2px solid var(--scoreboard);
  outline-offset: 3px;
}

.page-contact .channel-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: var(--pitch-deep);
  color: var(--scoreboard);
}

.page-contact .channel-card__name {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-contact .channel-card__best {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--pitch-deep);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-contact .channel-card__value {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dirt-deep);
  word-break: break-word;
}

.page-contact .channel-card__desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.75;
  color: #3b4a42;
}

.page-contact .channel-card__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.page-contact .channel-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.page-contact .channel-card__meta-key {
  color: #6b7a72;
  flex: 0 0 auto;
}

.page-contact .channel-card__meta-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--pitch-deep);
  text-align: right;
  word-break: break-word;
}

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

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

.page-contact .contact-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #5c6a62;
  max-width: 56ch;
  padding-left: 14px;
  border-left: 3px solid var(--dirt);
}

.page-contact .prep-band {
  margin-top: 52px;
  padding: 30px 22px 34px;
  border-radius: var(--contact-radius);
  background: var(--pitch-light);
}

.page-contact .prep-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 24px;
}

.page-contact .prep-intro {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.78;
  color: #33453c;
  max-width: 46ch;
}

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

.page-contact .prep-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.page-contact .prep-item::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pitch);
  box-shadow: 0 0 0 3px rgba(30, 139, 78, 0.16);
}

.page-contact .prep-item:hover {
  border-color: var(--pitch);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -18px rgba(19, 92, 56, 0.8);
}

.page-contact .prep-hint {
  margin-top: 28px;
  padding: 20px 20px 6px;
  border-radius: var(--contact-radius);
  background: rgba(255, 255, 255, 0.72);
  border-left: 4px solid var(--pitch-deep);
}

.page-contact .prep-hint h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pitch-deep);
}

.page-contact .prep-hint p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.78;
  color: #3b4a42;
}

.page-contact .prep-figure {
  margin: 0;
}

.page-contact .prep-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--contact-radius);
  border: 1px solid var(--rule);
}

.page-contact .prep-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #5c6a62;
}

.page-contact .contact-response {
  padding-top: 52px;
}

.page-contact .response-table {
  margin-top: 24px;
  border-top: 2px solid var(--pitch-deep);
}

.page-contact .response-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--rule);
}

.page-contact .response-key {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7a72;
}

.page-contact .response-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--dirt-deep);
  font-variant-numeric: tabular-nums;
}

.page-contact .response-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: #3b4a42;
}

.page-contact .bulletin {
  margin-top: 56px;
  padding: 44px 0 52px;
  background: var(--dirt-deep);
  color: #f4e9e2;
  clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%);
}

.page-contact .bulletin-head {
  max-width: 60ch;
}

.page-contact .bulletin-index {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 10px;
  border-radius: 3px;
  background: rgba(242, 118, 31, 0.9);
  color: #2a1008;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-contact .bulletin-head h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.page-contact .bulletin-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(244, 233, 226, 0.82);
}

.page-contact .bulletin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 30px 0 0;
}

.page-contact .bulletin-cell {
  padding: 20px 18px;
  border: 1px solid rgba(248, 244, 237, 0.22);
  border-radius: var(--contact-radius);
  background: rgba(18, 25, 28, 0.16);
  min-width: 0;
}

.page-contact .bulletin-cell dt {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--scoreboard);
}

.page-contact .bulletin-value {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: #ffffff;
  word-break: break-word;
}

.page-contact .bulletin-value--mono {
  font-size: 15px;
}

.page-contact .bulletin-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(244, 233, 226, 0.74);
}

.page-contact .contact-slash {
  height: 64px;
  background: linear-gradient(
    103deg,
    var(--dirt-deep) 0%,
    var(--dirt-deep) 40%,
    var(--ember) 40%,
    var(--ember) 42.5%,
    var(--paper) 42.5%,
    var(--paper) 100%
  );
}

.page-contact .contact-next {
  padding: 40px 0 20px;
}

.page-contact .contact-next__title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-contact .contact-next__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .contact-next__list a {
  position: relative;
  display: block;
  padding: 14px 16px 14px 20px;
  border-left: 3px solid var(--pitch);
  border-radius: 0 var(--contact-radius) var(--contact-radius) 0;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
    transform 160ms var(--ease);
}

.page-contact .contact-next__list a::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 9px;
  width: 0;
  height: 2px;
  background: var(--ember);
  transition: width 160ms var(--ease);
}

.page-contact .contact-next__list a:hover,
.page-contact .contact-next__list a:focus-visible {
  border-left-color: var(--ember);
  background: var(--pitch-light);
  transform: translateX(2px);
}

.page-contact .contact-next__list a:hover::after,
.page-contact .contact-next__list a:focus-visible::after {
  width: calc(100% - 40px);
}

.page-contact .contact-next__list a:focus-visible {
  outline: 2px solid var(--scoreboard);
  outline-offset: 2px;
}

@media (min-width: 760px) {
  .page-contact .prep-layout {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 34px;
  }

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

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

  .page-contact .response-row {
    grid-template-columns: 132px 200px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 22px;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero {
    padding: 36px 0 52px;
  }

  .page-contact .contact-hero__mark {
    display: block;
    position: absolute;
    top: 44px;
    right: 4px;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--pitch-deep);
    opacity: 0.72;
  }

  .page-contact .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 32px;
  }

  .page-contact .prep-band {
    padding: 44px 40px 48px;
  }

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

  .page-contact .contact-slash {
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-card,
  .page-contact .prep-item,
  .page-contact .contact-next__list a,
  .page-contact .contact-next__list a::after {
    transition: none;
  }
}
<<<END>>>

等等——我把 `<<<END>>>` 加进去了，但说明里说只能按顺序输出两个标记。去掉它。

重新输出，把那个多余的标记删掉。

另外再检查一下：`.page-contact .contact-channels { padding-top: 44px; }` —— 没问题。

`.section-head` / `.section-index` / `.section-title` / `.section-note` 都是共享类，没问题。

再确认一下 `vert-note` 是共享类——是的，没错。

还有 `breadcrumb`、`lede`、`container`、`section`，都可以。

检查一下所有 class 是不是都在 `.page-contact` 作用域下定义过了：contact-hero、contact-hero__mark、contact-hero__lede、contact-hero__facts、contact-channels、contact-grid、channel-card、channel-card__icon、channel-card__name、channel-card__best、channel-card__value、channel-card__desc、channel-card__meta、channel-card__meta-row、channel-card__meta-key、channel-card__meta-val、contact-figure、prep-band、prep-layout、prep-main、prep-intro、prep-list、prep-item、prep-hint、prep-figure、contact-response、response-table、response-row、response-key、response-val、response-desc、bulletin、bulletin-head、bulletin-index、bulletin-grid、bulletin-cell、bulletin-value、bulletin-value--mono、bulletin-note、contact-slash、contact-next、contact-next__title、contact-next__list。

`.prep-main` 在 HTML 里用到了，但 CSS 里没有专门规则——没关系，只是一个普通 div。其实不用管也行。

好。

图片数量是 2 张，在最小 1 张和最大 15 张之间，符合要求。

没有外部链接，没有表单。

品牌名“万合足球站”出现在 h1 和正文里。好。
<main id="main-content" class="page-contact">

  <div class="container">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">咨询与客服</li>
      </ol>
    </nav>
  </div>

  <div class="container">
    <header class="contact-hero" data-reveal>
      <p class="vert-note contact-hero__mark" aria-hidden="true">工作日九点到晚九点有人值守</p>
      <h1>计费、资料、设备问题，找万合足球站的客服一次说清</h1>
      <p class="lede contact-hero__lede">
        续费扣款对不上、球队资料该选哪几支、桌面端转会时间线一直不刷新，把这些连同账号和订单信息一起给到我们，客服就能直接查到你的具体情况，不用来回确认三轮。
      </p>
      <ul class="contact-hero__facts">
        <li><b>9:00–21:00</b><span>工作日在线时段</span></li>
        <li><b>1</b><span>个工作日内回复邮件与工单</span></li>
        <li><b>3</b><span>条通道，按问题类型选</span></li>
      </ul>
    </header>
  </div>

  <div class="container">
    <section class="section contact-channels" id="channels" data-reveal>
      <div class="section-head">
        <span class="section-index">01</span>
        <h2 class="section-title">三条通道，按你手头的问题来选</h2>
        <p class="section-note">选对入口，第一次沟通就能把事办完</p>
      </div>

      <div class="contact-grid">

        <article class="channel-card" tabindex="0">
          <span class="channel-card__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="5" width="20" height="14" rx="2"></rect>
              <path d="m3 8 9 6 9-6"></path>
            </svg>
          </span>
          <h3 class="channel-card__name">客服邮箱</h3>
          <p class="channel-card__best">适合写清楚来龙去脉的问题</p>
          <p class="channel-card__value">support@tactic-wanhe.com.cn</p>
          <p class="channel-card__desc">订阅周期与到期日核对、发票抬头与开票时间、球队资料覆盖哪些球队、赛季战报包能否换绑到另一个账号，这类需要附上订单截图的问题，用邮件最省事。</p>
          <div class="channel-card__meta">
            <div class="channel-card__meta-row">
              <span class="channel-card__meta-key">回复节奏</span>
              <span class="channel-card__meta-val">一个工作日内</span>
            </div>
            <div class="channel-card__meta-row">
              <span class="channel-card__meta-key">建议附上</span>
              <span class="channel-card__meta-val">账号与订单号</span>
            </div>
          </div>
        </article>

        <article class="channel-card" tabindex="0">
          <span class="channel-card__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h1.4a1 1 0 0 1 .96.72l.86 3a1 1 0 0 1-.34 1.05L8.05 8.86a12.4 12.4 0 0 0 5.6 5.6l1.09-1.33a1 1 0 0 1 1.05-.34l3 .86a1 1 0 0 1 .72.96v1.4A2.5 2.5 0 0 1 17 21.5 14.5 14.5 0 0 1 4 5.5Z"></path>
            </svg>
          </span>
          <h3 class="channel-card__name">客服电话</h3>
          <p class="channel-card__best">适合当场对着操作排查的问题</p>
          <p class="channel-card__value">400-4667-1147</p>
          <p class="channel-card__desc">阵容推送没弹出来、手机上订阅了但桌面端还锁着、付款页面卡住不动，这类需要一边打电话一边点按的现场问题，直接拨过来，客服会跟着你的步骤一起看。</p>
          <div class="channel-card__meta">
            <div class="channel-card__meta-row">
              <span class="channel-card__meta-key">接听时段</span>
              <span class="channel-card__meta-val">工作日 9:00–21:00</span>
            </div>
            <div class="channel-card__meta-row">
              <span class="channel-card__meta-key">建议先打开</span>
              <span class="channel-card__meta-val">账号与设备设置页</span>
            </div>
          </div>
        </article>

        <article class="channel-card" tabindex="0">
          <span class="channel-card__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 3h9l5 5v13H5z"></path>
              <path d="M14 3v5h5"></path>
              <path d="M9 13h7M9 17h5"></path>
            </svg>
          </span>
          <h3 class="channel-card__name">站内工单</h3>
          <p class="channel-card__best">适合已经定位到某笔订阅的问题</p>
          <p class="channel-card__value">账号内提交</p>
          <p class="channel-card__desc">登录后从订单记录旁提交问题，账号、订阅周期和你看到的栏目会自动带上，客服拿到的是完整上下文。适合退款申请、重复扣款核对、账号合并这类需要留痕的事。</p>
          <div class="channel-card__meta">
            <div class="channel-card__meta-row">
              <span class="channel-card__meta-key">回复节奏</span>
              <span class="channel-card__meta-val">一个工作日内</span>
            </div>
            <div class="channel-card__meta-row">
              <span class="channel-card__meta-key">进度查看</span>
              <span class="channel-card__meta-val">站内消息通知</span>
            </div>
          </div>
        </article>

      </div>

      <figure class="contact-figure">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="办公区工位俯拍，桌面放着头戴式耳机、笔记本电脑与手写便签，屏幕上开着待处理的用户来信">
        <figcaption>客服组五个人轮班值守，订阅、资料、战报与桌面端计费的问题都由同一组人接手。</figcaption>
      </figure>
    </section>
  </div>

  <div class="container">
    <section class="section prep-band" id="prepare" data-reveal>
      <div class="section-head">
        <span class="section-index">02</span>
        <h2 class="section-title">先把这几样放在手边</h2>
        <p class="section-note">一次给全，来回沟通的次数就少一半</p>
      </div>

      <div class="prep-layout">
        <div class="prep-main">
          <p class="prep-intro">
            客服查你的账号时，最需要的是能把「这笔订阅」和「你遇到的画面」对上号的信息。下面几样任意一条给到，都能让处理速度快一截。
          </p>
          <ul class="prep-list">
            <li class="prep-item">登录账号名或绑定手机号</li>
            <li class="prep-item">当前订阅周期与到期日</li>
            <li class="prep-item">手机型号与系统版本号</li>
            <li class="prep-item">客户端版本（安卓或 iOS）</li>
            <li class="prep-item">订单号或支付时间</li>
            <li class="prep-item">出问题的栏目名称</li>
            <li class="prep-item">问题出现的具体时间点</li>
            <li class="prep-item">截图或录屏（有就更好）</li>
          </ul>

          <div class="prep-hint">
            <h3>举两个例子</h3>
            <p>「我用安卓端看英超战报，昨天终场后那场点进去只有半场内容」，比「战报不全」能让我们五分钟内定位到具体条目。</p>
            <p>「订单号 2 开头的年付订阅，今天又扣了一次 19 元」，比「你们多收钱了」能直接进入退款核对流程。</p>
          </div>
        </div>

        <figure class="prep-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="墙面便签板俯拍，不同颜色的贴片按订阅、资料、设备、发票四类分组排列" loading="lazy" decoding="async">
          <figcaption>把问题归到订阅、资料、设备、发票四类，客服接手的路径会更直接。</figcaption>
        </figure>
      </div>
    </section>
  </div>

  <div class="container">
    <section class="section contact-response" id="response" data-reveal>
      <div class="section-head">
        <span class="section-index">03</span>
        <h2 class="section-title">我们能承诺的答复节奏</h2>
        <p class="section-note">写在这里的，就是实际执行的</p>
      </div>

      <div class="response-table">
        <div class="response-row">
          <span class="response-key">在线时段</span>
          <span class="response-val">工作日 9:00–21:00</span>
          <p class="response-desc">这段时间里电话有人接听，邮件与工单同步在处理。周末与节假日提交的信息，顺延到下一个工作日。</p>
        </div>
        <div class="response-row">
          <span class="response-key">首次回复</span>
          <span class="response-val">1 个工作日内</span>
          <p class="response-desc">邮件和工单都会在这个区间里给出明确答复，而不是只回一句「已收到」。需要你补充材料的，也会在这一轮里说清楚要补什么。</p>
        </div>
        <div class="response-row">
          <span class="response-key">简单问题</span>
          <span class="response-val">当天办结</span>
          <p class="response-desc">订阅周期查询、资料覆盖范围、栏目入口指引、双端登录规则这类问题，通常第一次回复就能直接给出结论。</p>
        </div>
        <div class="response-row">
          <span class="response-key">需核对的账务</span>
          <span class="response-val">2 个工作日内</span>
          <p class="response-desc">退款、重复扣款、发票重开这类要查支付记录的事，我们会先确认受理，再在两天内给出处理结果和到账时间。</p>
        </div>
        <div class="response-row">
          <span class="response-key">发票开具</span>
          <span class="response-val">申请后 3 个工作日内</span>
          <p class="response-desc">邮件或工单里写明抬头与税号即可，开好后按你留的邮箱发送。</p>
        </div>
      </div>
    </section>
  </div>

  <section class="bulletin" data-reveal>
    <div class="container">
      <div class="bulletin-head">
        <span class="bulletin-index">04</span>
        <h2>对外公示的联系方式</h2>
        <p>下面这些信息你可以直接抄下来，也可以转给一起用万合足球站的朋友。</p>
      </div>

      <dl class="bulletin-grid">
        <div class="bulletin-cell">
          <dt>客服邮箱</dt>
          <dd class="bulletin-value">support@tactic-wanhe.com.cn</dd>
          <p class="bulletin-note">接收订阅、球队资料、战报包与桌面端计费的咨询，一个工作日内回复。</p>
        </div>
        <div class="bulletin-cell">
          <dt>客服电话</dt>
          <dd class="bulletin-value">400-4667-1147</dd>
          <p class="bulletin-note">工作日 9:00–21:00 有人接听，适合需要同步操作的问题。</p>
        </div>
        <div class="bulletin-cell">
          <dt>通信地址</dt>
          <dd class="bulletin-value">云南省昆明市五华区科医路166号</dd>
          <p class="bulletin-note">来信请注明账号与事由，便于我们归档后回复。</p>
        </div>
        <div class="bulletin-cell">
          <dt>备案号</dt>
          <dd class="bulletin-value bulletin-value--mono">云ICP备85152511号</dd>
          <p class="bulletin-note">万合足球站由昆明本地团队运营，站点已完成备案。</p>
        </div>
      </dl>
    </div>
  </section>

  <div class="contact-slash" aria-hidden="true"></div>

  <div class="container">
    <nav class="contact-next" aria-label="相关页面">
      <h2 class="contact-next__title">有些不一定要问人</h2>
      <ul class="contact-next__list">
        <li><a href="/">首页：订阅方案与各项价格一览</a></li>
        <li><a href="/download/">下载与版本：双端安装包与计费周期对比</a></li>
        <li><a href="/questions/">常见问答：续费、退款、发票与多端登录细节</a></li>
        <li><a href="/articles/">战报与转会：按联赛找到你关注的内容</a></li>
      </ul>
    </nav>
  </div>

</main>

.page-contact {
  --contact-line: var(--rule);
  --contact-radius: var(--radius);
  display: block;
}

.page-contact .contact-hero {
  position: relative;
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--rule);
}

.page-contact .contact-hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 6vw, 52px);
  line-height: 1.2;
  color: var(--ink);
  max-width: 22ch;
}

.page-contact .contact-hero__lede {
  max-width: 62ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: #3b4a42;
}

.page-contact .contact-hero__mark {
  display: none;
}

.page-contact .contact-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--rule);
  list-style: none;
}

.page-contact .contact-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: #4a5a52;
}

.page-contact .contact-hero__facts b {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 19px;
  color: var(--dirt-deep);
  font-variant-numeric: tabular-nums;
}

.page-contact .contact-channels {
  padding-top: 44px;
}

.page-contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

.page-contact .channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--contact-radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 46px -34px rgba(18, 25, 28, 0.55);
  outline: none;
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease),
    transform 200ms var(--ease), border-color 200ms var(--ease);
}

.page-contact .channel-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  border-radius: var(--contact-radius) var(--contact-radius) 0 0;
  background: linear-gradient(90deg, var(--pitch-deep), var(--pitch) 55%, var(--ember));
}

.page-contact .channel-card:hover,
.page-contact .channel-card:focus-visible {
  background: #ffffff;
  border-color: var(--rule);
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -30px rgba(110, 42, 23, 0.42);
}

.page-contact .channel-card:focus-visible {
  outline: 2px solid var(--scoreboard);
  outline-offset: 3px;
}

.page-contact .channel-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: var(--pitch-deep);
  color: var(--scoreboard);
}

.page-contact .channel-card__name {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-contact .channel-card__best {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--pitch-deep);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-contact .channel-card__value {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dirt-deep);
  word-break: break-word;
}

.page-contact .channel-card__desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.75;
  color: #3b4a42;
}

.page-contact .channel-card__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.page-contact .channel-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.page-contact .channel-card__meta-key {
  color: #6b7a72;
  flex: 0 0 auto;
}

.page-contact .channel-card__meta-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--pitch-deep);
  text-align: right;
  word-break: break-word;
}

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

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

.page-contact .contact-figure figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--dirt);
  font-size: 13px;
  line-height: 1.7;
  color: #5c6a62;
  max-width: 56ch;
}

.page-contact .prep-band {
  margin-top: 52px;
  padding: 30px 22px 34px;
  border-radius: var(--contact-radius);
  background: var(--pitch-light);
}

.page-contact .prep-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 24px;
}

.page-contact .prep-intro {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.78;
  color: #33453c;
  max-width: 46ch;
}

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

.page-contact .prep-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.page-contact .prep-item::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pitch);
  box-shadow: 0 0 0 3px rgba(30, 139, 78, 0.16);
}

.page-contact .prep-item:hover {
  border-color: var(--pitch);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -18px rgba(19, 92, 56, 0.8);
}

.page-contact .prep-hint {
  margin-top: 28px;
  padding: 20px 20px 6px;
  border-radius: var(--contact-radius);
  border-left: 4px solid var(--pitch-deep);
  background: rgba(255, 255, 255, 0.72);
}

.page-contact .prep-hint h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pitch-deep);
}

.page-contact .prep-hint p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.78;
  color: #3b4a42;
}

.page-contact .prep-figure {
  margin: 0;
}

.page-contact .prep-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--contact-radius);
  border: 1px solid var(--rule);
}

.page-contact .prep-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #5c6a62;
}

.page-contact .contact-response {
  padding-top: 52px;
}

.page-contact .response-table {
  margin-top: 24px;
  border-top: 2px solid var(--pitch-deep);
}

.page-contact .response-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--rule);
}

.page-contact .response-key {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7a72;
}

.page-contact .response-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--dirt-deep);
  font-variant-numeric: tabular-nums;
}

.page-contact .response-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: #3b4a42;
}

.page-contact .bulletin {
  margin-top: 56px;
  padding: 44px 0 52px;
  background: var(--dirt-deep);
  color: #f4e9e2;
  clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%);
}

.page-contact .bulletin-head {
  max-width: 60ch;
}

.page-contact .bulletin-index {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 10px;
  border-radius: 3px;
  background: rgba(242, 118, 31, 0.92);
  color: #2a1008;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-contact .bulletin-head h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.page-contact .bulletin-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(244, 233, 226, 0.82);
}

.page-contact .bulletin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 30px 0 0;
}

.page-contact .bulletin-cell {
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid rgba(248, 244, 237, 0.22);
  border-radius: var(--contact-radius);
  background: rgba(18, 25, 28, 0.16);
}

.page-contact .bulletin-cell dt {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--scoreboard);
}

.page-contact .bulletin-value {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: #ffffff;
  word-break: break-word;
}

.page-contact .bulletin-value--mono {
  font-size: 15px;
}

.page-contact .bulletin-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(244, 233, 226, 0.74);
}

.page-contact .contact-slash {
  height: 64px;
  background: linear-gradient(
    103deg,
    var(--dirt-deep) 0%,
    var(--dirt-deep) 40%,
    var(--ember) 40%,
    var(--ember) 42.5%,
    var(--paper) 42.5%,
    var(--paper) 100%
  );
}

.page-contact .contact-next {
  padding: 40px 0 20px;
}

.page-contact .contact-next__title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-contact .contact-next__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .contact-next__list a {
  position: relative;
  display: block;
  padding: 14px 16px 16px 20px;
  border-left: 3px solid var(--pitch);
  border-radius: 0 var(--contact-radius) var(--contact-radius) 0;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
    transform 160ms var(--ease);
}

.page-contact .contact-next__list a::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 9px;
  width: 0;
  height: 2px;
  background: var(--ember);
  transition: width 160ms var(--ease);
}

.page-contact .contact-next__list a:hover,
.page-contact .contact-next__list a:focus-visible {
  border-left-color: var(--ember);
  background: var(--pitch-light);
  transform: translateX(2px);
}

.page-contact .contact-next__list a:hover::after,
.page-contact .contact-next__list a:focus-visible::after {
  width: calc(100% - 40px);
}

.page-contact .contact-next__list a:focus-visible {
  outline: 2px solid var(--scoreboard);
  outline-offset: 2px;
}

@media (min-width: 760px) {
  .page-contact .prep-layout {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 34px;
  }

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

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

  .page-contact .response-row {
    grid-template-columns: 132px 200px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 22px;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero {
    padding: 36px 0 52px;
  }

  .page-contact .contact-hero__mark {
    display: block;
    position: absolute;
    top: 44px;
    right: 4px;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--pitch-deep);
    opacity: 0.72;
  }

  .page-contact .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 32px;
  }

  .page-contact .prep-band {
    padding: 44px 40px 48px;
  }

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

  .page-contact .contact-slash {
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-card,
  .page-contact .prep-item,
  .page-contact .contact-next__list a,
  .page-contact .contact-next__list a::after {
    transition: none;
  }
}