.page-contact {
  --contact-hair: rgba(11, 31, 58, 0.14);
  --contact-shadow: 0 22px 44px -30px rgba(11, 31, 58, 0.6);
  background: var(--ivory);
  color: var(--char);
}

/* ---------- Hero ---------- */
.page-contact .contact-hero {
  position: relative;
  padding: 24px 0 52px;
  background-color: var(--ivory);
  background-image:
    linear-gradient(to right, rgba(11, 31, 58, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 31, 58, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  border-bottom: 1px solid var(--contact-hair);
}

.page-contact .contact-hero .breadcrumb {
  margin-bottom: 26px;
}

.page-contact .hero-grid {
  display: grid;
  gap: 28px;
}

.page-contact .hero-copy h1 {
  margin: 12px 0 20px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 7.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-contact .contact-lede {
  max-width: 46ch;
  margin: 0 0 18px;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--char);
}

.page-contact .hero-note {
  max-width: 46ch;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-contact .hero-visual {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-top: 3px solid var(--gold);
}

.page-contact .hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- Channels ---------- */
.page-contact .channel-board {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.page-contact .channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 24px 26px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.page-contact .channel-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}

.page-contact .channel-card:hover::before,
.page-contact .channel-card:focus-within::before {
  transform: scaleY(1);
}

.page-contact .channel-card:hover,
.page-contact .channel-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: var(--contact-shadow);
}

.page-contact .channel-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--gray);
}

.page-contact .channel-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 4.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--ink);
  word-break: break-word;
}

.page-contact .channel-value--mail {
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  word-break: break-all;
}

.page-contact .channel-value--addr {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.page-contact .channel-desc {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-contact .channel-card .tag {
  align-self: flex-start;
}

.page-contact .channel-card--phone {
  background: var(--ink);
  border-color: transparent;
  color: var(--on-ink-strong);
}

.page-contact .channel-card--phone .channel-kicker {
  color: rgba(233, 199, 102, 0.92);
}

.page-contact .channel-card--phone .channel-value {
  color: var(--gold);
}

.page-contact .channel-card--phone .channel-desc {
  color: var(--on-ink);
}

.page-contact .channel-card--phone:hover,
.page-contact .channel-card--phone:focus-within {
  border-color: rgba(212, 175, 55, 0.5);
}

/* ---------- Flow ---------- */
.page-contact .flow-wrap {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

.page-contact .flow-figure {
  margin: 0;
  overflow: hidden;
  background: var(--ink-2);
  border-bottom: 3px solid var(--gold);
}

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

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

.page-contact .flow-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 18px 10px 18px 0;
  border-top: 1px solid rgba(11, 31, 58, 0.18);
  transition: background-color 0.22s var(--ease), padding-left 0.22s var(--ease);
}

.page-contact .flow-step:last-child {
  border-bottom: 1px solid rgba(11, 31, 58, 0.18);
}

.page-contact .flow-step:hover,
.page-contact .flow-step:focus-within {
  background: rgba(255, 255, 255, 0.66);
  padding-left: 10px;
}

.page-contact .flow-index {
  align-self: start;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  transition: color 0.22s var(--ease);
}

.page-contact .flow-step:hover .flow-index {
  color: var(--gold);
}

.page-contact .flow-name {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.page-contact .flow-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gray);
}

/* ---------- Brief ---------- */
.page-contact .brief-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.page-contact .brief-item {
  position: relative;
  padding: 22px 22px 20px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
  border-left: 3px solid var(--sand);
  transition: border-left-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.page-contact .brief-item:hover,
.page-contact .brief-item:focus-within {
  border-left-color: var(--gold);
  transform: translateY(-2px);
}

.page-contact .brief-key {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-contact .brief-item p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--gray);
}

.page-contact .brief-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--contact-hair);
}

.page-contact .brief-tags-label {
  margin-right: 4px;
  font-size: 0.875rem;
  color: var(--gray);
}

/* ---------- Scope ---------- */
.page-contact .scope-grid {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.page-contact .scope-panel {
  padding: 26px 22px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
}

.page-contact .scope-panel h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
}

.page-contact .scope-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.page-contact .scope-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-contact .scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-contact .scope-panel--doc {
  background: var(--ink);
  border-color: transparent;
}

.page-contact .scope-panel--doc h3 {
  color: var(--ivory);
}

