.page-privacy {
  --privacy-panel: rgba(14, 23, 56, 0.72);
  --privacy-line: rgba(42, 56, 102, 0.85);
  --privacy-soft: linear-gradient(180deg, rgba(27, 42, 94, 0.42) 0%, rgba(6, 10, 24, 0) 100%);
}

/* ---------- Hero ---------- */
.page-privacy .privacy-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 56px;
  background:
    radial-gradient(circle at 78% 12%, rgba(198, 255, 61, 0.16), transparent 58%),
    linear-gradient(150deg, #060A18 0%, #0E1738 52%, #1B2A5E 100%);
}

.page-privacy .privacy-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 255, 61, 0.55), transparent);
}

.page-privacy .privacy-hero__inner {
  position: relative;
  display: grid;
  gap: 40px;
}

.page-privacy .privacy-hero__copy {
  max-width: 640px;
}

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

.page-privacy .privacy-hero__title {
  margin: 14px 0 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-privacy .privacy-hero__title .slant {
  display: inline-block;
  color: var(--neon);
}

.page-privacy .privacy-hero .lede {
  margin: 22px 0 0;
  color: var(--body-text);
  max-width: 34em;
}

.page-privacy .privacy-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-privacy .privacy-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 38px 0 0;
  padding: 0;
}

.page-privacy .privacy-hero__facts > div {
  padding: 16px 18px;
  background: var(--privacy-panel);
  border: 1px solid var(--privacy-line);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}

.page-privacy .privacy-hero__facts dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-privacy .privacy-hero__facts dd {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 600;
  color: var(--neon);
  line-height: 1;
}

.page-privacy .privacy-hero__figure {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--privacy-line);
  background: linear-gradient(135deg, rgba(27, 42, 94, 0.9), rgba(6, 10, 24, 0.95));
}

.page-privacy .privacy-hero__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.page-privacy .privacy-hero__figure figcaption {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--mist);
  border-top: 1px solid var(--privacy-line);
  background: rgba(6, 10, 24, 0.72);
}

/* ---------- Body layout ---------- */
.page-privacy .privacy-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(198, 255, 61, 0.07), transparent 46%),
    var(--ink);
}

.page-privacy .privacy-body__inner {
  display: grid;
  gap: 34px;
}

.page-privacy .privacy-rail {
  display: none;
}

.page-privacy .privacy-rail__label {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.page-privacy .privacy-flow {
  display: grid;
  gap: 26px;
  min-width: 0;
}

/* ---------- Clause cards ---------- */
.page-privacy .privacy-clause {
  position: relative;
  padding: 30px 22px;
  border-radius: var(--r-lg);
  background: var(--privacy-soft), rgba(14, 23, 56, 0.55);
  border: 1px solid var(--privacy-line);
  overflow: hidden;
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
}

.page-privacy .privacy-clause::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--neon), transparent 78%);
  opacity: 0.75;
}

.page-privacy .privacy-clause:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 255, 61, 0.4);
}

.page-privacy .privacy-clause .card__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--neon);
  padding: 5px 12px;
  border: 1px solid rgba(198, 255, 61, 0.42);
  border-radius: var(--r-pill);
}

.page-privacy .privacy-clause h2 {
  margin: 16px 0 0;
  color: var(--paper);
}

.page-privacy .privacy-clause .prose {
  margin: 12px 0 0;
  color: var(--body-text);
  max-width: 38em;
}

/* ---------- Lists ---------- */
.page-privacy .privacy-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-privacy .privacy-list > li {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(6, 10, 24, 0.55);
  border: 1px solid rgba(42, 56, 102, 0.7);
}

.page-privacy .privacy-list--tight > li {
  border-left: 2px solid rgba(198, 255, 61, 0.35);
}

.page-privacy .privacy-list__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
}

.page-privacy .privacy-list > li p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

