.page-privacy {
  --pp-bg: #F2F7F4;
  --pp-ink: #06110E;
  --pp-panel: #E6F0EB;
  --pp-line: #C6D9D1;
  --pp-line-soft: #DCE8E2;
  --pp-soft: #4E6660;
  --pp-accent: #0B7A66;
  --pp-amber: #A9701C;
  background-color: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.75;
  padding-bottom: 72px;
}

.page-privacy *,
.page-privacy *::before,
.page-privacy *::after {
  box-sizing: border-box;
}

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

.page-privacy .pp-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: clamp(96px, 15vw, 156px) var(--gutter) 0;
}

/* 面包屑 */
.page-privacy .pp-crumb {
  margin-bottom: 32px;
}

.page-privacy .pp-crumb ol,
.page-privacy .pp-crumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pp-soft);
}

.page-privacy .pp-crumb li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-privacy .pp-crumb li + li::before {
  content: "/";
  color: var(--pp-line);
  font-size: 11px;
}

.page-privacy .pp-crumb a {
  color: var(--pp-soft);
  text-decoration: none;
}

.page-privacy .pp-crumb a:hover,
.page-privacy .pp-crumb a:focus-visible {
  color: var(--pp-accent);
  text-decoration: underline;
}

/* 首屏 */
.page-privacy .pp-eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pp-accent);
}

.page-privacy .pp-title {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 7.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.page-privacy .pp-lead {
  max-width: 38em;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: #1C2B27;
}

.page-privacy .pp-facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--pp-line-soft);
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}

.page-privacy .pp-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  background: var(--pp-bg);
}

.page-privacy .pp-fact-key {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--pp-amber);
}

.page-privacy .pp-fact-val {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--pp-ink);
}

.page-privacy .pp-figure {
  margin: 40px 0 0;
  border: 1px solid var(--pp-line);
}

.page-privacy .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-privacy .pp-figure-cap {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--pp-line);
  background: var(--pp-panel);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--pp-soft);
}

/* 布局 */
.page-privacy .pp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 48px;
}

.page-privacy .pp-index {
  order: -1;
  border-top: 1px solid var(--pp-line);
  padding-top: 18px;
}

.page-privacy .pp-index-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--pp-soft);
}

.page-privacy .pp-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}

.page-privacy .pp-index-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ease-dur) var(--ease), border-color var(--ease-dur) var(--ease);
}

.page-privacy .pp-index-link span {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--pp-accent);
}

.page-privacy .pp-index-link:hover,
.page-privacy .pp-index-link:focus-visible {
  color: var(--pp-accent);
  border-bottom-color: var(--pp-accent);
}

/* 章节 */
.page-privacy .pp-section {
  padding: 44px 0 8px;
  border-top: 1px solid var(--pp-line);
  scroll-margin-top: 96px;
}

.page-privacy .pp-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.page-privacy .pp-num {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pp-accent);
}

.page-privacy .pp-h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(21px, 4.4vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.page-privacy .pp-head-rule {
  display: block;
  height: 1px;
  margin: 16px 0 22px;
  background: linear-gradient(90deg, var(--pp-accent) 0 56px, var(--pp-line) 56px 100%);
}

.page-privacy .pp-text {
  max-width: 38em;
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #1C2B27;
}

.page-privacy .pp-text:last-child {
  margin-bottom: 0;
}

.page-privacy .pp-text--note {
  font-size: 14px;
  color: var(--pp-soft);
  padding-left: 14px;
  border-left: 2px solid var(--pp-amber);
}

/* 四行对照 */
.page-privacy .pp-rows {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--pp-line);
}

.page-privacy .pp-row {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-privacy .pp-row-key {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pp-accent);
}

.page-privacy .pp-row-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pp-ink);
}

.page-privacy .pp-row-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--pp-soft);
}

/* 用途与权利列表 */
.page-privacy .pp-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-privacy .pp-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-privacy .pp-list-key {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pp-accent);
  padding-top: 3px;
}

