.page-disclaimer {
  --dc-gap: clamp(18px, 2.4vw, 28px);
  --dc-card-pad: clamp(20px, 2.6vw, 30px);
  --dc-edge: #2c5c4c;
}

/* ---------- 面包屑 ---------- */
.page-disclaimer .breadcrumbs {
  padding-top: calc(var(--mq-header-h) + 22px);
  color: var(--mq-mist);
  font-size: 13px;
}

/* ---------- 首屏 ---------- */
.page-disclaimer .dc-hero {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}

.page-disclaimer .dc-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -14%;
  width: min(560px, 62vw);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 40% 40%, rgba(0, 232, 198, .16), transparent 66%);
  pointer-events: none;
  z-index: 0;
}

.page-disclaimer .dc-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  grid-template-columns: 1fr;
}

.page-disclaimer .dc-hero__copy {
  max-width: 34em;
}

.page-disclaimer .dc-hero__copy h1 {
  margin: 10px 0 18px;
  color: var(--mq-cream);
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.page-disclaimer .dc-hero__lead {
  color: #cfe4dc;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  margin: 0 0 26px;
}

.page-disclaimer .dc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-disclaimer .dc-hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--mq-radius);
  overflow: hidden;
  border: 1px solid var(--mq-stone);
  box-shadow: var(--mq-shadow-card);
}

.page-disclaimer .dc-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04);
}

.page-disclaimer .dc-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 10, 0) 42%, rgba(4, 7, 10, .66) 100%);
  pointer-events: none;
}

/* ---------- 章节头 ---------- */
.page-disclaimer .po-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
  margin-bottom: clamp(24px, 3.4vw, 42px);
}

.page-disclaimer .po-head .section-no {
  color: var(--mq-stone);
  font-family: var(--mq-font-mono);
  font-size: clamp(34px, 5vw, 66px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.05em;
  transition: color .3s ease;
}

.page-disclaimer [data-section].is-current .section-no {
  color: var(--mq-glow);
}

.page-disclaimer .po-head h2 {
  color: var(--mq-cream);
  margin: 0 0 10px;
  line-height: 1.12;
}

.page-disclaimer .po-head .prose {
  color: var(--mq-mist);
  font-size: 15px;
  margin: 0;
}

/* ---------- 深色 / 浅色交错的分区 ---------- */
.page-disclaimer .dc-terms--dark {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 52, 42, .82), rgba(8, 26, 21, .35));
  border-top: 1px solid var(--mq-stone);
  border-bottom: 1px solid var(--mq-stone);
}

.page-disclaimer .dc-terms--dark::before {
  content: "";
  position: absolute;
  left: 6%;
  top: -1px;
  width: 88px;
  height: 3px;
  background: linear-gradient(90deg, var(--mq-glow), var(--mq-orange));
}

/* ---------- Bento 条款网格 ---------- */
.page-disclaimer .dc-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dc-gap);
}

.page-disclaimer .dc-card {
  position: relative;
  background: var(--mq-moss);
  border: 1px solid var(--mq-stone);
  border-radius: var(--mq-radius);
  padding: var(--dc-card-pad);
  box-shadow: var(--mq-shadow-card);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  overflow: hidden;
}

.page-disclaimer .dc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--mq-glow), transparent 62%);
  opacity: .28;
  transition: opacity .28s ease;
}

.page-disclaimer .dc-card:hover {
  transform: translateY(-4px);
  border-color: var(--mq-glow);
  box-shadow: var(--mq-shadow-lift);
}

.page-disclaimer .dc-card:hover::before {
  opacity: .9;
}

.page-disclaimer .dc-card .num {
  display: block;
  color: var(--mq-glow);
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 10px;
}

.page-disclaimer .dc-card h3 {
  color: var(--mq-cream);
  margin: 0 0 12px;
  line-height: 1.18;
}

.page-disclaimer .dc-card p {
  color: #c6dcd4;
  font-size: 15px;
  line-height: 1.78;
  margin: 0;
}

.page-disclaimer .dc-card p + p,
.page-disclaimer .dc-card ul + p,
.page-disclaimer .dc-card p + ul {
  margin-top: 12px;
}

.page-disclaimer .dc-card--accent {
  border-color: rgba(255, 122, 47, .5);
}