.page-contact .scope-panel--doc .scope-list li {
  color: var(--on-ink);
}

.page-contact .scope-panel--doc .scope-list li::before {
  background: var(--teal);
}

.page-contact .scope-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

/* ---------- Privacy ---------- */
.page-contact .contact-privacy {
  position: relative;
  overflow: hidden;
}

.page-contact .privacy-grid {
  display: grid;
  gap: 30px;
}

.page-contact .contact-privacy .eyebrow {
  color: var(--gold-soft);
}

.page-contact .contact-privacy .section-title {
  color: var(--ivory);
  margin-top: 10px;
}

.page-contact .privacy-grid > div > p {
  max-width: 48ch;
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--on-ink);
}

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

.page-contact .privacy-list li {
  padding: 15px 0;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--on-ink);
}

.page-contact .privacy-list li:last-child {
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.page-contact .privacy-list strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gold-soft);
}

.page-contact .privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 26px 0 0;
}

.page-contact .privacy-links a {
  padding-bottom: 2px;
  font-size: 0.9375rem;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.5);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-contact .privacy-links a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.page-contact .privacy-links a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ---------- Q&A ---------- */
.page-contact .qa-wrap {
  max-width: 820px;
  margin-top: 30px;
}

.page-contact .qa-item {
  border-top: 1px solid var(--contact-hair);
}

.page-contact .qa-item:last-child {
  border-bottom: 1px solid var(--contact-hair);
}

.page-contact .qa-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 46px 18px 0;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

.page-contact .qa-item summary::-webkit-details-marker {
  display: none;
}

.page-contact .qa-item summary::after {
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}

.page-contact .qa-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.page-contact .qa-item summary:hover {
  color: var(--ink-2);
}

.page-contact .qa-item summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.page-contact .qa-body {
  padding: 0 30px 20px 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--gray);
}

.page-contact .qa-body p {
  margin: 0;
}

/* ---------- CTA ---------- */
.page-contact .contact-cta {
  padding: 32px 22px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
  border-left: 4px solid var(--gold);
}

.page-contact .contact-cta h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.32;
  color: var(--ink);
}

.page-contact .contact-cta p {
  max-width: 56ch;
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-contact .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 720px) {
  .page-contact .contact-hero {
    padding: 32px 0 64px;
  }

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

  .page-contact .channel-board {
    gap: 22px;
  }

  .page-contact .contact-cta {
    padding: 40px 36px;
  }
}

