.page-privacy {
  --pv-toc-w: 220px;
  --pv-gap: clamp(40px, 6vw, 88px);
  background: var(--paper);
  color: var(--ink);
}

.page-privacy .privacy-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 82% -10%, rgba(224, 138, 60, 0.24), transparent 55%),
    linear-gradient(155deg, var(--ink-night) 0%, var(--ink-dusk) 58%, var(--turq) 132%);
  color: var(--paper);
  padding: clamp(40px, 5vw, 76px) 0 clamp(44px, 6vw, 84px);
}

.page-privacy .privacy-hero::before {
  content: "";
  position: absolute;
  inset: auto auto -46% -14%;
  width: 62%;
  height: 96%;
  background: radial-gradient(closest-side, rgba(30, 111, 107, 0.5), transparent 72%);
  pointer-events: none;
}

.page-privacy .privacy-hero::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 18%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 138, 60, 0.5), rgba(224, 138, 60, 0) 72%);
  pointer-events: none;
}

.page-privacy .privacy-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-privacy .privacy-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--turq-mist);
}

.page-privacy .privacy-hero__code {
  padding-left: 14px;
  border-left: 1px solid rgba(168, 207, 201, 0.4);
}

.page-privacy .privacy-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 15em;
}

.page-privacy .privacy-hero__lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.78;
  color: rgba(244, 238, 227, 0.88);
}

.page-privacy .privacy-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-a) var(--radius-b) var(--radius-a) var(--radius-b);
  box-shadow: 0 26px 48px -26px rgba(0, 0, 0, 0.65);
}

.page-privacy .privacy-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 26, 51, 0) 42%, rgba(19, 26, 51, 0.6) 100%);
  pointer-events: none;
}

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

.page-privacy .privacy-body {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  max-width: 1180px;
  margin: 0 auto;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.page-privacy .privacy-toc {
  padding: 18px 18px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(168, 207, 201, 0.6);
  border-radius: var(--radius-b);
}

.page-privacy .privacy-toc__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--turq);
}

.page-privacy .privacy-toc__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-privacy .privacy-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-privacy .privacy-toc__list a:hover,
.page-privacy .privacy-toc__list a:focus-visible {
  color: var(--ink-night);
  background: rgba(168, 207, 201, 0.32);
  border-left-color: var(--amber);
  outline: none;
}

.page-privacy .privacy-toc__num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--turq);
}

.page-privacy .privacy-toc__foot {
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(110, 114, 128, 0.35);
  font-size: 0.82rem;
  line-height: 1.72;
  color: var(--stone);
}

.page-privacy .privacy-toc__foot a {
  color: var(--turq);
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 111, 107, 0.4);
  word-break: break-all;
}

.page-privacy .privacy-content {
  display: grid;
  gap: clamp(34px, 4.5vw, 58px);
}

.page-privacy .privacy-sec {
  scroll-margin-top: 92px;
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid rgba(168, 207, 201, 0.6);
}

.page-privacy .privacy-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.page-privacy .privacy-sec__num {
  flex: 0 0 auto;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1;
  color: var(--turq);
}

.page-privacy .privacy-sec__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.32rem, 2.4vw, 1.82rem);
  line-height: 1.36;
  color: var(--ink-night);
}

.page-privacy .privacy-sec__body {
  max-width: 36em;
  font-size: 1rem;
  line-height: 1.8;
}

.page-privacy .privacy-sec__body p {
  margin: 0 0 14px;
}

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

.page-privacy .privacy-sec__body a {
  color: var(--turq);
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 111, 107, 0.45);
  word-break: break-all;
}

.page-privacy .privacy-table-wrap {
  max-width: 100%;
  margin: 20px 0 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  border: 1px solid rgba(30, 111, 107, 0.24);
  border-radius: var(--radius-b);
}

.page-privacy .privacy-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.page-privacy .privacy-table caption {
  caption-side: top;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--turq);
  background: rgba(168, 207, 201, 0.24);
}

.page-privacy .privacy-table thead th {
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--turq);
}

.page-privacy .privacy-table tbody td {
  padding: 11px 14px;
  vertical-align: top;
  line-height: 1.6;
  border-top: 1px solid rgba(168, 207, 201, 0.45);
}

.page-privacy .privacy-table tbody tr:nth-child(even) {
  background: rgba(244, 238, 227, 0.6);
}

