.page-home {
  --home-band: clamp(56px, 8vw, 104px);
  --home-pad: max(var(--shell-pad), calc((100% - 1320px) / 2));
  background: var(--mist-50);
  color: var(--ink-900);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-home h1,
.page-home h2,
.page-home h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-900);
}

.page-home p {
  margin: 0;
}

.page-home .band {
  padding-inline: var(--home-pad);
  padding-block: var(--home-band);
}

.page-home .band--paper {
  background: var(--paper);
}

.page-home .band--tint {
  background: var(--mist-100);
}

/* 区块标题行 */
.page-home .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .head h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-home .head__index {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-500);
}

/* 首屏 */
.page-home .hero {
  position: relative;
  padding-inline: var(--home-pad);
  padding-top: clamp(32px, 4.5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: var(--mist-50);
}

.page-home .hero .eyebrow {
  margin: 0;
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  margin-top: clamp(18px, 2.4vw, 30px);
}

.page-home .hero__head h1 {
  font-size: clamp(36px, 5.4vw, 70px);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 15ch;
}

.page-home .hero__lead {
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 54ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .hero__aside {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .hero__inline {
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-home .hero__inline:hover {
  color: var(--orange);
}

/* 橙色错位块 */
.page-home .hero__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(26px, 3.6vw, 40px);
  color: var(--paper);
}

.page-home .hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}

.page-home .hero__figure {
  margin: 0;
}

.page-home .hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  object-fit: cover;
}

.page-home .hero__panel-note {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper);
}

.page-home .hero__panel-note .mono {
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

.page-home .hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 22px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-home .hero__cta::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 14px;
}

.page-home .hero__cta:hover,
.page-home .hero__cta:focus-visible {
  background: var(--ink-900);
  color: var(--paper);
}

/* 步骤条 */
.page-home .steps {
  list-style: none;
  margin: clamp(32px, 4.6vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.page-home .steps__item {
  display: block;
  padding: 16px 16px 18px 0;
  border-top: 2px solid var(--mist-200);
}

.page-home .steps__item--first {
  border-top-color: var(--orange);
}

.page-home .steps__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.page-home .steps__name {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .steps__note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* 三件可查的事 */
.page-home .trio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 44px);
  margin-top: clamp(28px, 3.6vw, 46px);
}

.page-home .trio__item {
  padding-top: 16px;
  border-top: 1px solid var(--mist-200);
}

.page-home .trio__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-home .trio__item h3 {
  margin: 12px 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.page-home .trio__item p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .trio__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--mist-200);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-home .trio__link:hover,
.page-home .trio__link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* 流程 / 版本对照 */
.page-home .canvas__lead {
  margin-top: 20px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .canvas__grid {
  display: grid;
  gap: clamp(34px, 4.4vw, 60px);
  margin-top: clamp(28px, 3.6vw, 46px);
}

.page-home .track__label,
.page-home .records__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-500);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .track__list,
.page-home .records__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .track__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .track__num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-home .track__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .track__time {
  font-size: 12px;
  color: var(--ink-700);
  white-space: nowrap;
}

.page-home .track__note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .track__more,
.page-home .records__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.page-home .track__more:hover,
.page-home .records__more:hover,
.page-home .track__more:focus-visible,
.page-home .records__more:focus-visible {
  color: var(--orange);
}

.page-home .record {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .record__time {
  grid-column: 1;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist-500);
  padding-top: 3px;
}

.page-home .record__ver {
  grid-column: 2;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--bamboo);
}

.page-home .record__text {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .records__figure {
  margin: 26px 0 0;
}

.page-home .records__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--mist-200);
  background: var(--paper);
  object-fit: cover;
}

