.page-disclaimer {
  --terms-note: rgba(16, 24, 32, 0.62);
  --terms-body-text: rgba(16, 24, 32, 0.86);
  --terms-head-bg: rgba(14, 46, 74, 0.06);
  --terms-glow: rgba(31, 209, 178, 0.16);
  background: var(--paper);
  color: var(--black);
}

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

.page-disclaimer .terms-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 34px) 0 clamp(38px, 6vw, 70px);
  background:
    radial-gradient(120% 90% at 84% 6%, var(--terms-glow), transparent 58%),
    linear-gradient(158deg, var(--ink) 0%, var(--navy) 66%, var(--ink) 100%);
  color: var(--paper);
}

.page-disclaimer .terms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 209, 178, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 209, 178, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.page-disclaimer .terms-hero > .container {
  position: relative;
  z-index: 1;
}

.page-disclaimer .terms-hero .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.page-disclaimer .terms-hero .breadcrumb-link {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.page-disclaimer .terms-hero .breadcrumb-link:hover {
  color: var(--teal-hi);
}

.page-disclaimer .terms-hero .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: rgba(124, 151, 171, 0.55);
}

.page-disclaimer .terms-hero .breadcrumb-current {
  color: var(--teal);
}

.page-disclaimer .terms-hero-grid {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
  margin-top: clamp(22px, 4vw, 38px);
}

.page-disclaimer .terms-hero .eyebrow {
  margin: 0;
  color: var(--teal);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-disclaimer .terms-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(42px, 9vw, 92px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-disclaimer .terms-hero .lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: rgba(244, 241, 233, 0.82);
}

.page-disclaimer .terms-hero-meta {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 209, 178, 0.24);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.page-disclaimer .terms-figure {
  position: relative;
  margin: clamp(26px, 4vw, 40px) 0 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--navy-2);
  border: 1px solid rgba(31, 209, 178, 0.26);
  clip-path: var(--cut);
}

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

/* ---------- 条款正文 ---------- */

.page-disclaimer .terms-body {
  padding: clamp(30px, 5vw, 62px) 0 clamp(48px, 7vw, 88px);
  background: var(--paper);
}

.page-disclaimer .terms-layout {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
}

.page-disclaimer .terms-index-title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.page-disclaimer .terms-index-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-paper);
}

.page-disclaimer .terms-index-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.45;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.page-disclaimer .terms-index-link:hover {
  color: var(--black);
  background: rgba(14, 46, 74, 0.06);
  border-left-color: var(--teal);
}

.page-disclaimer .terms-index-link[aria-current="true"] {
  color: var(--black);
  font-weight: 600;
  background: rgba(245, 225, 75, 0.34);
  border-left-color: var(--navy);
}

.page-disclaimer .terms-index-num {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--navy-2);
}

.page-disclaimer .terms-index-hint {
  margin: 14px 0 0;
  padding: 12px 12px 0;
  border-top: 1px dashed var(--line-paper);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--terms-note);
}

.page-disclaimer .terms-card {
  scroll-margin-top: calc(var(--hdr-h) + 20px);
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-disclaimer .terms-card--last {
  margin-bottom: 0;
}

.page-disclaimer .terms-card:not(:last-child)::after {
  content: "";
  display: block;
  height: 14px;
  margin-top: clamp(18px, 3vw, 26px);
  background: linear-gradient(90deg, var(--teal), rgba(31, 209, 178, 0.2));
  clip-path: polygon(0 0, 100% 0, 100% 3px, 0 100%);
}

.page-disclaimer .terms-card-head {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 18px);
  padding: 10px clamp(12px, 2vw, 18px);
  background: var(--terms-head-bg);
  border-left: 3px solid var(--teal);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.page-disclaimer .terms-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.page-disclaimer .terms-title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 23px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}

.page-disclaimer .terms-anchor {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--navy-2);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}

.page-disclaimer .terms-card:hover .terms-anchor,
.page-disclaimer .terms-anchor:focus-visible {
  opacity: 1;
}

.page-disclaimer .terms-anchor:hover {
  color: var(--coral);
}

.page-disclaimer .terms-card-body {
  padding-top: clamp(12px, 1.8vw, 18px);
}

.page-disclaimer .terms-card-body p {
  margin: 0;
  max-width: 40em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--terms-body-text);
}

