.page-disclaimer {
  --dc-tint: rgba(34, 211, 238, 0.09);
  --dc-warm-tint: rgba(255, 176, 32, 0.08);
}

.page-disclaimer .dc-hero {
  position: relative;
  padding: 1.75rem 0 1.75rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-disclaimer .dc-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% auto;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 68%);
  pointer-events: none;
}

.page-disclaimer .dc-hero h1 {
  position: relative;
  margin: 0.5rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 9vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.04em;
  color: var(--mint);
}

.page-disclaimer .dc-hero .lede {
  position: relative;
  max-width: 34em;
  color: var(--mist);
}

.page-disclaimer .dc-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  color: var(--mist);
}

.page-disclaimer .dc-meta .mono {
  color: var(--gold);
  margin-right: 0.4rem;
  letter-spacing: 0.06em;
}

.page-disclaimer .dc-layout {
  display: grid;
  gap: 1.75rem;
  padding: 1.75rem 0 1rem;
}

.page-disclaimer .dc-toc {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--glass);
}

.page-disclaimer .dc-toc-title {
  margin: 0 0 0.75rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-disclaimer .dc-toc-list {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-disclaimer .dc-toc-list a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.42rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--mint);
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-disclaimer .dc-toc-list a .mono {
  font-size: 0.76rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.page-disclaimer .dc-toc-list a:hover,
.page-disclaimer .dc-toc-list a:focus-visible {
  background: var(--dc-tint);
  border-color: var(--line-strong);
  outline: none;
}

.page-disclaimer .dc-toc-list a:active {
  transform: translateY(1px);
}

.page-disclaimer .dc-body {
  min-width: 0;
}

.page-disclaimer .dc-clause {
  padding: 1.5rem 0 1.6rem 1rem;
  border-top: 1px solid var(--line);
  border-left: 2px solid transparent;
  scroll-margin-top: 5.5rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-disclaimer .dc-clause:first-child {
  border-top: 0;
  padding-top: 0.5rem;
}

.page-disclaimer .dc-clause:hover {
  border-left-color: var(--line-strong);
}

.page-disclaimer .dc-clause:target {
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, var(--dc-tint), transparent 62%);
}

.page-disclaimer .dc-clause-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.8rem;
  margin-bottom: 0.85rem;
}

.page-disclaimer .dc-num {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  line-height: 1;
}

.page-disclaimer .dc-clause h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mint);
}

.page-disclaimer .dc-clause p {
  max-width: 34em;
  margin: 0 0 0.85rem;
  color: var(--mint);
  font-size: 1rem;
  line-height: 1.78;
}

.page-disclaimer .dc-clause p:last-child {
  margin-bottom: 0;
}

.page-disclaimer .dc-points {
  display: grid;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.page-disclaimer .dc-points li {
  position: relative;
  padding-left: 1.15rem;
  max-width: 34em;
  color: var(--mist);
  font-size: 0.94rem;
  line-height: 1.72;
}

.page-disclaimer .dc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 1px;
  background: var(--cyan);
}

.page-disclaimer .dc-points--warm li::before {
  background: var(--coral);
}

.page-disclaimer .dc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}

.page-disclaimer .dc-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  color: var(--mint);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: default;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-disclaimer .dc-chip .mono {
  color: var(--gold);
}

.page-disclaimer .dc-chip:hover,
.page-disclaimer .dc-chip:focus-visible {
  border-color: var(--cyan);
  background: var(--ink-700);
  outline: none;
}

.page-disclaimer .dc-chip--coral,
.page-disclaimer .dc-chip--coral .mono {
  color: var(--coral);
}

.page-disclaimer .dc-chip--coral:hover,
.page-disclaimer .dc-chip--coral:focus-visible {
  border-color: var(--coral);
}

.page-disclaimer .dc-chip--ok,
.page-disclaimer .dc-chip--ok .mono {
  color: var(--ok);
}

.page-disclaimer .dc-chip--ok:hover,
.page-disclaimer .dc-chip--ok:focus-visible {
  border-color: var(--ok);
}