.page-privacy .pp-list-title {
  margin: 0 0 2px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-ink);
}

.page-privacy .pp-list-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #2A3B36;
}

.page-privacy .pp-list--rights .pp-list-key {
  color: var(--pp-amber);
}

/* 三端标签 */
.page-privacy .pp-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}

.page-privacy .pp-tag {
  padding: 7px 14px;
  border: 1px solid var(--pp-line);
  background: var(--pp-panel);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--pp-accent);
}

/* 折叠组 */
.page-privacy .disclosure {
  margin: 18px 0 0;
  border: 1px solid var(--pp-line);
  background: var(--pp-panel);
}

.page-privacy .disclosure-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--pp-ink);
  cursor: pointer;
  transition: background var(--ease-dur) var(--ease);
}

.page-privacy .disclosure-trigger:hover,
.page-privacy .disclosure-trigger:focus-visible {
  background: #DCEAE4;
}

.page-privacy .disclosure-trigger:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: -2px;
}

.page-privacy .disclosure-icon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pp-accent);
  border-bottom: 2px solid var(--pp-accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease-dur) var(--ease);
}

.page-privacy .disclosure-trigger[aria-expanded="true"] .disclosure-icon {
  transform: rotate(225deg) translateY(-2px);
}

.page-privacy .disclosure-panel {
  border-top: 1px solid var(--pp-line);
  background: var(--pp-bg);
}

.page-privacy .disclosure-inner {
  padding: 16px;
}

.page-privacy .disclosure-inner p {
  max-width: 38em;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.8;
  color: #2A3B36;
}

.page-privacy .disclosure-inner p:last-child {
  margin-bottom: 0;
}

/* 联络卡片 */
.page-privacy .pp-card {
  display: grid;
  gap: 16px;
  margin: 20px 0 0;
  padding: 22px 20px;
  border: 1px solid var(--pp-line);
  border-left: 3px solid var(--pp-accent);
  background: var(--pp-panel);
}

.page-privacy .pp-card-item {
  min-width: 0;
}

.page-privacy .pp-key {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--pp-soft);
}

.page-privacy .pp-card-item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pp-ink);
  word-break: break-word;
}

.page-privacy .pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-privacy .pp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--pp-ink);
  background: var(--pp-ink);
  color: var(--pp-bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--ease-dur) var(--ease), color var(--ease-dur) var(--ease), border-color var(--ease-dur) var(--ease);
}

.page-privacy .pp-cta:hover,
.page-privacy .pp-cta:focus-visible {
  background: var(--pp-accent);
  border-color: var(--pp-accent);
  color: #F2F7F4;
}

.page-privacy .pp-cta--ghost {
  background: transparent;
  color: var(--pp-ink);
  border-color: var(--pp-line);
}

.page-privacy .pp-cta--ghost:hover,
.page-privacy .pp-cta--ghost:focus-visible {
  background: transparent;
  color: var(--pp-accent);
  border-color: var(--pp-accent);
}

/* 页尾索引带 */
.page-privacy .pp-next {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--pp-line);
}

.page-privacy .pp-next-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--pp-soft);
}

.page-privacy .pp-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.page-privacy .pp-next-list a {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pp-line);
}

.page-privacy .pp-next-list a:hover,
.page-privacy .pp-next-list a:focus-visible {
  color: var(--pp-accent);
  border-bottom-color: var(--pp-accent);
}

/* 平板 */
@media (min-width: 620px) {
  .page-privacy .pp-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page-privacy .pp-fact {
    padding: 18px 20px;
    border-left: 1px solid var(--pp-line-soft);
  }

  .page-privacy .pp-fact:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .page-privacy .pp-lead,
  .page-privacy .pp-text {
    font-size: 16.5px;
  }

  .page-privacy .pp-index-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-privacy .pp-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    padding: 28px;
  }

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

