.page-privacy {
  --privacy-body: #C6D6E7;
  --privacy-panel: rgba(16, 38, 63, 0.85);
  --privacy-sunken: rgba(8, 24, 43, 0.62);
  display: block;
  background:
    radial-gradient(1100px 560px at 90% -6%, rgba(255, 106, 19, 0.16), transparent 62%),
    radial-gradient(880px 500px at 2% 4%, rgba(20, 210, 160, 0.11), transparent 64%),
    var(--navy);
  color: var(--ink);
}

.page-privacy .breadcrumb {
  padding-top: clamp(16px, 3vw, 26px);
}

/* ---------- Hero ---------- */

.page-privacy .privacy-hero {
  padding-top: clamp(28px, 5vw, 52px);
}

.page-privacy .privacy-hero-inner {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-items: end;
}

.page-privacy .privacy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border: var(--line);
  border-radius: 999px;
  background: rgba(16, 38, 63, 0.7);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--electro);
}

.page-privacy .privacy-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(20, 210, 160, 0.18);
}

.page-privacy h1 {
  margin: 18px 0 0;
  max-width: 19ch;
  font-size: clamp(30px, 6.4vw, 56px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-privacy .privacy-lede {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.82;
  color: var(--privacy-body);
}

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

.page-privacy .privacy-hero-side {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.page-privacy .privacy-quick {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px;
  border: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(16, 38, 63, 0.95), rgba(8, 24, 43, 0.82));
}

.page-privacy .privacy-quick-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-privacy .privacy-quick-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-privacy .privacy-quick-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
  color: var(--privacy-body);
}

.page-privacy .privacy-quick-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
}

.page-privacy .privacy-figure {
  margin: clamp(26px, 4vw, 44px) auto 0;
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

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

/* ---------- Layout ---------- */

.page-privacy .privacy-body {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  padding-block: clamp(34px, 6vw, 68px) clamp(48px, 8vw, 96px);
}

/* ---------- TOC ---------- */

.page-privacy .privacy-toc {
  border-top: 1px solid var(--steel);
  padding-top: 14px;
}

.page-privacy .privacy-toc-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-privacy .privacy-toc-list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-privacy .privacy-toc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: var(--line);
  border-radius: 999px;
  background: var(--privacy-sunken);
  color: var(--privacy-body);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-privacy .privacy-toc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--electro);
}

.page-privacy .privacy-toc-link:hover,
.page-privacy .privacy-toc-link:focus-visible {
  border-color: var(--orange);
  color: var(--ink);
  transform: translateY(-2px);
  outline: none;
}

/* ---------- Sections ---------- */

.page-privacy .privacy-articles {
  display: grid;
  gap: clamp(16px, 2.6vw, 24px);
  min-width: 0;
}

.page-privacy .privacy-sec {
  border: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 38, 63, 0.92), rgba(8, 24, 43, 0.74));
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.page-privacy .privacy-sec:target {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 106, 19, 0.35);
}

.page-privacy .privacy-sec-sum {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(15px, 2.4vw, 22px) clamp(16px, 2.6vw, 26px);
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.page-privacy .privacy-sec-sum::-webkit-details-marker {
  display: none;
}

.page-privacy .privacy-sec[open] > .privacy-sec-sum {
  border-bottom-color: var(--steel);
}

.page-privacy .privacy-sec-sum:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -3px;
}

.page-privacy .privacy-sec-num {
  flex: none;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-privacy .privacy-sec:nth-of-type(2) .privacy-sec-num { background: var(--electro); }
.page-privacy .privacy-sec:nth-of-type(3) .privacy-sec-num { background: var(--mint); }
.page-privacy .privacy-sec:nth-of-type(4) .privacy-sec-num { background: var(--amber); }
.page-privacy .privacy-sec:nth-of-type(5) .privacy-sec-num { background: var(--electro); }
.page-privacy .privacy-sec:nth-of-type(6) .privacy-sec-num { background: var(--mint); }

.page-privacy .privacy-sec-title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 160ms ease;
}

