.page-contact {
  --co-accent: #FF8A6B;
  --co-accent-soft: rgba(255, 138, 107, 0.14);
  --co-line: var(--grid);
  --co-card: var(--panel);
}

.page-contact img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-contact .pc-hero {
  padding-top: 24px;
  padding-bottom: 8px;
}

.page-contact .pc-hero-grid {
  display: grid;
  gap: 28px;
  align-items: end;
}

.page-contact .pc-hero-copy h1 {
  font-family: var(--f-display);
  font-size: clamp(30px, 8vw, 58px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--mist);
  margin: 12px 0 20px;
}

.page-contact .pc-hero-copy .lede {
  max-width: 34em;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 24px;
}

.page-contact .pc-quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  border-top: 1px solid var(--co-line);
  padding-top: 16px;
}

.page-contact .pc-quick li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--mist);
  letter-spacing: 0.02em;
}

.page-contact .pc-quick .mono {
  color: var(--co-accent);
  font-size: 12px;
}

.page-contact .pc-hero-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--co-card);
  line-height: 0;
}

.page-contact .pc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-contact .pc-layout {
  display: grid;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 72px;
  align-items: start;
}

/* 左侧联系信息牌 */
.page-contact .pc-board {
  position: relative;
  background: var(--co-card);
  background-image: radial-gradient(130% 90% at 100% 0%, var(--co-accent-soft), transparent 62%);
  border-radius: var(--r-lg);
  padding: 26px 22px 28px;
  overflow: hidden;
}

.page-contact .pc-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--co-accent), transparent 78%);
}

.page-contact .pc-board h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--mist);
  margin: 8px 0 18px;
  line-height: 1.2;
}

.page-contact .pc-board-list {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-contact .pc-board-row {
  padding: 14px 0;
  border-top: 1px solid var(--co-line);
  display: grid;
  gap: 5px;
}

.page-contact .pc-board-row dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

.page-contact .pc-board-row dd {
  margin: 0;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.page-contact .pc-board-row dd.mono {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.page-contact .pc-board-row:nth-child(2) dd.mono {
  color: var(--co-accent);
}

.page-contact .pc-board-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .pc-board-note + .pc-board-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--co-line);
}

/* 右侧连续画布 */
.page-contact .pc-canvas {
  min-width: 0;
}

.page-contact .pc-canvas-intro {
  margin: 0 0 44px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.85;
  max-width: 34em;
  padding-left: 16px;
  border-left: 2px solid var(--co-accent);
}

.page-contact .pc-block + .pc-block {
  margin-top: 64px;
}

.page-contact .pc-block-head {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--co-line);
  padding-top: 18px;
  margin-bottom: 26px;
}

.page-contact .pc-block-num {
  color: var(--co-accent);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-contact .pc-block-head h2 {
  font-family: var(--f-display);
  font-size: clamp(21px, 4.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--mist);
  margin: 0;
}

.page-contact .pc-block-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  max-width: 36em;
}

/* 合作路径折叠组 */
.page-contact .pc-paths {
  display: grid;
  gap: 12px;
}