.page-disclaimer .dc-card--accent::before {
  background: linear-gradient(90deg, var(--mq-orange), transparent 62%);
  opacity: .7;
}

.page-disclaimer .dc-card--accent-soft {
  background: linear-gradient(160deg, rgba(0, 232, 198, .09), var(--mq-moss) 58%);
  border-color: rgba(0, 232, 198, .32);
}

/* 列表 */
.page-disclaimer .dc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-disclaimer .dc-list li {
  position: relative;
  padding-left: 20px;
  color: #c6dcd4;
  font-size: 15px;
  line-height: 1.72;
}

.page-disclaimer .dc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mq-glow);
  transform: rotate(45deg);
}

.page-disclaimer .dc-card--accent .dc-list li::before {
  background: var(--mq-orange);
}

/* 环境列表 */
.page-disclaimer .dc-envs {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-disclaimer .dc-envs li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(4, 7, 10, .32);
  border: 1px solid rgba(30, 74, 60, .8);
  color: #d6e8e1;
  font-size: 14.5px;
}

.page-disclaimer .dc-envs .mono {
  color: var(--mq-glow-soft);
  font-size: 13px;
}

.page-disclaimer .dc-note {
  color: var(--mq-mist) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin-top: 14px !important;
}

/* 内链 */
.page-disclaimer .dc-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--mq-glow);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 232, 198, .42);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.page-disclaimer .dc-link:hover {
  color: var(--mq-glow-soft);
  border-color: var(--mq-glow-soft);
}

/* 标签 */
.page-disclaimer .dc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- 横向流程 ---------- */
.page-disclaimer .dc-flow {
  position: relative;
}

.page-disclaimer .dc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dc-gap);
  position: relative;
}

.page-disclaimer .dc-step {
  position: relative;
  background: rgba(15, 52, 42, .72);
  border: 1px solid var(--mq-stone);
  border-radius: var(--mq-radius);
  padding: var(--dc-card-pad);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.page-disclaimer .dc-step:hover {
  transform: translateY(-4px);
  border-color: var(--mq-glow);
  background: rgba(15, 52, 42, .95);
}

.page-disclaimer .dc-step__no {
  display: inline-block;
  color: var(--mq-night);
  background: var(--mq-glow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.page-disclaimer .dc-step h3 {
  color: var(--mq-cream);
  margin: 0 0 10px;
  line-height: 1.2;
}

.page-disclaimer .dc-step p {
  color: #c6dcd4;
  font-size: 14.5px;
  line-height: 1.72;
  margin: 0;
}

.page-disclaimer .dc-step--end {
  border-color: rgba(255, 122, 47, .48);
}

.page-disclaimer .dc-step--end .dc-step__no {
  background: var(--mq-orange);
  color: #1a0d04;
}

/* ---------- 联系区 ---------- */
.page-disclaimer .dc-contact {
  position: relative;
  background: linear-gradient(120deg, rgba(233, 161, 92, .08), transparent 58%);
}

.page-disclaimer .dc-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
  align-items: start;
}

.page-disclaimer .dc-contact__copy .po-head {
  margin-bottom: 22px;
}

.page-disclaimer .dc-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-disclaimer .dc-contact__list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(30, 74, 60, .85);
}

.page-disclaimer .dc-contact__label {
  color: var(--mq-mist);
  font-size: 12.5px;
  letter-spacing: .1em;
}

.page-disclaimer .dc-contact__list a,
.page-disclaimer .dc-contact__list span:not(.dc-contact__label) {
  color: var(--mq-cream);
  font-size: 15.5px;
  text-decoration: none;
  word-break: break-all;
}

.page-disclaimer .dc-contact__list a:hover {
  color: var(--mq-glow);
}

.page-disclaimer .dc-contact__aside {
  border-radius: var(--mq-radius);
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid rgba(0, 232, 198, .22);
}

.page-disclaimer .dc-contact__aside h3 {
  color: var(--mq-cream);
  margin: 0 0 16px;
}

.page-disclaimer .dc-aside__links {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.page-disclaimer .dc-aside__links li {
  padding-left: 18px;
  position: relative;
}

.page-disclaimer .dc-aside__links li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mq-glow-soft);
}

