.page-disclaimer {
  --doc-gap: 32px;
  --doc-rail: 232px;
  display: block;
  background: var(--porcelain);
  color: var(--ink);
  overflow-x: hidden;
}

.page-disclaimer [id] {
  scroll-margin-top: calc(var(--header-h) + 80px);
}

/* ---------- 首屏 ---------- */
.page-disclaimer .doc-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 52px) 0 52px;
  background:
    radial-gradient(115% 85% at 92% 4%, rgba(255, 179, 71, 0.42), rgba(255, 90, 60, 0.12) 46%, rgba(252, 251, 249, 0) 74%),
    var(--porcelain);
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .doc-hero::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(27, 42, 74, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.page-disclaimer .doc-hero::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -1px;
  width: 58%;
  height: 70%;
  background: linear-gradient(135deg, rgba(255, 90, 60, 0.14), rgba(255, 179, 71, 0.3));
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-disclaimer .doc-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-disclaimer .breadcrumb {
  margin: 0 0 20px;
  font-size: 13px;
}

.page-disclaimer .kicker {
  margin: 0 0 16px;
}

.page-disclaimer h1.t-hero {
  margin: 0 0 20px;
  font-size: clamp(38px, 9vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--ink);
}

.page-disclaimer .lede {
  margin: 0 0 28px;
  max-width: 700px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--graphite);
}

.page-disclaimer .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-disclaimer .hero-tags .tag {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ---------- 锚点目录 ---------- */
.page-disclaimer .doc-index {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--cream);
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .index-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.page-disclaimer .index-list li {
  flex: 0 0 auto;
}

.page-disclaimer .index-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 2px solid var(--ink-deep);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-disclaimer .index-list a:hover,
.page-disclaimer .index-list a:focus-visible {
  border-color: var(--orange);
  background: var(--peach);
  transform: translateY(-2px);
}

.page-disclaimer .index-list a .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--orange);
}

/* ---------- 双栏错位正文 ---------- */
.page-disclaimer .doc-block {
  padding: 52px 0;
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .doc-block:last-of-type {
  border-bottom: 0;
  padding-bottom: 88px;
}

.page-disclaimer .doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.page-disclaimer .doc-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  border-left: 6px solid var(--orange);
}

.page-disclaimer .doc-num {
  font-family: var(--mono);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--orange);
}

.page-disclaimer .doc-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

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

.page-disclaimer .doc-body > * {
  margin-top: 0;
  margin-bottom: var(--doc-gap);
}

.page-disclaimer .doc-body > *:last-child {
  margin-bottom: 0;
}

.page-disclaimer .doc-body p {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}

/* ---------- 环境清单 ---------- */
.page-disclaimer .env-list {
  list-style: none;
  margin: 0 0 var(--doc-gap);
  padding: 0;
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-hard);
}

.page-disclaimer .env-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 15px 20px;
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .env-item:nth-child(even) {
  background: var(--cream);
}

.page-disclaimer .env-item:last-child {
  border-bottom: 0;
}

.page-disclaimer .env-key {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--orange-deep);
}

.page-disclaimer .env-val {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- 勾选清单 ---------- */
.page-disclaimer .check-list {
  list-style: none;
  margin: 0 0 var(--doc-gap);
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-disclaimer .check-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
}

.page-disclaimer .check {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  padding: 3px;
  color: var(--teal-ink);
  background: rgba(0, 201, 167, 0.14);
  border: 2px solid var(--teal-ink);
  border-radius: 50%;
  box-sizing: border-box;
}

/* ---------- 浅底提示块 ---------- */
.page-disclaimer .note-block {
  padding: 24px 26px;
  border: 2px solid var(--ink-deep);
  border-left: 10px solid var(--gold);
  border-radius: var(--radius-md);
  background: var(--cream);
  box-shadow: var(--shadow-hard-sm);
}

.page-disclaimer .note-title {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
  text-transform: uppercase;
}

.page-disclaimer .note-block p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
}