/* ---------- Purpose grid ---------- */
.page-privacy .privacy-purpose {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-privacy .privacy-purpose__item {
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(42, 56, 102, 0.7);
  background: linear-gradient(160deg, rgba(27, 42, 94, 0.5), rgba(6, 10, 24, 0.6));
}

.page-privacy .privacy-purpose__item p:last-child {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

.page-privacy .privacy-purpose__item .spec-tag {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---------- Timeline ---------- */
.page-privacy .privacy-timeline {
  margin: 26px 0 0;
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--privacy-line);
  background: rgba(6, 10, 24, 0.6);
}

.page-privacy .privacy-timeline__bar {
  display: grid;
  gap: 12px;
}

.page-privacy .privacy-timeline__seg {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 18px 16px 22px;
  border-radius: var(--r-md);
}

.page-privacy .privacy-timeline__seg::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 18px;
  width: 6px;
  border-radius: var(--r-pill);
}

.page-privacy .privacy-timeline__seg--full {
  background: rgba(198, 255, 61, 0.08);
  border: 1px solid rgba(198, 255, 61, 0.32);
}

.page-privacy .privacy-timeline__seg--full::before {
  background: var(--neon);
}

.page-privacy .privacy-timeline__seg--lite {
  background: rgba(27, 42, 94, 0.42);
  border: 1px solid rgba(42, 56, 102, 0.8);
}

.page-privacy .privacy-timeline__seg--lite::before {
  background: var(--mist);
}

.page-privacy .privacy-timeline__num {
  font-size: 15px;
  font-weight: 600;
  color: var(--neon);
}

.page-privacy .privacy-timeline__seg--lite .privacy-timeline__num {
  color: var(--paper);
}

.page-privacy .privacy-timeline__cap {
  font-size: 14px;
  color: var(--mist);
}

/* ---------- Split ---------- */
.page-privacy .privacy-split {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-privacy .privacy-split > div {
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(42, 56, 102, 0.95);
  background: rgba(6, 10, 24, 0.45);
}

.page-privacy .privacy-split p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

/* ---------- Steps ---------- */
.page-privacy .privacy-steps {
  list-style: none;
  counter-reset: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-privacy .privacy-steps > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(42, 56, 102, 0.7);
}

.page-privacy .privacy-steps > li:last-child {
  border-bottom: 1px solid rgba(42, 56, 102, 0.7);
}

.page-privacy .privacy-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: rgba(198, 255, 61, 0.12);
  border: 1px solid rgba(198, 255, 61, 0.38);
  color: var(--neon);
  font-size: 13px;
  font-weight: 600;
}

.page-privacy .privacy-steps p {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

/* ---------- Notes ---------- */
.page-privacy .privacy-note {
  margin: 22px 0 0;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
  border-left: 2px solid rgba(255, 106, 26, 0.6);
  background: rgba(255, 106, 26, 0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.page-privacy .privacy-note a {
  color: var(--neon);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Contact block ---------- */
.page-privacy .privacy-clause--contact {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 106, 26, 0.16), transparent 58%),
    var(--privacy-soft),
    rgba(14, 23, 56, 0.7);
}

.page-privacy .privacy-contact {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-privacy .privacy-contact__item {
  padding: 22px 20px;
  border-radius: var(--r-md);
  background: rgba(6, 10, 24, 0.62);
  border: 1px solid rgba(198, 255, 61, 0.24);
}

.page-privacy .privacy-contact__item .footer__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.page-privacy .privacy-contact__item .footer__value {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--neon);
  word-break: break-word;
}

.page-privacy .privacy-contact__hint {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-privacy .privacy-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- Media queries ---------- */
@media (min-width: 720px) {
  .page-privacy .privacy-hero {
    padding: 116px 0 72px;
  }

  .page-privacy .privacy-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
  }

  .page-privacy .privacy-hero__facts {
    gap: 14px;
  }

  .page-privacy .privacy-clause {
    padding: 38px 40px;
  }

  .page-privacy .privacy-purpose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-privacy .privacy-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

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

  .page-privacy .privacy-timeline {
    padding: 28px 26px;
  }

  .page-privacy .privacy-timeline__bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    position: relative;
  }

  .page-privacy .privacy-timeline__bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--neon), var(--teal), var(--mist));
    opacity: 0.4;
    z-index: 0;
  }

  .page-privacy .privacy-timeline__seg {
    z-index: 1;
  }
}