.page-home .records__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* 服务片区 */
.page-home .region__lead {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .region__link {
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-home .region__link:hover {
  color: var(--orange);
}

.page-home .region__list {
  list-style: none;
  margin: clamp(26px, 3.4vw, 42px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.page-home .region__item {
  padding: 14px 14px 16px 0;
  border-top: 1px solid var(--mist-200);
}

.page-home .region__city {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .region__note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-700);
}

.page-home .region__figure {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
}

.page-home .region__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--mist-200);
  object-fit: cover;
  aspect-ratio: 1600 / 600;
}

.page-home .region__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* 数据条 */
.page-home .figures__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
  margin-top: clamp(28px, 3.6vw, 46px);
}

.page-home .figure {
  padding-top: 16px;
  border-top: 2px solid var(--ink-900);
}

.page-home .figure__num {
  font-size: clamp(40px, 5vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.page-home .figure__num span {
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-left: 6px;
  color: var(--ink-700);
}

.page-home .figure__label {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-home .figure__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .figures__foot {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--mist-200);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-700);
}

/* 三条入口 */
.page-home .gateways__head {
  display: grid;
  gap: 24px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .gateways__head h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.2;
}

.page-home .gateways__head p {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .gateways__figure {
  margin: 0;
  justify-self: start;
}

.page-home .gateways__figure img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--mist-200);
  background: var(--mist-50);
  object-fit: cover;
}

.page-home .gateways__list {
  list-style: none;
  margin: clamp(28px, 3.6vw, 46px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
}

.page-home .gateway {
  padding-top: 14px;
  border-top: 1px solid var(--mist-200);
}

.page-home .gateway__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-home .gateway h3 {
  margin: 10px 0 10px;
  font-size: 20px;
  font-weight: 600;
}

.page-home .gateway p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .gateway__meta {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--warn);
}

.page-home .gateway__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.page-home .gateway__link:hover,
.page-home .gateway__link:focus-visible {
  color: var(--orange);
}

.page-home .gateways__note {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--mist-200);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .gateways__note a {
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-left: 2px;
}

.page-home .gateways__note a:hover {
  color: var(--orange);
}

/* 断点 */
@media (min-width: 720px) {
  .page-home .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .steps__item {
    padding-right: 20px;
  }

  .page-home .region__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .region__item {
    padding-right: 20px;
  }

  .page-home .gateways__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-home .gateways__figure {
    justify-self: end;
  }
}

