.page-disclaimer {
  --disc-ink: #17181B;
  --disc-ink-soft: rgba(17, 18, 20, 0.76);
  --disc-hair: rgba(17, 18, 20, 0.14);
  --disc-gold-deep: #8A6E12;
  --disc-accent-deep: #5E1119;
  --disc-gutter: 46px;
  background: var(--surface-100);
  color: var(--disc-ink);
}

.page-disclaimer .container {
  max-width: 1180px;
}

/* ---------- 首屏 ---------- */
.page-disclaimer .legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 6vw, 80px);
  color: var(--text-100);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(201, 162, 39, 0.18), transparent 58%),
    repeating-linear-gradient(90deg, rgba(237, 231, 218, 0.055) 0 1px, transparent 1px 92px),
    var(--base-900);
  border-bottom: 1px solid var(--brand-500);
}

.page-disclaimer .legal-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
}

.page-disclaimer .legal-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-bottom: var(--gap-md);
}

.page-disclaimer .legal-crumb a {
  color: var(--text-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-cut), border-color 180ms var(--ease-cut);
}

.page-disclaimer .legal-crumb a:hover,
.page-disclaimer .legal-crumb a:focus-visible {
  color: var(--brand-300);
  border-bottom-color: var(--brand-300);
}

.page-disclaimer .legal-crumb-sep {
  color: var(--line-600);
}

.page-disclaimer .legal-hero h1 {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: clamp(30px, 6.4vw, 58px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.page-disclaimer .legal-lede {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.9;
  color: rgba(237, 231, 218, 0.82);
}

.page-disclaimer .legal-meta {
  list-style: none;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-600);
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 4vw, 44px);
}

.page-disclaimer .legal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-disclaimer .legal-meta-key {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-400);
}

.page-disclaimer .legal-meta-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-100);
}

.page-disclaimer .legal-meta-val.num {
  color: var(--brand-300);
  letter-spacing: 0.04em;
}

.page-disclaimer .legal-hero-media {
  margin: 0;
  width: 100%;
}

.page-disclaimer .legal-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 条款区 ---------- */
.page-disclaimer .clause-band {
  padding: clamp(36px, 6vw, 88px) 0 clamp(44px, 7vw, 96px);
  background: var(--surface-100);
}

.page-disclaimer .clause-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--disc-ink);
}

.page-disclaimer .clause {
  position: relative;
  display: grid;
  grid-template-columns: var(--disc-gutter) minmax(0, 1fr);
  gap: 0 clamp(12px, 2.6vw, 36px);
  padding: clamp(22px, 3.4vw, 38px) 0;
  border-bottom: 1px solid var(--disc-hair);
  scroll-margin-top: 88px;
  transition: border-color 200ms var(--ease-cut), background-color 200ms var(--ease-cut);
}

.page-disclaimer .clause:hover,
.page-disclaimer .clause:focus-within {
  border-bottom-color: var(--brand-500);
  background-image: linear-gradient(90deg, rgba(201, 162, 39, 0.09), rgba(201, 162, 39, 0) 62%);
}

.page-disclaimer .clause:target {
  border-bottom-color: var(--brand-500);
  background-image: linear-gradient(90deg, rgba(139, 30, 45, 0.09), rgba(139, 30, 45, 0) 68%);
}

.page-disclaimer .clause-idx {
  justify-self: start;
  display: inline-block;
  padding-top: 2px;
  color: var(--accent-600);
  text-decoration: none;
  line-height: 1;
  transition: color 180ms var(--ease-cut), transform 180ms var(--ease-cut);
}

.page-disclaimer .clause-idx .num {
  font-size: clamp(22px, 3.6vw, 36px);
  letter-spacing: 0.02em;
}

.page-disclaimer .clause-idx:hover,
.page-disclaimer .clause-idx:focus-visible {
  color: var(--disc-gold-deep);
  transform: translateY(-2px);
}

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

.page-disclaimer .clause-body h2 {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--disc-ink);
}