.page-disclaimer .dc-aside__links a {
  color: #d6e8e1;
  font-size: 14.5px;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.page-disclaimer .dc-aside__links a:hover {
  color: var(--mq-glow);
  border-color: rgba(0, 232, 198, .5);
}

.page-disclaimer .dc-aside__btn {
  width: 100%;
  text-align: center;
}

/* ---------- 600px 起 ---------- */
@media (min-width: 600px) {
  .page-disclaimer .dc-bento--pair {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-disclaimer .dc-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 820px 起 ---------- */
@media (min-width: 820px) {
  .page-disclaimer .dc-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }

  .page-disclaimer .dc-bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .page-disclaimer .dc-card {
    grid-column: span 3;
  }

  .page-disclaimer .dc-card--wide {
    grid-column: span 4;
  }

  .page-disclaimer .dc-card--wide + .dc-card {
    grid-column: span 2;
  }

  .page-disclaimer .dc-bento--split .dc-card--tall {
    grid-column: span 2;
    grid-row: span 2;
  }

  .page-disclaimer .dc-bento--split .dc-card {
    grid-column: span 4;
  }

  .page-disclaimer .dc-bento--trio .dc-card {
    grid-column: span 2;
  }

  .page-disclaimer .dc-bento--pair .dc-card {
    grid-column: span 3;
  }

  .page-disclaimer .dc-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  .page-disclaimer .dc-step {
    padding: clamp(18px, 1.8vw, 24px);
  }

  .page-disclaimer .dc-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    right: -14px;
    width: 14px;
    height: 1px;
    background: var(--mq-stone);
  }

  .page-disclaimer .dc-contact__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  }

  .page-disclaimer .dc-contact__aside {
    position: sticky;
    top: calc(var(--mq-header-h) + 24px);
  }
}