.page-privacy .privacy-uses {
  list-style: none;
  counter-reset: uses;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-privacy .privacy-uses li {
  position: relative;
  padding-left: 38px;
  counter-increment: uses;
}

.page-privacy .privacy-uses li::before {
  content: counter(uses, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: -0.02em;
  color: var(--ink-night);
  background: rgba(201, 162, 39, 0.22);
  border: 1px solid rgba(201, 162, 39, 0.55);
}

.page-privacy .privacy-acc {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-width: 46em;
}

.page-privacy .privacy-acc__item {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(30, 111, 107, 0.26);
  border-radius: var(--radius-b);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-privacy .privacy-acc__item[open] {
  background: #FFFFFF;
  border-color: var(--amber);
}

.page-privacy .privacy-acc__item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-night);
}

.page-privacy .privacy-acc__item summary::-webkit-details-marker {
  display: none;
}

.page-privacy .privacy-acc__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--amber);
}

.page-privacy .privacy-acc__item[open] summary::after {
  content: "−";
}

.page-privacy .privacy-acc__hint {
  margin-left: auto;
  padding: 3px 9px;
  white-space: nowrap;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--turq);
  background: rgba(30, 111, 107, 0.1);
}

.page-privacy .privacy-acc__item p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--stone);
}

.page-privacy .privacy-sec--notice {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-privacy .privacy-notice {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 34px);
  border-radius: var(--radius-a);
  background: linear-gradient(140deg, var(--ink-night) 0%, var(--ink-dusk) 100%);
  color: var(--paper);
}

.page-privacy .privacy-notice::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 138, 60, 0.38), transparent 72%);
  pointer-events: none;
}

.page-privacy .privacy-notice h2 {
  position: relative;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.12rem, 2vw, 1.38rem);
  color: var(--paper);
}

.page-privacy .privacy-notice p {
  position: relative;
  margin: 0;
  max-width: 40em;
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgba(244, 238, 227, 0.86);
}

.page-privacy .privacy-next {
  padding-top: 22px;
  border-top: 1px solid rgba(168, 207, 201, 0.6);
}

.page-privacy .privacy-next__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--turq);
}

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

.page-privacy .privacy-next li {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 111, 107, 0.22);
  border-radius: var(--radius-b);
}

.page-privacy .privacy-next a {
  font-weight: 600;
  color: var(--ink-night);
  text-decoration-color: rgba(224, 138, 60, 0.55);
  text-underline-offset: 4px;
}

.page-privacy .privacy-next a:hover {
  color: var(--turq);
}

.page-privacy .privacy-next span {
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--stone);
}

