.page-contact {
  --ct-frame: rgba(247, 244, 236, .22);
  --ct-glass: rgba(247, 244, 236, .10);
  --ct-night: #052B39;
  background: var(--yy-salt);
  color: var(--yy-cream-ink);
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--yy-head-h) + clamp(16px, 3.6vw, 40px));
  padding-bottom: clamp(40px, 7vw, 88px);
  color: var(--yy-salt);
  background:
    radial-gradient(112% 128% at 90% 2%, rgba(240, 180, 41, .20), transparent 58%),
    linear-gradient(156deg, var(--yy-lake-deep) 0%, var(--yy-lake) 84%);
}

.page-contact .ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(90deg, rgba(247, 244, 236, .055) 0 1px, transparent 1px 92px);
  pointer-events: none;
}

.page-contact .yy-breadcrumb__item,
.page-contact .yy-breadcrumb__link {
  color: rgba(247, 244, 236, .74);
}

.page-contact .yy-breadcrumb__link:hover,
.page-contact .yy-breadcrumb__link:focus-visible {
  color: var(--yy-gold);
}

.page-contact .ct-hero__frame {
  margin-top: clamp(14px, 2.6vw, 26px);
  padding: clamp(20px, 3.4vw, 40px);
  border: 1px solid var(--ct-frame);
  border-radius: var(--yy-radius);
  background: linear-gradient(180deg, rgba(247, 244, 236, .07), rgba(247, 244, 236, .015));
}

.page-contact .ct-hero__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.page-contact .ct-hero__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 6.4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: .03em;
  color: var(--yy-salt);
}

.page-contact .ct-hero .yy-eyebrow {
  color: var(--yy-gold);
}

.page-contact .ct-hero__lede {
  margin: clamp(14px, 2.4vw, 22px) 0 0;
  max-width: 52ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.82;
  color: rgba(247, 244, 236, .86);
}

.page-contact .ct-quick {
  display: grid;
  gap: 12px;
  margin: clamp(20px, 3.4vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-quick__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  border: 1px solid var(--ct-frame);
  border-radius: var(--yy-radius);
  background: var(--ct-glass);
  backdrop-filter: blur(6px);
}

.page-contact .ct-quick__label {
  font-family: var(--yy-font-annot);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--yy-gold);
}

.page-contact .ct-quick__value {
  font-family: var(--yy-font-body);
  font-weight: 700;
  font-size: clamp(13.5px, 2.2vw, 15px);
  letter-spacing: .01em;
  color: var(--yy-salt);
  overflow-wrap: anywhere;
}

.page-contact .ct-hero__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, .30);
  border-radius: var(--yy-radius);
  aspect-ratio: 4 / 3;
  background: var(--ct-night);
}

.page-contact .ct-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}

/* ---------- 复制按钮 ---------- */
.page-contact .ct-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--yy-lake);
  font-family: var(--yy-font-body);
  font-size: 12.5px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s var(--yy-ease), color .2s var(--yy-ease), border-color .2s var(--yy-ease);
}

.page-contact .ct-copy:hover,
.page-contact .ct-copy:focus-visible {
  background: var(--yy-lake);
  border-color: var(--yy-lake);
  color: var(--yy-salt);
}

.page-contact .ct-copy[data-copied] {
  background: var(--yy-moss);
  border-color: var(--yy-moss);
  color: var(--yy-salt);
}

.page-contact .ct-hero .ct-copy {
  color: var(--yy-gold);
}

.page-contact .ct-hero .ct-copy:hover,
.page-contact .ct-hero .ct-copy:focus-visible {
  background: var(--yy-gold);
  border-color: var(--yy-gold);
  color: var(--yy-lake-ink);
}

.page-contact .ct-copy--light {
  color: rgba(247, 244, 236, .88);
}

.page-contact .ct-copy--light:hover,
.page-contact .ct-copy--light:focus-visible {
  background: var(--yy-gold);
  border-color: var(--yy-gold);
  color: var(--yy-lake-ink);
}

/* ---------- 联络入口 ---------- */
.page-contact .ct-reach {
  padding-block: clamp(46px, 8vw, 100px);
}

.page-contact .ct-reach__head {
  max-width: 60ch;
}

.page-contact .ct-reach__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-reach__intro {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-reach__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(26px, 4vw, 44px);
}

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

.page-contact .ct-channel {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--yy-line);
}

.page-contact .ct-channel:last-child {
  border-bottom: 1px solid var(--yy-line);
}

.page-contact .ct-channel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.page-contact .ct-channel__tag {
  font-family: var(--yy-font-annot);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--yy-moss);
}