/* ---------- 1080px 起 ---------- */
@media (min-width: 1080px) {
  .page-disclaimer .po-head .prose {
    max-width: 38em;
  }

  .page-disclaimer .dc-steps {
    gap: 18px;
  }

  .page-disclaimer .dc-step:not(:last-child)::after {
    right: -18px;
    width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .dc-card,
  .page-disclaimer .dc-step,
  .page-disclaimer .dc-link,
  .page-disclaimer .dc-aside__links a {
    transition: none;
  }

  .page-disclaimer .dc-card:hover,
  .page-disclaimer .dc-step:hover {
    transform: none;
  }
}
<<<END>>>

现在检查一下所有内容是否都符合要求。

检查一下每个部分的目标是否都已覆盖：
- 使用范围 ✓
- 账号与设备要求 ✓
- 案例合集与版本记录的内容口径 ✓
- 第三方链接 ✓
- 内容变更与更新 ✓
- 联系我们 ✓

图片：1 张（在最小值和最大值之间）。✓

面包屑 ✓
一个 h1 ✓

内部链接：/、/privacy-center/、/updates/、/consult/ 都已使用。✓

联系方式已按站点联系方式提供。✓

没有禁止的措辞。✓

没有虚构日期。✓

只使用了数据属性 data-reveal 和 data-section。✓

所有数字都已写成最终值。✓

类名在 CSS 作用域内。✓

没有使用 markdown 代码围栏。✓

按要求输出。
<main id="main-content" class="page-disclaimer">

  <div class="container">
    <nav class="breadcrumbs" aria-label="页面位置">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span>访问说明</span>
    </nav>
  </div>

  <header class="dc-hero">
    <div class="container dc-hero__grid">
      <div class="dc-hero__copy" data-reveal>
        <p class="kicker">访问说明</p>
        <h1 class="display-xl">用之前先看清规则<br>用起来才不别扭</h1>
        <p class="dc-hero__lead">这份说明写给正在使用买球APP中国站的朋友：哪些设备能登、账号怎么算、案例合集与版本记录以什么为准、内容更新后旧文章怎么找。规则不绕弯，看完就能上手。</p>
        <div class="dc-hero__actions">
          <a class="btn btn--primary" href="/app-download/">下载客户端</a>
          <a class="btn btn--quiet" href="/updates/">返回案例合集与版本记录</a>
        </div>
      </div>
      <figure class="dc-hero__figure media-frame media-frame--wide" data-reveal>
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="岩灰绿与深墨绿色块斜向拼接的抽象纹理，边缘带有细窄的荧光青线">
      </figure>
    </div>
  </header>

  <section class="section dc-terms" data-section aria-labelledby="dc-scope-title">
    <div class="container">
      <div class="section-head po-head">
        <span class="section-no" aria-hidden="true">C01</span>
        <div>
          <h2 id="dc-scope-title" class="display-lg">使用范围</h2>
          <p class="prose">这一节说清楚谁能用、在什么场景用，避免你花时间试错。</p>
        </div>
      </div>

      <div class="dc-bento">
        <article class="dc-card dc-card--wide" data-reveal>
          <span class="num mono">C01</span>
          <h3 class="display-sm">谁可以用</h3>
          <ul class="dc-list">
            <li>面向球类运动爱好者、球局领队、社群主理人，以及需要在多台设备间切换的长期用户。</li>
            <li>城市球场、业余联赛组织可作为内容合作方参与，请联系客服说明来意。</li>
            <li>使用前请如实填写账号资料，勿借给他人共用，以免记录错乱。</li>
          </ul>
        </article>

        <article class="dc-card" data-reveal>
          <span class="num mono">C01</span>
          <h3 class="display-sm">可以做</h3>
          <p>查案例、对版本、看更新、换设备接着用，下载客户端或直接用网页端都行。</p>
        </article>

        <article class="dc-card dc-card--accent" data-reveal>
          <span class="num mono">C01</span>
          <h3 class="display-sm">请不要做</h3>
          <ul class="dc-list">
            <li>批量抓取案例内容或脚本抢刷。</li>
            <li>将账号出售、出借或用于商业分发。</li>
            <li>破解、反编译客户端或修改安装包。</li>
          </ul>
        </article>
      </div>
    </div>
  </section>

  <section class="section dc-terms" data-section aria-labelledby="dc-account-title">
    <div class="container">
      <div class="section-head po-head">
        <span class="section-no" aria-hidden="true">C02</span>
        <div>
          <h2 id="dc-account-title" class="display-lg">账号与设备要求</h2>
          <p class="prose">一个账号，四类环境，随时切回上次的位置。</p>
        </div>
      </div>

      <div class="dc-bento dc-bento--split">
        <article class="dc-card dc-card--tall" data-reveal>
          <span class="num mono">C02</span>
          <h3 class="display-sm">支持的四类环境</h3>
          <ul class="dc-envs">
            <li><span class="mono">01</span> 手机端 · 安装包约 48MB</li>
            <li><span class="mono">02</span> 平板端 · 横屏排布更舒展</li>
            <li><span class="mono">03</span> 桌面端 · 安装包约 96MB</li>
            <li><span class="mono">04</span> 网页端 · 免装直接用</li>
          </ul>
          <p class="dc-note">四类环境共享同一账号，收藏与版本记录在端之间同步保留。手机端与桌面端都支持后台自动更新。</p>
        </article>

        <article class="dc-card" data-reveal>
          <span class="num mono">C02</span>
          <h3 class="display-sm">账号要求</h3>
          <p>注册需绑定有效手机号或邮箱，用于找回密码与接收更新提醒。未登录状态可浏览公开内容，但无法保存收藏。</p>
        </article>

        <article class="dc-card" data-reveal>
          <span class="num mono">C02</span>
          <h3 class="display-sm">换设备登录</h3>
          <p>在首页第二栏的常用入口选择“换设备登录”，通过账号迁移助手完成。常规网络下平均 40 秒以内恢复，历史收藏一并带过来。</p>
          <a class="dc-link" href="/app-download/">去客户端下载页查看</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section dc-terms dc-terms--dark" data-section aria-labelledby="dc-content-title">
    <div class="container">
      <div class="section-head po-head">
        <span class="section-no" aria-hidden="true">C03</span>
        <div>
          <h2 id="dc-content-title" class="display-lg">案例合集与版本记录的内容口径</h2>
          <p class="prose">两条线索交叉：栏目编号告诉你属于哪一类，版本号告诉你属于哪一批。</p>
        </div>
      </div>

      <div class="dc-bento">
        <article class="dc-card dc-card--wide" data-reveal>
          <span class="num mono">C03</span>
          <h3 class="display-sm">栏目编号</h3>
          <p>案例合集按赛程前后划分为 12 个栏目，统一以 C01 至 C12 编号。每条记录都同时标注所属栏目编号与对应版本号，翻开就知道来源。</p>
          <div class="dc-tags">
            <span class="tag">C01</span>
            <span class="tag">C02</span>
            <span class="tag">C03</span>
            <span class="tag">…</span>
            <span class="tag tag--glow">C12</span>
          </div>
        </article>

        <article class="dc-card" data-reveal>
          <span class="num mono">C03</span>
          <h3 class="display-sm">三种筛选</h3>
          <p>可按栏目、赛季阶段、装备类型筛选，快速锁定想看的那一批案例。</p>
        </article>

        <article class="dc-card dc-card--accent-soft" data-reveal>
          <span class="num mono">C03</span>
          <h3 class="display-sm">出现差异时</h3>
          <p>同一栏目中如发现记录不一致，以版本记录页的左右双栏对照结果为准：左栏为上一版本，右栏为当前版本，差异处逐项列出。</p>
          <a class="dc-link" href="/updates/">返回案例合集与版本记录</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section dc-flow" data-section aria-labelledby="dc-flow-title">
    <div class="container">
      <div class="section-head po-head">
        <span class="section-no" aria-hidden="true">C04</span>
        <div>
          <h2 id="dc-flow-title" class="display-lg">内容从收集到你能看到</h2>
          <p class="prose">每周三更新一次，每次新增 20 至 40 条案例。中间经过这几步。</p>
        </div>
      </div>

      <ol class="dc-steps">
        <li class="dc-step" data-reveal>
          <span class="dc-step__no mono">01</span>
          <h3 class="display-sm">来源汇集</h3>
          <p>来自城市球场、业余联赛组织与用户提交的球局记录，36 家球场、14 个联赛组织长期供稿。</p>
        </li>
        <li class="dc-step" data-reveal>
          <span class="dc-step__no mono">02</span>
          <h3 class="display-sm">内容审核</h3>
          <p>核对场地、装备、赛程信息是否填写完整，剔除重复条目，补充缺失的栏目归属。</p>
        </li>
        <li class="dc-step" data-reveal>
          <span class="dc-step__no mono">03</span>
          <h3 class="display-sm">归入栏目</h3>
          <p>按内容性质落到 C01 至 C12 中的对应栏目，并标注当前版本号。</p>
        </li>
        <li class="dc-step" data-reveal>
          <span class="dc-step__no mono">04</span>
          <h3 class="display-sm">写入版本记录</h3>
          <p>新增与调整同时进入版本记录页，左右双栏并列呈现相邻两个版本的差异。</p>
        </li>
        <li class="dc-step dc-step--end" data-reveal>
          <span class="dc-step__no mono">05</span>
          <h3 class="display-sm">对你可见</h3>
          <p>栏目内可检索、可筛选，客户端与网页端同步看到同一批内容。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section dc-terms" data-section aria-labelledby="dc-link-title">
    <div class="container">
      <div class="section-head po-head">
        <span class="section-no" aria-hidden="true">C05</span>
        <div>
          <h2 id="dc-link-title" class="display-lg">第三方链接</h2>
          <p class="prose">页面中如需跳转到站外资源，规则如下。</p>
        </div>
      </div>

      <div class="dc-bento dc-bento--pair">
        <article class="dc-card" data-reveal>
          <span class="num mono">C05</span>
          <h3 class="display-sm">跳转性质</h3>
          <p>站外链接由合作方或第三方自行维护，点开后适用对方的服务条款与隐私做法。我们会尽量标注去往哪里，但不代为承诺其内容。</p>
        </article>

        <article class="dc-card" data-reveal>
          <span class="num mono">C05</span>
          <h3 class="display-sm">遇到问题怎么办</h3>
          <p>若发现站外链接指向的内容已失效或与描述不符，欢迎写信告知，我们会核查并决定是否继续保留。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section dc-terms dc-terms--dark" data-section aria-labelledby="dc-update-title">
    <div class="container">
      <div class="section-head po-head">
        <span class="section-no" aria-hidden="true">C06</span>
        <div>
          <h2 id="dc-update-title" class="display-lg">内容变更与更新</h2>
          <p class="prose">内容会调整，代码会迭代，但旧内容不会被悄悄抹掉。</p>
        </div>
      </div>

      <div class="dc-bento dc-bento--trio">
        <article class="dc-card" data-reveal>
          <span class="num mono">C06</span>
          <h3 class="display-sm">更新节奏</h3>
          <p>案例合集与版本记录每周三更新一次，每次新增 20 至 40 条。客户端版本按需发布，新版本上线后旧版本仍可正常使用一段时间。</p>
        </article>

        <article class="dc-card dc-card--accent-soft" data-reveal>
          <span class="num mono">C06</span>
          <h3 class="display-sm">旧内容如何指代</h3>
          <p>引用旧内容时，请使用栏目编号加版本号的写法，例如“C06 · v3.8”。这样即使栏目后续调整，也能在版本记录页找回原条目。</p>
        </article>

        <article class="dc-card" data-reveal>
          <span class="num mono">C06</span>
          <h3 class="display-sm">说明的变更</h3>
          <p>这份说明如随产品调整而修改，会在版本记录页留一笔，并更新页面顶部的版本号。继续使用即视为接受更新后的说明。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section dc-contact" data-section aria-labelledby="dc-contact-title">
    <div class="container dc-contact__grid">
      <div class="dc-contact__copy" data-reveal>
        <div class="section-head po-head">
          <span class="section-no" aria-hidden="true">C07</span>
          <div>
            <h2 id="dc-contact-title" class="display-lg">联系我们</h2>
            <p class="prose">对这份说明有疑问，或想约客户端临时查个信息，都可以找我们。</p>
          </div>
        </div>
        <ul class="dc-contact__list">
          <li>
            <span class="dc-contact__label">客服邮箱</span>
            <a href="mailto:kefu@homesite-maiqu.com.cn" class="mono">kefu@homesite-maiqu.com.cn</a>
          </li>
          <li>
            <span class="dc-contact__label">客服电话</span>
            <a href="tel:400-9999-7049" class="mono">400-9999-7049</a>
          </li>
          <li>
            <span class="dc-contact__label">办公地址</span>
            <span>上海市浦东新区张江路1122号</span>
          </li>
        </ul>
        <p class="dc-note">客服在工作日 9:00 至 18:00 在线，咨询服务覆盖全国 31 个省级区域。非服务时段可先留言，上班后会逐一回复。</p>
      </div>

      <aside class="dc-contact__aside glass" data-reveal>
        <h3 class="display-sm">还可以这样走</h3>
        <ul class="dc-aside__links">
          <li><a href="/privacy-center/">隐私中心：账号与设备信息怎么处理</a></li>
          <li><a href="/questions/">问题解答：六类常见问题 72 条</a></li>
          <li><a href="/consult/">咨询服务：约客户端临时查个信息</a></li>
          <li><a href="/updates/">案例合集与版本记录：每周三更新</a></li>
        </ul>
        <a class="btn btn--quiet dc-aside__btn" href="/updates/">返回案例合集与版本记录</a>
      </aside>
    </div>
  </section>

</main>

.page-disclaimer {
  --dc-gap: clamp(18px, 2.4vw, 28px);
  --dc-card-pad: clamp(20px, 2.6vw, 30px);
  --dc-edge: #2c5c4c;
}

.page-disclaimer .breadcrumbs {
  padding-top: calc(var(--mq-header-h) + 22px);
  color: var(--mq-mist);
  font-size: 13px;
}

.page-disclaimer .dc-hero {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}

.page-disclaimer .dc-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -14%;
  width: min(560px, 62vw);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 40% 40%, rgba(0, 232, 198, .16), transparent 66%);
  pointer-events: none;
  z-index: 0;
}