.page-privacy .privacy-sec-sum:hover .privacy-sec-title {
  color: var(--orange-soft);
}

.page-privacy .privacy-sec-caret {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: var(--line);
  border-radius: 50%;
}

.page-privacy .privacy-sec-caret::before,
.page-privacy .privacy-sec-caret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--muted);
}

.page-privacy .privacy-sec-caret::before {
  width: 10px;
  height: 2px;
}

.page-privacy .privacy-sec-caret::after {
  width: 2px;
  height: 10px;
  transition: opacity 160ms ease;
}

.page-privacy .privacy-sec[open] .privacy-sec-caret::after {
  opacity: 0;
}

.page-privacy .privacy-sec-body {
  padding: clamp(18px, 2.8vw, 26px) clamp(16px, 2.6vw, 26px) clamp(22px, 3vw, 30px);
}

.page-privacy .privacy-sec-body > p {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--privacy-body);
}

.page-privacy .privacy-sec-body > p:last-child {
  margin-bottom: 0;
}

/* ---------- Fact list ---------- */

.page-privacy .privacy-facts {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-privacy .privacy-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 15px 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-sunken);
}

.page-privacy .privacy-check {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1px solid var(--mint);
  border-radius: 50%;
}

.page-privacy .privacy-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(40deg);
}

.page-privacy .privacy-fact h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.page-privacy .privacy-fact p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- Steps ---------- */

.page-privacy .privacy-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-privacy .privacy-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--steel);
}

.page-privacy .privacy-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-privacy .privacy-step-idx {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--electro);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--electro);
}

.page-privacy .privacy-step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.page-privacy .privacy-step p {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- Note ---------- */

.page-privacy .privacy-note {
  margin: 18px 0 0;
  max-width: 68ch;
  padding: 14px 18px;
  border-left: 3px solid var(--mint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(20, 210, 160, 0.08);
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- Shields ---------- */

.page-privacy .privacy-shields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.page-privacy .privacy-shield {
  padding: 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-panel);
}

.page-privacy .privacy-shield h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--electro);
}

.page-privacy .privacy-shield p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- Terms ---------- */

.page-privacy .privacy-terms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0 0;
}

.page-privacy .privacy-term {
  padding: 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-sunken);
}

.page-privacy .privacy-term dt {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mint);
}

.page-privacy .privacy-term dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- Contact ---------- */

.page-privacy .privacy-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.page-privacy .privacy-contact-item {
  padding: 14px 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-panel);
}

.page-privacy .privacy-contact-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-privacy .privacy-contact-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}

.page-privacy .privacy-contact-note {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- Next links ---------- */

.page-privacy .privacy-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(6px, 1.6vw, 14px);
}

.page-privacy .privacy-next-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(16, 38, 63, 0.9), rgba(8, 24, 43, 0.7));
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.page-privacy .privacy-next-card:hover,
.page-privacy .privacy-next-card:focus-visible {
  border-color: var(--orange);
  transform: translateY(-2px);
  outline: none;
}

.page-privacy .privacy-next-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-privacy .privacy-next-card strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.page-privacy .privacy-next-card > span:last-child {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Responsive ---------- */

@media (min-width: 700px) {
  .page-privacy .privacy-shields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 900px) {
  .page-privacy .privacy-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  }
}

@media (min-width: 1000px) {
  .page-privacy .privacy-body {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    align-items: start;
  }

  .page-privacy .privacy-toc {
    position: sticky;
    top: 96px;
  }

  .page-privacy .privacy-toc-list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-privacy .privacy-toc-link {
    width: 100%;
    border-radius: var(--radius-sm);
    white-space: normal;
  }

  .page-privacy .privacy-sec-body {
    padding-left: clamp(24px, 2.6vw, 32px);
  }
}
</final_thought>
<<<END>>>

等等，我得确认一下标记输出没有多余内容。正式输出格式必须是：


...

...

不能有别的文字。好了，现在写最终答案。我再检查一下：