.page-disclaimer .clause-body p {
  margin: 0 0 14px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--disc-ink-soft);
}

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

.page-disclaimer .clause-body a {
  color: var(--accent-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms var(--ease-cut);
}

.page-disclaimer .clause-body a:hover,
.page-disclaimer .clause-body a:focus-visible {
  color: var(--disc-accent-deep);
}

.page-disclaimer .clause-points {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
  max-width: 66ch;
}

.page-disclaimer .clause-points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--disc-ink-soft);
}

.page-disclaimer .clause-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 11px;
  height: 1px;
  background: var(--accent-600);
}

/* ---------- 收束轨道 ---------- */
.page-disclaimer .legal-tail {
  padding: clamp(26px, 4vw, 44px) 0 clamp(24px, 3.5vw, 34px);
  background: var(--base-900);
  color: var(--text-100);
  border-top: 1px solid var(--brand-500);
}

.page-disclaimer .legal-tail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-600);
}

.page-disclaimer .legal-tail-name {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-disclaimer .legal-tail-sub {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-400);
}

.page-disclaimer .legal-tail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-disclaimer .legal-tail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 16px;
}

.page-disclaimer .legal-tail-contact,
.page-disclaimer .legal-tail-icp {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-400);
  word-break: break-word;
}

@media (min-width: 720px) {
  .page-disclaimer {
    --disc-gutter: 72px;
  }

  .page-disclaimer .legal-tail-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-disclaimer .legal-tail-foot {
    justify-content: space-between;
  }
}