.page-disclaimer .dc-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  grid-template-columns: 1fr;
}

.page-disclaimer .dc-hero__copy {
  max-width: 34em;
}

.page-disclaimer .dc-hero__copy h1 {
  margin: 10px 0 18px;
  color: var(--mq-cream);
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.page-disclaimer .dc-hero__lead {
  color: #cfe4dc;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  margin: 0 0 26px;
}

.page-disclaimer .dc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-disclaimer .dc-hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--mq-radius);
  overflow: hidden;
  border: 1px solid var(--mq-stone);
  box-shadow: var(--mq-shadow-card);
}

.page-disclaimer .dc-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04);
}

.page-disclaimer .dc-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 10, 0) 42%, rgba(4, 7, 10, .66) 100%);
  pointer-events: none;
}

.page-disclaimer .po-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
  margin-bottom: clamp(24px, 3.4vw, 42px);
}

.page-disclaimer .po-head .section-no {
  color: var(--mq-stone);
  font-family: var(--mq-font-mono);
  font-size: clamp(34px, 5vw, 66px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.05em;
  transition: color .3s ease;
}

.page-disclaimer [data-section].is-current .section-no {
  color: var(--mq-glow);
}

.page-disclaimer .po-head h2 {
  color: var(--mq-cream);
  margin: 0 0 10px;
  line-height: 1.12;
}

.page-disclaimer .po-head .prose {
  color: var(--mq-mist);
  font-size: 15px;
  margin: 0;
}

.page-disclaimer .dc-terms--dark {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 52, 42, .82), rgba(8, 26, 21, .35));
  border-top: 1px solid var(--mq-stone);
  border-bottom: 1px solid var(--mq-stone);
}

