.page-contact {
  --ct-radius: 24px;
  --ct-panel: var(--kw-paper);
  color: var(--kw-seed);
}

.page-contact .kw-crumbs {
  padding-block: 14px 0;
  font-size: 0.85rem;
}

/* 首屏 */
.page-contact .contact-hero {
  padding-block: clamp(16px, 3vw, 28px) clamp(36px, 6vw, 64px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-contact .contact-hero h1 {
  margin: 10px 0 16px;
  font-family: var(--kw-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kw-deep);
}

.page-contact .contact-hero__intro {
  margin: 0 0 20px;
  max-width: 34em;
  font-size: clamp(1rem, 2.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--kw-ink-soft);
}

.page-contact .contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-contact .contact-hero__hint {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--kw-flesh);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-hero__figure {
  margin: 0;
}

.page-contact .contact-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ct-radius);
  box-shadow: var(--kw-shadow-soft);
}

/* 三种联系渠道 */
.page-contact .contact-channels__grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.page-contact .contact-channel {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border-radius: var(--ct-radius);
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
  transition: transform 0.24s var(--kw-ease), box-shadow 0.24s var(--kw-ease);
}

.page-contact .contact-channel:hover {
  transform: translateY(-4px);
  box-shadow: var(--kw-shadow-lift);
}

.page-contact .contact-channel::before {
  content: "";
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--kw-emerald);
}

.page-contact .contact-channel:nth-child(1) {
  background: var(--kw-mist);
}

.page-contact .contact-channel:nth-child(2) {
  background: var(--kw-apricot);
  border-bottom-right-radius: 6px;
}

.page-contact .contact-channel:nth-child(3) {
  background: linear-gradient(150deg, var(--kw-paper), var(--kw-mist));
}

.page-contact .contact-channel__label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--kw-emerald-ink);
}

.page-contact .contact-channel__value {
  margin: 0;
  font-size: clamp(0.92rem, 2.4vw, 1.04rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--kw-deep);
  overflow-wrap: anywhere;
}

.page-contact .contact-channel__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--kw-ink-soft);
}

/* 问题分流 */
.page-contact .contact-triage {
  margin-top: 24px;
  padding: clamp(16px, 3vw, 26px);
  border-radius: var(--ct-radius);
  border: 1px solid var(--kw-line);
  background: linear-gradient(155deg, var(--kw-apricot) 0%, var(--kw-paper) 58%, var(--kw-mist) 100%);
}

.page-contact .contact-triage .kw-tabs__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.page-contact .contact-triage .kw-tabs__btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
  color: var(--kw-emerald-ink);
  font-family: var(--kw-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s var(--kw-ease), color 0.18s var(--kw-ease), border-color 0.18s var(--kw-ease);
}

.page-contact .contact-triage .kw-tabs__btn:hover {
  border-color: var(--kw-emerald);
}

.page-contact .contact-triage .kw-tabs__btn[aria-selected="true"] {
  background: var(--kw-deep);
  border-color: var(--kw-deep);
  color: var(--kw-paper);
}

.page-contact .contact-triage .kw-tabs__btn:focus-visible {
  outline: 3px solid var(--kw-orange);
  outline-offset: 2px;
}

.page-contact .contact-triage .kw-tabs__panel {
  margin-top: 14px;
  padding: clamp(16px, 2.6vw, 22px);
  border-radius: 18px;
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
}

.page-contact .contact-triage .kw-tabs__panel h3 {
  margin: 0 0 8px;
  font-family: var(--kw-font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.28rem);
  line-height: 1.35;
  color: var(--kw-deep);
}

.page-contact .contact-triage .kw-tabs__panel p {
  margin: 0;
  line-height: 1.8;
  color: var(--kw-ink-soft);
}

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

.page-contact .contact-triage__points li {
  position: relative;
  padding-left: 22px;
  line-height: 1.7;
  color: var(--kw-seed);
}

.page-contact .contact-triage__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--kw-flesh);
  transform: rotate(45deg);
}

.page-contact .contact-triage__foot {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-triage__foot a {
  color: var(--kw-emerald-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 反馈准备清单 */
.page-contact .contact-kit__grid {
  display: grid;
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}

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

.page-contact .contact-kit__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--kw-line);
  border-left: 4px solid var(--kw-flesh);
  background: var(--kw-paper);
}

.page-contact .contact-kit__item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--kw-deep);
}