/* ---------- 版本条目 ---------- */
.page-disclaimer .ver-list {
  list-style: none;
  margin: 0 0 var(--doc-gap);
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-disclaimer .ver-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 18px 20px;
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-hard-sm);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-disclaimer .ver-item:hover {
  border-color: var(--orange);
  background: var(--peach);
  transform: translateY(-2px);
}

.page-disclaimer .ver-key {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.page-disclaimer .ver-val {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 图片 ---------- */
.page-disclaimer .doc-figure {
  margin: 0 0 var(--doc-gap);
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--peach), var(--cream));
  box-shadow: var(--shadow-hard);
}

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

.page-disclaimer .doc-figure figcaption {
  padding: 12px 18px;
  border-top: 2px solid var(--ink-deep);
  background: var(--white);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--graphite);
}

/* ---------- 折叠补充 ---------- */
.page-disclaimer .fold {
  margin: 0 0 14px;
}

.page-disclaimer .fold-body {
  margin: 0;
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--graphite);
}

/* ---------- 求助卡片 ---------- */
.page-disclaimer .help-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: var(--doc-gap);
}

.page-disclaimer .help-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-disclaimer .help-card:hover,
.page-disclaimer .help-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard-lg);
  border-color: var(--orange);
  background: var(--peach);
}

.page-disclaimer .help-card-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-disclaimer .help-card-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-disclaimer .help-card-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--graphite);
}

.page-disclaimer .help-card-go {
  align-self: flex-start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--teal-ink);
  transition: border-color 0.18s var(--ease);
}

.page-disclaimer .help-card:hover .help-card-go {
  border-bottom-color: var(--teal-ink);
}

.page-disclaimer .contact-line {
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--graphite);
}

.page-disclaimer .contact-line .link-u {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14.5px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 700px) {
  .page-disclaimer .doc-hero {
    padding: calc(var(--header-h) + 72px) 0 64px;
  }

  .page-disclaimer .env-item {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
    padding: 16px 22px;
  }

  .page-disclaimer .ver-item {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
    padding: 20px 24px;
  }

  .page-disclaimer .help-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-disclaimer .doc-block {
    padding: 72px 0;
  }

  .page-disclaimer .doc-grid {
    grid-template-columns: var(--doc-rail) minmax(0, 1fr);
    gap: 64px;
  }

  .page-disclaimer .doc-rail {
    position: sticky;
    top: calc(var(--header-h) + 76px);
  }

  .page-disclaimer .doc-block--shift .doc-grid {
    grid-template-columns: minmax(0, 1fr) var(--doc-rail);
  }

  .page-disclaimer .doc-block--shift .doc-rail {
    order: 2;
    border-left: 0;
    border-right: 6px solid var(--ink-deep);
    padding-left: 0;
    padding-right: 16px;
    align-items: flex-end;
    text-align: right;
  }
}
<<<END>>>

等等——我用了 `.doc-block--shift .doc-grid`，把 rail 放到了右侧。这是“错位”的做法：偶数区块左右镜像。但 rail 的顺序是 `order: 2`——网格列从 `1fr` 变成 `--doc-rail`，顺序对调意味着 rail 进入第二列（也就是 232px 那一列）。这样没问题。

不过等等，`.doc-rail` 在移动端是 `position: sticky`。窄屏下 sticky 会产生奇怪的叠加效果；只在 960px 以上启用——这个已经处理好了。

另外 `doc-block--shift` 里的 `align-items: flex-end`——rail 是 flex column，文本右对齐。可以。

嗯，不过关于 `--doc-rail` 变量在 `.page-disclaimer` 作用域里——`grid-template-columns: var(--doc-rail)` 是能正常解析的。✓

`--doc-gap` 和 `--doc-rail` 都在 `.page-disclaimer` 作用域里定义过了。✓

检查一下我用到的变量全是存在：`--porcelain`、`--ink`、`--header-h`、`--gold`、`--orange`、`--teal-ink`、`--cream`、`--white`、`--peach`、`--graphite`、`--ink-deep`、`--orange-deep`、`--wrap`、`--gutter`、`--ease`、`--radius-lg`、`--radius-md`、`--shadow-hard`、`--shadow-hard-sm`、`--shadow-hard-lg`、`--mono`。都是真实存在的。✓