@media (min-width: 940px) {
  .page-disclaimer .legal-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-disclaimer .legal-hero-media {
    transform: translateY(18px);
  }

  .page-disclaimer .clause {
    grid-template-columns: var(--disc-gutter) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .clause-idx,
  .page-disclaimer .legal-hero-media,
  .page-disclaimer .legal-crumb a {
    transition: none;
    transform: none;
  }
}


<main id="main-content" class="page-disclaimer">
  <section class="legal-hero">
    <div class="container legal-hero-grid">
      <div class="legal-hero-copy">
        <nav class="legal-crumb" aria-label="页面位置">
          <a href="/">首页</a>
          <span class="legal-crumb-sep" aria-hidden="true">/</span>
          <span aria-current="page">使用说明</span>
        </nav>
        <p class="eyebrow">条款与引用 · USAGE TERMS</p>
        <h1>走势资料怎么用，怎么引，怎么反馈</h1>
        <p class="legal-lede">
          皇冠体彩彩讯从 2019 年开始整理期次资料，把每一期开出的号码按位置拆开、按版本存好，再摊成可以翻阅的图表。这份说明写给正在查走势、调归档或刚收到订阅提醒的你：这些资料建立在什么前提上，隔一阵子回来看要注意什么，引用的时候怎么写清楚，遇到对不上的地方又该找谁。
        </p>
        <ul class="legal-meta">
          <li class="legal-meta-item">
            <span class="legal-meta-key">条款版本</span>
            <span class="legal-meta-val num">V2.0</span>
          </li>
          <li class="legal-meta-item">
            <span class="legal-meta-key">涵盖内容</span>
            <span class="legal-meta-val">走势图表 · 归档资料 · 提醒</span>
          </li>
          <li class="legal-meta-item">
            <span class="legal-meta-key">最近整理</span>
            <span class="legal-meta-val">本月汇总完成后</span>
          </li>
        </ul>
      </div>
      <figure class="legal-hero-media media-frame media-frame--wide">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="暗色底上的精密刻度线与直角网格局部特写，金色刻度均匀排列，边缘向暗处渐隐">
      </figure>
    </div>
  </section>

  <section class="clause-band">
    <div class="container">
      <ol class="clause-list">
        <li class="clause" id="clause-01">
          <a class="clause-idx" href="#clause-01" aria-label="跳到第 1 条：走势与遗漏到底记录了什么"><span class="num">01</span></a>
          <div class="clause-body">
            <h2>走势与遗漏到底记录了什么</h2>
            <p>
              走势图表把万位、千位、百位、十位、个位五个位置的历史号码连成曲线；遗漏统计按位置单独算，显示某个号码距上一次出现跨过了多少期。它们记的都是已经开出的期次，随新期次推进不断向后延伸。
            </p>
            <p>
              看的时候把两者合在一起用：曲线告诉你近期号码分布是疏是密，遗漏值告诉你间隔是长是短。这些都是历史记录的样子，号码怎么判断、判断到什么程度，取决于你自己的习惯和经验。
            </p>
            <ul class="clause-points">
              <li>曲线上的每个点都能回溯到具体一期，逐期查得下去。</li>
              <li>遗漏值在同一位置横向比较才有意义，跨位置比大小容易读歪。</li>
              <li>区间越短波动越显眼，把相邻几十期连起来看，轮廓会平稳许多。</li>
            </ul>
          </div>
        </li>

        <li class="clause" id="clause-02">
          <a class="clause-idx" href="#clause-02" aria-label="跳到第 2 条：隔天再看，先对期次和更新时间"><span class="num">02</span></a>
          <div class="clause-body">
            <h2>隔天再看，先对期次和更新时间</h2>
            <p>
              走势图表每月固定更新 12 期，按日推进，每月再做一次汇总整理。页面顶部会标出当前期次编号和这次整理的时间；同一天在桌面和手机上打开，以这个标记为准。
            </p>
            <ul class="clause-points">
              <li>两端显示不一样，先刷新再比，多数时候是缓存还停在上一期。</li>
              <li>导出成 PDF 或 CSV 的文件是导出那一刻的快照，单次最多 200 期，之后新增的期次不会补进旧文件。</li>
              <li>想看清前后变化，用并排视图同时打开两期，比在两张截图之间来回切更省力。</li>
            </ul>
            <p>筛选维度、区间切换和导出格式的细节，写在<a href="/guide/">使用指引</a>里。</p>
          </div>
        </li>

        <li class="clause" id="clause-03">
          <a class="clause-idx" href="#clause-03" aria-label="跳到第 3 条：归档资料怎么引、引到什么程度"><span class="num">03</span></a>
          <div class="clause-body">
            <h2>归档资料怎么引、引到什么程度</h2>
            <p>
              旧版本资料按年份和版本号归档，共设 6 个归档目录，每个目录都标了包含的资料类型和文件格式。调取之前先认准目录名，能省掉大半翻找时间。
            </p>
            <p>
              引用时写全三样：版本号、归档目录、期次区间。比如注明是某一年某个目录、覆盖哪几期。三样齐了，别人就能顺着回查到同一份资料，讨论也就落在同一个起点上。
            </p>
            <ul class="clause-points">
              <li>转载整张图表时保留图例与期次标注，别裁掉边缘刻度。</li>
              <li>引用遗漏值要写明位置，万位的数字替代不了个位。</li>
              <li>归档目录和资源入口都在<a href="/product/">走势与下载</a>，历史号码查找已经缩到两步。</li>
            </ul>
          </div>
        </li>

        <li class="clause" id="clause-04">
          <a class="clause-idx" href="#clause-04" aria-label="跳到第 4 条：订阅提醒到了，它能告诉你什么"><span class="num">04</span></a>
          <div class="clause-body">
            <h2>订阅提醒到了，它能告诉你什么</h2>
            <p>
              开奖订阅有两种到达方式：站内状态灯和邮件摘要，覆盖 12 种彩种。订阅开启后，状态灯以缓慢的呼吸节奏亮起；摘要邮件把当期整理完成的期次编号发到你的邮箱，适合白天不在电脑前的人。
            </p>
            <p>
              提醒承担的是通知这件事：新的期次整理好了，你可以看了。它把反复刷新的时间省下来，号码如何解读、要不要继续跟，仍按你自己的方式决定。订阅状态和下载记录在个人中心都能看到，随时可以关掉，也可以只留状态灯。
            </p>
          </div>
        </li>

        <li class="clause" id="clause-05">
          <a class="clause-idx" href="#clause-05" aria-label="跳到第 5 条：发现对不上，按这四项说明"><span class="num">05</span></a>
          <div class="clause-body">
            <h2>发现对不上，按这四项说明</h2>
            <p>
              某一期的号码或遗漏值和你手上的记录对不上时，提交时写清四项：彩种、期次编号、位置、你看到的数值。再附一张截图或导出的文件片段，定位起来会快很多。
            </p>
            <ul class="clause-points">
              <li>客服邮箱在工作日 9:00–18:00 内回复，通常一个工作日内完成首次答复。</li>
              <li>问订阅或下载问题，请在邮件里附上注册手机号后四位。</li>
              <li>栏目建议和内容纠错走同一个入口，不用另外找渠道。</li>
            </ul>
            <p>入口见<a href="/feedback/">反馈通道</a>，把期次编号写在标题里，来回确认的次数会少很多。</p>
          </div>
        </li>

        <li class="clause" id="clause-06">
          <a class="clause-idx" href="#clause-06" aria-label="跳到第 6 条：条款版本与后续更新"><span class="num">06</span></a>
          <div class="clause-body">
            <h2>条款版本与后续更新</h2>
            <p>
              这份说明随 V2.0 品牌导航一同发布。条款条目调整时，版本标记和生效期次会一起更新，页面顶部的版本行就是当前适用的一版；引用本说明时请一并写上这个版本号。
            </p>
            <p>
              个人信息如何收集与使用的说明，见<a href="/privacy/">隐私政策</a>。如果是对资料本身有疑问，从反馈通道发起最快，把期次和位置写清楚就行。
            </p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="legal-tail">
    <div class="container">
      <div class="legal-tail-grid">
        <div class="legal-tail-brand">
          <p class="legal-tail-name">皇冠体彩彩讯</p>
          <p class="legal-tail-sub num">USAGE TERMS · V2.0</p>
        </div>
        <div class="legal-tail-actions">
          <a class="btn btn--primary" href="/guide/">查看使用指引</a>
          <a class="btn btn--ghost" href="/feedback/">提交偏差说明</a>
        </div>
      </div>
      <div class="legal-tail-foot">
        <p class="legal-tail-contact num">service@royal-bet-arena.com.cn · 18876974369</p>
        <p class="legal-tail-icp num">闽ICP备27219474号 · 福建</p>
      </div>
    </div>
  </section>
</main>

.page-disclaimer {
  --disc-ink: #17181B;
  --disc-ink-soft: rgba(17, 18, 20, 0.76);
  --disc-hair: rgba(17, 18, 20, 0.14);
  --disc-gold-deep: #8A6E12;
  --disc-accent-deep: #5E1119;
  --disc-gutter: 46px;
  background: var(--surface-100);
  color: var(--disc-ink);
}

.page-disclaimer .legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 54px) 0 clamp(34px, 6vw, 76px);
  color: var(--text-100);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(201, 162, 39, 0.18), transparent 58%),
    repeating-linear-gradient(90deg, rgba(237, 231, 218, 0.055) 0 1px, transparent 1px 92px),
    var(--base-900);
  border-bottom: 1px solid var(--brand-500);
}