.page-contact .ct-channel__value {
  margin: 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.08rem, 3.6vw, 1.68rem);
  line-height: 1.24;
  letter-spacing: .01em;
  color: var(--yy-lake-deep);
  overflow-wrap: anywhere;
}

.page-contact .ct-channel__value--tel {
  font-family: var(--yy-font-num);
  font-size: clamp(1.55rem, 6vw, 2.2rem);
  letter-spacing: .05em;
}

.page-contact .ct-channel__value--address {
  font-size: clamp(1rem, 3vw, 1.24rem);
  line-height: 1.45;
  letter-spacing: .01em;
}

.page-contact .ct-channel__desc {
  margin: 0;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--yy-rock);
}

/* 回复节奏 */
.page-contact .ct-side {
  padding: clamp(20px, 3vw, 30px);
  border-left: 3px solid var(--yy-ochre);
  border-radius: var(--yy-radius);
  background: var(--yy-cream);
}

.page-contact .ct-side__title {
  margin: 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: 1.06rem;
  letter-spacing: .04em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-side__note {
  margin: 6px 0 20px;
  font-family: var(--yy-font-annot);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--yy-moss);
}

.page-contact .ct-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--yy-ochre), rgba(201, 138, 107, .18));
}

.page-contact .ct-timeline__item {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 0 0 18px 26px;
}

.page-contact .ct-timeline__item:last-child {
  padding-bottom: 0;
}

.page-contact .ct-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--yy-salt);
  border: 2px solid var(--yy-ochre);
}

.page-contact .ct-timeline__time {
  font-family: var(--yy-font-num);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--yy-ochre);
}

.page-contact .ct-timeline__text {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--yy-cream-ink);
}

/* ---------- 紧急换机邮件 ---------- */
.page-contact .ct-mail {
  padding-block: clamp(46px, 8vw, 96px);
  border-top: 1px solid var(--yy-line);
  border-bottom: 1px solid var(--yy-line);
  background: var(--yy-cream);
}

.page-contact .ct-mail__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  grid-template-columns: minmax(0, 1fr);
}

.page-contact .ct-mail__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: .03em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-mail__lede {
  margin: 12px 0 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-template {
  margin-top: clamp(20px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--yy-line-strong);
  border-radius: var(--yy-radius);
  background: var(--ct-night);
  box-shadow: var(--yy-shadow-soft);
}

.page-contact .ct-template__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(247, 244, 236, .16);
  background: rgba(247, 244, 236, .07);
  font-family: var(--yy-font-annot);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: rgba(247, 244, 236, .78);
}

.page-contact .ct-template pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--yy-font-body);
  font-size: 13.5px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #DEEBEF;
}

.page-contact .ct-mail__hint {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--yy-rock);
}

.page-contact .ct-mail__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--yy-line-strong);
  border-radius: var(--yy-radius);
  background: var(--yy-salt);
}

.page-contact .ct-mail__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-contact .ct-mail__media figcaption {
  padding: 12px 14px;
  border-top: 1px solid var(--yy-line);
  font-family: var(--yy-font-annot);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--yy-rock);
}

/* ---------- 青海本地 ---------- */
.page-contact .ct-local {
  padding-block: clamp(48px, 8vw, 96px);
  color: var(--yy-salt);
  background:
    radial-gradient(96% 120% at 4% 0%, rgba(14, 108, 140, .62), transparent 62%),
    var(--yy-lake-deep);
}

.page-contact .ct-local .yy-eyebrow {
  color: var(--yy-gold);
}

.page-contact .ct-local__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}

.page-contact .ct-local__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: .03em;
  color: var(--yy-salt);
}

.page-contact .ct-local__copy p {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(247, 244, 236, .84);
}

.page-contact .ct-local__linkRow {
  margin-top: 20px;
}

.page-contact .ct-local .yy-link {
  color: var(--yy-gold);
}

.page-contact .ct-local__stats {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid rgba(247, 244, 236, .2);
  border-radius: var(--yy-radius);
  overflow: hidden;
  background: rgba(247, 244, 236, .2);
}

.page-contact .ct-local__stat {
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--yy-lake-deep);
}

.page-contact .ct-local__num {
  display: block;
  font-family: var(--yy-font-num);
  font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--yy-gold);
}

.page-contact .ct-local__statLabel {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(247, 244, 236, .78);
}

/* ---------- 常见场景 ---------- */
.page-contact .ct-scenes {
  padding-block: clamp(48px, 8vw, 100px);
}

.page-contact .ct-scenes__head {
  max-width: 58ch;
}