.page-disclaimer .terms-card-body a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-disclaimer .terms-card-body a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* ---------- 尾部横向导航 ---------- */

.page-disclaimer .terms-related {
  padding: clamp(38px, 6vw, 76px) 0 clamp(44px, 6vw, 80px);
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
  color: var(--paper);
}

.page-disclaimer .terms-related-title {
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-disclaimer .terms-related-grid {
  display: grid;
  gap: var(--gap-x);
}

.page-disclaimer .terms-foot-card {
  display: block;
  padding: clamp(16px, 2.4vw, 22px);
  background: rgba(14, 46, 74, 0.72);
  border: 1px solid rgba(31, 209, 178, 0.22);
  clip-path: var(--cut);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.24s var(--ease), background 0.24s var(--ease),
    border-color 0.24s var(--ease);
}

.page-disclaimer .terms-foot-card:hover {
  transform: translateY(-4px);
  background: rgba(23, 69, 107, 0.92);
  border-color: var(--teal);
}

.page-disclaimer .terms-foot-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.page-disclaimer .terms-foot-title {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
}

.page-disclaimer .terms-foot-text {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(244, 241, 233, 0.72);
}

.page-disclaimer .terms-return {
  margin: clamp(22px, 3vw, 32px) 0 0;
}

.page-disclaimer .terms-return a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--lemon);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 225, 75, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-disclaimer .terms-return a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

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

@media (hover: none) {
  .page-disclaimer .terms-anchor {
    opacity: 0.55;
  }
}