.page-disclaimer .legal-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
}

.page-disclaimer .legal-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--gap-md);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-400);
}

.page-disclaimer .legal-crumb a {
  color: var(--text-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-cut), border-color 180ms var(--ease-cut);
}

.page-disclaimer .legal-crumb a:hover,
.page-disclaimer .legal-crumb a:focus-visible {
  color: var(--brand-300);
  border-bottom-color: var(--brand-300);
}

.page-disclaimer .legal-crumb-sep {
  color: var(--line-600);
}

.page-disclaimer .legal-hero h1 {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: clamp(30px, 6.2vw, 56px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-disclaimer .legal-lede {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.9;
  color: rgba(237, 231, 218, 0.82);
}

.page-disclaimer .legal-meta {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-600);
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 4vw, 44px);
}

.page-disclaimer .legal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-disclaimer .legal-meta-key {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-400);
}

.page-disclaimer .legal-meta-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-100);
}

.page-disclaimer .legal-meta-val.num {
  color: var(--brand-300);
  letter-spacing: 0.04em;
}

.page-disclaimer .legal-hero-media {
  margin: 0;
  width: 100%;
}

.page-disclaimer .legal-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-disclaimer .clause-band {
  padding: clamp(34px, 6vw, 84px) 0 clamp(42px, 7vw, 92px);
  background: var(--surface-100);
}