.page-disclaimer .dc-terms--dark::before {
  content: "";
  position: absolute;
  left: 6%;
  top: -1px;
  width: 88px;
  height: 3px;
  background: linear-gradient(90deg, var(--mq-glow), var(--mq-orange));
}

.page-disclaimer .dc-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dc-gap);
}

.page-disclaimer .dc-card {
  position: relative;
  background: var(--mq-moss);
  border: 1px solid var(--mq-stone);
  border-radius: var(--mq-radius);
  padding: var(--dc-card-pad);
  box-shadow: var(--mq-shadow-card);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  overflow: hidden;
}

.page-disclaimer .dc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--mq-glow), transparent 62%);
  opacity: .28;
  transition: opacity .28s ease;
}

.page-disclaimer .dc-card:hover {
  transform: translateY(-4px);
  border-color: var(--mq-glow);
  box-shadow: var(--mq-shadow-lift);
}

.page-disclaimer .dc-card:hover::before {
  opacity: .9;
}

.page-disclaimer .dc-card .num {
  display: block;
  color: var(--mq-glow);
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 10px;
}

.page-disclaimer .dc-card h3 {
  color: var(--mq-cream);
  margin: 0 0 12px;
  line-height: 1.18;
}

.page-disclaimer .dc-card p {
  color: #c6dcd4;
  font-size: 15px;
  line-height: 1.78;
  margin: 0;
}