.page-contact .pc-paths .disclosure {
  background: var(--co-card);
  border-radius: var(--r-md);
  padding: 4px 18px;
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-contact .pc-paths .disclosure:hover,
.page-contact .pc-paths .disclosure:focus-within {
  border-left-color: var(--co-accent);
}

.page-contact .pc-path-name {
  margin: 0;
  font: inherit;
}

.page-contact .pc-paths .disclosure-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--mist);
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-contact .pc-paths .disclosure-index {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.page-contact .pc-paths .disclosure[data-open="true"] .disclosure-index {
  color: var(--co-accent);
}

.page-contact .pc-paths .disclosure-title {
  flex: 1 1 auto;
}

.page-contact .pc-paths .disclosure-sign {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
  border: 1px solid var(--co-line);
  border-radius: var(--r-pill);
}

.page-contact .pc-paths .disclosure-sign::before,
.page-contact .pc-paths .disclosure-sign::after {
  content: "";
  position: absolute;
  background: var(--muted);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-contact .pc-paths .disclosure-sign::before {
  left: 4px;
  right: 4px;
  top: 8px;
  height: 1px;
}

.page-contact .pc-paths .disclosure-sign::after {
  top: 4px;
  bottom: 4px;
  left: 8px;
  width: 1px;
}

.page-contact .pc-paths .disclosure[data-open="true"] .disclosure-sign::after {
  transform: scaleY(0);
}

.page-contact .pc-paths .disclosure[data-open="true"] .disclosure-sign::before {
  background: var(--co-accent);
}

.page-contact .pc-paths .disclosure-body {
  overflow: hidden;
  border-top: 1px solid var(--co-line);
}

.page-contact .pc-paths .disclosure-inner {
  padding: 6px 0 14px;
}

.page-contact .pc-facts {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-contact .pc-fact {
  display: grid;
  gap: 4px;
  padding: 13px 0;
}

.page-contact .pc-fact + .pc-fact {
  border-top: 1px dashed var(--co-line);
}

.page-contact .pc-fact dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--co-accent);
}

.page-contact .pc-fact dd {
  margin: 0;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.8;
}

/* 四步流程 */
.page-contact .pc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .pc-step {
  position: relative;
  background: var(--co-card);
  border-radius: var(--r-md);
  padding: 18px 18px 20px;
}

.page-contact .pc-step + .pc-step::before {
  content: "";
  position: absolute;
  left: 40px;
  top: -14px;
  width: 1px;
  height: 14px;
  background: var(--co-line);
}

.page-contact .pc-step-dot {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--co-line);
  background: var(--ink);
  color: var(--co-accent);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact .pc-step:hover .pc-step-dot,
.page-contact .pc-step:focus-within .pc-step-dot {
  border-color: var(--co-accent);
  box-shadow: 0 0 0 4px var(--co-accent-soft);
}

.page-contact .pc-step h3 {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--mist);
  line-height: 1.3;
}

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

.page-contact .pc-step .pc-step-out {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--co-line);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--mist);
}

.page-contact .pc-step .pc-step-out span {
  color: var(--co-accent);
  margin-right: 8px;
}

.page-contact .pc-flow-fig {
  margin: 24px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--co-card);
  line-height: 0;
}

.page-contact .pc-flow-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-contact .pc-flow-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* 问题反馈清单 */
.page-contact .pc-report {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-contact .pc-report li {
  position: relative;
  padding: 14px 16px 14px 34px;
  background: var(--co-card);
  border-radius: var(--r-md);
  color: var(--mist);
  font-size: 14px;
  line-height: 1.75;
}

.page-contact .pc-report li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--co-accent);
}

/* 自助入口 */
.page-contact .pc-links {
  display: grid;
}

.page-contact .pc-link {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 18px 6px;
  border-top: 1px solid var(--co-line);
  text-decoration: none;
  color: var(--mist);
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

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

.page-contact .pc-link:hover,
.page-contact .pc-link:focus-visible {
  background: var(--co-accent-soft);
  padding-left: 14px;
}

.page-contact .pc-link-idx {
  font-size: 12px;
  color: var(--muted);
  padding-top: 3px;
}

.page-contact .pc-link-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.page-contact .pc-link-title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-contact .pc-link-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .pc-link-arrow {
  color: var(--co-accent);
  font-size: 16px;
  line-height: 1.2;
  padding-top: 2px;
  transition: transform var(--dur) var(--ease);
}

.page-contact .pc-link:hover .pc-link-arrow,
.page-contact .pc-link:focus-visible .pc-link-arrow {
  transform: translateX(4px);
}

@media (min-width: 640px) {
  .page-contact .pc-fact {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: start;
  }

  .page-contact .pc-fact dt {
    padding-top: 4px;
  }

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

  .page-contact .pc-step + .pc-step::before {
    display: none;
  }
}

@media (min-width: 900px) {
  .page-contact .pc-hero {
    padding-top: 36px;
  }

  .page-contact .pc-hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 48px;
  }

  .page-contact .pc-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 96px;
  }

  .page-contact .pc-board {
    position: sticky;
    top: 88px;
    padding: 30px 24px 32px;
  }

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

  .page-contact .pc-step {
    padding: 20px 16px 22px;
  }

  .page-contact .pc-step + .pc-step::before {
    display: block;
    left: auto;
    top: 40px;
    right: 100%;
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--co-accent));
  }
}

@media (min-width: 1200px) {
  .page-contact .pc-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 72px;
  }

  .page-contact .pc-fact {
    grid-template-columns: 110px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .pc-link,
  .page-contact .pc-link-arrow,
  .page-contact .pc-step-dot,
  .page-contact .pc-paths .disclosure {
    transition: none;
  }

  .page-contact .pc-link:hover .pc-link-arrow {
    transform: none;
  }
}