@media (min-width: 1040px) {
  .page-privacy .privacy-hero {
    padding: 132px 0 88px;
  }

  .page-privacy .privacy-body__inner {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-privacy .privacy-rail {
    display: block;
    position: sticky;
    top: 108px;
    padding: 20px 0 20px 18px;
    border-left: 1px solid rgba(42, 56, 102, 0.8);
  }

  .page-privacy .privacy-rail .index-rail__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
    color: var(--mist);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 240ms var(--ease), border-color 240ms var(--ease);
  }

  .page-privacy .privacy-rail .index-rail__link:hover {
    color: var(--paper);
  }

  .page-privacy .privacy-rail .index-rail__link.is-active {
    color: var(--neon);
    border-bottom-color: rgba(198, 255, 61, 0.6);
  }

  .page-privacy .privacy-rail .index-rail__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    opacity: 0.75;
  }

  .page-privacy .privacy-flow {
    gap: 32px;
  }

  .page-privacy .privacy-clause {
    padding: 46px 48px;
  }

  .page-privacy .privacy-list > li {
    padding: 22px 26px;
  }

  .page-privacy .privacy-purpose {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .privacy-clause,
  .page-privacy .privacy-rail .index-rail__link {
    transition: none;
  }

  .page-privacy .privacy-clause:hover {
    transform: none;
  }
}
<<<END>>>

现在来核对一下关键点：

- 只用一个 h1 ✓
- 面包屑 ✓
- 所有锚点 href 都有对应的 id：collect、usage、retention、partners、rights、contact ✓
- 跨页链接只用 /legal/、/faq/、/contact-us/、/ ✓
- 图片：900x600，符合“首屏右侧”的放置要求，未使用 lazy ✓
- 品牌名“完美体育赛事”出现在导语中 ✓
- 联系方式与给定内容一致 ✓
- 页面作用域限定在 `.page-privacy` ✓
- 只使用现有变量：--ink、--neon、--deep、--stand、--paper、--mist、--edge、--teal、--orange、--body-text、--r-lg、--r-md、--r-sm、--r-pill、--font-mono、--font-sans、--ease、--shell-w、--gutter ✓（全部存在）
- 在 .page-privacy 作用域内定义了本地变量 --privacy-panel、--privacy-line、--privacy-soft，并先定义后使用 ✓
- 没有 `:root` / `body` / `.site-header` 等选择器 ✓
- 引入了 data-reveal、data-index-rail，二者都是已实现的协议 ✓
- 没有表单，没有外链 ✓
- 在 .page-privacy 作用域内包含媒体查询 ✓
- 用了 .index-rail__num 和 .index-rail__link 这两个全局类，可以
- 用了 .footer__label 和 .footer__value——这些是页脚的全局类……但我只把它们用作标签/值样式。根据 site_kit 的 global_css_classes 列表，它们是允许使用的。不过，在页脚之外使用它们有污染风险——它们本身是共享样式，所以在页面里使用没问题。

等等：我用了 .breadcrumb__list 和 .breadcrumb__sep——都是全局类，没问题。

还有，我使用了 `<span class="privacy-steps__num mono">`——mono 是全局类，没问题。

我修改了样式，也去掉了计数器重置。现在没问题了。

检查一下没有出现被禁用的营销套话，也没有出现“本平台”这种说法。好。

检查一下“不做承诺”“不代表”这些话——都没出现。

再检查一下“不设”——没出现。“本页只”——没出现。

检查一下数字，都直接写出来了。

我用了 `data-reveal`、`data-index-rail`——这两个都在协议列表里，没问题。

没有 `data-count-to`，好。

嗯，再确认一下 `.page-privacy .privacy-rail .index-rail__link`——这个选择器被限定在 .page-privacy 作用域内，没问题。

有一点：`.page-privacy .privacy-clause .card__index`——card__index 是全局的，但覆盖样式限定在页面作用域内，没问题。

也确认一下没有任何内容暗示这个页面在解释自身结构。好。

检查一下“三组圆形数据块”——这个不是真图，只是 alt 文本，没问题。