.page-disclaimer .dc-card p + p,
.page-disclaimer .dc-card ul + p,
.page-disclaimer .dc-card p + ul {
  margin-top: 12px;
}

.page-disclaimer .dc-card--accent {
  border-color: rgba(255, 122, 47, .5);
}

.page-disclaimer .dc-card--accent::before {
  background: linear-gradient(90deg, var(--mq-orange), transparent 62%);
  opacity: .7;
}

.page-disclaimer .dc-card--accent-soft {
  background: linear-gradient(160deg, rgba(0, 232, 198, .09), var(--mq-moss) 58%);
  border-color: rgba(0, 232, 198, .32);
}

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

.page-disclaimer .dc-list li {
  position: relative;
  padding-left: 20px;
  color: #c6dcd4;
  font-size: 15px;
  line-height: 1.72;
}

.page-disclaimer .dc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mq-glow);
  transform: rotate(45deg);
}

.page-disclaimer .dc-card--accent .dc-list li::before {
  background: var(--mq-orange);
}

.page-disclaimer .dc-envs {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-disclaimer .dc-envs li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(4, 7, 10, .32);
  border: 1px solid rgba(30, 74, 60, .8);
  color: #d6e8e1;
  font-size: 14.5px;
}

.page-disclaimer .dc-envs .mono {
  color: var(--mq-glow-soft);
  font-size: 13px;
}

.page-disclaimer .dc-note {
  color: var(--mq-mist) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin-top: 14px !important;
}

.page-disclaimer .dc-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--mq-glow);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 232, 198, .42);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.page-disclaimer .dc-link:hover {
  color: var(--mq-glow-soft);
  border-color: var(--mq-glow-soft);
}

.page-disclaimer .dc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.page-disclaimer .dc-flow {
  position: relative;
}

.page-disclaimer .dc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dc-gap);
  position: relative;
}