.page-contact .contact-kit__item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--kw-ink-soft);
}

.page-contact .contact-kit__box {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--kw-emerald);
  color: var(--kw-paper);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.page-contact .contact-kit__figure {
  margin: 0;
}

.page-contact .contact-kit__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 7;
  object-fit: cover;
  border-radius: var(--ct-radius);
}

/* 响应与在岗时段 */
.page-contact .contact-sla__list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.page-contact .contact-sla .kw-details {
  padding: 2px 18px;
  border-radius: 16px;
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
}

.page-contact .contact-sla summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--kw-deep);
}

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

.page-contact .contact-sla summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--kw-font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--kw-emerald);
}

.page-contact .contact-sla .kw-details[open] summary::after {
  content: "–";
}

.page-contact .contact-sla summary:focus-visible {
  outline: 3px solid var(--kw-orange);
  outline-offset: 4px;
  border-radius: 8px;
}

.page-contact .contact-sla .kw-details__body p {
  margin: 0 0 16px;
  line-height: 1.8;
  color: var(--kw-ink-soft);
}

/* 合作咨询 */
.page-contact .contact-partner {
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--ct-radius);
  color: var(--kw-paper);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(127, 191, 142, 0.3), transparent 58%),
    var(--kw-deep);
}

.page-contact .contact-partner .kw-eyebrow {
  color: var(--kw-flesh);
}

.page-contact .contact-partner h2 {
  margin: 8px 0 14px;
  font-family: var(--kw-font-display);
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  line-height: 1.24;
  color: var(--kw-paper);
}

.page-contact .contact-partner__head p {
  margin: 0;
  max-width: 46em;
  line-height: 1.85;
  color: rgba(251, 250, 245, 0.86);
}

.page-contact .contact-partner__grid {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-contact .contact-partner__card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(251, 250, 245, 0.18);
  background: rgba(251, 250, 245, 0.09);
}

.page-contact .contact-partner__card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--kw-flesh);
}

.page-contact .contact-partner__card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(251, 250, 245, 0.84);
}

.page-contact .contact-partner__foot {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(251, 250, 245, 0.28);
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(251, 250, 245, 0.72);
}

/* 联系方式卡 */
.page-contact .contact-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.4vw, 34px);
  border-radius: var(--ct-radius);
  border: 1px solid var(--kw-line);
  background: linear-gradient(180deg, var(--kw-mist), var(--kw-paper) 72%);
}

.page-contact .contact-card__trace {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 118px;
  height: auto;
  color: var(--kw-emerald);
  opacity: 0.45;
  pointer-events: none;
}

.page-contact .contact-card h2 {
  margin: 0 0 18px;
  font-family: var(--kw-font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--kw-deep);
}

.page-contact .contact-card__rows {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-contact .contact-card__row {
  display: grid;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--kw-line);
}

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

.page-contact .contact-card__row dt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--kw-emerald-ink);
}

.page-contact .contact-card__row dd {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--kw-seed);
  overflow-wrap: anywhere;
}