1.  h1 只出现一次 ✓
2.  所有锚点都能对应到实际 id ✓（privacy-scope、privacy-usage、privacy-sync、privacy-security、privacy-rights、privacy-contact）
3.  站内链接都指向实际路由 ✓（/、/inquiry/、/questions/、/agreement/）
4.  图片只有一张，格式正确 ✓
5.  data-reveal 在 hero 里用了 ✓，它属于允许的协议
6.  page_css 所有选择器都限定在 .page-privacy 下 ✓
7.  没有任何 :root、html、body 这类选择器 ✓
8.  只用了现有的变量，另外定义了几个作用域内的新变量 ✓
9.  移动端优先，带媒体查询 ✓
10. 没有禁用词 ✓

再仔细想想：“不以网站自身为主角”——我检查一下我的内容。每个部分的标题讲的是用户自己的信息，这没问题，因为它就是隐私政策页面。这本身是合理的业务主题。

检查禁用短语：“本页目录”没问题（只是个导航标签）。“本页目录”算不算说明网站自身结构？还好，就是普通的导航标签。

嗯，规则说“不要向访客交代本站的内容是怎么整理的”——“本页目录”是个常见导航元素，没问题。

还有“三句话速览”——可以。

看一下“这四类只在对应场景出现，用不到的地方不会多收你一样东西”——这种口吻是在告诉用户我们会收什么，这是可以接受的隐私描述。

好。数字也检查一下：240 余款、12 个一级分类、68 个二级标签、5000 条、2.4.1、380 万、48 人、ISO 27001、6 小时 ✓，都对得上 allowed_facts。

等等——有没有哪里写了“每日三个批次”？在盾牌那张卡里写了“每日三个批次同步更新” ✓，对得上。

结尾处的品牌名在 hero 的 h1 里自然出现了 ✓。

好，输出吧。

还有一个问题：`<details>` 里放 `<h2>` 这个结构——`.privacy-sec-sum` 这个类用到了，但 `site_kit` 里并没有列出来；它是页面级的，所以得在 `.page-privacy` 里定义 ✓，我已经定义了。

还有 `.privacy-sec-caret` ✓、`.privacy-quick` ✓ 等等，都定义好了。

`site_kit` 里的全局类用到了：wrap ✓、breadcrumb ✓、breadcrumb-item ✓、btn ✓、btn--primary ✓、btn--ghost ✓、annotation-v ✓。可以用。

`data-reveal` ✓。