我没有用 `--wrap` 和 `--gutter`，不过没关系。

`.doc-hero` 里用了 `var(--header-h)` ✓。

嵌套的 `.doc-hero::after` 里用了 `rgba` ✓。

嗯，`clip-path` 是没问题——不会触发横向滚动，因为 `.doc-hero` 上有 `overflow: hidden`。

再确认一下 `.page-disclaimer` 上的 `overflow-x: hidden`。嗯，如果祖先元素有 `overflow-x: hidden`，sticky 定位可能会出问题——其实 `overflow: hidden` 在祖先上会破坏 sticky。等等：sticky 在滚动祖先有 `overflow: hidden` 时会不会失效——其实 `overflow: hidden` 的祖先会变成滚动容器，sticky 是相对于这个容器而不是视口的，那就失效了。

所以 `.page-disclaimer { overflow-x: hidden }` 会破坏 `.doc-index` 和 `.doc-rail` 的 sticky。得去掉它。

但这样一来横向滚动就暴露了风险。最好还是保证没有元素溢出。`.doc-hero::after` 的 `right: -5%` 配上 `overflow: hidden` 没问题——`overflow: hidden` 放在 `.doc-hero` 上是可以的，因为它本身不是滚动祖先……其实 `overflow: hidden` 在元素上同样会让它成为滚动容器，但这只影响它的后代元素，而里面没有 sticky。没问题。

那就从 `.page-disclaimer` 上移除 `overflow-x: hidden`。

还要加上 `overflow-x: clip` 吗？有些浏览器支持，但可能会破坏兼容性。干脆不用了，确保没有溢出就行。

`.index-list` 有 `overflow-x: auto`——没问题。

好，我把那条规则删掉。

还有 `.page-disclaimer .doc-rail { position: sticky; top: ... }`——没问题。

把最终版本定下来。

现在再仔细检查一下 HTML 里用了的、也都在 CSS 里定义过的类：

- doc-hero ✓
- wrap ✓（共享）
- breadcrumb ✓（共享）
- crumb-sep ✓（共享）
- kicker ✓（共享）
- t-hero ✓（共享）
- display ✓（共享）
- lede ✓（共享）
- hero-tags ✓
- tag、tag--teal、tag--gold、tag--outline ✓（共享）
- doc-index ✓
- index-list ✓
- mono ✓（共享）
- doc-block ✓
- doc-block--shift ✓
- doc-grid ✓
- doc-rail ✓
- doc-num ✓
- doc-title ✓
- doc-body ✓
- env-list、env-item、env-key、env-val ✓
- doc-figure ✓
- fold、fold-body ✓（共享 + 页面内距离调整）
- check-list、check ✓
- note-block、note-title ✓
- ver-list、ver-item、ver-key、ver-val ✓
- help-cards、help-card、help-card-num、help-card-title、help-card-desc、help-card-go ✓
- contact-line ✓
- link-u ✓（共享）

这些都覆盖到了。

`.page-disclaimer` 里定义了 `--doc-gap` 和 `--doc-rail`，没问题 ✓

锚点：`#access`、`#account`、`#version`、`#external`、`#help` —— 对应的 id 都真实存在 ✓

站内链接：`/`、`/privacy/`、`/answers/`、`/inquiry/`、`mailto:`、`tel:` ✓

图片数量：1 张，带 lazy loading 和 decoding ✓，alt 描述也写了 ✓

图片占位符：`{zhanqunpic:h:520w:900}` 和 width 900、height 520 是对应的 ✓

h1 只出现一次 ✓

品牌名“优乐在线”出现在导语里 ✓