/* 桌面：右侧竖排索引 + 宽正文 */
@media (min-width: 1024px) {
  .page-privacy .pp-layout {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 56px;
    align-items: start;
    margin-top: 64px;
  }

  .page-privacy .pp-index {
    order: 0;
    position: sticky;
    top: 104px;
    border-top: 0;
    border-left: 1px solid var(--pp-line);
    padding: 4px 0 4px 20px;
  }

  .page-privacy .pp-index-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-privacy .pp-index-link {
    padding: 11px 0;
    font-size: 13.5px;
  }

  .page-privacy .pp-section {
    padding: 56px 0 12px;
  }

  .page-privacy .pp-row {
    grid-template-columns: 190px minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 8px 28px;
    align-items: start;
    padding: 18px 0;
  }

  .page-privacy .pp-text {
    font-size: 17px;
  }

  .page-privacy .pp-lead {
    font-size: 17.5px;
  }

  .page-privacy .pp-figure {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .pp-index-link,
  .page-privacy .pp-cta,
  .page-privacy .disclosure-trigger,
  .page-privacy .disclosure-icon {
    transition: none;
  }
}


<main id="main-content" class="page-privacy">
  <div class="pp-shell">
    <nav class="breadcrumb pp-crumb" aria-label="面包屑">
      <ol>
        <li><a href="/">赛场数据台</a></li>
        <li aria-current="page">数据与隐私</li>
      </ol>
    </nav>

    <header class="pp-hero">
      <p class="eyebrow pp-eyebrow mono">DATA &amp; PRIVACY</p>
      <h1 class="pp-title">数据与隐私说明</h1>
      <p class="pp-lead">在华体会体育看赛程、收藏赛事、换一台设备重新登录，都会用到一点与你有关的信息。这份说明把最常见的事情写清楚：记录了什么、拿去做什么、留在哪里、怎么查怎么删。读完之后，登录和收藏会更有数。</p>

      <ul class="pp-facts">
        <li class="pp-fact">
          <span class="pp-fact-key mono">LOCAL</span>
          <span class="pp-fact-val">收藏与浏览记录留在本设备</span>
        </li>
        <li class="pp-fact">
          <span class="pp-fact-key mono">SYNC</span>
          <span class="pp-fact-val">同一账号在 H5、iOS、Android 保持一致</span>
        </li>
        <li class="pp-fact">
          <span class="pp-fact-key mono">BATCH</span>
          <span class="pp-fact-val">最近更新批次 -461</span>
        </li>
      </ul>

      <figure class="pp-figure">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="深墨绿底色上铺开的细密网格与浅色数据点阵列，表现信息的分层与存放位置">
        <figcaption class="pp-figure-cap mono">信息分层示意 · 华体会体育数据服务中心</figcaption>
      </figure>
    </header>

    <div class="pp-layout">
      <article class="pp-body">
        <section class="pp-section" id="collect">
          <div class="pp-section-head">
            <span class="pp-num mono">01</span>
            <h2 class="pp-h2">我们收集哪些信息</h2>
          </div>
          <span class="pp-head-rule" aria-hidden="true"></span>
          <p class="pp-text">四类信息各有各的来源，也各有各的去处。翻收藏、换手机、报问题时，你大概会碰到其中一两类。</p>

          <ul class="pp-rows">
            <li class="pp-row">
              <p class="pp-row-key mono">A · 账号信息</p>
              <p class="pp-row-desc">用于认出这些收藏属于谁，例如账号标识与你选择的登录方式。</p>
              <p class="pp-row-meta">来源：登录或注册时填写<br>用途：回到收藏赛事、三端同步</p>
            </li>
            <li class="pp-row">
              <p class="pp-row-key mono">B · 设备与访问方式</p>
              <p class="pp-row-desc">设备型号、系统版本、浏览器类型，以及你从 H5、iOS 还是 Android 进来。</p>
              <p class="pp-row-meta">来源：访问时由设备自动带出<br>用途：定位换设备后找不到收藏之类的问题</p>
            </li>
            <li class="pp-row">
              <p class="pp-row-key mono">C · 收藏赛事与浏览记录</p>
              <p class="pp-row-desc">你置顶的赛事和最近翻过的对阵、球员数据卡片，置顶最多 20 场。</p>
              <p class="pp-row-meta">来源：点收藏、翻页时产生<br>用途：按开赛时间排好，下次进门直接看</p>
            </li>
            <li class="pp-row">
              <p class="pp-row-key mono">D · 更新批次号</p>
              <p class="pp-row-desc">你看到的那一版赛程对应的批次标记，例如 -461。</p>
              <p class="pp-row-meta">来源：面板每 6 小时刷新时生成<br>用途：说明你看到的是哪一次更新的数据</p>
            </li>
          </ul>

          <div class="disclosure">
            <button class="disclosure-trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="pp-d-account">
              <span>账号信息具体包括什么</span>
              <span class="disclosure-icon" aria-hidden="true"></span>
            </button>
            <div class="disclosure-panel" id="pp-d-account" data-disclosure-panel data-open="false">
              <div class="disclosure-inner">
                <p>账号标识、登录方式，以及你自己设置的昵称与头像。我们不需要你的身份证件、银行卡或通讯录，也不会读取你手机里的其他应用数据。</p>
                <p>如果你只用本设备浏览赛程，不登录也能看时间轴与球员数据卡片，此时我们不会建立账号记录。</p>
              </div>
            </div>
          </div>

          <div class="disclosure">
            <button class="disclosure-trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="pp-d-device">
              <span>为什么需要知道设备型号</span>
              <span class="disclosure-icon" aria-hidden="true"></span>
            </button>
            <div class="disclosure-panel" id="pp-d-device" data-disclosure-panel data-open="false">
              <div class="disclosure-inner">
                <p>同样一场比赛，小屏和大屏的排布不一样，不同系统版本对时间轴组件的支持也不一样。你反馈“字挤在一起”或“卡片展开后空白”，带上型号与系统版本，我们能直接复现那块画面。</p>
                <p>这些信息用于排查问题与改善小屏阅读，不用于向你推送营销内容。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="pp-section" id="purpose">
          <div class="pp-section-head">
            <span class="pp-num mono">02</span>
            <h2 class="pp-h2">信息用来做什么</h2>
          </div>
          <span class="pp-head-rule" aria-hidden="true"></span>
          <p class="pp-text">这些记录只服务于四件事，翻来覆去都在赛场之内。</p>

          <ul class="pp-list">
            <li>
              <span class="pp-list-key mono">01</span>
              <div>
                <p class="pp-list-title">登录回访</p>
                <p class="pp-list-desc">换设备后重新登录，从首屏两次点击就能回到你置顶的赛场。</p>
              </div>
            </li>
            <li>
              <span class="pp-list-key mono">02</span>
              <div>
                <p class="pp-list-title">收藏同步</p>
                <p class="pp-list-desc">手机上置顶的三场赛事，平板上打开仍在同样的顺序。</p>
              </div>
            </li>
            <li>
              <span class="pp-list-key mono">03</span>
              <div>
                <p class="pp-list-title">面板排序</p>
                <p class="pp-list-desc">按你常翻的联赛与赛季调整赛程时间轴的呈现顺序，42 项赛事里先看到你在追的那几项。</p>
              </div>
            </li>
            <li>
              <span class="pp-list-key mono">04</span>
              <div>
                <p class="pp-list-title">问题定位</p>
                <p class="pp-list-desc">带上设备型号与批次号，我们能对上你反馈的那一版面板，尽快给出答复。</p>
              </div>
            </li>
          </ul>
        </section>

        <section class="pp-section" id="storage">
          <div class="pp-section-head">
            <span class="pp-num mono">03</span>
            <h2 class="pp-h2">本地存储与 Cookie</h2>
          </div>
          <span class="pp-head-rule" aria-hidden="true"></span>
          <p class="pp-text">收藏赛事和最近浏览默认存在这台设备的浏览器里，不登录也能恢复。清理浏览器缓存、换一个浏览器或者换手机，这些本地记录会跟着消失，重新登录账号后才会从云端取回。</p>
          <p class="pp-text">Cookie 用来保持登录状态，并记住你上次选过的联赛、赛季与主客场组合。关掉 Cookie，赛程和球员数据卡片照常能看，只是每次进来都要重新选一次筛选条件。</p>

          <div class="disclosure">
            <button class="disclosure-trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="pp-d-storage">
              <span>收藏忽然不见了，先看这两步</span>
              <span class="disclosure-icon" aria-hidden="true"></span>
            </button>
            <div class="disclosure-panel" id="pp-d-storage" data-disclosure-panel data-open="false">
              <div class="disclosure-inner">
                <p>第一步，确认是否用过浏览器或系统的清理工具，本地记录被清掉后不会自动回来。第二步，登录同一账号，收藏会按开赛时间重新排好；如果列表仍为空，把设备型号与最近一次看到的批次号发到客服邮箱，由数据支持团队帮你查。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="pp-section" id="sync">
          <div class="pp-section-head">
            <span class="pp-num mono">04</span>
            <h2 class="pp-h2">三端同步与字段共享</h2>
          </div>
          <span class="pp-head-rule" aria-hidden="true"></span>
          <p class="pp-text">同一账号在 H5、iOS、Android 三个入口之间同步的是收藏列表、置顶顺序与最近浏览的位置。同步发生在登录之后，你在手机上加的收藏，稍后在平板上打开就已经在列表里。</p>
          <p class="pp-text">我们与 12 家区域体育媒体有内容合作，共享的是赛程与赛果字段，供对方编排赛事内容使用。这些字段描述的是比赛本身，其中不含账号、设备与浏览记录。</p>

          <ul class="pp-tags" aria-label="三端入口">
            <li class="pp-tag mono">H5</li>
            <li class="pp-tag mono">iOS</li>
            <li class="pp-tag mono">Android</li>
          </ul>
        </section>

        <section class="pp-section" id="retention">
          <div class="pp-section-head">
            <span class="pp-num mono">05</span>
            <h2 class="pp-h2">保存期限与你的权利</h2>
          </div>
          <span class="pp-head-rule" aria-hidden="true"></span>
          <p class="pp-text">账号信息在账号存续期间保留，注销后进入删除流程。收藏与浏览这类记录留在你的设备上，随时可以自己清掉。用于问题定位的日志按排查所需的时间保留，问题结束后不再长期留着。</p>

          <ul class="pp-list pp-list--rights">
            <li>
              <span class="pp-list-key mono">查</span>
              <div>
                <p class="pp-list-title">查询</p>
                <p class="pp-list-desc">想知道我们保存了哪些与你账号相关的记录，发一封邮件说明来意即可。</p>
              </div>
            </li>
            <li>
              <span class="pp-list-key mono">改</span>
              <div>
                <p class="pp-list-title">更正</p>
                <p class="pp-list-desc">登录方式变了、昵称想换掉，附上需要调整的字段，我们确认账号归属后处理。</p>
              </div>
            </li>
            <li>
              <span class="pp-list-key mono">删</span>
              <div>
                <p class="pp-list-title">删除</p>
                <p class="pp-list-desc">清空收藏或注销账号都可以提出。删除后收藏列表无法恢复，需要重新一场场加回来。</p>
              </div>
            </li>
          </ul>

          <p class="pp-text pp-text--note">提交申请请写清账号、原设备型号与最近一次更新批次号，处理进度会通过回信告诉你。赛果字段的读取与引用方式写在<a href="/notice/">访问须知</a>里。</p>
        </section>

        <section class="pp-section" id="contact">
          <div class="pp-section-head">
            <span class="pp-num mono">06</span>
            <h2 class="pp-h2">联络方式</h2>
          </div>
          <span class="pp-head-rule" aria-hidden="true"></span>
          <p class="pp-text">隐私相关的查询、更正与删除申请，走下面这条渠道最快。工作日 9:00–18:00 由数据支持团队轮值回复。</p>

          <dl class="pp-card">
            <div class="pp-card-item">
              <dt class="pp-key mono">EMAIL</dt>
              <dd><a href="mailto:service@arena-e-huatihui.com.cn">service@arena-e-huatihui.com.cn</a></dd>
            </div>
            <div class="pp-card-item">
              <dt class="pp-key mono">TEL</dt>
              <dd><a href="tel:15387339605">15387339605</a></dd>
            </div>
            <div class="pp-card-item">
              <dt class="pp-key mono">HOURS</dt>
              <dd>工作日 9:00–18:00，数据支持团队轮值回复</dd>
            </div>
            <div class="pp-card-item">
              <dt class="pp-key mono">ADDRESS</dt>
              <dd>广东省广州市天河区体育西路189号华体会体育数据服务中心</dd>
            </div>
          </dl>

          <p class="pp-text pp-text--note">如果你的问题是换设备后回不到收藏赛事，邮件里附上原设备型号与最近更新批次号，回复会快很多。</p>

          <div class="pp-actions">
            <a class="pp-cta" href="/find-us/">联系数据支持团队</a>
            <a class="pp-cta pp-cta--ghost" href="/support/">查看常见问题</a>
          </div>
        </section>

        <nav class="pp-next" aria-label="相关页面">
          <p class="pp-next-title mono">继续看</p>
          <ul class="pp-next-list">
            <li><a href="/">赛场数据台</a></li>
            <li><a href="/notice/">访问须知</a></li>
            <li><a href="/support/">支持中心</a></li>
            <li><a href="/find-us/">找到我们</a></li>
          </ul>
        </nav>
      </article>

      <aside class="pp-index" aria-label="章节索引">
        <p class="pp-index-title mono">INDEX</p>
        <ol class="pp-index-list">
          <li><a class="pp-index-link" href="#collect"><span class="mono">01</span>收集哪些信息</a></li>
          <li><a class="pp-index-link" href="#purpose"><span class="mono">02</span>信息用来做什么</a></li>
          <li><a class="pp-index-link" href="#storage"><span class="mono">03</span>本地存储与 Cookie</a></li>
          <li><a class="pp-index-link" href="#sync"><span class="mono">04</span>三端同步与共享</a></li>
          <li><a class="pp-index-link" href="#retention"><span class="mono">05</span>保存期限与权利</a></li>
          <li><a class="pp-index-link" href="#contact"><span class="mono">06</span>联络方式</a></li>
        </ol>
      </aside>
    </div>
  </div>
</main>


.page-privacy {
  --pp-bg: #F2F7F4;
  --pp-ink: #06110E;
  --pp-panel: #E6F0EB;
  --pp-line: #C6D9D1;
  --pp-line-soft: #DCE8E2;
  --pp-soft: #4E6660;
  --pp-accent: #0B7A66;
  --pp-amber: #A9701C;
  background-color: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.75;
  padding-bottom: 72px;
}

.page-privacy *,
.page-privacy *::before,
.page-privacy *::after {
  box-sizing: border-box;
}

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

.page-privacy .pp-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: clamp(96px, 15vw, 156px) var(--gutter) 0;
}