输出。
<main id="main-content" class="page-privacy">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="页面位置">
      <span class="breadcrumb-item"><a href="/">首页</a></span>
      <span class="breadcrumb-item">个人信息说明</span>
    </nav>
  </div>

  <section class="privacy-hero" aria-labelledby="privacy-title">
    <div class="wrap privacy-hero-inner" data-reveal>
      <div class="privacy-hero-main">
        <p class="privacy-kicker"><span class="privacy-kicker-dot" aria-hidden="true"></span>信息说明 · 客户端 2.4.1</p>
        <h1 id="privacy-title">你在九博体育CN 留下的信息，用在哪、放在哪</h1>
        <p class="privacy-lede">注册一个账号、收藏几条内容、换台手机接着看——这几步都会用到一些和你有关的信息。下面把用到的范围、经过的环节、存放的方式，以及你能做的选择逐条讲明白，让你在开启跨设备同步或者导出收藏之前，先看清楚再动手。</p>
        <div class="privacy-hero-actions">
          <a class="btn btn--primary" href="/inquiry/">提交信息相关请求</a>
          <a class="btn btn--ghost" href="/questions/">先看常见问题</a>
        </div>
      </div>
      <aside class="privacy-hero-side">
        <span class="annotation-v">信息说明 · 客户端 2.4.1</span>
        <div class="privacy-quick">
          <p class="privacy-quick-title">三句话速览</p>
          <ul class="privacy-quick-list">
            <li><span class="privacy-quick-num">01</span>登录后才开启跨设备同步</li>
            <li><span class="privacy-quick-num">02</span>单次最多导出 5000 条记录</li>
            <li><span class="privacy-quick-num">03</span>留言在工作时段 6 小时内回应</li>
          </ul>
        </div>
      </aside>
    </div>

    <figure class="wrap privacy-figure">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深蓝色背景上由细线围合的数据块轮廓，边缘以电光蓝描边，中心是一枚青绿光点">
    </figure>
  </section>

  <div class="wrap privacy-body">
    <nav class="privacy-toc" aria-labelledby="privacy-toc-title">
      <p id="privacy-toc-title" class="privacy-toc-title">本页目录</p>
      <ol class="privacy-toc-list">
        <li><a class="privacy-toc-link" href="#privacy-scope"><span class="privacy-toc-num">01</span>用到的信息</a></li>
        <li><a class="privacy-toc-link" href="#privacy-usage"><span class="privacy-toc-num">02</span>使用环节</a></li>
        <li><a class="privacy-toc-link" href="#privacy-sync"><span class="privacy-toc-num">03</span>跨设备同步</a></li>
        <li><a class="privacy-toc-link" href="#privacy-security"><span class="privacy-toc-num">04</span>存储与安全</a></li>
        <li><a class="privacy-toc-link" href="#privacy-rights"><span class="privacy-toc-num">05</span>你的选择</a></li>
        <li><a class="privacy-toc-link" href="#privacy-contact"><span class="privacy-toc-num">06</span>联系我们</a></li>
      </ol>
    </nav>

    <div class="privacy-articles">
      <details class="privacy-sec" id="privacy-scope" open>
        <summary class="privacy-sec-sum">
          <span class="privacy-sec-num">01</span>
          <h2 class="privacy-sec-title">注册和登录会用到哪些信息</h2>
          <span class="privacy-sec-caret" aria-hidden="true"></span>
        </summary>
        <div class="privacy-sec-body">
          <p>你在九博体育CN 上做的事不同，涉及的信息也就不同。下面这四类只在对应场景出现，用不到的地方不会多收你一样东西。</p>
          <ul class="privacy-facts">
            <li class="privacy-fact">
              <span class="privacy-check" aria-hidden="true"></span>
              <div>
                <h3>账号与登录凭证</h3>
                <p>注册时填写的账号标识和密码摘要，用来确认这次登录的是你本人。找回账号时会用到你预留的联系方式，仅用于发出验证信息。</p>
              </div>
            </li>
            <li class="privacy-fact">
              <span class="privacy-check" aria-hidden="true"></span>
              <div>
                <h3>设备与运行环境</h3>
                <p>手机型号、系统版本与运行内存，用来对照适配清单里那 240 余款机型的匹配情况，判断你的设备能不能顺畅跑起客户端；同时记录当前客户端版本号，方便排查显示或导出异常。</p>
              </div>
            </li>
            <li class="privacy-fact">
              <span class="privacy-check" aria-hidden="true"></span>
              <div>
                <h3>收藏与浏览轨迹</h3>
                <p>你收进收藏夹的条目、常看的联赛与分类。这些内容决定了换台设备登录之后，你的列表能不能原样接回来。</p>
              </div>
            </li>
            <li class="privacy-fact">
              <span class="privacy-check" aria-hidden="true"></span>
              <div>
                <h3>反馈与沟通内容</h3>
                <p>从页面底部反馈入口提交的问题描述，以及你为了收到回复留下的联系方式。写清楚遇到的情况，我们定位问题会快很多。</p>
              </div>
            </li>
          </ul>
        </div>
      </details>

      <details class="privacy-sec" id="privacy-usage" open>
        <summary class="privacy-sec-sum">
          <span class="privacy-sec-num">02</span>
          <h2 class="privacy-sec-title">这些信息落在哪些环节里</h2>
          <span class="privacy-sec-caret" aria-hidden="true"></span>
        </summary>
        <div class="privacy-sec-body">
          <p>信息不是收来放着，而是有几处明确的用途。你能直接感受到的，多半是前两件。</p>
          <ol class="privacy-steps">
            <li class="privacy-step">
              <span class="privacy-step-idx">A</span>
              <div>
                <h3>把常看的内容放顺手</h3>
                <p>主页分类导航有 12 个一级分类和 68 个二级标签。你平时点得多的方向，会在下次进站时排在更容易够到的位置，少翻几层。</p>
              </div>
            </li>
            <li class="privacy-step">
              <span class="privacy-step-idx">B</span>
              <div>
                <h3>换台设备还能接着看</h3>
                <p>账号登录之后，收藏和浏览记录在手机与电脑之间对得上，不用重新一条条找回来。</p>
              </div>
            </li>
            <li class="privacy-step">
              <span class="privacy-step-idx">C</span>
              <div>
                <h3>出问题时能查得下去</h3>
                <p>导出跑到一半断了、同步迟迟不出现，这类情况需要设备型号、客户端版本和操作时间做线索，才能还原出问题出在哪一步。</p>
              </div>
            </li>
            <li class="privacy-step">
              <span class="privacy-step-idx">D</span>
              <div>
                <h3>看清整体内容的走向</h3>
                <p>380 万注册用户在看什么方向、哪类赛事条目被收藏得多，这类判断来自汇总后的走势，不落到某一个人身上。</p>
              </div>
            </li>
          </ol>
        </div>
      </details>

      <details class="privacy-sec" id="privacy-sync" open>
        <summary class="privacy-sec-sum">
          <span class="privacy-sec-num">03</span>
          <h2 class="privacy-sec-title">换设备时，收藏和记录怎么走</h2>
          <span class="privacy-sec-caret" aria-hidden="true"></span>
        </summary>
        <div class="privacy-sec-body">
          <p>手机换新、电脑上也想接着看，同一账号登录即可。你在旧设备上收下的条目会在登录后回到列表里，不用额外操作，也不用截图保存。</p>
          <p>需要带走的时候，收藏导出支持 CSV 与 JSON 两种格式，单次最多 5000 条记录。导出的文件落在你自己选定的本机目录，归你保管；服务端留的是用于同步的那份副本，你把收藏清空或注销账号之后，它就不再参与同步。</p>
          <p class="privacy-note">客户端 2.4.1 优化了导出通道，同样一次导出 5000 条记录，平均耗时比上一版本缩短了约三成。记录多的时候，这个差别最明显。</p>
        </div>
      </details>

      <details class="privacy-sec" id="privacy-security" open>
        <summary class="privacy-sec-sum">
          <span class="privacy-sec-num">04</span>
          <h2 class="privacy-sec-title">存放在哪里，靠什么护着</h2>
          <span class="privacy-sec-caret" aria-hidden="true"></span>
        </summary>
        <div class="privacy-sec-body">
          <p>从你点下登录那一刻起，信息在传输途中就是加密的，中途抓不到明文。落到存储这一层，防护手段是这几样。</p>
          <div class="privacy-shields">
            <div class="privacy-shield">
              <h3>信息安全体系认证</h3>
              <p>平台已通过 ISO 27001 信息安全管理体系认证，围绕信息资产的访问、变更与留存都有成文流程在跑，不是靠个人习惯兜底。</p>
            </div>
            <div class="privacy-shield">
              <h3>按岗位开权限</h3>
              <p>48 人的团队里，只有工作需要的人才能接触到相应信息，接触范围跟着岗位走；岗位变了，权限同步调整。</p>
            </div>
            <div class="privacy-shield">
              <h3>内容与个人信息分开</h3>
              <p>公开的赛事条目每日三个批次同步更新，和个人信息分开存放，做内容更新的人碰不到你的账号数据。</p>
            </div>
            <div class="privacy-shield">
              <h3>异常操作可回溯</h3>
              <p>涉及个人信息的操作留有记录，出现问题能倒查是哪一步、由谁触发，处置起来不靠猜。</p>
            </div>
          </div>
        </div>
      </details>

      <details class="privacy-sec" id="privacy-rights" open>
        <summary class="privacy-sec-sum">
          <span class="privacy-sec-num">05</span>
          <h2 class="privacy-sec-title">你能查、能改、能删哪些</h2>
          <span class="privacy-sec-caret" aria-hidden="true"></span>
        </summary>
        <div class="privacy-sec-body">
          <p>账号里的东西归你处置，下面这几件事都可以自己发起，不需要绕圈子。</p>
          <dl class="privacy-terms">
            <div class="privacy-term">
              <dt>查询你能看到的信息</dt>
              <dd>账号资料、收藏列表、导出记录都在设置入口里，登录后随时打开就能看到当前状态。</dd>
            </div>
            <div class="privacy-term">
              <dt>更正填错的内容</dt>
              <dd>昵称、预留的联系方式写错了，直接在设置里改，改完下一次同步就以新的为准。</dd>
            </div>
            <div class="privacy-term">
              <dt>清空收藏与导出文件</dt>
              <dd>收藏可以逐条移除，也可以整体清空。已经导到本机的那份文件由你自己保管和删除。</dd>
            </div>
            <div class="privacy-term">
              <dt>只用一台设备</dt>
              <dd>不打算跨设备来回切换，可以不开同步，收藏就只留在这台设备上，一样能导出带走。</dd>
            </div>
            <div class="privacy-term">
              <dt>注销账号</dt>
              <dd>决定不再使用，提交注销后账号进入处理流程，收藏与同步副本一并失效，此前的导出文件不受影响。</dd>
            </div>
            <div class="privacy-term">
              <dt>追问不清楚的地方</dt>
              <dd>对某条信息的用途有疑问，写清楚你指的是哪一项，我们会说明它出现在哪个环节、为什么需要。</dd>
            </div>
          </dl>
        </div>
      </details>

      <details class="privacy-sec" id="privacy-contact" open>
        <summary class="privacy-sec-sum">
          <span class="privacy-sec-num">06</span>
          <h2 class="privacy-sec-title">有疑问时怎么找到我们</h2>
          <span class="privacy-sec-caret" aria-hidden="true"></span>
        </summary>
        <div class="privacy-sec-body">
          <p>信息相关的查询、更正、删除请求，走下面任一条通道都可以，说清楚你要办的事情即可。</p>
          <div class="privacy-contact-grid">
            <div class="privacy-contact-item">
              <p class="privacy-contact-label">客服邮箱</p>
              <p class="privacy-contact-value">info@future-jiubo.com.cn</p>
            </div>
            <div class="privacy-contact-item">
              <p class="privacy-contact-label">电话</p>
              <p class="privacy-contact-value">13725256298</p>
            </div>
            <div class="privacy-contact-item">
              <p class="privacy-contact-label">函件往来</p>
              <p class="privacy-contact-value">广西省南宁市青秀区民族大道123号</p>
            </div>
          </div>
          <p class="privacy-contact-note">这个邮箱平时承接使用问题与商务洽谈两类来信，电话在工作时段有人接听。懒得写邮件的时候，页面底部的反馈入口随时留言就行，工作时段平均 6 小时内回应，当前版本号 2.4.1 也显示在那里。</p>
        </div>
      </details>

      <div class="privacy-next">
        <a class="privacy-next-card" href="/agreement/">
          <span class="privacy-next-tag">相关文件</span>
          <strong>使用协议</strong>
          <span>账号规则、内容使用方式与客户端更新约定</span>
        </a>
        <a class="privacy-next-card" href="/questions/">
          <span class="privacy-next-tag">操作问题</span>
          <strong>问答中心</strong>
          <span>收藏导出、跨设备登录与分类查找的常见疑问</span>
        </a>
        <a class="privacy-next-card" href="/inquiry/">
          <span class="privacy-next-tag">直接联系</span>
          <strong>咨询通道</strong>
          <span>客服与商务合作的对接方式与响应时效</span>
        </a>
      </div>
    </div>
  </div>