.page-contact .contact-card__note {
  margin: 18px 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-card__legal {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-card__legal a {
  color: var(--kw-emerald-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .page-contact .contact-channels__grid {
    grid-template-columns: 1.24fr 1fr 1.08fr;
    align-items: start;
  }

  .page-contact .contact-channel:nth-child(2) {
    margin-top: 14px;
  }

  .page-contact .contact-kit__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

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

  .page-contact .contact-card__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page-contact .contact-card__row {
    padding: 0 0 0 18px;
    border-bottom: 0;
    border-left: 1px dashed var(--kw-line);
  }

  .page-contact .contact-card__row:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 44px;
  }

  .page-contact .contact-hero__figure {
    margin-top: 26px;
  }

  .page-contact .contact-sla__list {
    max-width: 62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-channel,
  .page-contact .contact-triage .kw-tabs__btn {
    transition: none;
  }

  .page-contact .contact-channel:hover {
    transform: none;
  }
}


<main id="main-content" class="page-contact">
  <div class="kw-container">
    <nav class="kw-crumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">清晨首页</a></li>
        <li aria-current="page">咨询与反馈</li>
      </ol>
    </nav>
  </div>

  <section class="kw-section contact-hero" aria-labelledby="contact-hero-title">
    <div class="kw-container contact-hero__grid">
      <div class="contact-hero__lead" data-reveal>
        <p class="kw-eyebrow">咨询与反馈</p>
        <h1 id="contact-hero-title">话说明白了，<br>回音就不绕路</h1>
        <p class="contact-hero__intro">奇异果中心的客服与体验支持团队守在工作日的邮箱和电话另一端。平板版浏览不顺、登录反馈需要跟进、果园批次想聊合作，都能在这里找到顺手的那条路，也知道该带上什么材料。</p>
        <div class="contact-hero__actions">
          <a class="kw-btn kw-btn--accent" href="/faqs/">先看使用问答</a>
          <a class="kw-btn kw-btn--ghost" href="/products/">了解平板版</a>
        </div>
        <p class="contact-hero__hint">第一次来？三屏使用指南平均 90 秒走完，多数操作上的困惑在那里就能解开。</p>
      </div>
      <figure class="kw-figure contact-hero__figure" data-reveal>
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="清晨木桌上摊开的便签、信封与一小篮奇异果，柔和天光从侧上方照进来">
        <figcaption class="kw-figure__cap">把问题写在明处，回复往往来得更快。</figcaption>
      </figure>
    </div>
  </section>

  <section class="kw-section contact-channels" aria-labelledby="channel-title">
    <div class="kw-container">
      <div class="kw-section__head">
        <h2 id="channel-title">三条路，挑最顺手的一条</h2>
        <p>能附图的走邮件，说得清的走电话，寄样品或者约见面按地址来。哪一条都有人接着。</p>
      </div>
      <div class="contact-channels__grid">
        <article class="contact-channel" data-reveal>
          <p class="contact-channel__label">邮件</p>
          <p class="contact-channel__value kw-mono">support@morning-kiwi.com.cn</p>
          <p class="contact-channel__note">搜索没结果、登录走不下去、页面显示不对，把截图和操作步骤一并寄来，一轮就能说清。</p>
        </article>
        <article class="contact-channel" data-reveal>
          <p class="contact-channel__label">电话</p>
          <p class="contact-channel__value kw-mono">400-3096-8958</p>
          <p class="contact-channel__note">产地批次、供货月份这类要来回确认的事，工作日 9:00-18:00 打过来，几句话能对上。</p>
        </article>
        <article class="contact-channel" data-reveal>
          <p class="contact-channel__label">地址</p>
          <p class="contact-channel__value kw-mono">山西省太原市小店区学府街128号晨光创意园3层</p>
          <p class="contact-channel__note">寄送样品或约见面之前，先发一封邮件说明来意，我们好提前安排人手。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="kw-section" aria-labelledby="triage-title">
    <div class="kw-container">
      <div class="kw-section__head">
        <h2 id="triage-title">先对上号，回复能快一半</h2>
        <p>四类事情各有各的处理节奏和要准备的东西，点开你遇到的那一类看看。</p>
      </div>
      <div class="kw-tabs contact-triage" data-tabs data-reveal>
        <div class="kw-tabs__list" role="tablist" aria-label="问题类型">
          <button class="kw-tabs__btn" type="button" role="tab" id="ct-tab-login" aria-controls="ct-panel-login" aria-selected="true" data-tab="login">检索与登录</button>
          <button class="kw-tabs__btn" type="button" role="tab" id="ct-tab-tablet" aria-controls="ct-panel-tablet" aria-selected="false" data-tab="tablet">平板版使用</button>
          <button class="kw-tabs__btn" type="button" role="tab" id="ct-tab-partner" aria-controls="ct-panel-partner" aria-selected="false" data-tab="partner">合作与内容</button>
          <button class="kw-tabs__btn" type="button" role="tab" id="ct-tab-privacy" aria-controls="ct-panel-privacy" aria-selected="false" data-tab="privacy">隐私请求</button>
        </div>

        <div class="kw-tabs__panel" role="tabpanel" id="ct-panel-login" aria-labelledby="ct-tab-login" data-tab-panel="login" tabindex="0">
          <h3>搜不到想要的结果，或者登录反复卡住</h3>
          <p>把用过的词、看到的提示原话和当时的页面记下来。客服拿到这三样，多数情况一次就能还原你眼前那一屏。</p>
          <ul class="contact-triage__points">
            <li>搜索框里输入的关键词，含产地、甜度区间或月份</li>
            <li>提示文字的完整句子，别只写“登不上”</li>
            <li>出问题的入口名称或所在页面的路径</li>
          </ul>
          <p class="contact-triage__foot">不少情况在<a href="/faqs/">使用问答</a>里已经写了解法，先翻一遍能省一次往返。</p>
        </div>

        <div class="kw-tabs__panel" role="tabpanel" id="ct-panel-tablet" aria-labelledby="ct-tab-tablet" data-tab-panel="tablet" tabindex="0">
          <h3>平板上的版面、菜单或对比视图用着别扭</h3>
          <p>并排打开两份品种档案是大家用得最多的功能，遇上错位、加载慢或折叠菜单展不开，把设备和网络写清楚最有用。</p>
          <ul class="contact-triage__points">
            <li>设备型号与系统版本</li>
            <li>当时用的是 4G 还是 Wi-Fi</li>
            <li>从打开站点到出现问题的完整操作顺序</li>
          </ul>
          <p class="contact-triage__foot">功能说明和版本情况在<a href="/products/">平板版与工具</a>页面写得更细。</p>
        </div>

        <div class="kw-tabs__panel" role="tabpanel" id="ct-panel-partner" aria-labelledby="ct-tab-partner" data-tab-panel="partner" tabindex="0">
          <h3>果园、门店或者内容项目想一起做</h3>
          <p>产地批次资料、长期供货、挑选笔记都能谈。先把背景讲清楚，后面的沟通会短很多。</p>
          <ul class="contact-triage__points">
            <li>产地或经营所在地</li>
            <li>常供品种与大致可供量</li>
            <li>希望我们参与的具体环节</li>
          </ul>
          <p class="contact-triage__foot">合作方式与产地资料要求在<a href="/mission/">品牌使命</a>页有更完整的说明。</p>
        </div>

        <div class="kw-tabs__panel" role="tabpanel" id="ct-panel-privacy" aria-labelledby="ct-tab-privacy" data-tab-panel="privacy" tabindex="0">
          <h3>想查、想改，或者想删掉留在这里的信息</h3>
          <p>注册邮箱和具体诉求写清楚，我们按流程确认身份后处理，并把结果回信告诉你。</p>
          <ul class="contact-triage__points">
            <li>注册或登录时使用的邮箱</li>
            <li>要处理的具体内容与期望结果</li>
            <li>收到确认邮件后按提示回复一句即可</li>
          </ul>
          <p class="contact-triage__foot">处理范围与方式见<a href="/privacy-center/">隐私中心</a>。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="kw-section contact-kit" aria-labelledby="kit-title">
    <div class="kw-container">
      <div class="kw-section__head">
        <h2 id="kit-title">发出去之前，把这四样放进去</h2>
        <p>尤其检索异常和登录走不通的问题，材料齐了，客服不用来回追问，一轮就能定位。</p>
      </div>
      <div class="contact-kit__grid">
        <ul class="contact-kit__list">
          <li class="contact-kit__item" data-reveal>
            <span class="contact-kit__box" aria-hidden="true">✓</span>
            <div>
              <strong>页面截图</strong>
              <p>整屏截下来，把提示文字和按钮当时的状态一起框进去。</p>
            </div>
          </li>
          <li class="contact-kit__item" data-reveal>
            <span class="contact-kit__box" aria-hidden="true">✓</span>
            <div>
              <strong>页面路径</strong>
              <p>在哪一页碰上的，复制地址或者写下入口名称，别只说“网站上”。</p>
            </div>
          </li>
          <li class="contact-kit__item" data-reveal>
            <span class="contact-kit__box" aria-hidden="true">✓</span>
            <div>
              <strong>设备型号</strong>
              <p>手机还是平板、系统版本，以及用的是移动网络还是无线网络。</p>
            </div>
          </li>
          <li class="contact-kit__item" data-reveal>
            <span class="contact-kit__box" aria-hidden="true">✓</span>
            <div>
              <strong>操作步骤</strong>
              <p>从打开站到出现问题，按顺序写三到五步，别人照着能走一遍就够了。</p>
            </div>
          </li>
        </ul>
        <figure class="kw-figure contact-kit__figure" data-reveal>
          <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="联系卡片、截图图标与果篮标签平铺在浅色桌面上，信息图式的俯拍" loading="lazy" decoding="async">
          <figcaption class="kw-figure__cap">四样材料凑齐，邮件也就写完了。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="kw-section contact-sla" aria-labelledby="sla-title">
    <div class="kw-container">
      <div class="kw-section__head">
        <h2 id="sla-title">什么时候能等到回音</h2>
        <p>工作日的 9:00 到 18:00 是我们在岗的时段，其余时间收到的邮件会排进下一个工作日的队列。</p>
      </div>
      <div class="contact-sla__list">
        <details class="kw-details" data-reveal>
          <summary>邮件发出去多久会有第一次回音？</summary>
          <div class="kw-details__body">
            <p>登录相关的反馈在工作日 4 小时内首次响应；需要多方确认的复杂问题，1 个工作日内给出处理路径和下一步动作。</p>
          </div>
        </details>
        <details class="kw-details" data-reveal>
          <summary>电话和邮件，哪个更快？</summary>
          <div class="kw-details__body">
            <p>急着确认产地批次或供货月份的，直接拨打 400-3096-8958；需要附截图才能说明白的，走邮箱更清楚。</p>
          </div>
        </details>
        <details class="kw-details" data-reveal>
          <summary>截图要截到哪一步才算完整？</summary>
          <div class="kw-details__body">
            <p>把页面路径或入口名称、提示文字、按钮状态和当前所在板块放进同一屏，能看出问题的那一张最有用。</p>
          </div>
        </details>
        <details class="kw-details" data-reveal>
          <summary>材料没备全，会被退回来吗？</summary>
          <div class="kw-details__body">
            <p>不会退。客服会先按已有信息给一个初步方向，缺的那部分再一起补齐，不耽误你先把问题说出口。</p>
          </div>
        </details>
        <details class="kw-details" data-reveal>
          <summary>下班时间发邮件会怎样？</summary>
          <div class="kw-details__body">
            <p>邮件照常收到，按顺序排进下一个工作日处理。夜间和休息日不做即时回复，急事建议在岗时段来电。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="kw-section" aria-labelledby="partner-title">
    <div class="kw-container">
      <div class="contact-partner" data-reveal>
        <div class="contact-partner__head">
          <p class="kw-eyebrow">合作咨询</p>
          <h2 id="partner-title">果园、门店和内容项目，都能坐下来聊</h2>
          <p>我们与 18 家果园合作社、6 家冷链服务商一起维护产地批次资料，也在 26 个省份的社区果店和小型餐饮里收集真实的选果反馈。想加入，一封邮件把背景讲清就能开始。</p>
        </div>
        <div class="contact-partner__grid">
          <article class="contact-partner__card">
            <h3>果园合作社</h3>
            <p>产地证明与农残检测报告是合作的前提材料，随邮件附上品种、成熟月份和可供货量。</p>
          </article>
          <article class="contact-partner__card">
            <h3>渠道与门店</h3>
            <p>说说门店位置、常客的口味偏好和每周大致走量，我们会给出对应的品种与保存建议。</p>
          </article>
          <article class="contact-partner__card">
            <h3>内容共建</h3>
            <p>挑选笔记、产区观察、食用方案都欢迎，先发一份提纲或者两篇样稿过来看看。</p>
          </article>
        </div>
        <p class="contact-partner__foot">邮件主题写上“合作”加上你的方向，正文里留一个能及时联系到的方式。</p>
      </div>
    </div>
  </section>

  <section class="kw-section" aria-labelledby="card-title">
    <div class="kw-container">
      <div class="contact-card" data-reveal>
        <svg class="contact-card__trace" viewBox="0 0 200 60" aria-hidden="true" focusable="false">
          <path d="M4 48 C 40 48, 44 12, 82 12 S 130 48, 170 48" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="5 7" stroke-linecap="round"></path>
          <circle cx="4" cy="48" r="4" fill="currentColor"></circle>
          <circle cx="170" cy="48" r="4" fill="currentColor"></circle>
        </svg>
        <h2 id="card-title">记下这三行就够了</h2>
        <dl class="contact-card__rows">
          <div class="contact-card__row">
            <dt>客服邮箱</dt>
            <dd class="kw-mono">support@morning-kiwi.com.cn</dd>
          </div>
          <div class="contact-card__row">
            <dt>服务电话</dt>
            <dd class="kw-mono">400-3096-8958</dd>
          </div>
          <div class="contact-card__row">
            <dt>联系地址</dt>
            <dd class="kw-mono">山西省太原市小店区学府街128号晨光创意园3层</dd>
          </div>
        </dl>
        <p class="contact-card__note">客服邮箱在工作日 9:00-18:00 内回复，站内检索与登录问题请附页面截图。</p>
        <p class="contact-card__legal"><span class="kw-mono">晋ICP备90274967号-4</span> · <a href="/privacy-center/">隐私中心</a> · <a href="/terms-of-use/">使用条款</a></p>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --ct-radius: 24px;
  color: var(--kw-seed);
}

.page-contact .kw-crumbs {
  padding-block: 14px 0;
  font-size: 0.85rem;
}

/* 首屏 */
.page-contact .contact-hero {
  padding-block: clamp(16px, 3vw, 28px) clamp(36px, 6vw, 64px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-contact .contact-hero h1 {
  margin: 10px 0 16px;
  font-family: var(--kw-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kw-deep);
}

.page-contact .contact-hero__intro {
  margin: 0 0 20px;
  max-width: 34em;
  font-size: clamp(1rem, 2.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--kw-ink-soft);
}

.page-contact .contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-contact .contact-hero__hint {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--kw-flesh);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-hero__figure {
  margin: 0;
}

.page-contact .contact-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ct-radius);
  box-shadow: var(--kw-shadow-soft);
}

/* 三种联系渠道 */
.page-contact .contact-channels__grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.page-contact .contact-channel {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border-radius: var(--ct-radius);
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
  transition: transform 0.24s var(--kw-ease), box-shadow 0.24s var(--kw-ease);
}

.page-contact .contact-channel:hover {
  transform: translateY(-4px);
  box-shadow: var(--kw-shadow-lift);
}

.page-contact .contact-channel::before {
  content: "";
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--kw-emerald);
}

.page-contact .contact-channel:nth-child(1) {
  background: var(--kw-mist);
}

.page-contact .contact-channel:nth-child(2) {
  background: var(--kw-apricot);
  border-bottom-right-radius: 6px;
}

.page-contact .contact-channel:nth-child(3) {
  background: linear-gradient(150deg, var(--kw-paper), var(--kw-mist));
}

.page-contact .contact-channel__label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--kw-emerald-ink);
}