@media (min-width: 860px) {
  .page-home .trio__grid,
  .page-home .figures__grid,
  .page-home .gateways__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .region__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-home .canvas__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

@media (min-width: 1080px) {
  .page-home .steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-home .steps__item {
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__cta,
  .page-home .trio__link {
    transition: none;
  }
}
<<<END>>>

等等——我推导格式里没有 <<<END>>>。要求是只输出两个标记。得把 END 去掉。

再检查一下首屏的 eyebrow 类，那个是全局的，没问题。

.page-home .hero .eyebrow { margin: 0; } —— 这个覆盖是没问题的。

行。检查一下这个 CSS 没有任何地方引用未定义的变量。--warn 是存在的。没问题。

另外 .page-home .region__list 在 720px 下是 3 列，在 860px 下是 5 列。没问题。

再看 hero__panel 的 ::before 加 z-index: -1 配合 isolation: isolate —— 可以。

对于 clip-path 在 ::before 上，当父元素有 padding 时，inset: 0 是相对于父元素的 padding box 吗？不是，inset: 0 是相对于包含块的 padding box 定位的……对于绝对定位的子元素来说，包含块是 padding box。所以 inset: 0 覆盖的是 padding box，也就是不包含 padding 的区域？实际上对于绝对定位，包含块是 padding box，所以 inset: 0 是贴着 border box？嗯。绝对定位元素的包含块就是 padding box 的边缘……其实它是 padding box。所以 inset:0 覆盖的是 padding box，也就是夹在 border 和 padding 之间。因为这里没有 border，所以它大概等同于 border box。可以。

好。

再检查一下移动端会不会横向溢出：应该不会。

现在把答案里的 <<<END>>> 去掉。
<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <p class="eyebrow">东升国际 · 四川生活服务合作</p>
    <div class="hero__grid">
      <div class="hero__head">
        <h1 id="hero-title">六步走完合作，安卓版本按号对照</h1>
        <p class="hero__lead">从意向登记到服务跟进，东升国际把合作拆成 S1 至 S6 六个带编号的步骤，每一步要交什么材料、大概几个工作日，都能提前看到。手里还装着旧版安卓客户端的使用者，可以在版本说明里挑到目标版本再更换。</p>
        <p class="hero__aside">对接范围覆盖四川 21 个市州，成都、绵阳、南充、宜宾、泸州设有驻点服务顾问。<a class="hero__inline" href="/faq/">先看常见疑问</a></p>
      </div>
      <div class="hero__panel">
        <figure class="hero__figure">
          <img src="{zhanqunpic:h:720w:960}" width="960" height="720" alt="手机与桌面同屏显示 S1 至 S6 步骤编号及对应版本记录的界面截图">
        </figure>
        <p class="hero__panel-note"><span class="mono">S1–S6</span> 每步附材料清单与时限，常规步骤 1 至 3 个工作日。</p>
        <a class="hero__cta" href="/products/">进入流程与版本</a>
      </div>
    </div>

    <ol class="steps">
      <li class="steps__item steps__item--first">
        <span class="steps__num mono">S1</span>
        <span class="steps__name">意向登记</span>
        <span class="steps__note">留下合作方向与服务片区，我们回电确认</span>
      </li>
      <li class="steps__item">
        <span class="steps__num mono">S2</span>
        <span class="steps__name">材料提交</span>
        <span class="steps__note">按个人、个体户、企业三类主体分别准备</span>
      </li>
      <li class="steps__item">
        <span class="steps__num mono">S3</span>
        <span class="steps__name">资料对照</span>
        <span class="steps__note">核对材料是否齐全、是否还在有效期内</span>
      </li>
      <li class="steps__item">
        <span class="steps__num mono">S4</span>
        <span class="steps__name">方案确认</span>
        <span class="steps__note">确定服务内容、服务片区与日常对接人</span>
      </li>
      <li class="steps__item">
        <span class="steps__num mono">S5</span>
        <span class="steps__name">开通交付</span>
        <span class="steps__note">账号与客户端开通，安卓版本按对照表选定</span>
      </li>
      <li class="steps__item">
        <span class="steps__num mono">S6</span>
        <span class="steps__name">服务跟进</span>
        <span class="steps__note">按工单编号跟进，未解决的次日升级片区顾问</span>
      </li>
    </ol>
  </section>

  <section class="band band--paper trio" aria-labelledby="trio-title">
    <div class="head">
      <h2 id="trio-title">先看这三件，再决定下一步</h2>
      <p class="head__index mono">01 — 03</p>
    </div>
    <div class="trio__grid">
      <article class="trio__item">
        <p class="trio__num mono">01</p>
        <h3>手上的合作走到第几步</h3>
        <p>对着编号看就行。S1 到 S6 各自列了材料清单和时限，缺哪一份、卡在哪个环节，一眼能认出来。把流程与版本中心收藏起来，下次打开还是这个位置。</p>
        <a class="trio__link" href="/products/">对照六个步骤</a>
      </article>
      <article class="trio__item">
        <p class="trio__num mono">02</p>
        <h3>旧版安卓该换成哪个版本</h3>
        <p>版本号对照表覆盖 12 个历史版本，从最早的 1.0 一直排到现在的 4.6。先确认手机里装的是哪一号，再按对照表找目标版本，换之前心里有数。</p>
        <a class="trio__link" href="/products/">打开版本号对照</a>
      </article>
      <article class="trio__item">
        <p class="trio__num mono">03</p>
        <h3>问题该从哪条渠道提</h3>
        <p>在线表单、客服邮箱、服务热线、自助查询四条都在用，提交后会给到一个工单编号。后续追问报编号，不用把情况从头再讲一遍。</p>
        <a class="trio__link" href="/find-us/">看渠道怎么选</a>
      </article>
    </div>
  </section>

  <section class="band band--tint canvas" aria-labelledby="canvas-title">
    <div class="head">
      <h2 id="canvas-title">流程和版本，摊在同一屏上</h2>
      <p class="head__index mono">S1 — S6 / v4.6</p>
    </div>
    <p class="canvas__lead">左边是六个步骤各自的时限，右边是最近的版本记录。对着看，能判断自己是该补材料，还是该换客户端。</p>

    <div class="canvas__grid">
      <div class="track">
        <p class="track__label mono">合作流程</p>
        <ul class="track__list">
          <li class="track__row">
            <span class="track__num mono">S1</span>
            <span class="track__name">意向登记</span>
            <span class="track__time mono">1 个工作日</span>
          </li>
          <li class="track__row">
            <span class="track__num mono">S2</span>
            <span class="track__name">材料提交</span>
            <span class="track__time mono">1 至 3 个工作日</span>
          </li>
          <li class="track__row">
            <span class="track__num mono">S3</span>
            <span class="track__name">资料对照</span>
            <span class="track__time mono">1 至 2 个工作日</span>
          </li>
          <li class="track__row">
            <span class="track__num mono">S4</span>
            <span class="track__name">方案确认</span>
            <span class="track__time mono">1 至 2 个工作日</span>
          </li>
          <li class="track__row">
            <span class="track__num mono">S5</span>
            <span class="track__name">开通交付</span>
            <span class="track__time mono">1 至 3 个工作日</span>
          </li>
          <li class="track__row">
            <span class="track__num mono">S6</span>
            <span class="track__name">服务跟进</span>
            <span class="track__time mono">按工单推进</span>
          </li>
        </ul>
        <p class="track__note">个人、个体户、企业三类主体的材料不同，企业还需要额外提交授权文件。具体清单在流程与版本中心按步骤列开。</p>
        <a class="track__more" href="/products/">看每步要交什么</a>
      </div>

      <div class="records">
        <p class="records__label mono">版本记录</p>
        <ul class="records__list">
          <li class="record">
            <span class="record__time mono">最近一次</span>
            <span class="record__ver mono">v4.6</span>
            <p class="record__text">自助查询支持按工单编号、版本号、合作编号三种方式检索，流程节点和版本记录落在同一个入口。</p>
          </li>
          <li class="record">
            <span class="record__time mono">三周前</span>
            <span class="record__ver mono">v4.5</span>
            <p class="record__text">工单升级规则调整：当天没解决的工单，次个工作日转到对应片区顾问手上。</p>
          </li>
          <li class="record">
            <span class="record__time mono">一个多月前</span>
            <span class="record__ver mono">v4.3</span>
            <p class="record__text">版本说明里加上“旧版到目标版本”的两段式选择，换版本前可以先看一眼差异。</p>
          </li>
          <li class="record">
            <span class="record__time mono">两个月前</span>
            <span class="record__ver mono">v4.1</span>
            <p class="record__text">在线表单提交后统一生成工单编号，四条渠道的问题归到一处跟进。</p>
          </li>
          <li class="record">
            <span class="record__time mono">半年前</span>
            <span class="record__ver mono">v3.8</span>
            <p class="record__text">材料清单按主体类型拆分，个体户与企业各自看到自己那一份。</p>
          </li>
        </ul>

        <figure class="records__figure">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async" alt="两栏手机界面并排，左侧标注旧版本号 v3.8，右侧标注目标版本号 v4.6">
          <figcaption>左边是手机里现有的版本号，右边是对照表给出的目标版本，换之前先确认机型与当前版本。</figcaption>
        </figure>

        <a class="records__more" href="/insights/">看更多版本与流程更新</a>
      </div>
    </div>
  </section>

  <section class="band band--paper region" aria-labelledby="region-title">
    <div class="head">
      <h2 id="region-title">服务半径铺在四川</h2>
      <p class="head__index mono">21 市州 / 5 片区</p>
    </div>
    <p class="region__lead">2016 年在成都开始做生活服务合作，现在对接范围覆盖四川 21 个市州。五个重点片区配有驻点服务顾问，异地合作也能找到就近对接的人。<a class="region__link" href="/overview/">了解团队与片区配置</a></p>

    <ul class="region__list">
      <li class="region__item">
        <span class="region__city">成都</span>
        <span class="region__note">市区与近郊，顾问驻点对接</span>
      </li>
      <li class="region__item">
        <span class="region__city">绵阳</span>
        <span class="region__note">川北方向，含周边县市</span>
      </li>
      <li class="region__item">
        <span class="region__city">南充</span>
        <span class="region__note">川东北方向对接</span>
      </li>
      <li class="region__item">
        <span class="region__city">宜宾</span>
        <span class="region__note">川南方向对接</span>
      </li>
      <li class="region__item">
        <span class="region__city">泸州</span>
        <span class="region__note">川南方向，与宜宾协同</span>
      </li>
    </ul>

    <figure class="region__figure">
      <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" loading="lazy" decoding="async" alt="清晨街边的生活服务门店与往来行人，水平展开构图，画面中没有可识别人脸特写">
      <figcaption>清晨开门前的街面，是多数合作方一天里最忙的时候，也是服务顾问最常出现在现场的时候。</figcaption>
    </figure>
  </section>

  <section class="band band--tint figures" aria-labelledby="figures-title">
    <div class="head">
      <h2 id="figures-title">合作方为什么愿意留下来</h2>
      <p class="head__index mono">三个数字</p>
    </div>
    <div class="figures__grid">
      <div class="figure">
        <p class="figure__num mono">87<span>%</span></p>
        <p class="figure__label mono">年度续约率</p>
        <p class="figure__text">合作满一年后继续续约的比例。多数合作方把后续的版本更换与工单跟进也放在同一处。</p>
      </div>
      <div class="figure">
        <p class="figure__num mono">2<span>小时</span></p>
        <p class="figure__label mono">首次响应</p>
        <p class="figure__text">工作日 9:00 至 18:00 从在线表单提交，平均两小时内有人接单回应，不必守着电话等。</p>
      </div>
      <div class="figure">
        <p class="figure__num mono">5<span>个</span></p>
        <p class="figure__label mono">重点服务片区</p>
        <p class="figure__text">成都、绵阳、南充、宜宾、泸州各配驻点服务顾问，现场问题不必层层转述。</p>
      </div>
    </div>
    <p class="figures__foot">目前有 3400 余家合作方在用，其中四川本地约占 86%。团队 68 人，服务顾问 32 人、技术支持 14 人、内容与流程运营 9 人；工单一次解决率维持在 91%。</p>
  </section>

  <section class="band band--paper gateways" aria-labelledby="gateways-title">
    <div class="gateways__head">
      <div>
        <h2 id="gateways-title">下一步，从这三条入口开始</h2>
        <p>已经准备好材料，或者只想先问一句，都可以。三条路径工作日 9:00 至 18:00 都有人看着。</p>
      </div>
      <figure class="gateways__figure">
        <img src="{zhanqunpic:h:480w:480}" width="480" height="480" loading="lazy" decoding="async" alt="三枚线条粗细一致的线性图标并排，分别代表在线表单、客服邮箱与自助查询">
      </figure>
    </div>

    <ul class="gateways__list">
      <li class="gateway">
        <p class="gateway__num mono">01</p>
        <h3>在线表单</h3>
        <p>第一次咨询，或者一个问题里带着好几个小问题，用表单说得最清楚。提交后会拿到一个工单编号。</p>
        <p class="gateway__meta mono">工作日 9:00–18:00 提交，平均 2 小时内首次响应</p>
        <a class="gateway__link" href="/find-us/">看填写步骤</a>
      </li>
      <li class="gateway">
        <p class="gateway__num mono">02</p>
        <h3>客服邮箱</h3>
        <p class="gateway__meta mono">contact@dongsheng-connect.com.cn</p>
        <p>需要连同截图、材料照片一起说明的情况走邮箱更顺手，邮件标题写上合作编号，我们好对上号。</p>
        <a class="gateway__link" href="/find-us/">看邮件怎么发</a>
      </li>
      <li class="gateway">
        <p class="gateway__num mono">03</p>
        <h3>自助查询</h3>
        <p>手边有编号的话，自己查更快。支持按工单编号、版本号、合作编号三种方式检索进度与记录。</p>
        <p class="gateway__meta mono">三种编号任选其一即可</p>
        <a class="gateway__link" href="/find-us/">看查询方式</a>
      </li>
    </ul>

    <p class="gateways__note">提交前建议备好合作编号、当前版本号和页面截图。这些信息怎么保存和使用，可以看<a href="/privacy-notice/">隐私说明</a>。</p>
  </section>

</main>

.page-home {
  --home-band: clamp(56px, 8vw, 104px);
  --home-pad: max(var(--shell-pad), calc((100% - 1320px) / 2));
  background: var(--mist-50);
  color: var(--ink-900);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-home h1,
.page-home h2,
.page-home h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-900);
}

.page-home p {
  margin: 0;
}

.page-home .band {
  padding-inline: var(--home-pad);
  padding-block: var(--home-band);
}

.page-home .band--paper {
  background: var(--paper);
}

.page-home .band--tint {
  background: var(--mist-100);
}

/* 区块标题行 */
.page-home .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .head h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-home .head__index {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-500);
}