<main id="main-content" class="page-contact zone-contact">
  <div class="shell">
    <nav class="breadcrumb" aria-label="当前位置">
      <ul>
        <li><a href="/">首页</a></li>
        <li aria-current="page">合作联系</li>
      </ul>
    </nav>
  </div>

  <section class="shell pc-hero" aria-labelledby="pc-hero-title">
    <div class="pc-hero-grid">
      <div class="pc-hero-copy">
        <p class="eyebrow">06 / 合作联系</p>
        <h1 id="pc-hero-title">把合作谈清楚，从一个具体需求开始</h1>
        <p class="lede">333体育把赛前前瞻、赛事导航、球队档案和积分榜放在同一块版面上，也把这套内容能力开放给外部伙伴。无论你是想把赛事内容带到自己的渠道，还是把实时数据接进自己的产品，先找到对的人，事情推进得就快。</p>
        <ul class="pc-quick">
          <li><span class="mono">01</span>媒体内容合作</li>
          <li><span class="mono">02</span>赛事数据对接</li>
          <li><span class="mono">03</span>栏目共建</li>
        </ul>
      </div>
      <figure class="pc-hero-media media-frame media-frame--wide">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="暗调会议桌局部，笔记本屏幕上显示赛事数据面板与横向积分条">
      </figure>
    </div>
  </section>

  <div class="shell pc-layout">
    <aside class="pc-board" aria-labelledby="pc-board-title">
      <p class="eyebrow">联系信息牌</p>
      <h2 id="pc-board-title">直接找到我们</h2>
      <dl class="pc-board-list">
        <div class="pc-board-row">
          <dt>客服邮箱</dt>
          <dd class="mono">support@win-333.com.cn</dd>
        </div>
        <div class="pc-board-row">
          <dt>服务电话</dt>
          <dd class="mono">400-4188-4979</dd>
        </div>
        <div class="pc-board-row">
          <dt>通信地址</dt>
          <dd>辽宁省大连市甘井子区软件园路33号</dd>
        </div>
        <div class="pc-board-row">
          <dt>受理时间</dt>
          <dd>工作日上午 9 点至下午 6 点</dd>
        </div>
      </dl>
      <p class="pc-board-note">客服邮箱在工作日上午 9 点至下午 6 点由值班同事回复；PC 端访问问题请附操作系统与浏览器版本，平板端请注明设备型号。</p>
      <p class="pc-board-note">谈合作时，把方向、渠道和预计上线的时间写进第一封邮件，往返确认的次数会明显减少。</p>
    </aside>

    <div class="pc-canvas">
      <p class="pc-canvas-intro">邮件适合把材料一次说全，电话适合快速确认方向和时间。两条渠道都按上面的时段受理。使用中遇到的小问题，先翻到第四段，也许不用等回复就能解决。</p>

      <section class="pc-block" aria-labelledby="pc-path-title">
        <header class="pc-block-head">
          <span class="pc-block-num mono">01</span>
          <h2 id="pc-path-title">三条合作路径，先看你落在哪一条</h2>
          <p>不同合作对接的是不同团队，按下面的分类找到起点，沟通会少绕一圈。展开任意一条，能看到双方各自要准备的东西。</p>
        </header>

        <div class="pc-paths">
          <div class="disclosure" data-disclosure data-open="true">
            <h3 class="pc-path-name">
              <button class="disclosure-head" type="button" data-disclosure-toggle aria-expanded="true">
                <span class="disclosure-index">01</span>
                <span class="disclosure-title">媒体内容合作</span>
                <span class="disclosure-sign" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure-body" data-disclosure-body>
              <div class="disclosure-inner">
                <dl class="pc-facts">
                  <div class="pc-fact">
                    <dt>适合谁</dt>
                    <dd>自有媒体、行业公众号或内容平台，每个比赛日都要有稳定的前瞻与图解素材，靠临时约稿撑不住更新节奏。</dd>
                  </div>
                  <div class="pc-fact">
                    <dt>我们提供</dt>
                    <dd>每个比赛日更新约 120 条前瞻摘要，焦点场次配战术板图解与阵型对比；46 个联赛与杯赛专题的选题清单可以直接挑，按你的渠道规格改写成适配版本。</dd>
                  </div>
                  <div class="pc-fact">
                    <dt>你准备</dt>
                    <dd>渠道类型与覆盖人群、希望的内容形态（图文、快讯、长图解）、更新频率，以及发布端的署名与转载要求。</dd>
                  </div>
                </dl>
              </div>
            </div>
          </div>

          <div class="disclosure" data-disclosure data-open="true">
            <h3 class="pc-path-name">
              <button class="disclosure-head" type="button" data-disclosure-toggle aria-expanded="true">
                <span class="disclosure-index">02</span>
                <span class="disclosure-title">赛事数据对接</span>
                <span class="disclosure-sign" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure-body" data-disclosure-body>
              <div class="disclosure-inner">
                <dl class="pc-facts">
                  <div class="pc-fact">
                    <dt>适合谁</dt>
                    <dd>自己的产品面板里要出现积分榜、赛果与近十场走势，又不想从零搭建一支数据维护队伍。</dd>
                  </div>
                  <div class="pc-fact">
                    <dt>我们提供</dt>
                    <dd>赛事数据每 5 分钟同步一次；积分榜横向对照视图的字段可以整组引用，胜平负、净胜球与近期排名变化都在其中；球队档案库覆盖 1,280 支球队，含成立年份、主场与常用阵型。</dd>
                  </div>
                  <div class="pc-fact">
                    <dt>你准备</dt>
                    <dd>接入端形态（PC 页面、平板横屏、应用内面板）、需要的字段清单、刷新频率预期，以及一位能拍板的技术对接人。</dd>
                  </div>
                </dl>
              </div>
            </div>
          </div>

          <div class="disclosure" data-disclosure data-open="true">
            <h3 class="pc-path-name">
              <button class="disclosure-head" type="button" data-disclosure-toggle aria-expanded="true">
                <span class="disclosure-index">03</span>
                <span class="disclosure-title">栏目共建</span>
                <span class="disclosure-sign" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure-body" data-disclosure-body>
              <div class="disclosure-inner">
                <dl class="pc-facts">
                  <div class="pc-fact">
                    <dt>适合谁</dt>
                    <dd>想围绕某一个联赛或某一个地区，做满整季的固定栏目，需要选题、制图与阶段性复盘一起往前推。</dd>
                  </div>
                  <div class="pc-fact">
                    <dt>我们提供</dt>
                    <dd>18 人编辑部里可投入的编辑与制图排期，赛事内容编辑 6 人、数据整理 4 人、视觉制图 3 人可以按栏目配置；专题策划方法可共享，每季度约 600 名用户回访得到的阅读反馈，也能作为栏目调整的依据。</dd>
                  </div>
                  <div class="pc-fact">
                    <dt>你准备</dt>
                    <dd>栏目定位与目标读者、赛季排期、双方署名方式与发布节奏，以及栏目在你自己渠道上的位置。</dd>
                  </div>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="pc-block" aria-labelledby="pc-flow-title">
        <header class="pc-block-head">
          <span class="pc-block-num mono">02</span>
          <h2 id="pc-flow-title">一次合作怎么推进</h2>
          <p>四步走完，双方心里都有数。每一步都留一份看得见的东西，不必靠记忆对接。</p>
        </header>

        <ol class="pc-flow">
          <li class="pc-step">
            <span class="pc-step-dot mono">01</span>
            <h3>说明需求</h3>
            <p>把方向、渠道、目标读者和希望上线的时间点写清楚，越具体越好。</p>
            <p class="pc-step-out"><span>留下</span>一页需求摘要</p>
          </li>
          <li class="pc-step">
            <span class="pc-step-dot mono">02</span>
            <h3>确认内容范围</h3>
            <p>哪些内容可用、怎么署名、发布节奏如何，落到一份简短的书面确认里。</p>
            <p class="pc-step-out"><span>留下</span>一份内容清单</p>
          </li>
          <li class="pc-step">
            <span class="pc-step-dot mono">03</span>
            <h3>小范围试运行</h3>
            <p>先做一个专题或一个比赛周，把流程跑通，看实际协作效率与呈现效果。</p>
            <p class="pc-step-out"><span>留下</span>一周协作记录</p>
          </li>
          <li class="pc-step">
            <span class="pc-step-dot mono">04</span>
            <h3>按赛季复盘</h3>
            <p>赛季阶段结束时一起看数据与读者反馈，再决定延续、调整还是换方向。</p>
            <p class="pc-step-out"><span>留下</span>一页复盘结论</p>
          </li>
        </ol>

        <figure class="pc-flow-fig media-frame media-frame--wide">
          <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="节点与连线构成的信息流示意图，珊瑚橙与青绿双色" loading="lazy" decoding="async">
        </figure>
        <p class="pc-flow-note">推进节奏取决于双方准备的材料是否齐备和当下的赛季节点，具体安排会在第一次沟通里对齐。</p>
      </section>

      <section class="pc-block" aria-labelledby="pc-report-title">
        <header class="pc-block-head">
          <span class="pc-block-num mono">03</span>
          <h2 id="pc-report-title">报问题的时候，顺手带上这几行</h2>
          <p>信息齐了，值班同事往往一次就能定位。下面这些内容可以直接复制进邮件正文。</p>
        </header>

        <ul class="pc-report">
          <li>出问题的页面地址，以及它所在的栏目，例如内容目录里的某个专题。</li>
          <li>页面右下角显示的版本号，方便判断你当前访问的是哪一版。</li>
          <li>PC 端：操作系统与浏览器版本，例如 Windows 11 配最新版 Chrome、macOS 配 Safari。</li>
          <li>平板端：设备型号、屏幕尺寸，以及当时是横屏还是竖屏浏览赛事导航。</li>
          <li>你做了哪几步操作、期望看到什么、实际看到了什么；有截图更好。</li>
          <li>涉及数据的话，请写明赛事名称、球队名和出问题的那一列，例如净胜球或近期排名变化。</li>
        </ul>
      </section>

      <section class="pc-block" aria-labelledby="pc-self-title">
        <header class="pc-block-head">
          <span class="pc-block-num mono">04</span>
          <h2 id="pc-self-title">先自助，再写信</h2>
          <p>不少问题在站内就能得到答案，翻一遍比等一封回信更快。</p>
        </header>

        <nav class="pc-links" aria-label="常用自助入口">
          <a class="pc-link" href="/help-center/">
            <span class="pc-link-idx mono">01</span>
            <span class="pc-link-body">
              <span class="pc-link-title">帮助中心</span>
              <span class="pc-link-desc">48 篇图文指引，积分榜怎么看、球队资料从哪看起、平板上的赛事导航入口在哪，都有逐步说明。</span>
            </span>
            <span class="pc-link-arrow" aria-hidden="true">→</span>
          </a>
          <a class="pc-link" href="/catalog/">
            <span class="pc-link-idx mono">02</span>
            <span class="pc-link-body">
              <span class="pc-link-title">内容目录</span>
              <span class="pc-link-desc">12 个赛事大类、46 个联赛与杯赛专题一览，先确认你要的素材在不在其中。</span>
            </span>
            <span class="pc-link-arrow" aria-hidden="true">→</span>
          </a>
          <a class="pc-link" href="/story/">
            <span class="pc-link-idx mono">03</span>
            <span class="pc-link-body">
              <span class="pc-link-title">品牌故事</span>
              <span class="pc-link-desc">团队怎么分工、内容怎么组织、与 32 家媒体及数据服务方的协作方式，谈之前先读一遍。</span>
            </span>
            <span class="pc-link-arrow" aria-hidden="true">→</span>
          </a>
          <a class="pc-link" href="/personal-data/">
            <span class="pc-link-idx mono">04</span>
            <span class="pc-link-body">
              <span class="pc-link-title">个人信息说明</span>
              <span class="pc-link-desc">关注的球队这类偏好保存在哪里、怎么清除，写信之前可以先了解清楚。</span>
            </span>
            <span class="pc-link-arrow" aria-hidden="true">→</span>
          </a>
        </nav>
      </section>
    </div>
  </div>