.page-contact .ct-scenes__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: .03em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-scenes__intro {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-scenes__list {
  margin-top: clamp(22px, 3.4vw, 34px);
  border-bottom: 1px solid var(--yy-line);
}

.page-contact .ct-scene {
  border-top: 1px solid var(--yy-line);
}

.page-contact .ct-scene summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--yy-font-display);
  font-weight: 800;
  font-size: clamp(1rem, 2.8vw, 1.16rem);
  letter-spacing: .02em;
  color: var(--yy-lake-deep);
  transition: color .2s var(--yy-ease);
}

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

.page-contact .ct-scene summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--yy-font-num);
  font-size: 21px;
  line-height: 1;
  color: var(--yy-ochre);
}

.page-contact .ct-scene[open] summary::after {
  content: "−";
}

.page-contact .ct-scene summary:hover,
.page-contact .ct-scene summary:focus-visible {
  color: var(--yy-ochre);
}

.page-contact .ct-scene__index {
  font-family: var(--yy-font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--yy-ochre);
}

.page-contact .ct-scene__body {
  padding: 0 0 22px 30px;
}

.page-contact .ct-scene__body p {
  margin: 0 0 12px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(28px, 4vw, 46px);
  padding: clamp(18px, 3vw, 26px);
  border-left: 3px solid var(--yy-ochre);
  border-radius: var(--yy-radius);
  background: var(--yy-cream);
}