没问题，可以输出了。照原样来吧。
<main id="main-content" class="page-privacy">

  <section class="privacy-hero">
    <div class="shell privacy-hero__inner">
      <div class="privacy-hero__copy">
        <nav class="breadcrumb" aria-label="所在位置">
          <ol class="breadcrumb__list">
            <li><a href="/">首页</a></li>
            <li class="breadcrumb__sep" aria-hidden="true">/</li>
            <li aria-current="page">个人信息说明</li>
          </ol>
        </nav>
        <p class="eyebrow">06 — 账号与数据</p>
        <h1 class="display display--xl privacy-hero__title">你的账号信息，<span class="slant">怎么用</span>、存多久、能不能删</h1>
        <p class="lede">在完美体育赛事使用登录、赛事提醒和赛程查询时，你留下的每一步都有对应的处理方式。这一页把信息范围、用途、保存时间和你能做的选择，一次讲清楚。</p>
        <div class="privacy-hero__actions">
          <a class="btn btn--primary" href="/contact-us/">联系客服</a>
          <a class="btn btn--ghost" href="#collect">从哪里看起</a>
        </div>
        <dl class="privacy-hero__facts">
          <div>
            <dt>查询记录保存</dt>
            <dd class="mono">14 天</dd>
          </div>
          <div>
            <dt>条款条目</dt>
            <dd class="mono">6 组</dd>
          </div>
          <div>
            <dt>客服团队</dt>
            <dd class="mono">12 人</dd>
          </div>
        </dl>
      </div>
      <figure class="privacy-hero__figure">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="三组圆形数据块与时间轴组成的抽象图形，荧光绿节点表示信息保存的时间节点" decoding="async">
        <figcaption>账号、设备与查询记录三类信息，在时间轴上各有保存节点。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--tight privacy-body">
    <div class="shell privacy-body__inner">

      <aside class="index-rail privacy-rail" data-index-rail aria-label="条款目录">
        <p class="privacy-rail__label">条款目录</p>
        <a class="index-rail__link" href="#collect"><span class="index-rail__num">01</span>收集范围</a>
        <a class="index-rail__link" href="#usage"><span class="index-rail__num">02</span>使用目的</a>
        <a class="index-rail__link" href="#retention"><span class="index-rail__num">03</span>保存安排</a>
        <a class="index-rail__link" href="#partners"><span class="index-rail__num">04</span>数据协作</a>
        <a class="index-rail__link" href="#rights"><span class="index-rail__num">05</span>你的选择</a>
        <a class="index-rail__link" href="#contact"><span class="index-rail__num">06</span>联系我们</a>
      </aside>

      <div class="privacy-flow">

        <article class="card privacy-clause" id="collect" data-reveal>
          <span class="card__index">01</span>
          <h2 class="display display--s">我们收集哪些信息</h2>
          <p class="prose">不同功能需要的信息不一样。为了让你一眼看清，这里按账号、设备、使用记录三类分别说明，每一项都对应一个你真在用到的功能。</p>
          <ul class="privacy-list">
            <li>
              <h3 class="privacy-list__title">账号信息</h3>
              <p>手机号或第三方快捷登录返回的标识、你设置的昵称与头像、用于找回账号的验证方式。这些是你登录后能跨设备看到同一份关注列表和提醒设置的基础。</p>
            </li>
            <li>
              <h3 class="privacy-list__title">设备信息</h3>
              <p>设备型号、操作系统与版本号、客户端版本号（安卓版当前主版本为 4.x）、网络类型与粗略地域（用于判断华南、华东等区域的访问压力）。弱网时平台会自动启用精简模式，这一步也依赖网络类型判断。</p>
            </li>
            <li>
              <h3 class="privacy-list__title">使用记录</h3>
              <p>你查看过的联赛与场次、关注的球队、设置过的提醒、在积分榜和阵容栏目停留的位置。这类记录让你下次打开时能直接回到熟悉的联赛入口，也让赛程提醒按你的关注范围推送。</p>
            </li>
          </ul>
        </article>

        <article class="card privacy-clause" id="usage" data-reveal>
          <span class="card__index">02</span>
          <h2 class="display display--s">这些信息用来做什么</h2>
          <p class="prose">收集来的信息只服务于四件事，每一件都对应你日常能感受到的结果。</p>
          <div class="privacy-purpose">
            <div class="privacy-purpose__item">
              <p class="spec-tag spec-tag--neon">登录验证</p>
              <p>确认你是账号本人，让关注列表、提醒设置和浏览记录跟着账号走，换台手机也不用重新配置。</p>
            </div>
            <div class="privacy-purpose__item">
              <p class="spec-tag spec-tag--neon">赛事提醒</p>
              <p>按你关注的联赛与球队推送开赛提示。赛程提醒最多可同时关注 20 支球队，超出这个数量的需求可以分时间段切换关注。</p>
            </div>
            <div class="privacy-purpose__item">
              <p class="spec-tag spec-tag--neon">内容呈现</p>
              <p>决定首页先给你看哪几场、积分榜默认展开哪个联赛、集锦回看按什么顺序排列。首屏平均加载时间约 1.2 秒，个性化的栏目排序也在这个时间预算内完成。</p>
            </div>
            <div class="privacy-purpose__item">
              <p class="spec-tag spec-tag--neon">安全保障</p>
              <p>识别异常登录与批量刷取行为，保护账号不被他人接管，也保护平台每日 38 万活跃用户正常的查询体验。</p>
            </div>
          </div>
        </article>

        <article class="card privacy-clause" id="retention" data-reveal>
          <span class="card__index">03</span>
          <h2 class="display display--s">保存多久</h2>
          <p class="prose">保存时间按信息类型分开处理，你能查到多久以前的比赛，取决于它的用途是否还在。</p>

          <div class="privacy-timeline" role="img" aria-label="查询记录保存时间轴：第 0 天到第 14 天为完整查询期，第 14 天之后仅保留最终结果与积分记录">
            <div class="privacy-timeline__bar">
              <span class="privacy-timeline__seg privacy-timeline__seg--full">
                <span class="privacy-timeline__num mono">0—14 天</span>
                <span class="privacy-timeline__cap">完整赛事信息随时可查</span>
              </span>
              <span class="privacy-timeline__seg privacy-timeline__seg--lite">
                <span class="privacy-timeline__num mono">14 天之后</span>
                <span class="privacy-timeline__cap">保留最终结果与积分记录</span>
              </span>
            </div>
          </div>

          <ul class="privacy-list privacy-list--tight">
            <li>
              <h3 class="privacy-list__title">查询记录 · 14 天</h3>
              <p>临时查询的赛事信息保留 14 天，在这段时间里阵容、比分和过程数据都能随时翻出来。超过窗口的场次只保留最终结果与积分记录，所以想看完整过程建议在两周内回看。</p>
            </li>
            <li>
              <h3 class="privacy-list__title">账号信息 · 账号存续期间</h3>
              <p>昵称、头像、关注列表和提醒设置在账号存续期间持续保存，这样你长期关注的球队不会因为一次退出就丢失。注销后按流程停止使用并做删除处理。</p>
            </li>
            <li>
              <h3 class="privacy-list__title">设备与日志 · 较短周期</h3>
              <p>用于故障排查与安全识别的设备与访问日志保存周期短于账号信息，完成排查目的后即进入清理流程。</p>
            </li>
          </ul>
        </article>

        <article class="card privacy-clause" id="partners" data-reveal>
          <span class="card__index">04</span>
          <h2 class="display display--s">与数据服务商的关系</h2>
          <p class="prose">平台的内容能力来自长期协作：与 15 家数据服务商、28 家媒体内容方建立了内容合作关系。这些协作只涉及赛事数据本身，不涉及你的账号身份。</p>
          <div class="privacy-split">
            <div>
              <h3 class="privacy-list__title">对外提供的是什么</h3>
              <p>我们提供的是赛事层面的数据口径，例如某场比赛的比分、积分变化与阵容确认结果。数据服务商拿到的是赛事数据，不是你的手机号、昵称或关注列表。</p>
            </div>
            <div>
              <h3 class="privacy-list__title">对内接收的是什么</h3>
              <p>从内容方接收的是赛程、转会区间与集锦素材。转会信息按五档费用区间呈现，区间与所属队徽并排显示，这些内容与你的个人信息相互独立。</p>
            </div>
          </div>
          <p class="privacy-note">如果你希望进一步了解内容来源与数据时间标记的处理方式，可以查看<a href="/legal/">法律声明</a>。</p>
        </article>

        <article class="card privacy-clause" id="rights" data-reveal>
          <span class="card__index">05</span>
          <h2 class="display display--s">你的选择与权利</h2>
          <p class="prose">下面几件事你可以随时自己做，不需要等客服回复。</p>
          <ol class="privacy-steps">
            <li>
              <span class="privacy-steps__num mono">01</span>
              <div>
                <h3 class="privacy-list__title">查看与更正</h3>
                <p>在账号设置里可以看到昵称、头像、关注球队与提醒开关，随时修改成你想要的样子。</p>
              </div>
            </li>
            <li>
              <span class="privacy-steps__num mono">02</span>
              <div>
                <h3 class="privacy-list__title">关闭赛事提醒</h3>
                <p>对某个联赛或球队不再需要推送，单独关掉它的开关即可，其他关注不受影响。</p>
              </div>
            </li>
            <li>
              <span class="privacy-steps__num mono">03</span>
              <div>
                <h3 class="privacy-list__title">删除与注销</h3>
                <p>清理单条浏览记录、清空关注列表，或者直接申请注销账号。注销后账号信息按流程停止使用并做删除处理。</p>
              </div>
            </li>
            <li>
              <span class="privacy-steps__num mono">04</span>
              <div>
                <h3 class="privacy-list__title">问清楚再决定</h3>
                <p>对某条信息的使用有疑问，先通过邮件问清楚再决定是否继续使用对应功能。</p>
              </div>
            </li>
          </ol>
          <p class="privacy-note">关于登录进不去、提醒收不到这类具体问题，可以先去<a href="/faq/">常见问题</a>看看，多数情况有直接答案。</p>
        </article>

        <article class="card privacy-clause privacy-clause--contact" id="contact" data-reveal>
          <span class="card__index">06</span>
          <h2 class="display display--s">如何联系我们</h2>
          <p class="prose">与个人信息相关的问题，优先通过客服邮箱处理，方便我们核对账号并留下完整记录；需要即时沟通的，也可以拨打服务热线。</p>
          <div class="privacy-contact">
            <div class="privacy-contact__item">
              <p class="footer__label">客服邮箱</p>
              <p class="footer__value mono">contact@wanmei-app-login.com.cn</p>
              <p class="privacy-contact__hint">该邮箱为站点客服邮箱，如有关于赛事信息或账号问题，请通过邮件联系。</p>
            </div>
            <div class="privacy-contact__item">
              <p class="footer__label">服务热线</p>
              <p class="footer__value mono">400-4382-3417</p>
              <p class="privacy-contact__hint">由 12 人客服团队轮值接听，遇到账号与信息相关的问题可直接拨打。</p>
            </div>
          </div>
          <div class="privacy-contact__actions">
            <a class="btn btn--neon" href="/contact-us/">前往联系我们</a>
            <a class="btn btn--ghost" href="/legal/">阅读法律声明</a>
          </div>
        </article>

      </div>
    </div>
  </section>