.page-contact .contact-channel__value {
  margin: 0;
  font-size: clamp(0.92rem, 2.4vw, 1.04rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--kw-deep);
  overflow-wrap: anywhere;
}

.page-contact .contact-channel__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--kw-ink-soft);
}

/* 问题分流 */
.page-contact .contact-triage {
  margin-top: 24px;
  padding: clamp(16px, 3vw, 26px);
  border-radius: var(--ct-radius);
  border: 1px solid var(--kw-line);
  background: linear-gradient(155deg, var(--kw-apricot) 0%, var(--kw-paper) 58%, var(--kw-mist) 100%);
}

.page-contact .contact-triage .kw-tabs__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.page-contact .contact-triage .kw-tabs__btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
  color: var(--kw-emerald-ink);
  font-family: var(--kw-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s var(--kw-ease), color 0.18s var(--kw-ease), border-color 0.18s var(--kw-ease);
}

.page-contact .contact-triage .kw-tabs__btn:hover {
  border-color: var(--kw-emerald);
}

.page-contact .contact-triage .kw-tabs__btn[aria-selected="true"] {
  background: var(--kw-deep);
  border-color: var(--kw-deep);
  color: var(--kw-paper);
}

.page-contact .contact-triage .kw-tabs__btn:focus-visible {
  outline: 3px solid var(--kw-orange);
  outline-offset: 2px;
}