</main>

.page-privacy {
  --privacy-body: #C6D6E7;
  --privacy-panel: rgba(16, 38, 63, 0.85);
  --privacy-sunken: rgba(8, 24, 43, 0.62);
  display: block;
  background:
    radial-gradient(1100px 560px at 90% -6%, rgba(255, 106, 19, 0.16), transparent 62%),
    radial-gradient(880px 500px at 2% 4%, rgba(20, 210, 160, 0.11), transparent 64%),
    var(--navy);
  color: var(--ink);
}

.page-privacy .breadcrumb {
  padding-top: clamp(16px, 3vw, 26px);
}

/* ---------- 首屏 ---------- */

.page-privacy .privacy-hero {
  padding-top: clamp(28px, 5vw, 52px);
}

.page-privacy .privacy-hero-inner {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-items: end;
}

.page-privacy .privacy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border: var(--line);
  border-radius: 999px;
  background: rgba(16, 38, 63, 0.7);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--electro);
}

.page-privacy .privacy-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(20, 210, 160, 0.18);
}

.page-privacy h1 {
  margin: 18px 0 0;
  max-width: 19ch;
  font-size: clamp(30px, 6.4vw, 56px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-privacy .privacy-lede {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.82;
  color: var(--privacy-body);
}

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

.page-privacy .privacy-hero-side {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.page-privacy .privacy-quick {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px;
  border: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(16, 38, 63, 0.95), rgba(8, 24, 43, 0.82));
}

.page-privacy .privacy-quick-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-privacy .privacy-quick-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-privacy .privacy-quick-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
  color: var(--privacy-body);
}

.page-privacy .privacy-quick-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
}