/* 面包屑 */
.page-privacy .pp-crumb {
  margin-bottom: 32px;
}

.page-privacy .pp-crumb ol,
.page-privacy .pp-crumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pp-soft);
}

.page-privacy .pp-crumb li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-privacy .pp-crumb li + li::before {
  content: "/";
  color: var(--pp-line);
  font-size: 11px;
}

.page-privacy .pp-crumb a {
  color: var(--pp-soft);
  text-decoration: none;
}

.page-privacy .pp-crumb a:hover,
.page-privacy .pp-crumb a:focus-visible {
  color: var(--pp-accent);
  text-decoration: underline;
}

/* 首屏 */
.page-privacy .pp-eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pp-accent);
}

.page-privacy .pp-title {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 7.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.page-privacy .pp-lead {
  max-width: 38em;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: #1C2B27;
}

.page-privacy .pp-facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--pp-line-soft);
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}

.page-privacy .pp-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  background: var(--pp-bg);
}

.page-privacy .pp-fact-key {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--pp-amber);
}

.page-privacy .pp-fact-val {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--pp-ink);
}

.page-privacy .pp-figure {
  margin: 40px 0 0;
  border: 1px solid var(--pp-line);
}

.page-privacy .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-privacy .pp-figure-cap {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--pp-line);
  background: var(--pp-panel);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--pp-soft);
}