</main>

.page-contact {
  --co-accent: #FF8A6B;
  --co-accent-soft: rgba(255, 138, 107, 0.14);
  --co-line: var(--grid);
  --co-card: var(--panel);
}

.page-contact img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-contact .pc-hero {
  padding-top: 24px;
  padding-bottom: 8px;
}

.page-contact .pc-hero-grid {
  display: grid;
  gap: 28px;
  align-items: end;
}

.page-contact .pc-hero-copy h1 {
  font-family: var(--f-display);
  font-size: clamp(30px, 8vw, 58px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--mist);
  margin: 12px 0 20px;
}

.page-contact .pc-hero-copy .lede {
  max-width: 34em;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 24px;
}

.page-contact .pc-quick {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  border-top: 1px solid var(--co-line);
}

.page-contact .pc-quick li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--mist);
  letter-spacing: 0.02em;
}

.page-contact .pc-quick .mono {
  color: var(--co-accent);
  font-size: 12px;
}

.page-contact .pc-hero-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--co-card);
  line-height: 0;
  margin: 0;
}

.page-contact .pc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-contact .pc-layout {
  display: grid;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 72px;
  align-items: start;
}

/* 左侧联系信息牌 */
.page-contact .pc-board {
  position: relative;
  background: var(--co-card);
  background-image: radial-gradient(130% 90% at 100% 0%, var(--co-accent-soft), transparent 62%);
  border-radius: var(--r-lg);
  padding: 26px 22px 28px;
  overflow: hidden;
}