.page-contact .ct-signoff p {
  margin: 0;
  flex: 1 1 260px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--yy-cream-ink);
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px) {
  .page-contact .ct-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-contact .ct-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-contact .ct-hero__media {
    aspect-ratio: 5 / 6;
  }

  .page-contact .ct-mail__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-contact .ct-reach__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-contact .ct-side {
    position: sticky;
    top: calc(var(--yy-head-h) + 22px);
  }

  .page-contact .ct-local__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .ct-copy,
  .page-contact .ct-scene summary {
    transition: none;
  }
}


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

  <section class="ct-hero" aria-labelledby="ct-hero-title">
    <div class="yy-container">
      <nav class="yy-breadcrumb" aria-label="面包屑">
        <ol class="yy-breadcrumb__list">
          <li class="yy-breadcrumb__item"><a class="yy-breadcrumb__link" href="/">首页</a></li>
          <li class="yy-breadcrumb__item">服务联络</li>
        </ol>
      </nav>

      <div class="ct-hero__frame">
        <div class="ct-hero__grid">
          <div class="ct-hero__copy">
            <p class="yy-eyebrow">青海西宁 · 工作日 9:00-18:00</p>
            <h1 id="ct-hero-title" class="ct-hero__title">换机卡住、订阅没跟过来，直接找优盈服务</h1>
            <p class="ct-hero__lede">邮箱、电话和到访地址都放在这一页。优盈服务把换机拆成能照着做的步骤，也把人放在你一叫就到的地方：常规问题平均 2 小时内给出处理建议，情况急的，邮件标题加两个字就能排到前面。</p>

            <ul class="ct-quick">
              <li class="ct-quick__item">
                <span class="ct-quick__label">客服邮箱</span>
                <span class="ct-quick__value">kefu@app-youying.com.cn</span>
                <button class="ct-copy" type="button" data-copy="kefu@app-youying.com.cn" data-copy-label="客服邮箱">
                  <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><rect x="5.4" y="5.4" width="8" height="8.8" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M10.6 3.6V2.7A1.4 1.4 0 0 0 9.2 1.3H3.7A1.4 1.4 0 0 0 2.3 2.7v7.6a1.4 1.4 0 0 0 1.4 1.4h.9" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
                  复制
                </button>
              </li>
              <li class="ct-quick__item">
                <span class="ct-quick__label">服务电话</span>
                <span class="ct-quick__value">400-3126-1970</span>
                <button class="ct-copy" type="button" data-copy="400-3126-1970" data-copy-label="服务电话">
                  <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><rect x="5.4" y="5.4" width="8" height="8.8" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M10.6 3.6V2.7A1.4 1.4 0 0 0 9.2 1.3H3.7A1.4 1.4 0 0 0 2.3 2.7v7.6a1.4 1.4 0 0 0 1.4 1.4h.9" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
                  复制
                </button>
              </li>
            </ul>
          </div>

          <figure class="ct-hero__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="西宁城市清晨的建筑轮廓与远处的山脊线">
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="ct-reach" aria-labelledby="ct-reach-title">
    <div class="yy-container">
      <div class="ct-reach__head">
        <p class="yy-eyebrow">联络入口</p>
        <h2 id="ct-reach-title" class="yy-title ct-reach__title">邮箱、电话、地址，按你顺手的来</h2>
        <p class="ct-reach__intro">同一件事，写邮件能把细节说清楚，打电话能立刻对上人。挑一个你习惯的方式，把设备型号和卡住的位置讲明白，后面就好办了。</p>
      </div>

      <div class="ct-reach__grid">
        <div class="ct-reach__main">
          <ul class="ct-channels">
            <li class="ct-channel">
              <div class="ct-channel__head">
                <span class="ct-channel__tag">客服邮箱</span>
                <button class="ct-copy" type="button" data-copy="kefu@app-youying.com.cn" data-copy-label="客服邮箱">
                  <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><rect x="5.4" y="5.4" width="8" height="8.8" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M10.6 3.6V2.7A1.4 1.4 0 0 0 9.2 1.3H3.7A1.4 1.4 0 0 0 2.3 2.7v7.6a1.4 1.4 0 0 0 1.4 1.4h.9" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
                  复制
                </button>
              </div>
              <p class="ct-channel__value">kefu@app-youying.com.cn</p>
              <p class="ct-channel__desc">新机注册、安装包校验、换机后重新登录、教程里对不上的地方，都走这个邮箱。写清楚系统是 iOS 还是 Android，回复会更快。</p>
            </li>

            <li class="ct-channel">
              <div class="ct-channel__head">
                <span class="ct-channel__tag">服务邮箱</span>
                <button class="ct-copy" type="button" data-copy="service@youying.com.cn" data-copy-label="服务邮箱">
                  <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><rect x="5.4" y="5.4" width="8" height="8.8" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M10.6 3.6V2.7A1.4 1.4 0 0 0 9.2 1.3H3.7A1.4 1.4 0 0 0 2.3 2.7v7.6a1.4 1.4 0 0 0 1.4 1.4h.9" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
                  复制
                </button>
              </div>
              <p class="ct-channel__value">service@youying.com.cn</p>
              <p class="ct-channel__desc">订阅迁移、恢复购买记录、账号在新设备上重新授权这类要说清细节的事，发到这里。附件带一张截图，往往一句话就说明白了。</p>
            </li>

            <li class="ct-channel">
              <div class="ct-channel__head">
                <span class="ct-channel__tag">服务电话</span>
                <button class="ct-copy" type="button" data-copy="400-3126-1970" data-copy-label="服务电话">
                  <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><rect x="5.4" y="5.4" width="8" height="8.8" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M10.6 3.6V2.7A1.4 1.4 0 0 0 9.2 1.3H3.7A1.4 1.4 0 0 0 2.3 2.7v7.6a1.4 1.4 0 0 0 1.4 1.4h.9" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
                  复制
                </button>
              </div>
              <p class="ct-channel__value ct-channel__value--tel">400-3126-1970</p>
              <p class="ct-channel__desc">说不清具体停在哪一步，或者是替家里长辈代办换机，直接打电话最省事。工作日 9:00-18:00 有人接。</p>
            </li>

            <li class="ct-channel">
              <div class="ct-channel__head">
                <span class="ct-channel__tag">服务地址</span>
              </div>
              <p class="ct-channel__value ct-channel__value--address">青海省西宁市城西区五四西路88号优盈服务大厦3层</p>
              <p class="ct-channel__desc">青海本地用户可前往。出发前建议先打一个电话确认接待时间，免得白跑一趟。</p>
            </li>
          </ul>
        </div>

        <aside class="ct-side" aria-labelledby="ct-side-title">
          <h3 id="ct-side-title" class="ct-side__title">发出去之后会发生什么</h3>
          <p class="ct-side__note">时间从邮件到达或电话接通的那一刻算起。</p>
          <ol class="ct-timeline">
            <li class="ct-timeline__item">
              <span class="ct-timeline__time">9:00-18:00</span>
              <span class="ct-timeline__text">工作日全天接收咨询，电话与邮件都有人看。</span>
            </li>
            <li class="ct-timeline__item">
              <span class="ct-timeline__time">平均 2 小时</span>
              <span class="ct-timeline__text">常规问题给出处理建议，直接告诉你下一步点哪里。</span>
            </li>
            <li class="ct-timeline__item">
              <span class="ct-timeline__time">优先排序</span>
              <span class="ct-timeline__text">标题带【换机】并附上设备型号的邮件，会排在普通咨询前面。</span>
            </li>
            <li class="ct-timeline__item">
              <span class="ct-timeline__time">需要时再约</span>
              <span class="ct-timeline__text">订阅迁移牵涉账号细节，邮件里写全，能少来回几轮。</span>
            </li>
          </ol>
        </aside>
      </div>
    </div>
  </section>

  <section class="ct-mail" aria-labelledby="ct-mail-title">
    <div class="yy-container">
      <div class="ct-mail__grid">
        <div class="ct-mail__main">
          <p class="yy-eyebrow">紧急换机</p>
          <h2 id="ct-mail-title" class="yy-title ct-mail__title">邮件标题带上【换机】，会被先看到</h2>
          <p class="ct-mail__lede">旧手机已经出手、新手机又登不上，这种时候最怕来回问。照下面的格式填一遍，一封信里把情况讲全，我们看到就能直接动手，不用再问第二轮。</p>

          <div class="ct-template">
            <div class="ct-template__bar">
              <span>紧急换机邮件格式</span>
              <button class="ct-copy ct-copy--light" type="button" data-copy="主题：【换机】原设备型号 → 新设备型号（系统版本）&#10;原设备：品牌 / 型号，系统版本&#10;新设备：品牌 / 型号，系统版本&#10;卡在哪：一句话描述现象，比如订阅列表空白、点恢复购买没反应&#10;已经试过：重启、重新登录、换网络等&#10;方便接电话的时间：工作日几点到几点" data-copy-label="邮件格式">
                <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><rect x="5.4" y="5.4" width="8" height="8.8" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M10.6 3.6V2.7A1.4 1.4 0 0 0 9.2 1.3H3.7A1.4 1.4 0 0 0 2.3 2.7v7.6a1.4 1.4 0 0 0 1.4 1.4h.9" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
                复制整段
              </button>
            </div>
            <pre>主题：【换机】原设备型号 → 新设备型号（系统版本）