.page-privacy .privacy-figure {
  margin: clamp(26px, 4vw, 44px) auto 0;
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

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

/* ---------- 页面骨架 ---------- */

.page-privacy .privacy-body {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  padding-block: clamp(34px, 6vw, 68px) clamp(48px, 8vw, 96px);
}

/* ---------- 锚点目录 ---------- */

.page-privacy .privacy-toc {
  border-top: 1px solid var(--steel);
  padding-top: 14px;
}

.page-privacy .privacy-toc-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-privacy .privacy-toc-list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-privacy .privacy-toc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: var(--line);
  border-radius: 999px;
  background: var(--privacy-sunken);
  color: var(--privacy-body);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-privacy .privacy-toc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--electro);
}

.page-privacy .privacy-toc-link:hover,
.page-privacy .privacy-toc-link:focus-visible {
  border-color: var(--orange);
  color: var(--ink);
  transform: translateY(-2px);
  outline: none;
}

/* ---------- 章节 ---------- */

.page-privacy .privacy-articles {
  display: grid;
  gap: clamp(16px, 2.6vw, 24px);
  min-width: 0;
}

.page-privacy .privacy-sec {
  border: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 38, 63, 0.92), rgba(8, 24, 43, 0.74));
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.page-privacy .privacy-sec:target {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 106, 19, 0.35);
}

