.page-disclaimer {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.page-disclaimer .disclaimer-hero {
  padding: 24px 0 36px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(228, 236, 236, .6) 0%, rgba(244, 247, 246, 0) 78%),
    var(--paper);
}

.page-disclaimer .disclaimer-hero__inner {
  margin-top: 22px;
  max-width: 760px;
}

.page-disclaimer .disclaimer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--teal);
}

.page-disclaimer .disclaimer-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.page-disclaimer .disclaimer-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 7vw, 52px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
}

.page-disclaimer .disclaimer-lead {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}

.page-disclaimer .disclaimer-index {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  background: rgba(228, 236, 236, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.page-disclaimer .disclaimer-index__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-disclaimer .disclaimer-index__list::-webkit-scrollbar {
  display: none;
}

.page-disclaimer .disclaimer-index__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px 10px;
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.page-disclaimer .disclaimer-index__link .idx {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--iris);
}

.page-disclaimer .disclaimer-index__link:hover,
.page-disclaimer .disclaimer-index__link:focus-visible {
  color: var(--ink);
  background: var(--panel);
}

.page-disclaimer .disclaimer-index__link.is-current {
  color: var(--ink);
}

.page-disclaimer .disclaimer-index__link.is-current::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.page-disclaimer .disclaimer-visual {
  padding-top: 28px;
}

.page-disclaimer .disclaimer-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-1);
}

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

.page-disclaimer .disclaimer-figure .media-frame__caption {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--panel);
}

.page-disclaimer .disclaimer-body {
  padding: 8px 0 40px;
}

.page-disclaimer .clause {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 72px);
}

.page-disclaimer .clause:last-of-type {
  border-bottom: 0;
}

.page-disclaimer .clause__aside {
  display: flex;
  align-items: center;
}

.page-disclaimer .clause__num {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--teal);
}

.page-disclaimer .clause__title {
  margin: 0;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

.page-disclaimer .clause__text {
  margin: 10px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}

.page-disclaimer .clause__text + .clause__text {
  margin-top: 8px;
}

.page-disclaimer .clause__text .link-inline {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--volt);
}

.page-disclaimer .clause__text .link-inline:hover,
.page-disclaimer .clause__text .link-inline:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--orange);
}

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

.page-disclaimer .clause__rules li {
  position: relative;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.page-disclaimer .clause__rules li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 2px;
  background: var(--orange-soft);
  border: 1px solid var(--orange);
}

.page-disclaimer .clause--calm {
  margin: 18px 0;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--mist);
}

.page-disclaimer .clause--calm .clause__num {
  background: var(--panel);
}

.page-disclaimer .clause--contact {
  margin: 22px 0 40px;
  padding: 24px 18px;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--cover);
  box-shadow: var(--shadow-2);
}

.page-disclaimer .clause--contact .clause__num {
  border-color: rgba(255, 255, 255, .26);
  background: transparent;
  color: var(--volt);
}

.page-disclaimer .clause--contact .clause__title {
  color: #FFFFFF;
}

.page-disclaimer .clause--contact .clause__text {
  color: #C2D4D6;
}

.page-disclaimer .clause__contacts {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.page-disclaimer .clause__contacts li {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  line-height: 1.6;
  color: #E8F1F1;
}

.page-disclaimer .clause__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--volt);
}

.page-disclaimer .clause__contacts a {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 199, 183, .55);
  overflow-wrap: anywhere;
}

.page-disclaimer .clause__contacts a:hover,
.page-disclaimer .clause__contacts a:focus-visible {
  border-bottom-color: var(--orange);
}

.page-disclaimer .clause--contact .btn-row {
  margin-top: 18px;
}

.page-disclaimer .clause__text,
.page-disclaimer .clause__rules li,
.page-disclaimer .clause__contacts li {
  overflow-wrap: break-word;
}

@media (min-width: 720px) {
  .page-disclaimer .disclaimer-hero {
    padding: 44px 0 52px;
  }

  .page-disclaimer .disclaimer-hero__inner {
    margin-top: 28px;
  }

  .page-disclaimer .disclaimer-lead {
    font-size: 17px;
  }

  .page-disclaimer .disclaimer-visual {
    padding-top: 38px;
  }

  .page-disclaimer .clause {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 36px;
    padding: 36px 0;
  }

  .page-disclaimer .clause__aside {
    align-items: flex-start;
  }

  .page-disclaimer .clause__num {
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--iris);
  }

  .page-disclaimer .clause__title {
    font-size: 27px;
  }

  .page-disclaimer .clause__text {
    font-size: 16px;
  }

  .page-disclaimer .clause--calm {
    margin: 26px 0;
    padding: 32px 28px;
  }

  .page-disclaimer .clause--calm .clause__num {
    background: none;
    color: var(--teal);
  }

  .page-disclaimer .clause--contact {
    margin: 30px 0 60px;
    padding: 38px 34px;
  }

  .page-disclaimer .clause__contacts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    border-top: 0;
  }

  .page-disclaimer .clause__contacts li {
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 0;
  }
}