@media (min-width: 620px) {
  .page-disclaimer .terms-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .page-disclaimer .terms-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }

  .page-disclaimer .terms-figure {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  .page-disclaimer .terms-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
  }

  .page-disclaimer .terms-index {
    position: sticky;
    top: calc(var(--hdr-h) + 28px);
  }

  .page-disclaimer .terms-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .terms-index-link,
  .page-disclaimer .terms-anchor,
  .page-disclaimer .terms-foot-card,
  .page-disclaimer .terms-card-body a,
  .page-disclaimer .terms-return a {
    transition: none;
  }

  .page-disclaimer .terms-foot-card:hover {
    transform: none;
  }
}


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

  <section class="terms-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
          <li class="breadcrumb-item"><span class="breadcrumb-current" aria-current="page">使用条款</span></li>
        </ol>
      </nav>

      <div class="terms-hero-grid">
        <div class="terms-hero-lead">
          <p class="eyebrow">条款文档 · TERMS</p>
          <h1>使用条款</h1>
          <p class="lead">在打开华体汇国际的网站或客户端之前，先花几分钟把规则看清楚。下面十二条用短句写成，从换手机后怎么重新登录，到引用站内文字前要先做什么，都逐条对应你可能遇到的情形。</p>
          <p class="terms-hero-meta mono">共 12 条 · 建议阅读 5 分钟</p>
        </div>
        <figure class="terms-figure">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="暖纸白底上排列的等距细线与编号区块，呈现文档目录的抽象结构">
        </figure>
      </div>
    </div>
  </section>

  <section class="terms-body">
    <div class="container">
      <div class="terms-layout">

        <aside class="terms-index" aria-label="条款索引">
          <p class="terms-index-title mono">条款索引</p>
          <ol class="terms-index-list">
            <li><a class="terms-index-link" data-spy-link href="#terms-01"><span class="terms-index-num mono">01</span>条款适用范围</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-02"><span class="terms-index-num mono">02</span>使用即表示接受</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-03"><span class="terms-index-num mono">03</span>账号仅限本人使用</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-04"><span class="terms-index-num mono">04</span>换设备请重新登录</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-05"><span class="terms-index-num mono">05</span>对照历史记录</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-06"><span class="terms-index-num mono">06</span>内容按批次同步</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-07"><span class="terms-index-num mono">07</span>批次差异怎么看</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-08"><span class="terms-index-num mono">08</span>文字与图形归属</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-09"><span class="terms-index-num mono">09</span>引用与转载</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-10"><span class="terms-index-num mono">10</span>修订在哪里发布</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-11"><span class="terms-index-num mono">11</span>修订后继续使用</a></li>
            <li><a class="terms-index-link" data-spy-link href="#terms-12"><span class="terms-index-num mono">12</span>需要帮助时</a></li>
          </ol>
          <p class="terms-index-hint">点编号可直达对应条款；向下阅读时，当前所在条款会在左侧标出。</p>
        </aside>

        <div class="terms-doc">

          <article class="terms-card" id="terms-01" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">01</span>
              <h2 class="terms-title">条款适用范围</h2>
              <a class="terms-anchor" href="#terms-01" aria-label="获取第 01 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>以下内容适用于华体汇国际网站的各栏目，也适用于在电脑、平板与手机上运行的客户端。三端页面会随屏幕宽度自动重排，但规则本身一致，你在任意一端使用都属于本条款的覆盖范围。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-02" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">02</span>
              <h2 class="terms-title">使用即表示接受</h2>
              <a class="terms-anchor" href="#terms-02" aria-label="获取第 02 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>当你开始浏览页面或完成一次登录，就表示你已经读过并同意这些条款。如果其中某一条让你拿不准，可以先通过联系页面把情况说明白，再决定是否继续使用，不必急着操作。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-03" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">03</span>
              <h2 class="terms-title">账号仅限本人使用</h2>
              <a class="terms-anchor" href="#terms-03" aria-label="获取第 03 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>账号请只由注册者本人使用，不要把登录信息交给同事、家人或朋友代管。多人共用一个账号会让记录归属变得模糊，之后核对历史内容时容易出现对不上的情况，处理起来也更费时间。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-04" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">04</span>
              <h2 class="terms-title">换设备请重新登录</h2>
              <a class="terms-anchor" href="#terms-04" aria-label="获取第 04 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>更换手机、平板或电脑之后，请用原账号重新登录一次。旧设备上的登录状态不会自动延续到新设备，重新登录后系统才能把你和属于你的记录重新对应起来。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-05" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">05</span>
              <h2 class="terms-title">对照历史记录</h2>
              <a class="terms-anchor" href="#terms-05" aria-label="获取第 05 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>重新登录后，你可以逐条对照最近 24 个月内的登录与核验记录，确认换设备前后是否连贯。若发现与实际使用情况不符，请把大致时间和设备型号记下来，通过联系页面反馈，我们按顺序帮你排查。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-06" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">06</span>
              <h2 class="terms-title">内容按批次同步</h2>
              <a class="terms-anchor" href="#terms-06" aria-label="获取第 06 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>页面中的服务说明与更新内容按批次同步推进，当前公开批次为 -796，两次批次之间的间隔不超过 7 天。公告里出现的批次号与页面内容一一对应，看到号就能知道对应哪一版说明。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-07" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">07</span>
              <h2 class="terms-title">批次差异怎么看</h2>
              <a class="terms-anchor" href="#terms-07" aria-label="获取第 07 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>不同批次之间，个别说明的措辞和条目会做调整。判断某条规则是否适用于你的情况，以你实际看到的批次号为准；需要把前后两版放在一起比对时，请先读一遍公告中的变更描述。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-08" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">08</span>
              <h2 class="terms-title">文字与图形归属</h2>
              <a class="terms-anchor" href="#terms-08" aria-label="获取第 08 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>站内的文字说明、图形、图标、界面设计与页面结构，由华体汇国际或相应权利人持有权利。你可以为了自己查阅而浏览、保存与打印，但请不要删改署名后另行发布，也不要用于容易让人误认来源的场合。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-09" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">09</span>
              <h2 class="terms-title">引用与转载</h2>
              <a class="terms-anchor" href="#terms-09" aria-label="获取第 09 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>如需在文章、课程材料或内部培训中引用我们的内容，请注明来源并保留原意，不要断章取义。涉及整段转载、批量复制或用于对外发布的，请先通过联系页面说明用途，取得书面同意后再使用。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-10" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">10</span>
              <h2 class="terms-title">修订在哪里发布</h2>
              <a class="terms-anchor" href="#terms-10" aria-label="获取第 10 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>条款会随服务调整而修订，修订后的文本在<a href="/news/">动态与公告</a>栏目发布，并标注所属批次。影响较大的变化会放在公告列表靠前的位置，并写明改动要点，方便你快速判断是否需要重新阅读。</p>
            </div>
          </article>

          <article class="terms-card" id="terms-11" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">11</span>
              <h2 class="terms-title">修订后继续使用</h2>
              <a class="terms-anchor" href="#terms-11" aria-label="获取第 11 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>新版本发布后，你继续使用网站或客户端，即视为接受修订后的内容。如果不认同某处调整，请暂停使用并通过联系页面告知我们，我们会协助你处理账号与记录相关的事宜。</p>
            </div>
          </article>

          <article class="terms-card terms-card--last" id="terms-12" data-reveal>
            <div class="terms-card-head">
              <span class="terms-num mono">12</span>
              <h2 class="terms-title">需要帮助时</h2>
              <a class="terms-anchor" href="#terms-12" aria-label="获取第 12 条的链接">#</a>
            </div>
            <div class="terms-card-body">
              <p>对某一条款有疑问、需要核对记录，或发现站内内容被不当引用，都可以在工作日 9:00 至 18:00 通过<a href="/contact-us/">联系页面</a>找到我们。客服与支持团队 60 余人在线值守，平均首次响应约 4 分钟，把情况简单说清就能开始处理。</p>
            </div>
          </article>

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

  <section class="terms-related">
    <div class="container">
      <h2 class="terms-related-title">接下来你可能想看的</h2>
      <div class="terms-related-grid">
        <a class="terms-foot-card" href="/data-protection/">
          <span class="terms-foot-kicker mono">PERSONAL DATA</span>
          <span class="terms-foot-title">个人信息如何处理</span>
          <span class="terms-foot-text">记录保留多久、怎么查询与删除，逐条写清。</span>
        </a>
        <a class="terms-foot-card" href="/news/">
          <span class="terms-foot-kicker mono">ANNOUNCEMENTS</span>
          <span class="terms-foot-title">公告与修订发布区</span>
          <span class="terms-foot-text">每次条款改动，会连同批次号一起出现在这里。</span>
        </a>
        <a class="terms-foot-card" href="/contact-us/">
          <span class="terms-foot-kicker mono">SUPPORT</span>
          <span class="terms-foot-title">需要人工确认</span>
          <span class="terms-foot-text">工作日 9:00–18:00 在线，说明情况即可。</span>
        </a>
      </div>
      <p class="terms-return"><a href="/">返回首页</a></p>
    </div>
  </section>