</main>

.page-privacy {
  --privacy-panel: rgba(14, 23, 56, 0.72);
  --privacy-line: rgba(42, 56, 102, 0.85);
  --privacy-soft: linear-gradient(180deg, rgba(27, 42, 94, 0.42) 0%, rgba(6, 10, 24, 0) 100%);
}

/* ---------- Hero ---------- */
.page-privacy .privacy-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 56px;
  background:
    radial-gradient(circle at 78% 12%, rgba(198, 255, 61, 0.16), transparent 58%),
    linear-gradient(150deg, #060A18 0%, #0E1738 52%, #1B2A5E 100%);
}

.page-privacy .privacy-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 255, 61, 0.55), transparent);
}

.page-privacy .privacy-hero__inner {
  position: relative;
  display: grid;
  gap: 40px;
}

.page-privacy .privacy-hero__copy {
  max-width: 640px;
}

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

.page-privacy .privacy-hero__title {
  margin: 14px 0 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-privacy .privacy-hero__title .slant {
  display: inline-block;
  color: var(--neon);
}

.page-privacy .privacy-hero .lede {
  margin: 22px 0 0;
  color: var(--body-text);
  max-width: 34em;
}

.page-privacy .privacy-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-privacy .privacy-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 38px 0 0;
  padding: 0;
}