原设备：品牌 / 型号，系统版本
新设备：品牌 / 型号，系统版本
卡在哪：一句话描述现象，比如订阅列表空白、点恢复购买没反应
已经试过：重启、重新登录、换网络等
方便接电话的时间：工作日几点到几点</pre>
          </div>

          <p class="ct-mail__hint">发到 kefu@app-youying.com.cn 即可。如果换了新机型又找不到对应教程，顺手写一句你看到的界面文字，我们回信时会连步骤截图一起给你。</p>
        </div>

        <figure class="ct-mail__media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="桌面打开的邮件草稿旁放着手机，邮件标题一栏被高亮标记" loading="lazy" decoding="async">
          <figcaption>标题写清设备型号，正文交代卡住的位置，处理速度会明显变快。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="ct-local" aria-labelledby="ct-local-title">
    <div class="yy-container">
      <div class="ct-local__grid">
        <div class="ct-local__copy">
          <p class="yy-eyebrow">青海本地</p>
          <h2 id="ct-local-title" class="yy-title ct-local__title">高原上的活儿，本地小队接得住</h2>
          <p>青海地区有一支 12 人的本地服务小组，工作日内接电话、回邮件。门店里遇到的换机问题也会被带回教程库，所以你在柜台碰到的情况，多半我们这边已经写过一遍。</p>
          <p>平台与 6 家区域数码服务门店保持内容共建，线下高频问题会补进指引。青海用户约占全站用户的 7%，本地响应的排期会优先照顾这一段需求。</p>
          <p class="ct-local__linkRow"><a class="yy-link" href="/who-we-are/">看看这支小队怎么做事</a></p>
        </div>

        <div class="ct-local__stats">
          <div class="ct-local__stat">
            <span class="ct-local__num">12</span>
            <span class="ct-local__statLabel">青海本地服务小组成员，工作日接电话与回邮件</span>
          </div>
          <div class="ct-local__stat">
            <span class="ct-local__num">6</span>
            <span class="ct-local__statLabel">区域数码服务门店，持续把线下常见问题带回来</span>
          </div>
          <div class="ct-local__stat">
            <span class="ct-local__num">2 小时</span>
            <span class="ct-local__statLabel">常规问题的平均回复时间，从邮件到达算起</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="ct-scenes" aria-labelledby="ct-scenes-title">
    <div class="yy-container">
      <div class="ct-scenes__head">
        <p class="yy-eyebrow">对症找人</p>
        <h2 id="ct-scenes-title" class="yy-title ct-scenes__title">不同问题，找对入口少走一步</h2>
        <p class="ct-scenes__intro">先对一下你的情况属于哪一类，点开看该准备什么，再去对应的页面对照操作。</p>
      </div>

      <div class="ct-scenes__list">
        <details class="ct-scene" open>
          <summary>
            <span class="ct-scene__index">01</span>
            <span>新手机第一次注册和安装</span>
          </summary>
          <div class="ct-scene__body">
            <p>先照着对应机型的图文步骤走一遍，单条步骤平均 3 屏内就能完成，关键按钮都有局部放大的示意。卡在某一步，就把那一步的界面文字写进邮件发过来。</p>
            <a class="yy-link" href="/tutorial/">打开换机教程</a>
          </div>
        </details>

        <details class="ct-scene">
          <summary>
            <span class="ct-scene__index">02</span>
            <span>换机后重新登录，账号对不上</span>
          </summary>
          <div class="ct-scene__body">
            <p>iOS 和 Android 的重登路径不一样，教程里分开放，进来先选系统再选机型。实在对不上，把旧机和新机的型号一起写进邮件，我们按你的组合给一组步骤。</p>
            <a class="yy-link" href="/tutorial/">按系统查看步骤</a>
          </div>
        </details>

        <details class="ct-scene">
          <summary>
            <span class="ct-scene__index">03</span>
            <span>订阅迁移和恢复购买</span>
          </summary>
          <div class="ct-scene__body">
            <p>这类事牵扯账号和付款记录，建议发 service@youying.com.cn 说清楚。想先看看别人是怎么处理的，应用服务中心里有按问题类型筛选的反馈，翻两页再决定怎么做。</p>
            <a class="yy-link" href="/apps/">去应用服务中心</a>
          </div>
        </details>

        <details class="ct-scene">
          <summary>
            <span class="ct-scene__index">04</span>
            <span>企业批量换机，20 台以上</span>
          </summary>
          <div class="ct-scene__body">
            <p>把设备数量、型号批次和大致时间节点写进邮件，我们回一份分组操作清单和对接人安排，行政和门店可以按组推进，不用一台一台问。</p>
            <a class="yy-link" href="/apps/">了解企业批量指引</a>
          </div>
        </details>

        <details class="ct-scene">
          <summary>
            <span class="ct-scene__index">05</span>
            <span>教程写得不对，或想留一条评价</span>
          </summary>
          <div class="ct-scene__body">
            <p>发到客服邮箱，注明是哪一篇、哪一步对不上，附张截图最好。评价反馈按周更新，近 12 个月的换机和订阅迁移记录都能翻到。</p>
            <a class="yy-link" href="/insights/">看看最近的更新</a>
          </div>
        </details>

        <details class="ct-scene">
          <summary>
            <span class="ct-scene__index">06</span>
            <span>不确定该从哪儿开始</span>
          </summary>
          <div class="ct-scene__body">
            <p>从首页顶部的生活服务分区进去，就能看到优盈中国专区的入口，注册、安装、换机、订阅迁移按顺序排好，跟着走就行。</p>
            <a class="yy-link" href="/">从首页进入专区</a>
          </div>
        </details>
      </div>

      <div class="ct-signoff">
        <p>实在说不清是哪一步卡住，先打个电话：工作日 9:00-18:00，400-3126-1970。</p>
        <a class="yy-btn yy-btn--primary" href="/apps/">进入应用服务中心</a>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --ct-frame: rgba(247, 244, 236, .22);
  --ct-glass: rgba(247, 244, 236, .10);
  --ct-night: #052B39;
  background: var(--yy-salt);
  color: var(--yy-cream-ink);
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--yy-head-h) + clamp(16px, 3.6vw, 40px));
  padding-bottom: clamp(40px, 7vw, 88px);
  color: var(--yy-salt);
  background:
    radial-gradient(112% 128% at 90% 2%, rgba(240, 180, 41, .20), transparent 58%),
    linear-gradient(156deg, var(--yy-lake-deep) 0%, var(--yy-lake) 84%);
}