.page-disclaimer .dc-hint {
  position: absolute;
  left: 0;
  top: calc(100% + 0.45rem);
  z-index: 6;
  width: max-content;
  max-width: min(15rem, 78vw);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink-700);
  color: var(--mint);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.page-disclaimer .dc-chip:hover .dc-hint,
.page-disclaimer .dc-chip:focus .dc-hint,
.page-disclaimer .dc-chip:focus-visible .dc-hint {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.page-disclaimer .dc-figure {
  margin: 0 0 1.25rem;
}

.page-disclaimer .dc-figure .media-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.page-disclaimer .dc-figure .media-frame-caption {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--mist);
}

.page-disclaimer .dc-split {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}

.page-disclaimer .dc-split-col {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--ink-800);
}

.page-disclaimer .dc-split-col:first-child {
  background: linear-gradient(160deg, var(--dc-tint), var(--ink-800) 62%);
  border-color: rgba(34, 211, 238, 0.28);
}

.page-disclaimer .dc-split-col:last-child {
  background: linear-gradient(160deg, var(--dc-warm-tint), var(--ink-800) 62%);
  border-color: rgba(255, 90, 95, 0.26);
}

.page-disclaimer .dc-split-label {
  margin: 0 0 0.5rem;
}

.page-disclaimer .dc-split-col .dc-points {
  margin-top: 0.4rem;
}

.page-disclaimer .dc-inline-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 176, 32, 0.45);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-disclaimer .dc-inline-link:hover,
.page-disclaimer .dc-inline-link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  outline: none;
}

.page-disclaimer .dc-cta {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-700) 120%);
}

.page-disclaimer .dc-cta h2 {
  margin: 0.4rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mint);
}

.page-disclaimer .dc-cta p {
  margin: 0;
  max-width: 34em;
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
}

.page-disclaimer .dc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
}