好了。再把 `overflow-x` 那点调整一下，然后输出最终版。
<main id="main-content" class="page-disclaimer">

  <section class="doc-hero">
    <div class="wrap">
      <p class="breadcrumb">
        <a href="/">首页</a><span class="crumb-sep">/</span><span>使用说明</span>
      </p>
      <p class="kicker">使用说明 / GUIDE</p>
      <h1 class="t-hero display">使用说明</h1>
      <p class="lede">想顺畅完成注册和登录，浏览器、屏幕宽度和网络条件都有讲究。优乐在线把访问环境、账号操作、版本标识和站外跳转的注意事项集中在这里，遇到问题也标好了最近的两个求助入口。</p>
      <div class="hero-tags">
        <span class="tag tag--teal">当前版本 V3</span>
        <span class="tag tag--gold">权益中心 第 4 版</span>
        <span class="tag tag--outline">账号问题优先处理</span>
      </div>
    </div>
  </section>

  <nav class="doc-index" aria-label="本页目录">
    <div class="wrap">
      <ol class="index-list">
        <li><a href="#access"><span class="mono">01</span>访问环境</a></li>
        <li><a href="#account"><span class="mono">02</span>注册与登录</a></li>
        <li><a href="#version"><span class="mono">03</span>版本标识</a></li>
        <li><a href="#external"><span class="mono">04</span>站外跳转</a></li>
        <li><a href="#help"><span class="mono">05</span>求助入口</a></li>
      </ol>
    </div>
  </nav>

  <section class="doc-block" id="access">
    <div class="wrap doc-grid">
      <div class="doc-rail">
        <span class="doc-num mono">01</span>
        <h2 class="doc-title">访问条件与推荐环境</h2>
      </div>
      <div class="doc-body">
        <p>入口页、注册页与权益中心都做了响应式适配，电脑、平板与手机打开的是同一套内容，只是排版密度不同。</p>

        <ul class="env-list">
          <li class="env-item">
            <span class="env-key mono">Chrome · Edge</span>
            <span class="env-val">最近两个大版本，桌面端与移动端都能完整使用注册与登录。</span>
          </li>
          <li class="env-item">
            <span class="env-key mono">Safari</span>
            <span class="env-val">iOS 与 macOS 自带的最近两个版本，记住登录与设备管理功能表现正常。</span>
          </li>
          <li class="env-item">
            <span class="env-key mono">Firefox</span>
            <span class="env-val">最近两个大版本，权益中心与答疑中心的折叠面板展开一致。</span>
          </li>
          <li class="env-item">
            <span class="env-key mono">国产浏览器</span>
            <span class="env-val">请切到极速模式，兼容模式下的表单校验可能出现延迟。</span>
          </li>
          <li class="env-item">
            <span class="env-key mono">屏幕宽度</span>
            <span class="env-val">桌面端 1280px 及以上可看到完整的两栏排版；手机与平板从 360px 起就能走完全流程。</span>
          </li>
          <li class="env-item">
            <span class="env-key mono">网络条件</span>
            <span class="env-val">常规宽带与 4G、5G 网络都可以，注册流程平均耗时 42 秒。</span>
          </li>
        </ul>

        <figure class="doc-figure">
          <img src="{zhanqunpic:h:520w:900}" width="900" height="520" alt="笔记本、平板与手机轮廓并排的抽象图，暖金描边标示出已覆盖的设备与浏览器范围" loading="lazy" decoding="async">
          <figcaption>手机、平板与电脑共用同一账户，换设备不必重新走一遍注册。</figcaption>
        </figure>

        <details class="fold">
          <summary>页面样式错乱，或者按钮点了没反应，先看哪里？</summary>
          <div class="fold-body">
            多半是浏览器缓存或页面缩放比例造成的。先强制刷新一次，把缩放恢复到 100%，再确认当前用的是极速模式；如果仍然异常，换一款推荐浏览器就能判断问题出在哪一侧。
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="doc-block doc-block--shift" id="account">
    <div class="wrap doc-grid">
      <div class="doc-rail">
        <span class="doc-num mono">02</span>
        <h2 class="doc-title">注册与登录使用注意</h2>
      </div>
      <div class="doc-body">
        <p>一个手机号或一个邮箱对应一个账户，注册完之后不再区分设备入口，电脑端和手机端登录进去看到的是同一份资料。</p>

        <ul class="check-list">
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>验证方式有手机号验证与邮箱验证两种，注册时选一种即可，之后可以补上另一种。</span>
          </li>
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>常用设备最多可绑定 5 台，手机、平板与电脑一并计入。</span>
          </li>
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>勾选记住登录后，登录状态最长保留 30 天，到期重新输入一次密码即可。</span>
          </li>
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>登录提醒、设备管理与异常登录核验三项默认开启，随时能在设备列表里移除某一台。</span>
          </li>
        </ul>

        <div class="note-block">
          <p class="note-title mono">换设备不用从头再来</p>
          <p>在电脑端填到一半的操作，换到手机上仍然停在原处，登录状态与偏好设置会一并跟上。公共设备上建议取消勾选「记住登录」，用完直接去设备管理里退出。</p>
        </div>

        <details class="fold">
          <summary>登录时被要求额外核验，是不是账号出问题了？</summary>
          <div class="fold-body">
            在新设备或陌生网络下首次登录，系统会按异常登录核验流程再确认一次，属于常规的保护动作。核验通过后，这台设备会出现在设备列表中，不想要了随时可以移除。
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="doc-block" id="version">
    <div class="wrap doc-grid">
      <div class="doc-rail">
        <span class="doc-num mono">03</span>
        <h2 class="doc-title">页面内容与版本标识</h2>
      </div>
      <div class="doc-body">
        <p>页面上出现的 V3、第 4 版这类标识，指的是你正在使用的能力属于哪一轮迭代，跟账号本身没有关系，也不会影响已有数据。</p>

        <ul class="ver-list">
          <li class="ver-item">
            <span class="ver-key mono">V3</span>
            <span class="ver-val">当前主力版本。注册与登录在同一页完成，品牌服务查询由 4 步缩到 2 步，常用人群按通勤、办公、校园与家庭四类给出入口引导。</span>
          </li>
          <li class="ver-item">
            <span class="ver-key mono">V2</span>
            <span class="ver-val">保留原入口继续开放，登录方式没有变化，习惯旧界面的用户可以照常使用。</span>
          </li>
          <li class="ver-item">
            <span class="ver-key mono">权益中心 第 4 版</span>
            <span class="ver-val">六大类别、32 项具体权益，新增权益到期提醒与跨设备权益查询两项功能。</span>
          </li>
        </ul>

        <p>平台每年发布 4 次版本更新与 12 次服务公告，条目按版本迭代、权益上新、服务公告和用户故事归档在更新动态栏目里。标识推进到新一版时，页面上的数字与分类会一起换成新版内容。</p>
      </div>
    </div>
  </section>

  <section class="doc-block doc-block--shift" id="external">
    <div class="wrap doc-grid">
      <div class="doc-rail">
        <span class="doc-num mono">04</span>
        <h2 class="doc-title">外部链接与第三方服务</h2>
      </div>
      <div class="doc-body">
        <p>个别位置会把你带到站外：合作设备厂商的预装说明页、内容伙伴的联合权益页，以及渠道方提供的活动入口。</p>

        <ul class="check-list">
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>跳转后打开的页面由合作方提供和运营，内容、活动规则与使用条款以对方页面上的说明为准。</span>
          </li>
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>账号和密码只在注册、登录页输入，任何外部页面都不会向你索要。</span>
          </li>
          <li>
            <svg class="check" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 10.5 8 14.5 16 5.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>合作形式有预装、联合权益与渠道入口三类，目前涉及 12 家设备厂商和 9 家内容及服务伙伴。</span>
          </li>
        </ul>

        <p>账号数据的收集与使用范围，可以对照 <a class="link-u" href="/privacy/">隐私政策</a> 查看。</p>

        <details class="fold">
          <summary>怎么判断一次跳转是否安全？</summary>
          <div class="fold-body">
            先看地址栏是不是本站地址，是站外页面的话通常会在显著位置写明合作方名称。如果页面样式陌生、又反复索要验证码，先关掉它，再回到入口页重新进入一次。
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="doc-block" id="help">
    <div class="wrap doc-grid">
      <div class="doc-rail">
        <span class="doc-num mono">05</span>
        <h2 class="doc-title">遇到问题去哪里</h2>
      </div>
      <div class="doc-body">
        <p>大多数操作问题在答疑中心就能自助解决。320 篇文章按注册、登录、设备与权益四类归档，先用关键词搜一下通常更快。</p>

        <div class="help-cards">
          <a class="help-card" href="/answers/">
            <span class="help-card-num mono">A / 自助</span>
            <span class="help-card-title">答疑中心</span>
            <span class="help-card-desc">注册没反应、电脑端打不开、换设备要不要重新登录，先在这里按关键词找答案。</span>
            <span class="help-card-go">去查答案 →</span>
          </a>
          <a class="help-card" href="/inquiry/">
            <span class="help-card-num mono">B / 人工</span>
            <span class="help-card-title">咨询通道</span>
            <span class="help-card-desc">账号异常、建议反馈，以及设备厂商与内容伙伴的合作洽谈，都可以从这里发起。</span>
            <span class="help-card-go">联系我们 →</span>
          </a>
        </div>

        <p class="contact-line">客服邮箱 <a class="link-u" href="mailto:info@youle-online.com.cn">info@youle-online.com.cn</a>，电话 <a class="link-u" href="tel:18472018060">18472018060</a>，工作日 9:00–18:00 响应，注册与登录类问题优先处理，账号问题平均 6 小时内首次响应。</p>
      </div>
    </div>
  </section>