/* 首屏 */
.page-home .hero {
  position: relative;
  padding-inline: var(--home-pad);
  padding-top: clamp(32px, 4.5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: var(--mist-50);
}

.page-home .hero .eyebrow {
  margin: 0;
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  margin-top: clamp(18px, 2.4vw, 30px);
}

.page-home .hero__head h1 {
  font-size: clamp(36px, 5.4vw, 70px);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 15ch;
}

.page-home .hero__lead {
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 54ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .hero__aside {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .hero__inline {
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-home .hero__inline:hover {
  color: var(--orange);
}

/* 橙色错位块 */
.page-home .hero__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(26px, 3.6vw, 40px);
  color: var(--paper);
}

.page-home .hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}

.page-home .hero__figure {
  margin: 0;
}

.page-home .hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  object-fit: cover;
}

.page-home .hero__panel-note {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper);
}

.page-home .hero__panel-note .mono {
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

.page-home .hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 22px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-home .hero__cta::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 14px;
}

.page-home .hero__cta:hover,
.page-home .hero__cta:focus-visible {
  background: var(--ink-900);
  color: var(--paper);
}

/* 步骤条 */
.page-home .steps {
  list-style: none;
  margin: clamp(32px, 4.6vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.page-home .steps__item {
  display: block;
  padding: 16px 16px 18px 0;
  border-top: 2px solid var(--mist-200);
}

.page-home .steps__item--first {
  border-top-color: var(--orange);
}

.page-home .steps__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.page-home .steps__name {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .steps__note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* 三件可查的事 */
.page-home .trio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 44px);
  margin-top: clamp(28px, 3.6vw, 46px);
}

.page-home .trio__item {
  padding-top: 16px;
  border-top: 1px solid var(--mist-200);
}

.page-home .trio__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-home .trio__item h3 {
  margin: 12px 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.page-home .trio__item p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .trio__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--mist-200);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-home .trio__link:hover,
.page-home .trio__link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* 流程 / 版本对照 */
.page-home .canvas__lead {
  margin-top: 20px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .canvas__grid {
  display: grid;
  gap: clamp(34px, 4.4vw, 60px);
  margin-top: clamp(28px, 3.6vw, 46px);
}

.page-home .track__label,
.page-home .records__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-500);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .track__list,
.page-home .records__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .track__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .track__num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-home .track__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .track__time {
  font-size: 12px;
  color: var(--ink-700);
  white-space: nowrap;
}

.page-home .track__note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .track__more,
.page-home .records__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.page-home .track__more:hover,
.page-home .records__more:hover,
.page-home .track__more:focus-visible,
.page-home .records__more:focus-visible {
  color: var(--orange);
}

.page-home .record {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .record__time {
  grid-column: 1;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist-500);
  padding-top: 3px;
}

.page-home .record__ver {
  grid-column: 2;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--bamboo);
}