@media (min-width: 720px) {
  .page-disclaimer .dc-hero {
    padding: 2.5rem 0 2.25rem;
  }

  .page-disclaimer .dc-split {
    grid-template-columns: 1fr 1fr;
  }

  .page-disclaimer .dc-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 1.9rem 2rem;
  }

  .page-disclaimer .dc-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 960px) {
  .page-disclaimer .dc-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
    padding: 2.25rem 0 1rem;
    align-items: start;
  }

  .page-disclaimer .dc-toc {
    position: sticky;
    top: 5.5rem;
  }

  .page-disclaimer .dc-clause {
    padding: 1.9rem 0 2rem 1.4rem;
  }

  .page-disclaimer .dc-hero .lede {
    font-size: 1.08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .dc-toc-list a,
  .page-disclaimer .dc-clause,
  .page-disclaimer .dc-chip,
  .page-disclaimer .dc-hint,
  .page-disclaimer .dc-inline-link {
    transition: none;
  }

  .page-disclaimer .dc-toc-list a:active {
    transform: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>
不用输出 <<<PAGE_CSS_END>>> 和 <<<END>>> —— 等等，按格式要求只需 MAIN_HTML 与 PAGE_CSS 两个标记。重新输出：


<main id="main-content" class="page-disclaimer">
  <div class="shell">

    <nav class="crumbs" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span class="crumbs-sep">/</span>
      <span aria-current="page">使用说明</span>
    </nav>

    <header class="dc-hero">
      <p class="eyebrow">访问规则</p>
      <h1>使用说明</h1>
      <p class="lede">得乐88投注为中文用户整理访问入口、版本对照与更新公告三类资料。在您开始查阅之前，这一页把访问前提、版本与公告的阅读方式、第三方页面的处理以及各方责任讲清楚，让您用得踏实。</p>
      <ul class="dc-meta">
        <li><span class="mono">修订状态</span> 2025年6月修订版</li>
        <li><span class="mono">适用范围</span> 站内全部公开页面</li>
        <li><span class="mono">更新节奏</span> 每月 2–4 次</li>
      </ul>
    </header>

    <div class="dc-layout">

      <aside class="dc-toc" aria-labelledby="dc-toc-title">
        <p class="dc-toc-title mono" id="dc-toc-title">条款目录</p>
        <ol class="dc-toc-list">
          <li><a href="#clause-01"><span class="mono">01</span>访问前提与内容用途</a></li>
          <li><a href="#clause-02"><span class="mono">02</span>版本与公告怎么读</a></li>
          <li><a href="#clause-03"><span class="mono">03</span>外部页面与第三方服务</a></li>
          <li><a href="#clause-04"><span class="mono">04</span>责任范围</a></li>
          <li><a href="#clause-05"><span class="mono">05</span>内容更新与修订标签</a></li>
          <li><a href="#clause-06"><span class="mono">06</span>个人信息处理</a></li>
        </ol>
      </aside>

      <div class="dc-body">

        <section class="dc-clause" id="clause-01">
          <div class="dc-clause-head">
            <span class="dc-num mono">01</span>
            <h2>使用本站服务的前提</h2>
            <span class="tag tag--gold">通用</span>
          </div>
          <p>得乐88投注服务于希望快速找到访问入口、看懂新旧版本差异并保存公告资料的中文用户。您访问任意页面时，应当具备完全民事行为能力，能够独立判断并承担相应的使用责任；若您尚未达到这一前提，请在监护人陪同下阅读相关说明。</p>
          <p>站内提供的入口位置指引、版本差异对照与公告资料，供您查阅与个人存档使用。您依据这些资料作出的判断与选择，由您本人负责。</p>
          <ul class="dc-points">
            <li>入口位置与检索方法，覆盖手机、平板与桌面三种访问终端。</li>
            <li>新旧两版在入口、检索、公告阅读与导出保存四个环节的操作差异。</li>
            <li>更新公告与可导出的服务清单，方便您留存后再次查阅。</li>
          </ul>
        </section>

        <section class="dc-clause" id="clause-02">
          <div class="dc-clause-head">
            <span class="dc-num mono">02</span>
            <h2>版本与公告怎么读</h2>
            <span class="tag tag--cyan">查阅方式</span>
          </div>
          <p>站内每一条版本说明都带有独立编号，公告与指南页面会在标题旁标出所属版本。阅读时请先确认编号，再看正文——同一处操作在新旧两版之间常有名称为先、位置后改的情况，编号能帮您快速对齐。</p>

          <div class="dc-chips" aria-label="常见修订标签说明">
            <span class="dc-chip" tabindex="0">
              <span class="mono">V7</span>
              <span class="dc-hint">当前主要版本编号，站点自 2019 年运营至今已完成七次主要迭代。</span>
            </span>
            <span class="dc-chip" tabindex="0">
              <span class="mono">2025-06</span>
              <span class="dc-hint">2025年6月修订版的批次标记，新增检索对比索引与下载导出清单。</span>
            </span>
            <span class="dc-chip dc-chip--coral" tabindex="0">
              <span class="mono">修订</span>
              <span class="dc-hint">该处内容较上一批次有调整，涉及操作位置变化时会在正文中点明。</span>
            </span>
            <span class="dc-chip dc-chip--ok" tabindex="0">
              <span class="mono">已保存</span>
              <span class="dc-hint">该条清单可导出为 PDF 或纯文本，导出内容附带版本编号与修订标签。</span>
            </span>
          </div>

          <figure class="dc-figure">
            <div class="media-frame">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深靛蓝信息板上的编号条款模块示意，版本编号与修订标签以琥珀金和珊瑚红小面积点亮" loading="lazy" decoding="async">
            </div>
            <figcaption class="media-frame-caption">版本编号、批次标记与修订状态在页面标题旁并列显示，先看标签再读正文最省时间。</figcaption>
          </figure>

          <p>公告的阅读顺序建议从「本期」开始，再回看「上一迭代」的差异条目。公告正文中标注了批次与修订状态的那一行，代表该条资料最近一次调整的位置；若同一处提示前后不一致，请以标注时间更晚的一条为准。</p>
        </section>

        <section class="dc-clause" id="clause-03">
          <div class="dc-clause-head">
            <span class="dc-num mono">03</span>
            <h2>外部页面与第三方服务</h2>
            <span class="tag tag--coral">请注意</span>
          </div>
          <p><span class="tag tag--muted">第三方页面</span> 站内部分说明会提到由其他运营方提供的页面或服务。当您从本站离开并进入这类页面时，该页面的内容、访问规则与信息处理方式由它的运营方决定，本站无法代为确认，也无法对其后续变化负责。</p>
          <ul class="dc-points">
            <li>进入第三方页面前，先确认该页面的名称与用途是否与您的预期一致。</li>
            <li>涉及账号、个人信息或费用的操作，请在该页面自身的规则说明中核实后再进行。</li>
            <li>若您对某条说明所指的页面存疑，可先通过站内检索比对，或联系客服确认路径。</li>
          </ul>
        </section>

        <section class="dc-clause" id="clause-04">
          <div class="dc-clause-head">
            <span class="dc-num mono">04</span>
            <h2>责任范围</h2>
            <span class="tag tag--gold">双方</span>
          </div>
          <p>我们把能做的和需要您留意的分开列在下面，两边对着看，使用时心里更有数。</p>

          <div class="dc-split">
            <div class="dc-split-col">
              <p class="dc-split-label"><span class="tag tag--cyan">站点承担</span></p>
              <ul class="dc-points">
                <li>按页面标注的修订状态呈现版本编号、公告正文与导出清单。</li>
                <li>维持入口页面在手机、平板与桌面端的正常访问与响应式排布。</li>
                <li>计划内的维护调整，提前在更新公告栏中说明时间与影响范围。</li>
                <li>工作日 9:00–18:00 内回复您关于访问路径的询问。</li>
              </ul>
            </div>
            <div class="dc-split-col">
              <p class="dc-split-label"><span class="tag tag--coral">需要您留意</span></p>
              <ul class="dc-points dc-points--warm">
                <li>网络环境、设备型号与运营商差异会影响页面加载速度。</li>
                <li>公告与指南以最新修订批次为准，更早的资料仅供对照参考。</li>
                <li>第三方页面的内容与规则由其运营方决定，本站无法代为承诺。</li>
                <li>因设备设置或浏览器缓存导致的显示异常，可先刷新或更换终端重试。</li>
              </ul>
            </div>
          </div>
        </section>

        <section class="dc-clause" id="clause-05">
          <div class="dc-clause-head">
            <span class="dc-num mono">05</span>
            <h2>内容更新与修订标签</h2>
            <span class="tag tag--cyan">更新节奏</span>
          </div>
          <p>站内公告按版本迭代、服务清单、使用提示三类栏目组织，每月保持 2–4 次更新。每次调整都会同步刷新对应条目的修订标签，标签变化即代表这一条资料刚刚被改动过。</p>
          <p>2025年6月修订版中，检索对比索引与下载导出清单两项服务正式上线，相关说明已并入体验中心与更新公告两处。您在查阅时若发现页面标注的批次早于您上次看到的日期，说明该条目刚刚调整，建议直接刷新后再读一遍。</p>
          <p>长期保存的资料请留意导出时间。导出的 PDF 与纯文本清单会写入导出当时的版本编号与修订标签，可作为您二次查阅时的对照依据。</p>
        </section>

        <section class="dc-clause" id="clause-06">
          <div class="dc-clause-head">
            <span class="dc-num mono">06</span>
            <h2>个人信息处理</h2>
            <span class="tag tag--muted">另行说明</span>
          </div>
          <p>您在使用本站过程中涉及的信息收集范围、使用目的、Cookie 与本地存储、保存期限以及您可以行使的相关权利，均在<a class="dc-inline-link" href="/privacy-center/">隐私中心</a>中单独说明，请以该页内容为准。</p>
          <p>若您对某条说明的理解有疑问，或需要确认某个入口的实际位置，可通过<a class="dc-inline-link" href="/contact/">联系我们</a>页面的客服邮箱与我们沟通，并附上您所看到的页面名称与版本编号，便于我们快速定位。</p>
        </section>

      </div>
    </div>

    <section class="dc-cta" aria-labelledby="dc-cta-title">
      <div class="dc-cta-copy">
        <p class="eyebrow">继续查阅</p>
        <h2 id="dc-cta-title">看完规则，从操作指引接着往下走</h2>
        <p>知识中心整理了 86 篇操作指引与 42 条常见问答，覆盖版本切换、入口定位与公告保存的常见疑问；更新公告栏保留每一批次的修订记录，便于回看。</p>
      </div>
      <div class="dc-cta-actions">
        <a class="btn btn--gold" href="/knowledge/">返回知识中心</a>
        <a class="btn btn--ghost" href="/press/">查看更新公告</a>
        <a class="btn btn--cyan" href="/contact/">联系客服</a>
      </div>
    </section>

  </div>
</main>

.page-disclaimer {
  --dc-tint: rgba(34, 211, 238, 0.09);
  --dc-warm-tint: rgba(255, 176, 32, 0.08);
}

.page-disclaimer .dc-hero {
  position: relative;
  padding: 1.75rem 0 1.75rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-disclaimer .dc-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% auto;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 68%);
  pointer-events: none;
}

.page-disclaimer .dc-hero h1 {
  position: relative;
  margin: 0.5rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 9vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.04em;
  color: var(--mint);
}

.page-disclaimer .dc-hero .lede {
  position: relative;
  max-width: 34em;
  color: var(--mist);
}

.page-disclaimer .dc-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  color: var(--mist);
}