.page-disclaimer .dc-step {
  position: relative;
  background: rgba(15, 52, 42, .72);
  border: 1px solid var(--mq-stone);
  border-radius: var(--mq-radius);
  padding: var(--dc-card-pad);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.page-disclaimer .dc-step:hover {
  transform: translateY(-4px);
  border-color: var(--mq-glow);
  background: rgba(15, 52, 42, .95);
}

.page-disclaimer .dc-step__no {
  display: inline-block;
  color: var(--mq-night);
  background: var(--mq-glow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.page-disclaimer .dc-step h3 {
  color: var(--mq-cream);
  margin: 0 0 10px;
  line-height: 1.2;
}

.page-disclaimer .dc-step p {
  color: #c6dcd4;
  font-size: 14.5px;
  line-height: 1.72;
  margin: 0;
}

.page-disclaimer .dc-step--end {
  border-color: rgba(255, 122, 47, .48);
}

.page-disclaimer .dc-step--end .dc-step__no {
  background: var(--mq-orange);
  color: #1a0d04;
}

.page-disclaimer .dc-contact {
  position: relative;
  background: linear-gradient(120deg, rgba(233, 161, 92, .08), transparent 58%);
}

.page-disclaimer .dc-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
  align-items: start;
}

.page-disclaimer .dc-contact__copy .po-head {
  margin-bottom: 22px;
}

.page-disclaimer .dc-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-disclaimer .dc-contact__list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(30, 74, 60, .85);
}

.page-disclaimer .dc-contact__label {
  color: var(--mq-mist);
  font-size: 12.5px;
  letter-spacing: .1em;
}

.page-disclaimer .dc-contact__list a,
.page-disclaimer .dc-contact__list span:not(.dc-contact__label) {
  color: var(--mq-cream);
  font-size: 15.5px;
  text-decoration: none;
  word-break: break-all;
}

.page-disclaimer .dc-contact__list a:hover {
  color: var(--mq-glow);
}

.page-disclaimer .dc-contact__aside {
  border-radius: var(--mq-radius);
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid rgba(0, 232, 198, .22);
}

.page-disclaimer .dc-contact__aside h3 {
  color: var(--mq-cream);
  margin: 0 0 16px;
}

.page-disclaimer .dc-aside__links {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.page-disclaimer .dc-aside__links li {
  padding-left: 18px;
  position: relative;
}

.page-disclaimer .dc-aside__links li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mq-glow-soft);
}

.page-disclaimer .dc-aside__links a {
  color: #d6e8e1;
  font-size: 14.5px;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.page-disclaimer .dc-aside__links a:hover {
  color: var(--mq-glow);
  border-color: rgba(0, 232, 198, .5);
}

.page-disclaimer .dc-aside__btn {
  width: 100%;
  text-align: center;
}

@media (min-width: 600px) {
  .page-disclaimer .dc-bento--pair {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-disclaimer .dc-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 820px) {
  .page-disclaimer .dc-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }

  .page-disclaimer .dc-bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .page-disclaimer .dc-card {
    grid-column: span 3;
  }

  .page-disclaimer .dc-card--wide {
    grid-column: span 4;
  }

  .page-disclaimer .dc-card--wide + .dc-card {
    grid-column: span 2;
  }

  .page-disclaimer .dc-bento--split .dc-card--tall {
    grid-column: span 2;
    grid-row: span 2;
  }

  .page-disclaimer .dc-bento--split .dc-card {
    grid-column: span 4;
  }

  .page-disclaimer .dc-bento--trio .dc-card {
    grid-column: span 2;
  }

  .page-disclaimer .dc-bento--pair .dc-card {
    grid-column: span 3;
  }

  .page-disclaimer .dc-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  .page-disclaimer .dc-step {
    padding: clamp(18px, 1.8vw, 24px);
  }

  .page-disclaimer .dc-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    right: -14px;
    width: 14px;
    height: 1px;
    background: var(--mq-stone);
  }

  .page-disclaimer .dc-contact__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  }

  .page-disclaimer .dc-contact__aside {
    position: sticky;
    top: calc(var(--mq-header-h) + 24px);
  }
}

@media (min-width: 1080px) {
  .page-disclaimer .po-head .prose {
    max-width: 38em;
  }

  .page-disclaimer .dc-steps {
    gap: 18px;
  }

  .page-disclaimer .dc-step:not(:last-child)::after {
    right: -18px;
    width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .dc-card,
  .page-disclaimer .dc-step,
  .page-disclaimer .dc-link,
  .page-disclaimer .dc-aside__links a {
    transition: none;
  }

  .page-disclaimer .dc-card:hover,
  .page-disclaimer .dc-step:hover {
    transform: none;
  }
}
<<<END>>>