.page-home .record__text {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .records__figure {
  margin: 26px 0 0;
}

.page-home .records__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--mist-200);
  background: var(--paper);
  object-fit: cover;
}

.page-home .records__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* 服务片区 */
.page-home .region__lead {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .region__link {
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-home .region__link:hover {
  color: var(--orange);
}

.page-home .region__list {
  list-style: none;
  margin: clamp(26px, 3.4vw, 42px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.page-home .region__item {
  padding: 14px 14px 16px 0;
  border-top: 1px solid var(--mist-200);
}

.page-home .region__city {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .region__note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-700);
}

.page-home .region__figure {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
}

.page-home .region__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--mist-200);
  object-fit: cover;
  aspect-ratio: 1600 / 600;
}

.page-home .region__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* 数据条 */
.page-home .figures__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
  margin-top: clamp(28px, 3.6vw, 46px);
}

.page-home .figure {
  padding-top: 16px;
  border-top: 2px solid var(--ink-900);
}

.page-home .figure__num {
  font-size: clamp(40px, 5vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.page-home .figure__num span {
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-left: 6px;
  color: var(--ink-700);
}

.page-home .figure__label {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-home .figure__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .figures__foot {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--mist-200);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-700);
}

/* 三条入口 */
.page-home .gateways__head {
  display: grid;
  gap: 24px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mist-200);
}