.page-privacy .privacy-hero__facts > div {
  padding: 16px 18px;
  background: var(--privacy-panel);
  border: 1px solid var(--privacy-line);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}

.page-privacy .privacy-hero__facts dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-privacy .privacy-hero__facts dd {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 600;
  color: var(--neon);
  line-height: 1;
}

.page-privacy .privacy-hero__figure {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--privacy-line);
  background: linear-gradient(135deg, rgba(27, 42, 94, 0.9), rgba(6, 10, 24, 0.95));
}

.page-privacy .privacy-hero__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.page-privacy .privacy-hero__figure figcaption {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--mist);
  border-top: 1px solid var(--privacy-line);
  background: rgba(6, 10, 24, 0.72);
}

/* ---------- Body layout ---------- */
.page-privacy .privacy-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(198, 255, 61, 0.07), transparent 46%),
    var(--ink);
}

.page-privacy .privacy-body__inner {
  display: grid;
  gap: 34px;
}

.page-privacy .privacy-rail {
  display: none;
}

.page-privacy .privacy-rail__label {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.page-privacy .privacy-flow {
  display: grid;
  gap: 26px;
  min-width: 0;
}

/* ---------- Clause cards ---------- */
.page-privacy .privacy-clause {
  position: relative;
  padding: 30px 22px;
  border-radius: var(--r-lg);
  background: var(--privacy-soft), rgba(14, 23, 56, 0.55);
  border: 1px solid var(--privacy-line);
  overflow: hidden;
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
}

.page-privacy .privacy-clause::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--neon), transparent 78%);
  opacity: 0.75;
}