/* 布局 */
.page-privacy .pp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 48px;
}

.page-privacy .pp-index {
  order: -1;
  border-top: 1px solid var(--pp-line);
  padding-top: 18px;
}

.page-privacy .pp-index-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--pp-soft);
}

.page-privacy .pp-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}

.page-privacy .pp-index-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ease-dur) var(--ease), border-color var(--ease-dur) var(--ease);
}

.page-privacy .pp-index-link span {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--pp-accent);
}

.page-privacy .pp-index-link:hover,
.page-privacy .pp-index-link:focus-visible {
  color: var(--pp-accent);
  border-bottom-color: var(--pp-accent);
}

/* 章节 */
.page-privacy .pp-section {
  padding: 44px 0 8px;
  border-top: 1px solid var(--pp-line);
  scroll-margin-top: 96px;
}

.page-privacy .pp-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.page-privacy .pp-num {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pp-accent);
}

.page-privacy .pp-h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(21px, 4.4vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.page-privacy .pp-head-rule {
  display: block;
  height: 1px;
  margin: 16px 0 22px;
  background: linear-gradient(90deg, var(--pp-accent) 0 56px, var(--pp-line) 56px 100%);
}

.page-privacy .pp-text {
  max-width: 38em;
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #1C2B27;
}

.page-privacy .pp-text:last-child {
  margin-bottom: 0;
}

.page-privacy .pp-text--note {
  font-size: 14px;
  color: var(--pp-soft);
  padding-left: 14px;
  border-left: 2px solid var(--pp-amber);
}

/* 四行对照 */
.page-privacy .pp-rows {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--pp-line);
}