.page-privacy .privacy-sec-sum {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(15px, 2.4vw, 22px) clamp(16px, 2.6vw, 26px);
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.page-privacy .privacy-sec-sum::-webkit-details-marker {
  display: none;
}

.page-privacy .privacy-sec[open] > .privacy-sec-sum {
  border-bottom-color: var(--steel);
}

.page-privacy .privacy-sec-sum:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -3px;
}

.page-privacy .privacy-sec-num {
  flex: none;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-privacy .privacy-sec:nth-of-type(2) .privacy-sec-num { background: var(--electro); }
.page-privacy .privacy-sec:nth-of-type(3) .privacy-sec-num { background: var(--mint); }
.page-privacy .privacy-sec:nth-of-type(4) .privacy-sec-num { background: var(--amber); }
.page-privacy .privacy-sec:nth-of-type(5) .privacy-sec-num { background: var(--electro); }
.page-privacy .privacy-sec:nth-of-type(6) .privacy-sec-num { background: var(--mint); }

.page-privacy .privacy-sec-title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 160ms ease;
}

.page-privacy .privacy-sec-sum:hover .privacy-sec-title {
  color: var(--orange-soft);
}

.page-privacy .privacy-sec-caret {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: var(--line);
  border-radius: 50%;
}

.page-privacy .privacy-sec-caret::before,
.page-privacy .privacy-sec-caret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--muted);
}