</main>

.page-disclaimer {
  --doc-gap: 32px;
  --doc-rail: 232px;
  display: block;
  background: var(--porcelain);
  color: var(--ink);
}

.page-disclaimer [id] {
  scroll-margin-top: calc(var(--header-h) + 80px);
}

/* ---------- 首屏 ---------- */
.page-disclaimer .doc-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 52px) 0 52px;
  background:
    radial-gradient(115% 85% at 92% 4%, rgba(255, 179, 71, 0.42), rgba(255, 90, 60, 0.12) 46%, rgba(252, 251, 249, 0) 74%),
    var(--porcelain);
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .doc-hero::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(27, 42, 74, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.page-disclaimer .doc-hero::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -1px;
  width: 58%;
  height: 70%;
  background: linear-gradient(135deg, rgba(255, 90, 60, 0.14), rgba(255, 179, 71, 0.3));
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-disclaimer .doc-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-disclaimer .breadcrumb {
  margin: 0 0 20px;
  font-size: 13px;
}

.page-disclaimer .kicker {
  margin: 0 0 16px;
}

.page-disclaimer h1.t-hero {
  margin: 0 0 20px;
  font-size: clamp(38px, 9vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--ink);
}

.page-disclaimer .lede {
  margin: 0 0 28px;
  max-width: 700px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--graphite);
}