@media (min-width: 720px) {
  .page-privacy .privacy-next ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 860px) {
  .page-privacy .privacy-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    align-items: end;
  }

  .page-privacy .privacy-hero__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 960px) {
  .page-privacy .privacy-body {
    grid-template-columns: var(--pv-toc-w) minmax(0, 1fr);
    gap: var(--pv-gap);
    align-items: start;
  }

  .page-privacy .privacy-toc {
    position: sticky;
    top: 24px;
    padding: 4px 0 4px 18px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(168, 207, 201, 0.7);
    border-radius: 0;
  }

  .page-privacy .privacy-sec__head {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .privacy-toc__list a,
  .page-privacy .privacy-acc__item {
    transition: none;
  }
}


<main id="main-content" class="page-privacy">
  <div class="container">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">数据与隐私</li>
      </ol>
    </nav>
  </div>

  <header class="privacy-hero">
    <div class="container privacy-hero__inner">
      <div class="privacy-hero__text">
        <p class="privacy-hero__eyebrow">
          <span class="tag tag--amber">隐私说明</span>
          <span class="privacy-hero__code">DOC · PRIVACY</span>
        </p>
        <h1>报名之前，先看清信息去了哪里</h1>
        <p class="privacy-hero__lede">
          在鼎利娱乐会馆登录账号、提交活动报名或写信咨询时，会留下几项必要信息。下面用六段短说明，讲清我们记哪些、记来做什么、留多久，以及您怎样让我们更正或删除。
        </p>
      </div>
      <figure class="privacy-hero__media">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深靛蓝夜空上散布细密金色光点、右下角一团柔和暖橙光晕的抽象纹理">
      </figure>
    </div>
  </header>

  <div class="container privacy-body">
    <aside class="privacy-toc" aria-label="章节导航">
      <p class="privacy-toc__title">章节</p>
      <ol class="privacy-toc__list">
        <li><a href="#scope"><span class="privacy-toc__num">01</span><span>适用范围</span></a></li>
        <li><a href="#collect"><span class="privacy-toc__num">02</span><span>您会提供的信息</span></a></li>
        <li><a href="#purpose"><span class="privacy-toc__num">03</span><span>信息如何使用</span></a></li>
        <li><a href="#retention"><span class="privacy-toc__num">04</span><span>保存多久</span></a></li>
        <li><a href="#cookies"><span class="privacy-toc__num">05</span><span>Cookie 与统计</span></a></li>
        <li><a href="#choices"><span class="privacy-toc__num">06</span><span>查询与删除</span></a></li>
      </ol>
      <p class="privacy-toc__foot">
        有具体顾虑，可以写信到 <a href="mailto:contact@dingli-joy.com.cn">contact@dingli-joy.com.cn</a>，工作日 10:00-19:00 内有人回复。
      </p>
    </aside>

    <div class="privacy-content">
      <section id="scope" class="privacy-sec" data-reveal>
        <header class="privacy-sec__head">
          <span class="section-index privacy-sec__num">01</span>
          <h2>从浏览页面到写下咨询，都在这段说明里</h2>
        </header>
        <div class="privacy-sec__body prose">
          <p>您在本站浏览演出与团体包场信息、登录账号查看报名记录、为某个演出季填写报名表，或者写信洽谈合作，都会产生一些与您有关的信息。</p>
          <p>上面这四种情形都属于本篇的说明范围。线下到访会馆时，现场另有场地须知与座位引导，不在这段内容之内。</p>
          <p>如果您通过驻场团队或合作团体的渠道代为报名，对方也会收到您留下的联系方式。递交之前，建议先问清楚对方会怎么使用这些信息。</p>
        </div>
      </section>

      <section id="collect" class="privacy-sec" data-reveal>
        <header class="privacy-sec__head">
          <span class="section-index privacy-sec__num">02</span>
          <h2>您会提供哪些信息</h2>
        </header>
        <div class="privacy-sec__body prose">
          <p>信息分三组：账号信息、报名信息、访问与统计信息。前两组由您主动填写，第三组在您浏览页面时自动生成。</p>
        </div>
        <div class="privacy-table-wrap" role="region" aria-label="信息类型与是否必填对照表" tabindex="0">
          <table class="privacy-table">
            <caption>信息类型对照</caption>
            <thead>
              <tr>
                <th scope="col">信息项</th>
                <th scope="col">所属分组</th>
                <th scope="col">是否必填</th>
                <th scope="col">用来做什么</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>手机号</td>
                <td>账号信息</td>
                <td>必填</td>
                <td>接收验证码、找回账号、核对身份</td>
              </tr>
              <tr>
                <td>昵称</td>
                <td>账号信息</td>
                <td>选填</td>
                <td>在报名记录里显示称呼</td>
              </tr>
              <tr>
                <td>头像</td>
                <td>账号信息</td>
                <td>选填</td>
                <td>方便您在账号栏里认出自己</td>
              </tr>
              <tr>
                <td>姓名与联系电话</td>
                <td>报名信息</td>
                <td>必填</td>
                <td>现场核对入场、紧急情况联系</td>
              </tr>
              <tr>
                <td>同行人数与同行人姓名</td>
                <td>报名信息</td>
                <td>人数必填；姓名为选填</td>
                <td>预留座位、安排同伴一同入场</td>
              </tr>
              <tr>
                <td>特殊需求备注</td>
                <td>报名信息</td>
                <td>选填</td>
                <td>无障碍通道、儿童随行等现场安排</td>
              </tr>
              <tr>
                <td>页面停留与点击记录</td>
                <td>访问统计</td>
                <td>自动生成</td>
                <td>了解信息是否好找，改进版面</td>
              </tr>
              <tr>
                <td>设备类型与大致城市</td>
                <td>访问统计</td>
                <td>自动生成</td>
                <td>判断访问渠道，决定在哪端优先优化</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="privacy-sec__body prose">
          <p>选填项留空不影响报名提交。必填项如果空缺，我们会无法确认入场并联系到您，报名不会进入处理流程。</p>
        </div>
      </section>

      <section id="purpose" class="privacy-sec" data-reveal>
        <header class="privacy-sec__head">
          <span class="section-index privacy-sec__num">03</span>
          <h2>每一项信息都对应一个具体动作</h2>
        </header>
        <div class="privacy-sec__body prose">
          <ul class="privacy-uses">
            <li>确认报名：使用姓名与联系电话，在提交后 24 小时内与您核对场次与人数。</li>
            <li>发送回看链接：通过账号绑定的手机号推送点播内容，回看保留 90 天。</li>
            <li>回复咨询：使用您来信时留下的联系方式，在工作日 10:00-19:00 内回复邮件。</li>
            <li>改进页面操作：只查看匿名的访问统计，用于调整按钮位置与信息排布。</li>
            <li>团体与企业包场：使用单位名称与对接人信息，安排场地、灯光、音响与导览配置。</li>
          </ul>
          <p>我们不会把这些信息用于上述目的之外的推销，也不会把您的联系方式交给演出团队或合作方用于各自的推广。</p>
        </div>
      </section>

      <section id="retention" class="privacy-sec" data-reveal>
        <header class="privacy-sec__head">
          <span class="section-index privacy-sec__num">04</span>
          <h2>保存多久与到期处理</h2>
        </header>
        <div class="privacy-sec__body prose">
          <p>不同信息对应不同期限。展开每一条可以看具体情况，到期后我们按下述方式处理。</p>
        </div>
        <div class="privacy-acc">
          <details class="privacy-acc__item">
            <summary>
              <span>账号信息</span>
              <span class="privacy-acc__hint">保留至注销</span>
            </summary>
            <p>账号存续期间保留。您申请注销后 30 天内清除该账号的手机号、昵称与头像，仅保留不关联个人的报名统计。</p>
          </details>
          <details class="privacy-acc__item">
            <summary>
              <span>报名信息</span>
              <span class="privacy-acc__hint">结束后 6 个月</span>
            </summary>
            <p>活动结束后保留 6 个月，用于核对入场与处理座次问题。期满后删除姓名、联系电话与同行人字段，只留存人数与场次汇总。</p>
          </details>
          <details class="privacy-acc__item">
            <summary>
              <span>咨询邮件</span>
              <span class="privacy-acc__hint">处理完毕后 1 年</span>
            </summary>
            <p>回复完成后保留 1 年，方便您再次来信时接上上下文。期满后删除邮件正文，只保留来信时间与主题。</p>
          </details>
          <details class="privacy-acc__item">
            <summary>
              <span>访问统计</span>
              <span class="privacy-acc__hint">滚动 13 个月</span>
            </summary>
            <p>匿名汇总的访问数据保留 13 个月，之后由新数据滚动覆盖，不单独归档。</p>
          </details>
        </div>
      </section>

      <section id="cookies" class="privacy-sec" data-reveal>
        <header class="privacy-sec__head">
          <span class="section-index privacy-sec__num">05</span>
          <h2>Cookie 与访问统计</h2>
        </header>
        <div class="privacy-sec__body prose">
          <p>本站使用三类 Cookie：登录状态、浏览偏好与匿名访问统计。登录状态用于记住您的账号，浏览偏好记住您上次看的演出季，访问统计记录页面查看与点击情况。</p>
          <p>您可以在浏览器设置里关闭 Cookie。关闭之后，看演出介绍与写信咨询照常可用，但登录状态无法保存，每次来访都要重新登录，报名与回看也会因为缺少身份识别而无法完成。</p>
          <p>如果只想关掉统计而保留登录，可以在浏览器里单独屏蔽统计脚本所在的请求，账号与报名不受影响。</p>
        </div>
      </section>

      <section id="choices" class="privacy-sec" data-reveal>
        <header class="privacy-sec__head">
          <span class="section-index privacy-sec__num">06</span>
          <h2>查询、更正与删除</h2>
        </header>
        <div class="privacy-sec__body prose">
          <p>您随时可以要求查看我们保存了哪些与您有关的信息，也可以要求更正或删除。请写信到 <a href="mailto:contact@dingli-joy.com.cn">contact@dingli-joy.com.cn</a>，在信里写明手机号后四位与需要处理的事项。</p>
          <p>我们在工作日 10:00-19:00 内回复邮件。查询与更正通常在收到请求后的三个工作日内完成；删除涉及报名记录的，会在活动结束或账号注销后按第 04 节处理。</p>
          <p>登录或报名时遇到阻碍，可以先到 <a href="/help-center/">帮助与指南</a>查看操作截图；需要即时沟通，可以从<a href="/contact-us/">联络会馆</a>或首页的客服通道进入，电话 400-6147-6806 与客服邮箱同步可用。</p>
        </div>
      </section>

      <section class="privacy-sec privacy-sec--notice" data-reveal aria-label="数据安全措施">
        <div class="privacy-notice">
          <h2>保护信息已采取的措施</h2>
          <p>我们通过服务器访问限制、传输加密与内部权限分级，让只有工作必需的人员才接触相关信息的处理。如果您对某个具体环节有疑问，写信给客服邮箱，我们会说明当前的做法。</p>
        </div>
      </section>

      <nav class="privacy-next" aria-label="相关页面">
        <p class="privacy-next__title">继续了解</p>
        <ul>
          <li><a href="/terms/">使用条款</a><span>账号使用与内容引用的约定</span></li>
          <li><a href="/help-center/">帮助与指南</a><span>登录、报名与回看的操作步骤</span></li>
          <li><a href="/contact-us/">联络会馆</a><span>电话、地址与团体洽谈入口</span></li>
        </ul>
      </nav>
    </div>
  </div>
</main>

.page-privacy {
  --pv-toc-w: 220px;
  --pv-gap: clamp(40px, 6vw, 88px);
  background: var(--paper);
  color: var(--ink);
}

.page-privacy .privacy-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 82% -10%, rgba(224, 138, 60, 0.24), transparent 55%),
    linear-gradient(155deg, var(--ink-night) 0%, var(--ink-dusk) 58%, var(--turq) 132%);
  color: var(--paper);
  padding: clamp(40px, 5vw, 76px) 0 clamp(44px, 6vw, 84px);
}