.page-disclaimer .dc-meta .mono {
  color: var(--gold);
  margin-right: 0.4rem;
  letter-spacing: 0.06em;
}

.page-disclaimer .dc-layout {
  display: grid;
  gap: 1.75rem;
  padding: 1.75rem 0 1rem;
}

.page-disclaimer .dc-toc {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--glass);
}

.page-disclaimer .dc-toc-title {
  margin: 0 0 0.75rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-disclaimer .dc-toc-list {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-disclaimer .dc-toc-list a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.42rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--mint);
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-disclaimer .dc-toc-list a .mono {
  font-size: 0.76rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.page-disclaimer .dc-toc-list a:hover,
.page-disclaimer .dc-toc-list a:focus-visible {
  background: var(--dc-tint);
  border-color: var(--line-strong);
  outline: none;
}

.page-disclaimer .dc-toc-list a:active {
  transform: translateY(1px);
}

.page-disclaimer .dc-body {
  min-width: 0;
}

.page-disclaimer .dc-clause {
  padding: 1.5rem 0 1.6rem 1rem;
  border-top: 1px solid var(--line);
  border-left: 2px solid transparent;
  scroll-margin-top: 5.5rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-disclaimer .dc-clause:first-child {
  border-top: 0;
  padding-top: 0.5rem;
}

.page-disclaimer .dc-clause:hover {
  border-left-color: var(--line-strong);
}

.page-disclaimer .dc-clause:target {
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, var(--dc-tint), transparent 62%);
}

.page-disclaimer .dc-clause-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.8rem;
  margin-bottom: 0.85rem;
}

.page-disclaimer .dc-num {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  line-height: 1;
}

.page-disclaimer .dc-clause h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mint);
}