.page-disclaimer .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-disclaimer .hero-tags .tag {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ---------- 锚点目录 ---------- */
.page-disclaimer .doc-index {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--cream);
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .doc-index .wrap {
  min-width: 0;
}

.page-disclaimer .index-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.page-disclaimer .index-list li {
  flex: 0 0 auto;
}

.page-disclaimer .index-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 2px solid var(--ink-deep);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-disclaimer .index-list a:hover,
.page-disclaimer .index-list a:focus-visible {
  border-color: var(--orange);
  background: var(--peach);
  transform: translateY(-2px);
}

.page-disclaimer .index-list a .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--orange);
}

/* ---------- 双栏错位正文 ---------- */
.page-disclaimer .doc-block {
  padding: 52px 0;
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .doc-block:last-of-type {
  border-bottom: 0;
  padding-bottom: 88px;
}

.page-disclaimer .doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.page-disclaimer .doc-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  border-left: 6px solid var(--orange);
}

.page-disclaimer .doc-num {
  font-family: var(--mono);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--orange);
}

.page-disclaimer .doc-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

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

.page-disclaimer .doc-body > * {
  margin-top: 0;
  margin-bottom: var(--doc-gap);
}

.page-disclaimer .doc-body > *:last-child {
  margin-bottom: 0;
}

.page-disclaimer .doc-body p {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}

/* ---------- 环境清单 ---------- */
.page-disclaimer .env-list {
  list-style: none;
  margin: 0 0 var(--doc-gap);
  padding: 0;
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-hard);
}