.page-contact .contact-triage .kw-tabs__panel {
  margin-top: 14px;
  padding: clamp(16px, 2.6vw, 22px);
  border-radius: 18px;
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
}

.page-contact .contact-triage .kw-tabs__panel h3 {
  margin: 0 0 8px;
  font-family: var(--kw-font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.28rem);
  line-height: 1.35;
  color: var(--kw-deep);
}

.page-contact .contact-triage .kw-tabs__panel p {
  margin: 0;
  line-height: 1.8;
  color: var(--kw-ink-soft);
}

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

.page-contact .contact-triage__points li {
  position: relative;
  padding-left: 22px;
  line-height: 1.7;
  color: var(--kw-seed);
}

.page-contact .contact-triage__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--kw-flesh);
  transform: rotate(45deg);
}

.page-contact .contact-triage__foot {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-triage__foot a {
  color: var(--kw-emerald-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 反馈准备清单 */
.page-contact .contact-kit__grid {
  display: grid;
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}

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

.page-contact .contact-kit__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--kw-line);
  border-left: 4px solid var(--kw-flesh);
  background: var(--kw-paper);
}

.page-contact .contact-kit__item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--kw-deep);
}

.page-contact .contact-kit__item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--kw-ink-soft);
}

.page-contact .contact-kit__box {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--kw-emerald);
  color: var(--kw-paper);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.page-contact .contact-kit__figure {
  margin: 0;
}