.page-privacy .privacy-clause:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 255, 61, 0.4);
}

.page-privacy .privacy-clause .card__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--neon);
  padding: 5px 12px;
  border: 1px solid rgba(198, 255, 61, 0.42);
  border-radius: var(--r-pill);
}

.page-privacy .privacy-clause h2 {
  margin: 16px 0 0;
  color: var(--paper);
}

.page-privacy .privacy-clause .prose {
  margin: 12px 0 0;
  color: var(--body-text);
  max-width: 38em;
}

/* ---------- Lists ---------- */
.page-privacy .privacy-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-privacy .privacy-list > li {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(6, 10, 24, 0.55);
  border: 1px solid rgba(42, 56, 102, 0.7);
}

.page-privacy .privacy-list--tight > li {
  border-left: 2px solid rgba(198, 255, 61, 0.35);
}

.page-privacy .privacy-list__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
}

.page-privacy .privacy-list > li p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

/* ---------- Purpose grid ---------- */
.page-privacy .privacy-purpose {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-privacy .privacy-purpose__item {
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(42, 56, 102, 0.7);
  background: linear-gradient(160deg, rgba(27, 42, 94, 0.5), rgba(6, 10, 24, 0.6));
}

.page-privacy .privacy-purpose__item p:last-child {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

.page-privacy .privacy-purpose__item .spec-tag {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---------- Timeline ---------- */
.page-privacy .privacy-timeline {
  margin: 26px 0 0;
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--privacy-line);
  background: rgba(6, 10, 24, 0.6);
}

.page-privacy .privacy-timeline__bar {
  display: grid;
  gap: 12px;
}

.page-privacy .privacy-timeline__seg {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 18px 16px 22px;
  border-radius: var(--r-md);
}

.page-privacy .privacy-timeline__seg::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 18px;
  width: 6px;
  border-radius: var(--r-pill);
}

.page-privacy .privacy-timeline__seg--full {
  background: rgba(198, 255, 61, 0.08);
  border: 1px solid rgba(198, 255, 61, 0.32);
}

.page-privacy .privacy-timeline__seg--full::before {
  background: var(--neon);
}

.page-privacy .privacy-timeline__seg--lite {
  background: rgba(27, 42, 94, 0.42);
  border: 1px solid rgba(42, 56, 102, 0.8);
}

.page-privacy .privacy-timeline__seg--lite::before {
  background: var(--mist);
}

.page-privacy .privacy-timeline__num {
  font-size: 15px;
  font-weight: 600;
  color: var(--neon);
}

.page-privacy .privacy-timeline__seg--lite .privacy-timeline__num {
  color: var(--paper);
}

.page-privacy .privacy-timeline__cap {
  font-size: 14px;
  color: var(--mist);
}

/* ---------- Split ---------- */
.page-privacy .privacy-split {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-privacy .privacy-split > div {
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(42, 56, 102, 0.95);
  background: rgba(6, 10, 24, 0.45);
}

.page-privacy .privacy-split p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

/* ---------- Steps ---------- */
.page-privacy .privacy-steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-privacy .privacy-steps > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(42, 56, 102, 0.7);
}

.page-privacy .privacy-steps > li:last-child {
  border-bottom: 1px solid rgba(42, 56, 102, 0.7);
}

.page-privacy .privacy-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: rgba(198, 255, 61, 0.12);
  border: 1px solid rgba(198, 255, 61, 0.38);
  color: var(--neon);
  font-size: 13px;
  font-weight: 600;
}