@media (min-width: 820px) {
  .page-contact .channel-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 860px) {
  .page-contact .scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (min-width: 900px) {
  .page-contact .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
    align-items: end;
  }

  .page-contact .privacy-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-contact .flow-wrap {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-card,
  .page-contact .channel-card::before,
  .page-contact .brief-item,
  .page-contact .flow-step,
  .page-contact .flow-index,
  .page-contact .qa-item summary::after {
    transition: none;
  }

  .page-contact .channel-card:hover,
  .page-contact .channel-card:focus-within,
  .page-contact .brief-item:hover,
  .page-contact .brief-item:focus-within {
    transform: none;
  }

  .page-contact .flow-step:hover,
  .page-contact .flow-step:focus-within {
    padding-left: 0;
  }
}


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

  <header class="contact-hero">
    <div class="container">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb-list">
          <li><a href="/">首页</a></li>
          <li aria-current="page">意见反馈</li>
        </ol>
      </nav>

      <div class="hero-grid">
        <div class="hero-copy">
          <p class="eyebrow">第 06 章 · 意见反馈</p>
          <h1>把问题说清楚，回复才落在点上</h1>
          <p class="contact-lede">对不上期号、看不明白某一档奖级的中奖注数，或者觉得滑屏对照用着别扭，都可以直接告诉皇冠体彩官网的客服。写下期号、日期和您用的设备，我们就能顺着线索找到您看到的那一屏。</p>
          <p class="hero-note">工作日上午九点到下午六点有同事接听电话；晚上和休息日发来的邮件，会在下一个工作日的顺序里得到答复。</p>
        </div>
        <div class="hero-visual">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深宝蓝底色与金色细线交织构成的抽象资料卡纹理">
        </div>
      </div>
    </div>
  </header>

  <section class="section section--tight" aria-labelledby="channels-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">联系渠道</p>
        <h2 class="section-title" id="channels-title">三条路径，挑顺手的走</h2>
        <p class="section-lede">电话适合当面问清楚的事，邮件适合带着截图和期号慢慢描述。联系地址用于寄送纸质材料，日常咨询在线上就能解决。</p>
      </div>

      <div class="channel-board">
        <article class="channel-card channel-card--phone">
          <p class="channel-kicker">电话咨询</p>
          <p class="channel-value mono">400-5936-7063</p>
          <p class="channel-desc">问期号在哪看、奖级怎么对照、收藏页入口怎么找，接线同事可以直接带您走一遍。</p>
          <span class="tag tag--gold">工作日 9:00-18:00</span>
        </article>

        <article class="channel-card channel-card--mail">
          <p class="channel-kicker">邮件咨询</p>
          <p class="channel-value channel-value--mail mono">kefu@hg-app-zone.com.cn</p>
          <p class="channel-desc">附上截图、期号和设备信息的长描述走邮件更稳妥，回信里也能把说明一并附上。</p>
          <span class="tag tag--teal">全天可发送</span>
        </article>

        <article class="channel-card channel-card--addr">
          <p class="channel-kicker">联系地址</p>
          <p class="channel-value channel-value--addr">江西省南昌市红谷滩区丰和中大道1266号</p>
          <p class="channel-desc">合作洽谈与纸质材料可寄此处，寄出前请先邮件或电话说明内容与用途。</p>
          <span class="tag tag--violet">材料寄送</span>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--sand" aria-labelledby="flow-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">处理流程</p>
        <h2 class="section-title" id="flow-title">一条反馈，走完这四步</h2>
        <p class="section-lede">从您按下发送，到同类问题被补进常见问答，中间会经过四次流转。每一步都有负责的同事，也都有大致的时间预期。</p>
      </div>

      <div class="flow-wrap">
        <figure class="flow-figure">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="提交、分类、回复、归档四步处理流程的抽象线框信息图" loading="lazy" decoding="async">
        </figure>

        <ol class="flow-list">
          <li class="flow-step">
            <span class="flow-index mono">01</span>
            <div>
              <h3 class="flow-name">提交</h3>
              <p>邮件或电话说明遇到的情况。邮件请写清期号、发生日期、使用的设备，以及您当时在看的界面位置。</p>
            </div>
          </li>
          <li class="flow-step">
            <span class="flow-index mono">02</span>
            <div>
              <h3 class="flow-name">分类</h3>
              <p>客服先判断属于查询疑问、功能使用、内容建议还是合作洽询，再转给对应的同事接手，避免反复转述。</p>
            </div>
          </li>
          <li class="flow-step">
            <span class="flow-index mono">03</span>
            <div>
              <h3 class="flow-name">回复</h3>
              <p>工作日内当天或次个工作日回信；需要比对多期开奖明细的复杂情况，三个工作日内给出结论与依据。</p>
            </div>
          </li>
          <li class="flow-step">
            <span class="flow-index mono">04</span>
            <div>
              <h3 class="flow-name">归档</h3>
              <p>答复要点会记入同类问题的处理记录，反复被问到的情况会补进常见问答与规则文档的说明里。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section" aria-labelledby="brief-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">写反馈时带上这些</p>
        <h2 class="section-title" id="brief-title">五个要素，省掉两轮来回</h2>
        <p class="section-lede">描述得越具体，第一次回信就越可能直接给出答案。下面几项按重要程度排列，能写多少写多少，写不全也不影响受理。</p>
      </div>

      <div class="brief-grid">
        <div class="brief-item">
          <span class="brief-key">期号</span>
          <p>写全您正在查看的那一期编号，别只写“最新一期”，我们才能定位到具体那一页。</p>
        </div>
        <div class="brief-item">
          <span class="brief-key">日期</span>
          <p>说明您查看的大致日期，方便判断当时对应的是哪个版本与哪一批明细。</p>
        </div>
        <div class="brief-item">
          <span class="brief-key">奖级</span>
          <p>如果问题出在某一档奖级，请写明是哪一档，以及您看到的注数与预期差在哪里。</p>
        </div>
        <div class="brief-item">
          <span class="brief-key">设备</span>
          <p>说明是电脑还是手机，手机请补上机型；两端布局不同，位置描述需要分开看。</p>
        </div>
        <div class="brief-item">
          <span class="brief-key">现象</span>
          <p>用一两句话讲清哪一步和预期不一样，附上截图能让沟通缩短大半。</p>
        </div>
      </div>

      <p class="brief-tags">
        <span class="brief-tags-label">常被提到的几类：</span>
        <span class="tag tag--gold">期号对不上</span>
        <span class="tag tag--teal">奖级明细</span>
        <span class="tag tag--violet">滑屏对照</span>
        <span class="tag tag--orange">功能建议</span>
      </p>
    </div>
  </section>

  <section class="section section--tight" aria-labelledby="scope-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">服务范围</p>
        <h2 class="section-title" id="scope-title">哪些找客服，哪些翻文档</h2>
        <p class="section-lede">客服擅长带您找到位置、解释界面变化；涉及玩法条款与规则的细节，规则文档和案例合集写得更完整，读起来也更省心。</p>
      </div>

      <div class="scope-grid">
        <div class="scope-panel">
          <h3>客服能当场答</h3>
          <ul class="scope-list">
            <li>最近五十期期号在哪一屏，按日期分组怎么翻</li>
            <li>某一档奖级的中奖注数在电脑和手机上分别怎么看</li>
            <li>收藏页入口位置，以及常用查询怎么两步到达</li>
            <li>反馈提交之后的处理进度与答复去向</li>
            <li>移动端滑屏对照失灵时的排查顺序</li>
          </ul>
        </div>

        <div class="scope-panel scope-panel--doc">
          <h3>文档写得更细</h3>
          <ul class="scope-list">
            <li>玩法流程、奖级设置与兑奖须知的完整条款</li>
            <li>案例合集里按玩法与期号整理的复盘过程</li>
            <li>版本更新带来的功能位置与栏目变化</li>
            <li>用户协议里关于内容使用与知识产权的约定</li>
          </ul>
          <p class="scope-links">
            <a class="btn btn--line" href="/faqs/">看常见问答</a>
            <a class="btn btn--ghost" href="/reports/">翻观察报告</a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--ink contact-privacy" aria-labelledby="privacy-title">
    <div class="container">
      <div class="privacy-grid">
        <div>
          <p class="eyebrow">隐私与信息使用</p>
          <h2 class="section-title" id="privacy-title">您写来的内容，只用来回答您的问题</h2>
          <p>留下的电话或邮箱只用于这一次回复，邮件正文由负责的同事查看，不会转作其他用途，也不会把您的联系方式交给站外第三方。问题处理完，答复记录会留在客服系统里备查。</p>
          <p class="privacy-links">
            <a href="/data-protection/">查看数据保护说明</a>
            <a href="/agreement/">阅读用户协议</a>
          </p>
        </div>

        <ul class="privacy-list">
          <li><strong>联系方式</strong>只用于回信或回电，不做额外的消息推送。</li>
          <li><strong>截图与附件</strong>仅供定位问题使用，答复完成即随记录一并留存。</li>
          <li><strong>收藏页记录</strong>保存在您自己的设备上，不会跟着反馈一起提交。</li>
          <li><strong>公开引用</strong>如需把您的问题作为案例说明，会先征得您的同意。</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section" aria-labelledby="qa-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">常见联系问题</p>
        <h2 class="section-title" id="qa-title">打电话、发邮件之前的几个疑问</h2>
        <p class="section-lede">这几种情况在客服那里出现得最多，先看一眼，也许能省下一次沟通。</p>
      </div>

      <div class="qa-wrap">
        <details class="qa-item">
          <summary>电话打过去没人接，是什么情况？</summary>
          <div class="qa-body">
            <p>工作日九点到六点之外、午间交接，以及线路同时占用的时段，可能会出现无人接听。换个时间再拨，或者直接发邮件，上班后按顺序回复。</p>
          </div>
        </details>

        <details class="qa-item">
          <summary>邮件发出去多久会有回音？</summary>
          <div class="qa-body">
            <p>工作日当天或次个工作日回信；需要比对多期开奖明细的问题，三个工作日内给出结论。周末与法定节假日顺延到下一个工作日。</p>
          </div>
        </details>

        <details class="qa-item">
          <summary>反馈之后还能追问同一件事吗？</summary>
          <div class="qa-body">
            <p>能。回信里会带一个处理编号，直接回复同一封邮件就能续上，不用把情况重新描述一遍。</p>
          </div>
        </details>

        <details class="qa-item">
          <summary>能不能帮我把某一期重新算一遍？</summary>
          <div class="qa-body">
            <p>开奖结果以公布信息为准。客服可以带您定位到期号、奖级明细与规则文档中对应的条款，具体判定请对照奖级设置那一节自行确认。</p>
          </div>
        </details>

        <details class="qa-item">
          <summary>寄材料到联系地址要注意什么？</summary>
          <div class="qa-body">
            <p>寄出前先用邮件说明材料内容与用途，收件后会转到对应同事手上。急件请优先走电话，避免在途中耽误时间。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="section section--tight" aria-labelledby="cta-title">
    <div class="container">
      <div class="contact-cta">
        <h2 id="cta-title">还没想好怎么开口？先看看别人的问题</h2>
        <p>常见问答里整理了查询、安装、收藏页和双端对照的高频疑问，多数情况读一遍就有答案；想按日期看中奖注数的变化，可以去观察报告翻期号时间轴。</p>
        <p class="cta-actions">
          <a class="btn btn--gold" href="/faqs/">去常见问答</a>
          <a class="btn btn--ghost" href="/">回到首页</a>
        </p>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --contact-hair: rgba(11, 31, 58, 0.14);
  --contact-shadow: 0 22px 44px -30px rgba(11, 31, 58, 0.6);
  background: var(--ivory);
  color: var(--char);
}