.page-contact .contact-kit__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 7;
  object-fit: cover;
  border-radius: var(--ct-radius);
}

/* 响应与在岗时段 */
.page-contact .contact-sla__list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.page-contact .contact-sla .kw-details {
  padding: 2px 18px;
  border-radius: 16px;
  border: 1px solid var(--kw-line);
  background: var(--kw-paper);
}

.page-contact .contact-sla summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--kw-deep);
}

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

.page-contact .contact-sla summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--kw-font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--kw-emerald);
}

.page-contact .contact-sla .kw-details[open] summary::after {
  content: "–";
}

.page-contact .contact-sla summary:focus-visible {
  outline: 3px solid var(--kw-orange);
  outline-offset: 4px;
  border-radius: 8px;
}

.page-contact .contact-sla .kw-details__body p {
  margin: 0 0 16px;
  line-height: 1.8;
  color: var(--kw-ink-soft);
}

/* 合作咨询 */
.page-contact .contact-partner {
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--ct-radius);
  color: var(--kw-paper);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(127, 191, 142, 0.3), transparent 58%),
    var(--kw-deep);
}

.page-contact .contact-partner .kw-eyebrow {
  color: var(--kw-flesh);
}

.page-contact .contact-partner h2 {
  margin: 8px 0 14px;
  font-family: var(--kw-font-display);
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  line-height: 1.24;
  color: var(--kw-paper);
}