.page-privacy .pp-row {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-privacy .pp-row-key {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pp-accent);
}

.page-privacy .pp-row-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pp-ink);
}

.page-privacy .pp-row-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--pp-soft);
}

/* 用途与权利列表 */
.page-privacy .pp-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-privacy .pp-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-privacy .pp-list-key {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pp-accent);
  padding-top: 3px;
}

.page-privacy .pp-list-title {
  margin: 0 0 2px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-ink);
}

.page-privacy .pp-list-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #2A3B36;
}

.page-privacy .pp-list--rights .pp-list-key {
  color: var(--pp-amber);
}

/* 三端标签 */
.page-privacy .pp-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}

.page-privacy .pp-tag {
  padding: 7px 14px;
  border: 1px solid var(--pp-line);
  background: var(--pp-panel);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--pp-accent);
}

/* 折叠组 */
.page-privacy .disclosure {
  margin: 18px 0 0;
  border: 1px solid var(--pp-line);
  background: var(--pp-panel);
}

.page-privacy .disclosure-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--pp-ink);
  cursor: pointer;
  transition: background var(--ease-dur) var(--ease);
}

.page-privacy .disclosure-trigger:hover,
.page-privacy .disclosure-trigger:focus-visible {
  background: #DCEAE4;
}

.page-privacy .disclosure-trigger:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: -2px;
}