.page-contact .ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(90deg, rgba(247, 244, 236, .055) 0 1px, transparent 1px 92px);
  pointer-events: none;
}

.page-contact .yy-breadcrumb__item,
.page-contact .yy-breadcrumb__link {
  color: rgba(247, 244, 236, .74);
}

.page-contact .yy-breadcrumb__link:hover,
.page-contact .yy-breadcrumb__link:focus-visible {
  color: var(--yy-gold);
}

.page-contact .ct-hero__frame {
  margin-top: clamp(14px, 2.6vw, 26px);
  padding: clamp(20px, 3.4vw, 40px);
  border: 1px solid var(--ct-frame);
  border-radius: var(--yy-radius);
  background: linear-gradient(180deg, rgba(247, 244, 236, .07), rgba(247, 244, 236, .015));
}

.page-contact .ct-hero__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.page-contact .ct-hero__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 6.4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: .03em;
  color: var(--yy-salt);
}

.page-contact .ct-hero .yy-eyebrow {
  color: var(--yy-gold);
}

.page-contact .ct-hero__lede {
  margin: clamp(14px, 2.4vw, 22px) 0 0;
  max-width: 52ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.82;
  color: rgba(247, 244, 236, .86);
}

.page-contact .ct-quick {
  display: grid;
  gap: 12px;
  margin: clamp(20px, 3.4vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-quick__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  border: 1px solid var(--ct-frame);
  border-radius: var(--yy-radius);
  background: var(--ct-glass);
  backdrop-filter: blur(6px);
}

.page-contact .ct-quick__label {
  font-family: var(--yy-font-annot);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--yy-gold);
}