.page-disclaimer .env-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 15px 20px;
  border-bottom: 2px solid var(--ink-deep);
}

.page-disclaimer .env-item:nth-child(even) {
  background: var(--cream);
}

.page-disclaimer .env-item:last-child {
  border-bottom: 0;
}

.page-disclaimer .env-key {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--orange-deep);
}

.page-disclaimer .env-val {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- 勾选清单 ---------- */
.page-disclaimer .check-list {
  list-style: none;
  margin: 0 0 var(--doc-gap);
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-disclaimer .check-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
}

.page-disclaimer .check {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  padding: 3px;
  color: var(--teal-ink);
  background: rgba(0, 201, 167, 0.14);
  border: 2px solid var(--teal-ink);
  border-radius: 50%;
  box-sizing: border-box;
}

/* ---------- 浅底提示块 ---------- */
.page-disclaimer .note-block {
  padding: 24px 26px;
  border: 2px solid var(--ink-deep);
  border-left: 10px solid var(--gold);
  border-radius: var(--radius-md);
  background: var(--cream);
  box-shadow: var(--shadow-hard-sm);
}

.page-disclaimer .note-title {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
  text-transform: uppercase;
}

.page-disclaimer .note-block p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
}

/* ---------- 版本条目 ---------- */
.page-disclaimer .ver-list {
  list-style: none;
  margin: 0 0 var(--doc-gap);
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-disclaimer .ver-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 18px 20px;
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-hard-sm);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-disclaimer .ver-item:hover {
  border-color: var(--orange);
  background: var(--peach);
  transform: translateY(-2px);
}

.page-disclaimer .ver-key {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.page-disclaimer .ver-val {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 图片 ---------- */
.page-disclaimer .doc-figure {
  margin: 0 0 var(--doc-gap);
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--peach), var(--cream));
  box-shadow: var(--shadow-hard);
}

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

.page-disclaimer .doc-figure figcaption {
  padding: 12px 18px;
  border-top: 2px solid var(--ink-deep);
  background: var(--white);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--graphite);
}

/* ---------- 折叠补充 ---------- */
.page-disclaimer .fold {
  margin: 0 0 14px;
}

.page-disclaimer .fold-body {
  margin: 0;
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--graphite);
}

/* ---------- 求助卡片 ---------- */
.page-disclaimer .help-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: var(--doc-gap);
}

.page-disclaimer .help-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border: 2px solid var(--ink-deep);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-disclaimer .help-card:hover,
.page-disclaimer .help-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard-lg);
  border-color: var(--orange);
  background: var(--peach);
}

.page-disclaimer .help-card-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-disclaimer .help-card-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-disclaimer .help-card-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--graphite);
}

.page-disclaimer .help-card-go {
  align-self: flex-start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--teal-ink);
  transition: border-color 0.18s var(--ease);
}

.page-disclaimer .help-card:hover .help-card-go {
  border-bottom-color: var(--teal-ink);
}

.page-disclaimer .contact-line {
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--graphite);
}

.page-disclaimer .contact-line .link-u {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14.5px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 700px) {
  .page-disclaimer .doc-hero {
    padding: calc(var(--header-h) + 72px) 0 64px;
  }

  .page-disclaimer .env-item {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
    padding: 16px 22px;
  }

  .page-disclaimer .ver-item {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
    padding: 20px 24px;
  }

  .page-disclaimer .help-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-disclaimer .doc-block {
    padding: 72px 0;
  }

  .page-disclaimer .doc-grid {
    grid-template-columns: var(--doc-rail) minmax(0, 1fr);
    gap: 64px;
  }

  .page-disclaimer .doc-rail {
    position: sticky;
    top: calc(var(--header-h) + 76px);
  }

  .page-disclaimer .doc-block--shift .doc-grid {
    grid-template-columns: minmax(0, 1fr) var(--doc-rail);
  }

  .page-disclaimer .doc-block--shift .doc-rail {
    order: 2;
    border-left: 0;
    border-right: 6px solid var(--ink-deep);
    padding-left: 0;
    padding-right: 16px;
    align-items: flex-end;
    text-align: right;
  }
}
<<<END>>>