@media (min-width: 1040px) {
  .page-disclaimer .disclaimer-hero {
    padding: 60px 0 60px;
  }

  .page-disclaimer .disclaimer-title {
    font-size: 54px;
  }

  .page-disclaimer .disclaimer-body {
    padding-bottom: 56px;
  }
}

<main id="main-content" class="page-disclaimer">
  <section class="disclaimer-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <a class="breadcrumbs__link" href="/">首页</a>
        <span class="breadcrumbs__sep" aria-hidden="true">/</span>
        <span class="breadcrumbs__current" aria-current="page">网站使用说明</span>
      </nav>
      <div class="disclaimer-hero__inner">
        <p class="disclaimer-kicker">使用说明</p>
        <h1 class="disclaimer-title">HOPOO 网站使用说明</h1>
        <p class="disclaimer-lead">
          第一次打开 HOPOO 中国区官网，您可能正照着某个页面上的步骤操作，也可能想把其中几步转给同事参考。下面按条款顺序说明访问前提、内容更新、外部链接、引用方式与责任范围，动手之前先扫一眼，很多疑问当场就能明白。
        </p>
      </div>
    </div>
  </section>

  <div class="disclaimer-index">
    <div class="container">
      <ol class="disclaimer-index__list">
        <li>
          <a class="disclaimer-index__link is-current" href="#scope">
            <span class="idx">01</span>适用范围
          </a>
        </li>
        <li>
          <a class="disclaimer-index__link" href="#updates">
            <span class="idx">02</span>内容更新
          </a>
        </li>
        <li>
          <a class="disclaimer-index__link" href="#links">
            <span class="idx">03</span>外部链接
          </a>
        </li>
        <li>
          <a class="disclaimer-index__link" href="#ip">
            <span class="idx">04</span>知识产权
          </a>
        </li>
        <li>
          <a class="disclaimer-index__link" href="#restrictions">
            <span class="idx">05</span>使用限制
          </a>
        </li>
        <li>
          <a class="disclaimer-index__link" href="#liability">
            <span class="idx">06</span>责任说明
          </a>
        </li>
        <li>
          <a class="disclaimer-index__link" href="#contact">
            <span class="idx">07</span>联系方式
          </a>
        </li>
      </ol>
    </div>
  </div>

  <div class="container disclaimer-visual">
    <figure class="media-frame media-frame--wide disclaimer-figure" data-reveal>
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="由页面索引、链接路径与内容区块组成的网站结构示意图">
      <figcaption class="media-frame__caption">站内页面靠导航与正文链接彼此相连，点开后看到的都是面向公众开放的内容。</figcaption>
    </figure>
  </div>

  <div class="container disclaimer-body">
    <article class="clause" id="scope" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">01</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">适用范围</h2>
        <p class="clause__text">
          这份说明适用于 HOPOO 中国区官网面向公众开放的全部页面，包括品牌与上手、客户端与订阅、更新手记、上手问答与联系支持。页面之间互相跳转的站内链接，指向的同样是这些公开内容。
        </p>
        <p class="clause__text">
          上手页面里附带的改版清单、界面标注图、书签指引和版本对照清单，也一并归入这套说明。回到<a class="link-inline" href="/">首页</a>，就能看到第一次访问最常点的几个入口。
        </p>
      </div>
    </article>

    <article class="clause" id="updates" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">02</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">内容更新与版本</h2>
        <p class="clause__text">
          客户端保持每月一次小版本、每季度一次功能版本更新的节奏。会员中心位置、订阅入口和页面路径会跟着版本一起调整，对应的步骤说明也会同步改写。
        </p>
        <p class="clause__text">
          被替换下来的旧截图和旧步骤会归档，不再作为操作依据。如果您手上还留着几个月前的截图，按当前页面显示的路径走，更新手记里也会有对应提示。
        </p>
      </div>
    </article>

    <article class="clause" id="links" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">03</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">外部链接</h2>
        <p class="clause__text">
          站内少数位置带有指向外部服务的链接，例如设备系统帮助或浏览器使用说明。跳转过去之后，页面的内容、可用性与信息处理由该服务的运营方负责，届时适用对方公布的条款和隐私说明。
        </p>
        <p class="clause__text">
          在外部页面填写信息或授予权限之前，建议先看一眼那边的说明。HOPOO 官网自身如何处理您留下的信息，可以查阅<a class="link-inline" href="/personal-data/">个人信息说明</a>。
        </p>
      </div>
    </article>

    <article class="clause" id="ip" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">04</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">知识产权</h2>
        <p class="clause__text">
          站内的文字、图形、界面标注图、版式与配色归 HOPOO 或相应权利人所有。转载、引用或节选时请注明来源为 HOPOO 中国区官网，并保留页面原有的署名与版权标识。
        </p>
        <p class="clause__text">
          用于内部培训、对外发布或商业场景之前，建议先通过下方的邮箱说明用途与使用范围，我们会给出对应的引用建议。
        </p>
      </div>
    </article>

    <article class="clause" id="restrictions" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">05</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">使用限制</h2>
        <p class="clause__text">使用站内内容时，请避免以下做法：</p>
        <ul class="clause__rules">
          <li>用自动化程序高频抓取页面内容，影响他人正常访问</li>
          <li>冒用 HOPOO 名义对外发布信息、招揽业务或收取费用</li>
          <li>把上手步骤与界面截图改作误导性用途，或隐去原有标注</li>
          <li>以违反法律法规的方式使用站内图文与版式</li>
        </ul>
        <p class="clause__text">
          出现上述情形时，HOPOO 可以要求停止使用相关素材，并保留追究相应责任的权利。
        </p>
      </div>
    </article>

    <article class="clause clause--calm" id="liability" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">06</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">责任说明</h2>
        <p class="clause__text">
          HOPOO 按内容团队的更新节奏维护页面，也会尽力保障公开页面正常访问。遇到网络、设备、浏览器或第三方服务等外部原因造成的访问中断与显示差异，我们会在恢复后尽快补齐页面内容。
        </p>
        <p class="clause__text">
          外部链接页面由该页面的提供方运营，其内容、活动与可用性以该页面当时的实际呈现为准。上手资料用于帮助您理解操作路径，涉及账户与订阅的决定，请以客户端内显示的页面为准。
        </p>
      </div>
    </article>

    <article class="clause clause--contact" id="contact" data-reveal>
      <div class="clause__aside">
        <span class="clause__num">07</span>
      </div>
      <div class="clause__main">
        <h2 class="clause__title">联系方式与说明变更</h2>
        <p class="clause__text">
          这份说明如有调整，会在本页面直接更新。查阅中遇到页面打不开、步骤与截图对不上，或者需要引用站内图文，欢迎通过这些方式找到我们。
        </p>
        <ul class="clause__contacts">
          <li>
            <span class="clause__label">邮箱</span>
            <a href="mailto:service@hopoo-firststep.com.cn">service@hopoo-firststep.com.cn</a>
          </li>
          <li>
            <span class="clause__label">电话</span>
            <a href="tel:17181016733">17181016733</a>
          </li>
          <li>
            <span class="clause__label">地址</span>
            <span>江苏省南京市建邺区江东中路369号</span>
          </li>
        </ul>
        <p class="clause__text">
          工作日 9:00-18:00 在线，邮件通常 24 小时内回复。订阅相关的问题，附上设备类型与页面截图，定位会快很多。
        </p>
        <div class="btn-row">
          <a class="btn btn--primary" href="/inquiry/">联系支持</a>
        </div>
      </div>
    </article>
  </div>