.page-contact .ct-quick__value {
  font-family: var(--yy-font-body);
  font-weight: 700;
  font-size: clamp(13.5px, 2.2vw, 15px);
  letter-spacing: .01em;
  color: var(--yy-salt);
  overflow-wrap: anywhere;
}

.page-contact .ct-hero__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, .30);
  border-radius: var(--yy-radius);
  aspect-ratio: 4 / 3;
  background: var(--ct-night);
}

.page-contact .ct-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}

/* ---------- 复制按钮 ---------- */
.page-contact .ct-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--yy-lake);
  font-family: var(--yy-font-body);
  font-size: 12.5px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s var(--yy-ease), color .2s var(--yy-ease), border-color .2s var(--yy-ease);
}

.page-contact .ct-copy:hover,
.page-contact .ct-copy:focus-visible {
  background: var(--yy-lake);
  border-color: var(--yy-lake);
  color: var(--yy-salt);
}

.page-contact .ct-copy[data-copied] {
  background: var(--yy-moss);
  border-color: var(--yy-moss);
  color: var(--yy-salt);
}

.page-contact .ct-hero .ct-copy {
  color: var(--yy-gold);
}

.page-contact .ct-hero .ct-copy:hover,
.page-contact .ct-hero .ct-copy:focus-visible {
  background: var(--yy-gold);
  border-color: var(--yy-gold);
  color: var(--yy-lake-ink);
}

.page-contact .ct-copy--light {
  color: rgba(247, 244, 236, .88);
}

.page-contact .ct-copy--light:hover,
.page-contact .ct-copy--light:focus-visible {
  background: var(--yy-gold);
  border-color: var(--yy-gold);
  color: var(--yy-lake-ink);
}

/* ---------- 联络入口 ---------- */
.page-contact .ct-reach {
  padding-block: clamp(46px, 8vw, 100px);
}

.page-contact .ct-reach__head {
  max-width: 60ch;
}

.page-contact .ct-reach__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-reach__intro {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-reach__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(26px, 4vw, 44px);
}

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

.page-contact .ct-channel {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--yy-line);
}

.page-contact .ct-channel:last-child {
  border-bottom: 1px solid var(--yy-line);
}

.page-contact .ct-channel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.page-contact .ct-channel__tag {
  font-family: var(--yy-font-annot);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--yy-moss);
}

.page-contact .ct-channel__value {
  margin: 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.08rem, 3.6vw, 1.68rem);
  line-height: 1.24;
  letter-spacing: .01em;
  color: var(--yy-lake-deep);
  overflow-wrap: anywhere;
}

.page-contact .ct-channel__value--tel {
  font-family: var(--yy-font-num);
  font-size: clamp(1.55rem, 6vw, 2.2rem);
  letter-spacing: .05em;
}

.page-contact .ct-channel__value--address {
  font-size: clamp(1rem, 3vw, 1.24rem);
  line-height: 1.45;
  letter-spacing: .01em;
}

.page-contact .ct-channel__desc {
  margin: 0;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--yy-rock);
}

/* 回复节奏 */
.page-contact .ct-side {
  padding: clamp(20px, 3vw, 30px);
  border-left: 3px solid var(--yy-ochre);
  border-radius: var(--yy-radius);
  background: var(--yy-cream);
}

.page-contact .ct-side__title {
  margin: 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: 1.06rem;
  letter-spacing: .04em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-side__note {
  margin: 6px 0 20px;
  font-family: var(--yy-font-annot);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--yy-moss);
}

.page-contact .ct-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--yy-ochre), rgba(201, 138, 107, .18));
}

.page-contact .ct-timeline__item {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 0 0 18px 26px;
}

.page-contact .ct-timeline__item:last-child {
  padding-bottom: 0;
}

.page-contact .ct-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--yy-salt);
  border: 2px solid var(--yy-ochre);
}

.page-contact .ct-timeline__time {
  font-family: var(--yy-font-num);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--yy-ochre);
}

.page-contact .ct-timeline__text {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--yy-cream-ink);
}

/* ---------- 紧急换机邮件 ---------- */
.page-contact .ct-mail {
  padding-block: clamp(46px, 8vw, 96px);
  border-top: 1px solid var(--yy-line);
  border-bottom: 1px solid var(--yy-line);
  background: var(--yy-cream);
}

.page-contact .ct-mail__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  grid-template-columns: minmax(0, 1fr);
}