.page-privacy .privacy-hero::before {
  content: "";
  position: absolute;
  inset: auto auto -46% -14%;
  width: 62%;
  height: 96%;
  background: radial-gradient(closest-side, rgba(30, 111, 107, 0.5), transparent 72%);
  pointer-events: none;
}

.page-privacy .privacy-hero::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 18%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 138, 60, 0.5), rgba(224, 138, 60, 0) 72%);
  pointer-events: none;
}

.page-privacy .privacy-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-privacy .privacy-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--turq-mist);
}

.page-privacy .privacy-hero__code {
  padding-left: 14px;
  border-left: 1px solid rgba(168, 207, 201, 0.4);
}

.page-privacy .privacy-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 15em;
}

.page-privacy .privacy-hero__lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.78;
  color: rgba(244, 238, 227, 0.88);
}

.page-privacy .privacy-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-a) var(--radius-b) var(--radius-a) var(--radius-b);
  box-shadow: 0 26px 48px -26px rgba(0, 0, 0, 0.65);
}

.page-privacy .privacy-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 26, 51, 0) 42%, rgba(19, 26, 51, 0.6) 100%);
  pointer-events: none;
}

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

.page-privacy .privacy-body {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  max-width: 1180px;
  margin: 0 auto;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.page-privacy .privacy-toc {
  padding: 18px 18px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(168, 207, 201, 0.6);
  border-radius: var(--radius-b);
}

.page-privacy .privacy-toc__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--turq);
}