</main>

.page-disclaimer {
  --terms-note: rgba(16, 24, 32, 0.62);
  --terms-body-text: rgba(16, 24, 32, 0.86);
  --terms-head-bg: rgba(14, 46, 74, 0.06);
  --terms-glow: rgba(31, 209, 178, 0.16);
  background: var(--paper);
  color: var(--black);
}

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

.page-disclaimer .terms-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 34px) 0 clamp(38px, 6vw, 70px);
  background:
    radial-gradient(120% 90% at 84% 6%, var(--terms-glow), transparent 58%),
    linear-gradient(158deg, var(--ink) 0%, var(--navy) 66%, var(--ink) 100%);
  color: var(--paper);
}

.page-disclaimer .terms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 209, 178, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 209, 178, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.page-disclaimer .terms-hero > .container {
  position: relative;
  z-index: 1;
}

.page-disclaimer .terms-hero .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.page-disclaimer .terms-hero .breadcrumb-link {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.page-disclaimer .terms-hero .breadcrumb-link:hover {
  color: var(--teal-hi);
}

.page-disclaimer .terms-hero .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: rgba(124, 151, 171, 0.55);
}

.page-disclaimer .terms-hero .breadcrumb-current {
  color: var(--teal);
}

.page-disclaimer .terms-hero-grid {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
  margin-top: clamp(22px, 4vw, 38px);
}

.page-disclaimer .terms-hero .eyebrow {
  margin: 0;
  color: var(--teal);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-disclaimer .terms-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(42px, 9vw, 92px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-disclaimer .terms-hero .lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: rgba(244, 241, 233, 0.82);
}

.page-disclaimer .terms-hero-meta {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 209, 178, 0.24);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.page-disclaimer .terms-figure {
  position: relative;
  margin: clamp(26px, 4vw, 40px) 0 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--navy-2);
  border: 1px solid rgba(31, 209, 178, 0.26);
  clip-path: var(--cut);
}

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

/* ---------- 条款正文 ---------- */

.page-disclaimer .terms-body {
  padding: clamp(30px, 5vw, 62px) 0 clamp(48px, 7vw, 88px);
  background: var(--paper);
}

.page-disclaimer .terms-layout {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
}