.page-privacy .disclosure-icon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pp-accent);
  border-bottom: 2px solid var(--pp-accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease-dur) var(--ease);
}

.page-privacy .disclosure-trigger[aria-expanded="true"] .disclosure-icon {
  transform: rotate(225deg) translateY(-2px);
}

.page-privacy .disclosure-panel {
  border-top: 1px solid var(--pp-line);
  background: var(--pp-bg);
}

.page-privacy .disclosure-inner {
  padding: 16px;
}

.page-privacy .disclosure-inner p {
  max-width: 38em;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.8;
  color: #2A3B36;
}

.page-privacy .disclosure-inner p:last-child {
  margin-bottom: 0;
}

/* 联络卡片 */
.page-privacy .pp-card {
  display: grid;
  gap: 16px;
  margin: 20px 0 0;
  padding: 22px 20px;
  border: 1px solid var(--pp-line);
  border-left: 3px solid var(--pp-accent);
  background: var(--pp-panel);
}

.page-privacy .pp-card-item {
  min-width: 0;
}

.page-privacy .pp-key {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--pp-soft);
}

.page-privacy .pp-card-item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pp-ink);
  word-break: break-word;
}

.page-privacy .pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-privacy .pp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--pp-ink);
  background: var(--pp-ink);
  color: var(--pp-bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--ease-dur) var(--ease), color var(--ease-dur) var(--ease), border-color var(--ease-dur) var(--ease);
}