</main>

.page-disclaimer {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.page-disclaimer .disclaimer-hero {
  padding: 24px 0 36px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(228, 236, 236, .6) 0%, rgba(244, 247, 246, 0) 78%),
    var(--paper);
}

.page-disclaimer .disclaimer-hero__inner {
  margin-top: 22px;
  max-width: 760px;
}

.page-disclaimer .disclaimer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--teal);
}

.page-disclaimer .disclaimer-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.page-disclaimer .disclaimer-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 7vw, 52px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
}

.page-disclaimer .disclaimer-lead {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}

.page-disclaimer .disclaimer-index {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  background: rgba(228, 236, 236, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.page-disclaimer .disclaimer-index__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-disclaimer .disclaimer-index__list::-webkit-scrollbar {
  display: none;
}

.page-disclaimer .disclaimer-index__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px 10px;
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.page-disclaimer .disclaimer-index__link .idx {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--iris);
}

.page-disclaimer .disclaimer-index__link:hover,
.page-disclaimer .disclaimer-index__link:focus-visible {
  color: var(--ink);
  background: var(--panel);
}

.page-disclaimer .disclaimer-index__link.is-current {
  color: var(--ink);
}

.page-disclaimer .disclaimer-index__link.is-current::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.page-disclaimer .disclaimer-visual {
  padding-top: 28px;
}

.page-disclaimer .disclaimer-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-1);
}

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