.page-disclaimer .dc-clause p {
  max-width: 34em;
  margin: 0 0 0.85rem;
  color: var(--mint);
  font-size: 1rem;
  line-height: 1.78;
}

.page-disclaimer .dc-clause p:last-child {
  margin-bottom: 0;
}

.page-disclaimer .dc-points {
  display: grid;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.page-disclaimer .dc-points li {
  position: relative;
  padding-left: 1.15rem;
  max-width: 34em;
  color: var(--mist);
  font-size: 0.94rem;
  line-height: 1.72;
}

.page-disclaimer .dc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 1px;
  background: var(--cyan);
}

.page-disclaimer .dc-points--warm li::before {
  background: var(--coral);
}

.page-disclaimer .dc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}

.page-disclaimer .dc-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  color: var(--mint);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: default;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-disclaimer .dc-chip .mono {
  color: var(--gold);
}

.page-disclaimer .dc-chip:hover,
.page-disclaimer .dc-chip:focus-visible {
  border-color: var(--cyan);
  background: var(--ink-700);
  outline: none;
}

.page-disclaimer .dc-chip--coral,
.page-disclaimer .dc-chip--coral .mono {
  color: var(--coral);
}

.page-disclaimer .dc-chip--coral:hover,
.page-disclaimer .dc-chip--coral:focus-visible {
  border-color: var(--coral);
}