/* ---------- Hero ---------- */
.page-contact .contact-hero {
  position: relative;
  padding: 24px 0 52px;
  background-color: var(--ivory);
  background-image:
    linear-gradient(to right, rgba(11, 31, 58, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 31, 58, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  border-bottom: 1px solid var(--contact-hair);
}

.page-contact .contact-hero .breadcrumb {
  margin-bottom: 26px;
}

.page-contact .hero-grid {
  display: grid;
  gap: 28px;
}

.page-contact .hero-copy h1 {
  margin: 12px 0 20px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 7.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-contact .contact-lede {
  max-width: 46ch;
  margin: 0 0 18px;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--char);
}

.page-contact .hero-note {
  max-width: 46ch;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-contact .hero-visual {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-top: 3px solid var(--gold);
}

.page-contact .hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- Channels ---------- */
.page-contact .channel-board {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.page-contact .channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 24px 26px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.page-contact .channel-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}

.page-contact .channel-card:hover::before,
.page-contact .channel-card:focus-within::before {
  transform: scaleY(1);
}

.page-contact .channel-card:hover,
.page-contact .channel-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: var(--contact-shadow);
}

.page-contact .channel-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--gray);
}

.page-contact .channel-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 4.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--ink);
  word-break: break-word;
}

.page-contact .channel-value--mail {
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  word-break: break-all;
}