.page-disclaimer .disclaimer-figure .media-frame__caption {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--panel);
}

.page-disclaimer .disclaimer-body {
  padding: 8px 0 40px;
}

.page-disclaimer .clause {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 72px);
}

.page-disclaimer .clause:last-of-type {
  border-bottom: 0;
}

.page-disclaimer .clause__aside {
  display: flex;
  align-items: center;
}

.page-disclaimer .clause__num {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--teal);
}

.page-disclaimer .clause__title {
  margin: 0;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

.page-disclaimer .clause__text {
  margin: 10px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}

.page-disclaimer .clause__text + .clause__text {
  margin-top: 8px;
}

.page-disclaimer .clause__text .link-inline {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--volt);
}

.page-disclaimer .clause__text .link-inline:hover,
.page-disclaimer .clause__text .link-inline:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--orange);
}

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

.page-disclaimer .clause__rules li {
  position: relative;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.page-disclaimer .clause__rules li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 2px;
  background: var(--orange-soft);
  border: 1px solid var(--orange);
}

.page-disclaimer .clause--calm {
  margin: 18px 0;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--mist);
}

.page-disclaimer .clause--calm .clause__num {
  background: var(--panel);
}

.page-disclaimer .clause--contact {
  margin: 22px 0 40px;
  padding: 24px 18px;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--cover);
  box-shadow: var(--shadow-2);
}

.page-disclaimer .clause--contact .clause__num {
  border-color: rgba(255, 255, 255, .26);
  background: transparent;
  color: var(--volt);
}

.page-disclaimer .clause--contact .clause__title {
  color: #FFFFFF;
}

.page-disclaimer .clause--contact .clause__text {
  color: #C2D4D6;
}

.page-disclaimer .clause__contacts {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.page-disclaimer .clause__contacts li {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  line-height: 1.6;
  color: #E8F1F1;
}

.page-disclaimer .clause__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--volt);
}

.page-disclaimer .clause__contacts a {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 199, 183, .55);
  overflow-wrap: anywhere;
}

.page-disclaimer .clause__contacts a:hover,
.page-disclaimer .clause__contacts a:focus-visible {
  border-bottom-color: var(--orange);
}

.page-disclaimer .clause--contact .btn-row {
  margin-top: 18px;
}

.page-disclaimer .clause__text,
.page-disclaimer .clause__rules li,
.page-disclaimer .clause__contacts li {
  overflow-wrap: break-word;
}

@media (min-width: 720px) {
  .page-disclaimer .disclaimer-hero {
    padding: 44px 0 52px;
  }

  .page-disclaimer .disclaimer-hero__inner {
    margin-top: 28px;
  }

  .page-disclaimer .disclaimer-lead {
    font-size: 17px;
  }

  .page-disclaimer .disclaimer-visual {
    padding-top: 38px;
  }

  .page-disclaimer .clause {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 36px;
    padding: 36px 0;
  }

  .page-disclaimer .clause__aside {
    align-items: flex-start;
  }

  .page-disclaimer .clause__num {
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--iris);
  }

  .page-disclaimer .clause__title {
    font-size: 27px;
  }

  .page-disclaimer .clause__text {
    font-size: 16px;
  }

  .page-disclaimer .clause--calm {
    margin: 26px 0;
    padding: 32px 28px;
  }

  .page-disclaimer .clause--calm .clause__num {
    background: none;
    color: var(--teal);
  }

  .page-disclaimer .clause--contact {
    margin: 30px 0 60px;
    padding: 38px 34px;
  }

  .page-disclaimer .clause__contacts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    border-top: 0;
  }

  .page-disclaimer .clause__contacts li {
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 0;
  }
}

@media (min-width: 1040px) {
  .page-disclaimer .disclaimer-hero {
    padding: 60px 0;
  }

  .page-disclaimer .disclaimer-title {
    font-size: 54px;
  }

  .page-disclaimer .disclaimer-body {
    padding-bottom: 56px;
  }
}