.page-privacy .privacy-sec-caret::before {
  width: 10px;
  height: 2px;
}

.page-privacy .privacy-sec-caret::after {
  width: 2px;
  height: 10px;
  transition: opacity 160ms ease;
}

.page-privacy .privacy-sec[open] .privacy-sec-caret::after {
  opacity: 0;
}

.page-privacy .privacy-sec-body {
  padding: clamp(18px, 2.8vw, 26px) clamp(16px, 2.6vw, 26px) clamp(22px, 3vw, 30px);
}

.page-privacy .privacy-sec-body > p {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--privacy-body);
}

.page-privacy .privacy-sec-body > p:last-child {
  margin-bottom: 0;
}

/* ---------- 信息条目 ---------- */

.page-privacy .privacy-facts {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-privacy .privacy-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 15px 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-sunken);
}

.page-privacy .privacy-check {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1px solid var(--mint);
  border-radius: 50%;
}

.page-privacy .privacy-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(40deg);
}

.page-privacy .privacy-fact h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.page-privacy .privacy-fact p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- 使用环节 ---------- */

.page-privacy .privacy-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-privacy .privacy-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--steel);
}

.page-privacy .privacy-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-privacy .privacy-step-idx {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--electro);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--electro);
}

.page-privacy .privacy-step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.page-privacy .privacy-step p {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- 提示条 ---------- */

.page-privacy .privacy-note {
  margin: 18px 0 0;
  max-width: 68ch;
  padding: 14px 18px;
  border-left: 3px solid var(--mint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(20, 210, 160, 0.08);
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- 安全措施 ---------- */

.page-privacy .privacy-shields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.page-privacy .privacy-shield {
  padding: 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-panel);
}

.page-privacy .privacy-shield h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--electro);
}

.page-privacy .privacy-shield p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- 权利条目 ---------- */

.page-privacy .privacy-terms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0 0;
}

.page-privacy .privacy-term {
  padding: 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-sunken);
}

.page-privacy .privacy-term dt {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mint);
}

.page-privacy .privacy-term dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--privacy-body);
}

/* ---------- 联系方式 ---------- */

.page-privacy .privacy-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.page-privacy .privacy-contact-item {
  padding: 14px 16px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--privacy-panel);
}

.page-privacy .privacy-contact-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-privacy .privacy-contact-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}

.page-privacy .privacy-contact-note {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- 延伸入口 ---------- */

.page-privacy .privacy-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(6px, 1.6vw, 14px);
}

.page-privacy .privacy-next-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(16, 38, 63, 0.9), rgba(8, 24, 43, 0.7));
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.page-privacy .privacy-next-card:hover,
.page-privacy .privacy-next-card:focus-visible {
  border-color: var(--orange);
  transform: translateY(-2px);
  outline: none;
}

.page-privacy .privacy-next-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-privacy .privacy-next-card strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.page-privacy .privacy-next-card > span:last-child {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */

@media (min-width: 700px) {
  .page-privacy .privacy-shields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 900px) {
  .page-privacy .privacy-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  }
}

@media (min-width: 1000px) {
  .page-privacy .privacy-body {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    align-items: start;
  }

  .page-privacy .privacy-toc {
    position: sticky;
    top: 96px;
  }

  .page-privacy .privacy-toc-list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-privacy .privacy-toc-link {
    width: 100%;
    border-radius: var(--radius-sm);
    white-space: normal;
  }

  .page-privacy .privacy-sec-body {
    padding-left: clamp(24px, 2.6vw, 32px);
  }
}