.page-privacy .privacy-steps p {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body-text);
}

/* ---------- Notes ---------- */
.page-privacy .privacy-note {
  margin: 22px 0 0;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
  border-left: 2px solid rgba(255, 106, 26, 0.6);
  background: rgba(255, 106, 26, 0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.page-privacy .privacy-note a {
  color: var(--neon);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Contact block ---------- */
.page-privacy .privacy-clause--contact {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 106, 26, 0.16), transparent 58%),
    var(--privacy-soft),
    rgba(14, 23, 56, 0.7);
}

.page-privacy .privacy-contact {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-privacy .privacy-contact__item {
  padding: 22px 20px;
  border-radius: var(--r-md);
  background: rgba(6, 10, 24, 0.62);
  border: 1px solid rgba(198, 255, 61, 0.24);
}

.page-privacy .privacy-contact__item .footer__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.page-privacy .privacy-contact__item .footer__value {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--neon);
  word-break: break-word;
}

.page-privacy .privacy-contact__hint {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-privacy .privacy-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- Media queries ---------- */
@media (min-width: 720px) {
  .page-privacy .privacy-hero {
    padding: 116px 0 72px;
  }

  .page-privacy .privacy-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
  }

  .page-privacy .privacy-hero__facts {
    gap: 14px;
  }

  .page-privacy .privacy-clause {
    padding: 38px 40px;
  }

  .page-privacy .privacy-purpose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-privacy .privacy-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

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

  .page-privacy .privacy-timeline {
    padding: 28px 26px;
  }

  .page-privacy .privacy-timeline__bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    position: relative;
  }

  .page-privacy .privacy-timeline__bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--neon), var(--teal), var(--mist));
    opacity: 0.4;
    z-index: 0;
  }

  .page-privacy .privacy-timeline__seg {
    z-index: 1;
  }
}

@media (min-width: 1040px) {
  .page-privacy .privacy-hero {
    padding: 132px 0 88px;
  }

  .page-privacy .privacy-body__inner {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-privacy .privacy-rail {
    display: block;
    position: sticky;
    top: 108px;
    padding: 20px 0 20px 18px;
    border-left: 1px solid rgba(42, 56, 102, 0.8);
  }

  .page-privacy .privacy-rail .index-rail__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
    color: var(--mist);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 240ms var(--ease), border-color 240ms var(--ease);
  }

  .page-privacy .privacy-rail .index-rail__link:hover {
    color: var(--paper);
  }

  .page-privacy .privacy-rail .index-rail__link.is-active {
    color: var(--neon);
    border-bottom-color: rgba(198, 255, 61, 0.6);
  }

  .page-privacy .privacy-rail .index-rail__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    opacity: 0.75;
  }

  .page-privacy .privacy-flow {
    gap: 32px;
  }

  .page-privacy .privacy-clause {
    padding: 46px 48px;
  }

  .page-privacy .privacy-list > li {
    padding: 22px 26px;
  }

  .page-privacy .privacy-purpose {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .privacy-clause,
  .page-privacy .privacy-rail .index-rail__link {
    transition: none;
  }

  .page-privacy .privacy-clause:hover {
    transform: none;
  }
}