.page-privacy .privacy-toc__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-privacy .privacy-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-privacy .privacy-toc__list a:hover,
.page-privacy .privacy-toc__list a:focus-visible {
  color: var(--ink-night);
  background: rgba(168, 207, 201, 0.32);
  border-left-color: var(--amber);
  outline: none;
}

.page-privacy .privacy-toc__num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--turq);
}

.page-privacy .privacy-toc__foot {
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(110, 114, 128, 0.35);
  font-size: 0.82rem;
  line-height: 1.72;
  color: var(--stone);
}

.page-privacy .privacy-toc__foot a {
  color: var(--turq);
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 111, 107, 0.4);
  word-break: break-all;
}

.page-privacy .privacy-content {
  display: grid;
  gap: clamp(34px, 4.5vw, 58px);
}

.page-privacy .privacy-sec {
  scroll-margin-top: 92px;
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid rgba(168, 207, 201, 0.6);
}

.page-privacy .privacy-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.page-privacy .privacy-sec__num {
  flex: 0 0 auto;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1;
  color: var(--turq);
}

.page-privacy .privacy-sec__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.32rem, 2.4vw, 1.82rem);
  line-height: 1.36;
  color: var(--ink-night);
}

.page-privacy .privacy-sec__body {
  max-width: 36em;
  font-size: 1rem;
  line-height: 1.8;
}