.page-disclaimer .clause-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--disc-ink);
}

.page-disclaimer .clause {
  position: relative;
  display: grid;
  grid-template-columns: var(--disc-gutter) minmax(0, 1fr);
  gap: 0 clamp(12px, 2.6vw, 34px);
  padding: clamp(22px, 3.4vw, 38px) 0;
  border-bottom: 1px solid var(--disc-hair);
  scroll-margin-top: 88px;
  transition: border-color 200ms var(--ease-cut);
}

.page-disclaimer .clause:hover,
.page-disclaimer .clause:focus-within {
  border-bottom-color: var(--brand-500);
  background-image: linear-gradient(90deg, rgba(201, 162, 39, 0.1), rgba(201, 162, 39, 0) 62%);
}

.page-disclaimer .clause:target {
  border-bottom-color: var(--brand-500);
  background-image: linear-gradient(90deg, rgba(139, 30, 45, 0.1), rgba(139, 30, 45, 0) 68%);
}

.page-disclaimer .clause-idx {
  justify-self: start;
  display: inline-block;
  padding-top: 2px;
  color: var(--accent-600);
  text-decoration: none;
  line-height: 1;
  transition: color 180ms var(--ease-cut), transform 180ms var(--ease-cut);
}

.page-disclaimer .clause-idx .num {
  font-size: clamp(22px, 3.6vw, 36px);
  letter-spacing: 0.02em;
}

.page-disclaimer .clause-idx:hover,
.page-disclaimer .clause-idx:focus-visible {
  color: var(--disc-gold-deep);
  transform: translateY(-2px);
}

.page-disclaimer .clause-idx:focus-visible {
  outline: 1px solid var(--disc-gold-deep);
  outline-offset: 4px;
}

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

.page-disclaimer .clause-body h2 {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: 0.01em;
  color: var(--disc-ink);
}

.page-disclaimer .clause-body p {
  margin: 0 0 14px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--disc-ink-soft);
}

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

.page-disclaimer .clause-body a {
  color: var(--accent-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms var(--ease-cut);
}

.page-disclaimer .clause-body a:hover,
.page-disclaimer .clause-body a:focus-visible {
  color: var(--disc-accent-deep);
}

.page-disclaimer .clause-points {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
  max-width: 66ch;
}

.page-disclaimer .clause-points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--disc-ink-soft);
}

.page-disclaimer .clause-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 11px;
  height: 1px;
  background: var(--accent-600);
}

.page-disclaimer .legal-tail {
  padding: clamp(26px, 4vw, 44px) 0 clamp(24px, 3.4vw, 34px);
  background: var(--base-900);
  color: var(--text-100);
  border-top: 1px solid var(--brand-500);
}

.page-disclaimer .legal-tail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-600);
}

.page-disclaimer .legal-tail-name {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-disclaimer .legal-tail-sub {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-400);
}

.page-disclaimer .legal-tail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-disclaimer .legal-tail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 16px;
}

.page-disclaimer .legal-tail-contact,
.page-disclaimer .legal-tail-icp {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-400);
  word-break: break-word;
}

@media (min-width: 720px) {
  .page-disclaimer {
    --disc-gutter: 72px;
  }

  .page-disclaimer .legal-tail-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 940px) {
  .page-disclaimer .legal-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-disclaimer .legal-hero-media {
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .clause-idx,
  .page-disclaimer .legal-hero-media,
  .page-disclaimer .legal-crumb a {
    transition: none;
    transform: none;
  }
}