.page-contact .channel-value--addr {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.page-contact .channel-desc {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-contact .channel-card .tag {
  align-self: flex-start;
}

.page-contact .channel-card--phone {
  background: var(--ink);
  border-color: transparent;
  color: var(--on-ink-strong);
}

.page-contact .channel-card--phone .channel-kicker {
  color: rgba(233, 199, 102, 0.92);
}

.page-contact .channel-card--phone .channel-value {
  color: var(--gold);
}

.page-contact .channel-card--phone .channel-desc {
  color: var(--on-ink);
}

.page-contact .channel-card--phone:hover,
.page-contact .channel-card--phone:focus-within {
  border-color: rgba(212, 175, 55, 0.5);
}

/* ---------- Flow ---------- */
.page-contact .flow-wrap {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

.page-contact .flow-figure {
  margin: 0;
  overflow: hidden;
  background: var(--ink-2);
  border-bottom: 3px solid var(--gold);
}

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

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

.page-contact .flow-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 18px 10px 18px 0;
  border-top: 1px solid rgba(11, 31, 58, 0.18);
  transition: background-color 0.22s var(--ease), padding-left 0.22s var(--ease);
}

.page-contact .flow-step:last-child {
  border-bottom: 1px solid rgba(11, 31, 58, 0.18);
}

.page-contact .flow-step:hover,
.page-contact .flow-step:focus-within {
  background: rgba(255, 255, 255, 0.66);
  padding-left: 10px;
}

.page-contact .flow-index {
  align-self: start;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  transition: color 0.22s var(--ease);
}

.page-contact .flow-step:hover .flow-index {
  color: var(--gold);
}

.page-contact .flow-name {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.page-contact .flow-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gray);
}

/* ---------- Brief ---------- */
.page-contact .brief-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.page-contact .brief-item {
  position: relative;
  padding: 22px 22px 20px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
  border-left: 3px solid var(--sand);
  transition: border-left-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.page-contact .brief-item:hover,
.page-contact .brief-item:focus-within {
  border-left-color: var(--gold);
  transform: translateY(-2px);
}

.page-contact .brief-key {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-contact .brief-item p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--gray);
}

.page-contact .brief-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--contact-hair);
}