.page-contact .pc-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--co-accent), transparent 78%);
}

.page-contact .pc-board h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--mist);
  margin: 8px 0 18px;
  line-height: 1.2;
}

.page-contact .pc-board-list {
  margin: 0;
  display: grid;
}

.page-contact .pc-board-row {
  padding: 14px 0;
  border-top: 1px solid var(--co-line);
  display: grid;
  gap: 5px;
}

.page-contact .pc-board-row dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-contact .pc-board-row dd {
  margin: 0;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.page-contact .pc-board-row dd.mono {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.page-contact .pc-board-row:nth-child(2) dd.mono {
  color: var(--co-accent);
}

.page-contact .pc-board-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .pc-board-note + .pc-board-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--co-line);
}

/* 右侧连续画布 */
.page-contact .pc-canvas {
  min-width: 0;
}

.page-contact .pc-canvas-intro {
  margin: 0 0 44px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.85;
  max-width: 34em;
  padding-left: 16px;
  border-left: 2px solid var(--co-accent);
}

.page-contact .pc-block + .pc-block {
  margin-top: 64px;
}

.page-contact .pc-block-head {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--co-line);
  padding-top: 18px;
  margin-bottom: 26px;
}

.page-contact .pc-block-num {
  color: var(--co-accent);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-contact .pc-block-head h2 {
  font-family: var(--f-display);
  font-size: clamp(21px, 4.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--mist);
  margin: 0;
}

.page-contact .pc-block-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  max-width: 36em;
}