.page-contact .contact-partner__head p {
  margin: 0;
  max-width: 46em;
  line-height: 1.85;
  color: rgba(251, 250, 245, 0.86);
}

.page-contact .contact-partner__grid {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-contact .contact-partner__card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(251, 250, 245, 0.18);
  background: rgba(251, 250, 245, 0.09);
}

.page-contact .contact-partner__card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--kw-flesh);
}

.page-contact .contact-partner__card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(251, 250, 245, 0.84);
}

.page-contact .contact-partner__foot {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(251, 250, 245, 0.28);
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(251, 250, 245, 0.72);
}

/* 联系方式卡 */
.page-contact .contact-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.4vw, 34px);
  border-radius: var(--ct-radius);
  border: 1px solid var(--kw-line);
  background: linear-gradient(180deg, var(--kw-mist), var(--kw-paper) 72%);
}

.page-contact .contact-card__trace {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 118px;
  height: auto;
  color: var(--kw-emerald);
  opacity: 0.45;
  pointer-events: none;
}

.page-contact .contact-card h2 {
  margin: 0 0 18px;
  font-family: var(--kw-font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--kw-deep);
}

.page-contact .contact-card__rows {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-contact .contact-card__row {
  display: grid;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--kw-line);
}

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

.page-contact .contact-card__row dt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--kw-emerald-ink);
}

.page-contact .contact-card__row dd {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--kw-seed);
  overflow-wrap: anywhere;
}

.page-contact .contact-card__note {
  margin: 18px 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-card__legal {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--kw-ink-mute);
}

.page-contact .contact-card__legal a {
  color: var(--kw-emerald-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .page-contact .contact-channels__grid {
    grid-template-columns: 1.24fr 1fr 1.08fr;
    align-items: start;
  }

  .page-contact .contact-channel:nth-child(2) {
    margin-top: 14px;
  }

  .page-contact .contact-kit__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

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

  .page-contact .contact-card__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page-contact .contact-card__row {
    padding: 0 0 0 18px;
    border-bottom: 0;
    border-left: 1px dashed var(--kw-line);
  }

  .page-contact .contact-card__row:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 44px;
  }

  .page-contact .contact-hero__figure {
    margin-top: 26px;
  }

  .page-contact .contact-sla__list {
    max-width: 62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-channel,
  .page-contact .contact-triage .kw-tabs__btn {
    transition: none;
  }

  .page-contact .contact-channel:hover {
    transform: none;
  }
}