.page-privacy .pp-cta:hover,
.page-privacy .pp-cta:focus-visible {
  background: var(--pp-accent);
  border-color: var(--pp-accent);
  color: #F2F7F4;
}

.page-privacy .pp-cta--ghost {
  background: transparent;
  color: var(--pp-ink);
  border-color: var(--pp-line);
}

.page-privacy .pp-cta--ghost:hover,
.page-privacy .pp-cta--ghost:focus-visible {
  background: transparent;
  color: var(--pp-accent);
  border-color: var(--pp-accent);
}

/* 页尾索引带 */
.page-privacy .pp-next {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--pp-line);
}

.page-privacy .pp-next-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--pp-soft);
}

.page-privacy .pp-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.page-privacy .pp-next-list a {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pp-line);
}

.page-privacy .pp-next-list a:hover,
.page-privacy .pp-next-list a:focus-visible {
  color: var(--pp-accent);
  border-bottom-color: var(--pp-accent);
}

/* 平板 */
@media (min-width: 620px) {
  .page-privacy .pp-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page-privacy .pp-fact {
    padding: 18px 20px;
    border-left: 1px solid var(--pp-line-soft);
  }

  .page-privacy .pp-fact:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .page-privacy .pp-lead,
  .page-privacy .pp-text {
    font-size: 16.5px;
  }

  .page-privacy .pp-index-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-privacy .pp-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    padding: 28px;
  }

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

/* 桌面：右侧竖排索引 + 宽正文 */
@media (min-width: 1024px) {
  .page-privacy .pp-layout {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 56px;
    align-items: start;
    margin-top: 64px;
  }

  .page-privacy .pp-index {
    order: 0;
    position: sticky;
    top: 104px;
    border-top: 0;
    border-left: 1px solid var(--pp-line);
    padding: 4px 0 4px 20px;
  }

  .page-privacy .pp-index-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-privacy .pp-index-link {
    padding: 11px 0;
    font-size: 13.5px;
  }

  .page-privacy .pp-section {
    padding: 56px 0 12px;
  }

  .page-privacy .pp-row {
    grid-template-columns: 190px minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 8px 28px;
    align-items: start;
    padding: 18px 0;
  }

  .page-privacy .pp-text {
    font-size: 17px;
  }

  .page-privacy .pp-lead {
    font-size: 17.5px;
  }

  .page-privacy .pp-figure {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .pp-index-link,
  .page-privacy .pp-cta,
  .page-privacy .disclosure-trigger,
  .page-privacy .disclosure-icon {
    transition: none;
  }
}