/* 合作路径折叠组 */
.page-contact .pc-paths {
  display: grid;
  gap: 12px;
}

.page-contact .pc-paths .disclosure {
  background: var(--co-card);
  border-radius: var(--r-md);
  padding: 4px 18px;
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.page-contact .pc-paths .disclosure:hover,
.page-contact .pc-paths .disclosure:focus-within {
  border-left-color: var(--co-accent);
}

.page-contact .pc-path-name {
  margin: 0;
  font: inherit;
}

.page-contact .pc-paths .disclosure-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--mist);
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-contact .pc-paths .disclosure-index {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.page-contact .pc-paths .disclosure[data-open="true"] .disclosure-index {
  color: var(--co-accent);
}

.page-contact .pc-paths .disclosure-title {
  flex: 1 1 auto;
}

.page-contact .pc-paths .disclosure-sign {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
  border: 1px solid var(--co-line);
  border-radius: var(--r-pill);
}

.page-contact .pc-paths .disclosure-sign::before,
.page-contact .pc-paths .disclosure-sign::after {
  content: "";
  position: absolute;
  background: var(--muted);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-contact .pc-paths .disclosure-sign::before {
  left: 4px;
  right: 4px;
  top: 8px;
  height: 1px;
}

.page-contact .pc-paths .disclosure-sign::after {
  top: 4px;
  bottom: 4px;
  left: 8px;
  width: 1px;
}

.page-contact .pc-paths .disclosure[data-open="true"] .disclosure-sign::after {
  transform: scaleY(0);
}

.page-contact .pc-paths .disclosure[data-open="true"] .disclosure-sign::before {
  background: var(--co-accent);
}

.page-contact .pc-paths .disclosure-body {
  overflow: hidden;
  border-top: 1px solid var(--co-line);
}

.page-contact .pc-paths .disclosure-inner {
  padding: 6px 0 14px;
}

.page-contact .pc-facts {
  margin: 0;
  display: grid;
}

.page-contact .pc-fact {
  display: grid;
  gap: 4px;
  padding: 13px 0;
}

.page-contact .pc-fact + .pc-fact {
  border-top: 1px dashed var(--co-line);
}

.page-contact .pc-fact dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--co-accent);
}