.page-contact .brief-tags-label {
  margin-right: 4px;
  font-size: 0.875rem;
  color: var(--gray);
}

/* ---------- Scope ---------- */
.page-contact .scope-grid {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.page-contact .scope-panel {
  padding: 26px 22px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
}

.page-contact .scope-panel h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
}

.page-contact .scope-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.page-contact .scope-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-contact .scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-contact .scope-panel--doc {
  background: var(--ink);
  border-color: transparent;
}

.page-contact .scope-panel--doc h3 {
  color: var(--ivory);
}

.page-contact .scope-panel--doc .scope-list li {
  color: var(--on-ink);
}

.page-contact .scope-panel--doc .scope-list li::before {
  background: var(--teal);
}

.page-contact .scope-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

/* ---------- Privacy ---------- */
.page-contact .contact-privacy {
  position: relative;
  overflow: hidden;
}

.page-contact .privacy-grid {
  display: grid;
  gap: 30px;
}

.page-contact .contact-privacy .eyebrow {
  color: var(--gold-soft);
}

.page-contact .contact-privacy .section-title {
  color: var(--ivory);
  margin-top: 10px;
}

.page-contact .privacy-grid > div > p {
  max-width: 48ch;
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--on-ink);
}

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

.page-contact .privacy-list li {
  padding: 15px 0;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--on-ink);
}

.page-contact .privacy-list li:last-child {
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.page-contact .privacy-list strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gold-soft);
}

.page-contact .privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 26px 0 0;
}

.page-contact .privacy-links a {
  padding-bottom: 2px;
  font-size: 0.9375rem;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.5);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-contact .privacy-links a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.page-contact .privacy-links a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ---------- Q&A ---------- */
.page-contact .qa-wrap {
  max-width: 820px;
  margin-top: 30px;
}

.page-contact .qa-item {
  border-top: 1px solid var(--contact-hair);
}

.page-contact .qa-item:last-child {
  border-bottom: 1px solid var(--contact-hair);
}

.page-contact .qa-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 46px 18px 0;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

.page-contact .qa-item summary::-webkit-details-marker {
  display: none;
}

.page-contact .qa-item summary::after {
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}

.page-contact .qa-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.page-contact .qa-item summary:hover {
  color: var(--ink-2);
}

.page-contact .qa-item summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.page-contact .qa-body {
  padding: 0 30px 20px 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--gray);
}

.page-contact .qa-body p {
  margin: 0;
}

/* ---------- CTA ---------- */
.page-contact .contact-cta {
  padding: 32px 22px;
  background: var(--white);
  border: 1px solid var(--contact-hair);
  border-left: 4px solid var(--gold);
}

.page-contact .contact-cta h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.32;
  color: var(--ink);
}

.page-contact .contact-cta p {
  max-width: 56ch;
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-contact .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 720px) {
  .page-contact .contact-hero {
    padding: 32px 0 64px;
  }

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

  .page-contact .channel-board {
    gap: 22px;
  }

  .page-contact .contact-cta {
    padding: 40px 36px;
  }
}

@media (min-width: 820px) {
  .page-contact .channel-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 860px) {
  .page-contact .scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (min-width: 900px) {
  .page-contact .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
    align-items: end;
  }

  .page-contact .privacy-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-contact .flow-wrap {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-card,
  .page-contact .channel-card::before,
  .page-contact .brief-item,
  .page-contact .flow-step,
  .page-contact .flow-index,
  .page-contact .qa-item summary::after {
    transition: none;
  }

  .page-contact .channel-card:hover,
  .page-contact .channel-card:focus-within,
  .page-contact .brief-item:hover,
  .page-contact .brief-item:focus-within {
    transform: none;
  }

  .page-contact .flow-step:hover,
  .page-contact .flow-step:focus-within {
    padding-left: 0;
  }
}