.page-home .gateways__head h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.2;
}

.page-home .gateways__head p {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .gateways__figure {
  margin: 0;
  justify-self: start;
}

.page-home .gateways__figure img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--mist-200);
  background: var(--mist-50);
  object-fit: cover;
}

.page-home .gateways__list {
  list-style: none;
  margin: clamp(28px, 3.6vw, 46px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
}

.page-home .gateway {
  padding-top: 14px;
  border-top: 1px solid var(--mist-200);
}

.page-home .gateway__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-home .gateway h3 {
  margin: 10px 0;
  font-size: 20px;
  font-weight: 600;
}

.page-home .gateway p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-home .gateway__meta {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--warn);
}

.page-home .gateway__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.page-home .gateway__link:hover,
.page-home .gateway__link:focus-visible {
  color: var(--orange);
}

.page-home .gateways__note {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--mist-200);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-700);
}

.page-home .gateways__note a {
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-left: 2px;
}

.page-home .gateways__note a:hover {
  color: var(--orange);
}

/* 断点 */
@media (min-width: 720px) {
  .page-home .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .steps__item {
    padding-right: 20px;
  }

  .page-home .region__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .region__item {
    padding-right: 20px;
  }

  .page-home .gateways__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-home .gateways__figure {
    justify-self: end;
  }
}

@media (min-width: 860px) {
  .page-home .trio__grid,
  .page-home .figures__grid,
  .page-home .gateways__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .region__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-home .canvas__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

@media (min-width: 1080px) {
  .page-home .steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-home .steps__item {
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__cta,
  .page-home .trio__link {
    transition: none;
  }
}