.page-contact .pc-fact dd {
  margin: 0;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.8;
}

/* 四步流程 */
.page-contact .pc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .pc-step {
  position: relative;
  background: var(--co-card);
  border-radius: var(--r-md);
  padding: 18px 18px 20px;
}

.page-contact .pc-step + .pc-step::before {
  content: "";
  position: absolute;
  left: 40px;
  top: -14px;
  width: 1px;
  height: 14px;
  background: var(--co-line);
}

.page-contact .pc-step-dot {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--co-line);
  background: var(--ink);
  color: var(--co-accent);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact .pc-step:hover .pc-step-dot,
.page-contact .pc-step:focus-within .pc-step-dot {
  border-color: var(--co-accent);
  box-shadow: 0 0 0 4px var(--co-accent-soft);
}

.page-contact .pc-step h3 {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--mist);
  line-height: 1.3;
}

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

.page-contact .pc-step .pc-step-out {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--co-line);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--mist);
  transition: color var(--dur) var(--ease);
}

.page-contact .pc-step:hover .pc-step-out {
  color: var(--co-accent);
}

.page-contact .pc-step .pc-step-out span {
  color: var(--co-accent);
  margin-right: 8px;
}

.page-contact .pc-flow-fig {
  margin: 24px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--co-card);
  line-height: 0;
}

.page-contact .pc-flow-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-contact .pc-flow-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* 问题反馈清单 */
.page-contact .pc-report {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-contact .pc-report li {
  position: relative;
  padding: 14px 16px 14px 34px;
  background: var(--co-card);
  border-radius: var(--r-md);
  color: var(--mist);
  font-size: 14px;
  line-height: 1.75;
}

.page-contact .pc-report li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--co-accent);
}

/* 自助入口 */
.page-contact .pc-links {
  display: grid;
}

.page-contact .pc-link {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 18px 6px;
  border-top: 1px solid var(--co-line);
  text-decoration: none;
  color: var(--mist);
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

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

.page-contact .pc-link:hover,
.page-contact .pc-link:focus-visible {
  background: var(--co-accent-soft);
  padding-left: 14px;
}

.page-contact .pc-link-idx {
  font-size: 12px;
  color: var(--muted);
  padding-top: 3px;
}

.page-contact .pc-link-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.page-contact .pc-link-title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-contact .pc-link-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .pc-link-arrow {
  color: var(--co-accent);
  font-size: 16px;
  line-height: 1.2;
  padding-top: 2px;
  transition: transform var(--dur) var(--ease);
}

.page-contact .pc-link:hover .pc-link-arrow,
.page-contact .pc-link:focus-visible .pc-link-arrow {
  transform: translateX(4px);
}

@media (min-width: 640px) {
  .page-contact .pc-fact {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: start;
  }

  .page-contact .pc-fact dt {
    padding-top: 4px;
  }

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

  .page-contact .pc-step + .pc-step::before {
    display: none;
  }
}

@media (min-width: 900px) {
  .page-contact .pc-hero {
    padding-top: 36px;
  }

  .page-contact .pc-hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 48px;
  }

  .page-contact .pc-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 96px;
  }

  .page-contact .pc-board {
    position: sticky;
    top: 88px;
    padding: 30px 24px 32px;
  }

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

  .page-contact .pc-step {
    padding: 20px 16px 22px;
  }

  .page-contact .pc-step + .pc-step::before {
    display: block;
    left: auto;
    top: 40px;
    right: 100%;
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--co-accent));
  }
}

@media (min-width: 1200px) {
  .page-contact .pc-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 72px;
  }

  .page-contact .pc-fact {
    grid-template-columns: 110px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .pc-link,
  .page-contact .pc-link-arrow,
  .page-contact .pc-step-dot,
  .page-contact .pc-step-out,
  .page-contact .pc-paths .disclosure,
  .page-contact .pc-paths .disclosure-index,
  .page-contact .pc-paths .disclosure-sign::before,
  .page-contact .pc-paths .disclosure-sign::after {
    transition: none;
  }

  .page-contact .pc-link:hover .pc-link-arrow {
    transform: none;
  }
}