.page-privacy .privacy-sec__body p {
  margin: 0 0 14px;
}

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

.page-privacy .privacy-sec__body a {
  color: var(--turq);
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 111, 107, 0.45);
  word-break: break-all;
}

.page-privacy .privacy-table-wrap {
  max-width: 100%;
  margin: 20px 0 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  border: 1px solid rgba(30, 111, 107, 0.24);
  border-radius: var(--radius-b);
}

.page-privacy .privacy-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.page-privacy .privacy-table caption {
  caption-side: top;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--turq);
  background: rgba(168, 207, 201, 0.24);
}

.page-privacy .privacy-table thead th {
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--turq);
}

.page-privacy .privacy-table tbody td {
  padding: 11px 14px;
  vertical-align: top;
  line-height: 1.6;
  border-top: 1px solid rgba(168, 207, 201, 0.45);
}

.page-privacy .privacy-table tbody tr:nth-child(even) {
  background: rgba(244, 238, 227, 0.6);
}

.page-privacy .privacy-uses {
  list-style: none;
  counter-reset: uses;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-privacy .privacy-uses li {
  position: relative;
  padding-left: 38px;
  counter-increment: uses;
}

.page-privacy .privacy-uses li::before {
  content: counter(uses, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: -0.02em;
  color: var(--ink-night);
  background: rgba(201, 162, 39, 0.22);
  border: 1px solid rgba(201, 162, 39, 0.55);
}

.page-privacy .privacy-acc {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-width: 46em;
}

.page-privacy .privacy-acc__item {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(30, 111, 107, 0.26);
  border-radius: var(--radius-b);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-privacy .privacy-acc__item[open] {
  background: #FFFFFF;
  border-color: var(--amber);
}

.page-privacy .privacy-acc__item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-night);
}

.page-privacy .privacy-acc__item summary::-webkit-details-marker {
  display: none;
}

.page-privacy .privacy-acc__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--amber);
}

.page-privacy .privacy-acc__item[open] summary::after {
  content: "−";
}

.page-privacy .privacy-acc__hint {
  margin-left: auto;
  padding: 3px 9px;
  white-space: nowrap;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--turq);
  background: rgba(30, 111, 107, 0.1);
}

.page-privacy .privacy-acc__item p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--stone);
}

.page-privacy .privacy-sec--notice {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-privacy .privacy-notice {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 34px);
  border-radius: var(--radius-a);
  background: linear-gradient(140deg, var(--ink-night) 0%, var(--ink-dusk) 100%);
  color: var(--paper);
}

.page-privacy .privacy-notice::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 138, 60, 0.38), transparent 72%);
  pointer-events: none;
}

.page-privacy .privacy-notice h2 {
  position: relative;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.12rem, 2vw, 1.38rem);
  color: var(--paper);
}

.page-privacy .privacy-notice p {
  position: relative;
  margin: 0;
  max-width: 40em;
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgba(244, 238, 227, 0.86);
}

.page-privacy .privacy-next {
  padding-top: 22px;
  border-top: 1px solid rgba(168, 207, 201, 0.6);
}

.page-privacy .privacy-next__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--turq);
}

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

.page-privacy .privacy-next li {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 111, 107, 0.22);
  border-radius: var(--radius-b);
}

.page-privacy .privacy-next a {
  font-weight: 600;
  color: var(--ink-night);
  text-decoration-color: rgba(224, 138, 60, 0.55);
  text-underline-offset: 4px;
}

.page-privacy .privacy-next a:hover {
  color: var(--turq);
}

.page-privacy .privacy-next span {
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--stone);
}

@media (min-width: 720px) {
  .page-privacy .privacy-next ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 860px) {
  .page-privacy .privacy-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    align-items: end;
  }

  .page-privacy .privacy-hero__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 960px) {
  .page-privacy .privacy-body {
    grid-template-columns: var(--pv-toc-w) minmax(0, 1fr);
    gap: var(--pv-gap);
    align-items: start;
  }

  .page-privacy .privacy-toc {
    position: sticky;
    top: 24px;
    padding: 4px 0 4px 18px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(168, 207, 201, 0.7);
    border-radius: 0;
  }

  .page-privacy .privacy-sec__head {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .privacy-toc__list a,
  .page-privacy .privacy-acc__item {
    transition: none;
  }
}