.page-contact .ct-mail__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: .03em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-mail__lede {
  margin: 12px 0 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-template {
  margin-top: clamp(20px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--yy-line-strong);
  border-radius: var(--yy-radius);
  background: var(--ct-night);
  box-shadow: var(--yy-shadow-soft);
}

.page-contact .ct-template__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(247, 244, 236, .16);
  background: rgba(247, 244, 236, .07);
  font-family: var(--yy-font-annot);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: rgba(247, 244, 236, .78);
}

.page-contact .ct-template pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--yy-font-body);
  font-size: 13.5px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #DEEBEF;
}

.page-contact .ct-mail__hint {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--yy-rock);
}

.page-contact .ct-mail__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--yy-line-strong);
  border-radius: var(--yy-radius);
  background: var(--yy-salt);
}

.page-contact .ct-mail__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-contact .ct-mail__media figcaption {
  padding: 12px 14px;
  border-top: 1px solid var(--yy-line);
  font-family: var(--yy-font-annot);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--yy-rock);
}

/* ---------- 青海本地 ---------- */
.page-contact .ct-local {
  padding-block: clamp(48px, 8vw, 96px);
  color: var(--yy-salt);
  background:
    radial-gradient(96% 120% at 4% 0%, rgba(14, 108, 140, .62), transparent 62%),
    var(--yy-lake-deep);
}

.page-contact .ct-local .yy-eyebrow {
  color: var(--yy-gold);
}

.page-contact .ct-local__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}

.page-contact .ct-local__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: .03em;
  color: var(--yy-salt);
}

.page-contact .ct-local__copy p {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(247, 244, 236, .84);
}

.page-contact .ct-local__linkRow {
  margin-top: 20px;
}

.page-contact .ct-local .yy-link {
  color: var(--yy-gold);
}

.page-contact .ct-local__stats {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid rgba(247, 244, 236, .2);
  border-radius: var(--yy-radius);
  overflow: hidden;
  background: rgba(247, 244, 236, .2);
}

.page-contact .ct-local__stat {
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--yy-lake-deep);
}

.page-contact .ct-local__num {
  display: block;
  font-family: var(--yy-font-num);
  font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--yy-gold);
}

.page-contact .ct-local__statLabel {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(247, 244, 236, .78);
}

/* ---------- 常见场景 ---------- */
.page-contact .ct-scenes {
  padding-block: clamp(48px, 8vw, 100px);
}

.page-contact .ct-scenes__head {
  max-width: 58ch;
}

.page-contact .ct-scenes__title {
  margin: 10px 0 0;
  font-family: var(--yy-font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: .03em;
  color: var(--yy-lake-deep);
}

.page-contact .ct-scenes__intro {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-scenes__list {
  margin-top: clamp(22px, 3.4vw, 34px);
  border-bottom: 1px solid var(--yy-line);
}

.page-contact .ct-scene {
  border-top: 1px solid var(--yy-line);
}

.page-contact .ct-scene summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--yy-font-display);
  font-weight: 800;
  font-size: clamp(1rem, 2.8vw, 1.16rem);
  letter-spacing: .02em;
  color: var(--yy-lake-deep);
  transition: color .2s var(--yy-ease);
}

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

.page-contact .ct-scene summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--yy-font-num);
  font-size: 21px;
  line-height: 1;
  color: var(--yy-ochre);
}

.page-contact .ct-scene[open] summary::after {
  content: "−";
}

.page-contact .ct-scene summary:hover,
.page-contact .ct-scene summary:focus-visible {
  color: var(--yy-ochre);
}

.page-contact .ct-scene__index {
  font-family: var(--yy-font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--yy-ochre);
}

.page-contact .ct-scene__body {
  padding: 0 0 22px 30px;
}

.page-contact .ct-scene__body p {
  margin: 0 0 12px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--yy-rock);
}

.page-contact .ct-signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(28px, 4vw, 46px);
  padding: clamp(18px, 3vw, 26px);
  border-left: 3px solid var(--yy-ochre);
  border-radius: var(--yy-radius);
  background: var(--yy-cream);
}

.page-contact .ct-signoff p {
  margin: 0;
  flex: 1 1 260px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--yy-cream-ink);
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px) {
  .page-contact .ct-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-contact .ct-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-contact .ct-hero__media {
    aspect-ratio: 5 / 6;
  }

  .page-contact .ct-mail__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-contact .ct-reach__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-contact .ct-side {
    position: sticky;
    top: calc(var(--yy-head-h) + 22px);
  }

  .page-contact .ct-local__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .ct-copy,
  .page-contact .ct-scene summary {
    transition: none;
  }
}