.page-disclaimer .dc-chip--ok,
.page-disclaimer .dc-chip--ok .mono {
  color: var(--ok);
}

.page-disclaimer .dc-chip--ok:hover,
.page-disclaimer .dc-chip--ok:focus-visible {
  border-color: var(--ok);
}

.page-disclaimer .dc-hint {
  position: absolute;
  left: 0;
  top: calc(100% + 0.45rem);
  z-index: 6;
  width: max-content;
  max-width: min(15rem, 78vw);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink-700);
  color: var(--mint);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.page-disclaimer .dc-chip:hover .dc-hint,
.page-disclaimer .dc-chip:focus .dc-hint,
.page-disclaimer .dc-chip:focus-visible .dc-hint {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.page-disclaimer .dc-figure {
  margin: 0 0 1.25rem;
}

.page-disclaimer .dc-figure .media-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.page-disclaimer .dc-figure .media-frame-caption {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--mist);
}

.page-disclaimer .dc-split {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}

.page-disclaimer .dc-split-col {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--ink-800);
}

.page-disclaimer .dc-split-col:first-child {
  background: linear-gradient(160deg, var(--dc-tint), var(--ink-800) 62%);
  border-color: rgba(34, 211, 238, 0.28);
}

.page-disclaimer .dc-split-col:last-child {
  background: linear-gradient(160deg, var(--dc-warm-tint), var(--ink-800) 62%);
  border-color: rgba(255, 90, 95, 0.26);
}

.page-disclaimer .dc-split-label {
  margin: 0 0 0.5rem;
}

.page-disclaimer .dc-split-col .dc-points {
  margin-top: 0.4rem;
}

.page-disclaimer .dc-inline-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 176, 32, 0.45);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-disclaimer .dc-inline-link:hover,
.page-disclaimer .dc-inline-link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  outline: none;
}

.page-disclaimer .dc-cta {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-700) 120%);
}

.page-disclaimer .dc-cta h2 {
  margin: 0.4rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mint);
}

.page-disclaimer .dc-cta p {
  margin: 0;
  max-width: 34em;
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
}

.page-disclaimer .dc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
}

@media (min-width: 720px) {
  .page-disclaimer .dc-hero {
    padding: 2.5rem 0 2.25rem;
  }

  .page-disclaimer .dc-split {
    grid-template-columns: 1fr 1fr;
  }

  .page-disclaimer .dc-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 1.9rem 2rem;
  }

  .page-disclaimer .dc-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 960px) {
  .page-disclaimer .dc-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
    padding: 2.25rem 0 1rem;
    align-items: start;
  }

  .page-disclaimer .dc-toc {
    position: sticky;
    top: 5.5rem;
  }

  .page-disclaimer .dc-clause {
    padding: 1.9rem 0 2rem 1.4rem;
  }

  .page-disclaimer .dc-hero .lede {
    font-size: 1.08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .dc-toc-list a,
  .page-disclaimer .dc-clause,
  .page-disclaimer .dc-chip,
  .page-disclaimer .dc-hint,
  .page-disclaimer .dc-inline-link {
    transition: none;
  }

  .page-disclaimer .dc-toc-list a:active {
    transform: none;
  }
}