.page-disclaimer .terms-index-title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.page-disclaimer .terms-index-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-paper);
}

.page-disclaimer .terms-index-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.45;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.page-disclaimer .terms-index-link:hover {
  color: var(--black);
  background: rgba(14, 46, 74, 0.06);
  border-left-color: var(--teal);
}

.page-disclaimer .terms-index-link[aria-current="true"] {
  color: var(--black);
  font-weight: 600;
  background: rgba(245, 225, 75, 0.34);
  border-left-color: var(--navy);
}

.page-disclaimer .terms-index-num {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--navy-2);
}

.page-disclaimer .terms-index-hint {
  margin: 14px 0 0;
  padding: 12px 12px 0;
  border-top: 1px dashed var(--line-paper);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--terms-note);
}

.page-disclaimer .terms-card {
  scroll-margin-top: calc(var(--hdr-h) + 20px);
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-disclaimer .terms-card--last {
  margin-bottom: 0;
}

.page-disclaimer .terms-card:not(:last-child)::after {
  content: "";
  display: block;
  height: 14px;
  margin-top: clamp(18px, 3vw, 26px);
  background: linear-gradient(90deg, var(--teal), rgba(31, 209, 178, 0.2));
  clip-path: polygon(0 0, 100% 0, 100% 3px, 0 100%);
}

.page-disclaimer .terms-card-head {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 18px);
  padding: 10px clamp(12px, 2vw, 18px);
  background: var(--terms-head-bg);
  border-left: 3px solid var(--teal);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.page-disclaimer .terms-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.page-disclaimer .terms-title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 23px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}

.page-disclaimer .terms-anchor {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--navy-2);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}

.page-disclaimer .terms-card:hover .terms-anchor,
.page-disclaimer .terms-anchor:focus-visible {
  opacity: 1;
}

.page-disclaimer .terms-anchor:hover {
  color: var(--coral);
}

.page-disclaimer .terms-card-body {
  padding-top: clamp(12px, 1.8vw, 18px);
}

.page-disclaimer .terms-card-body p {
  margin: 0;
  max-width: 40em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--terms-body-text);
}

.page-disclaimer .terms-card-body a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-disclaimer .terms-card-body a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* ---------- 尾部横向导航 ---------- */

.page-disclaimer .terms-related {
  padding: clamp(38px, 6vw, 76px) 0 clamp(44px, 6vw, 80px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
  color: var(--paper);
}

.page-disclaimer .terms-related-title {
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-disclaimer .terms-related-grid {
  display: grid;
  gap: var(--gap-x);
}

.page-disclaimer .terms-foot-card {
  display: block;
  padding: clamp(16px, 2.4vw, 22px);
  background: rgba(14, 46, 74, 0.72);
  border: 1px solid rgba(31, 209, 178, 0.22);
  clip-path: var(--cut);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.24s var(--ease), background 0.24s var(--ease),
    border-color 0.24s var(--ease);
}

.page-disclaimer .terms-foot-card:hover {
  transform: translateY(-4px);
  background: rgba(23, 69, 107, 0.92);
  border-color: var(--teal);
}

.page-disclaimer .terms-foot-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.page-disclaimer .terms-foot-title {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
}

.page-disclaimer .terms-foot-text {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(244, 241, 233, 0.72);
}

.page-disclaimer .terms-return {
  margin: clamp(22px, 3vw, 32px) 0 0;
}

.page-disclaimer .terms-return a {
  display: inline-block;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--lemon);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 225, 75, 0.4);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-disclaimer .terms-return a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

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

@media (hover: none) {
  .page-disclaimer .terms-anchor {
    opacity: 0.55;
  }
}

@media (min-width: 620px) {
  .page-disclaimer .terms-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .page-disclaimer .terms-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }

  .page-disclaimer .terms-figure {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  .page-disclaimer .terms-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
  }

  .page-disclaimer .terms-index {
    position: sticky;
    top: calc(var(--hdr-h) + 28px);
  }

  .page-disclaimer .terms-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .terms-index-link,
  .page-disclaimer .terms-anchor,
  .page-disclaimer .terms-foot-card,
  .page-disclaimer .terms-card-body a,
  .page-disclaimer .terms-return a {
    transition: none;
  }

  .page-disclaimer .terms-foot-card:hover {
    transform: none;
  }
}