.page-home {
  --home-rail: 172px;
  --home-gap: clamp(20px, 3vw, 40px);
}

.page-home [data-section] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(18px, 3vw, 36px) clamp(48px, 7vw, 104px);
  border-bottom: 1px solid var(--line);
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(30, 58, 110, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 58, 110, 0.4) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(125% 85% at 72% 0%, #000 8%, transparent 74%);
  mask-image: radial-gradient(125% 85% at 72% 0%, #000 8%, transparent 74%);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  top: -25%;
  right: 20%;
  width: 1px;
  height: 150%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 8%, var(--cyan) 48%, transparent 92%);
  opacity: 0.45;
  transform: rotate(17deg);
}

.page-home .hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.page-home .hero__crumbs {
  margin-bottom: clamp(14px, 2vw, 24px);
}

.page-home .hero__rail {
  display: none;
}

.page-home .hero__rail-caption {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-home .hero__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-home .hero__rail-item a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.page-home .hero__rail-item:last-child a {
  border-bottom: 1px solid var(--line);
}

.page-home .hero__rail-item a:hover,
.page-home .hero__rail-item a:focus-visible {
  color: var(--cyan-hi);
  border-top-color: var(--cyan);
}

.page-home .hero__rail-num {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  transition: color 160ms var(--ease);
}

.page-home .hero__rail-item[data-active="true"] a {
  color: var(--cyan);
  border-top-color: var(--cyan);
}

.page-home .hero__rail-item[data-active="true"] .hero__rail-num {
  color: var(--cyan);
}

.page-home .hero__lamp {
  margin: 18px 0 0;
}

.page-home .hero__title {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 100px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-home .hero__v {
  color: var(--cyan);
}

@supports ((-webkit-text-stroke: 1px #000)) {
  .page-home .hero__v {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.16vw, 2.2px) var(--cyan);
  }
}

.page-home .hero__lead {
  max-width: 34em;
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.85;
  color: var(--text-dim);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.page-home .hero__facts {
  list-style: none;
  margin: 0;
  padding: clamp(14px, 2vw, 18px) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.page-home .hero__fact-key {
  color: var(--muted);
  margin-right: 8px;
}

.page-home .hero__fact-val {
  color: var(--text-dim);
}

.page-home .hero__frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel);
  max-height: 520px;
}

.page-home .hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

/* ---------- 三步 ---------- */
.page-home .steps__title,
.page-home .fit__title,
.page-home .compare__title,
.page-home .care__title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--text);
}

.page-home .steps__lead,
.page-home .fit__lead,
.page-home .compare__lead,
.page-home .care__lead {
  margin-top: clamp(14px, 2vw, 20px);
  color: var(--text-dim);
}

.page-home .steps__banner {
  margin: clamp(20px, 3vw, 32px) 0 0;
}

.page-home .steps__banner-frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel-2);
}

.page-home .steps__banner-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
}

.page-home .steps__list {
  list-style: none;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .step {
  position: relative;
  padding: clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 22px);
  background: var(--panel);
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
}

.page-home .step__num {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.page-home .step__num::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.16);
  vertical-align: middle;
}

.page-home .step__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.45;
  color: var(--text);
}

.page-home .step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-home .step__more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.page-home .step__summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--red);
}

.page-home .step__summary::-webkit-details-marker {
  display: none;
}

.page-home .step__summary::after {
  content: " +";
}

.page-home .step__more[open] .step__summary::after {
  content: " −";
}

.page-home .step__more p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .steps__footnote {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .steps__footnote a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 设备与阅读 ---------- */
.page-home .fit__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.page-home .fit__ranges {
  list-style: none;
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-home .fit__range {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-home .fit__range-num {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan);
  padding-top: 2px;
}

.page-home .fit__frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel);
}

.page-home .fit__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

/* 场景切换 */
.page-home .scene-switch {
  position: relative;
  margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(16px, 2.5vw, 22px);
  border: 2px solid var(--graphite);
  background: var(--panel-2);
}

.page-home .scene-switch__caption {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-home .scene-switch__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.page-home .scene-switch__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-home .scene-switch__chip {
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.page-home #home-scene-a:checked ~ .scene-switch__controls .scene-switch__chip[for="home-scene-a"],
.page-home #home-scene-b:checked ~ .scene-switch__controls .scene-switch__chip[for="home-scene-b"],
.page-home #home-scene-c:checked ~ .scene-switch__controls .scene-switch__chip[for="home-scene-c"] {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(34, 224, 214, 0.08);
}

.page-home .scene-switch__stage {
  display: grid;
  min-height: 92px;
}

.page-home .scene-card {
  display: none;
  gap: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--cyan);
}

.page-home #home-scene-a:checked ~ .scene-switch__stage .scene-card--a,
.page-home #home-scene-b:checked ~ .scene-switch__stage .scene-card--b,
.page-home #home-scene-c:checked ~ .scene-switch__stage .scene-card--c {
  display: grid;
}

.page-home .scene-card--b {
  border-left-color: var(--orange);
}

.page-home .scene-card--c {
  border-left-color: var(--cyan-hi);
  background: linear-gradient(90deg, rgba(111, 243, 236, 0.08), transparent 70%);
}

.page-home .scene-card__tag {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-home .scene-card__line {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* ---------- 版本对照 ---------- */
.page-home .compare__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-home .compare__card {
  padding: clamp(20px, 2.5vw, 30px);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.page-home .compare__card--old {
  --panel: #0A1224;
}

.page-home .compare__card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 7px 8px 0 0 #03060F;
}

.page-home .compare__tag {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-home .compare__tag--live {
  color: var(--red);
}

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

.page-home .compare__row {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.page-home .compare__row:first-child {
  border-top: 0;
  padding-top: 8px;
}

.page-home .compare__row dt {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-home .compare__row dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-dim);
}

.page-home .compare__guide {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(18px, 2.5vw, 26px);
  display: grid;
  gap: 12px;
  justify-items: start;
  border: 2px solid var(--line);
  border-left: 4px solid var(--cyan);
  background: linear-gradient(90deg, rgba(34, 224, 214, 0.07), transparent 58%);
}

.page-home .compare__guide-key {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.page-home .compare__guide-text {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-home .compare__figure {
  margin: clamp(24px, 4vw, 40px) 0 0;
}

.page-home .compare__frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel);
}

.page-home .compare__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* ---------- 维护与响应 ---------- */
.page-home .care__stats {
  list-style: none;
  margin: clamp(24px, 3.5vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.page-home .care__stat {
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
}

.page-home .care__num {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-home .care__label {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--cyan);
}

.page-home .care__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .care__channels {
  margin-top: clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 2px solid var(--graphite);
  background: var(--panel-2);
}

.page-home .care__channel {
  padding: clamp(18px, 2.5vw, 24px);
  border-bottom: 1px solid var(--line);
}

.page-home .care__channel:last-child {
  border-bottom: 0;
}

.page-home .care__channel-key {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-home .care__channel-value {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

.page-home .care__channel-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.page-home .care__links {
  margin-top: clamp(20px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-home .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 2px solid var(--graphite);
    border-bottom: 2px solid var(--graphite);
  }

  .page-home .step {
    border: 0;
    border-right: 1px solid var(--line);
    box-shadow: none;
    background: transparent;
  }

  .page-home .step:last-child {
    border-right: 0;
  }
}

@media (min-width: 860px) {
  .page-home .compare__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-home .compare__card--v4 {
    margin-top: 48px;
  }

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

  .page-home .care__channel {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .page-home .care__channel:last-child {
    border-right: 0;
  }
}

@media (min-width: 900px) {
  .page-home .fit__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-home .fit__figure {
    order: -1;
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: var(--home-rail) minmax(0, 1.55fr) minmax(0, 0.85fr);
    align-items: start;
    gap: clamp(24px, 3vw, 48px);
  }

  .page-home .hero__rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding-top: 6px;
  }

  .page-home .hero__figure {
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .compare__card,
  .page-home .hero__rail-item a,
  .page-home .scene-switch__chip {
    transition: none;
  }

  .page-home .compare__card:hover {
    transform: none;
  }
}


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

  <section class="hero" id="channel" data-section>
    <div class="container hero__grid">

      <nav class="hero__rail" aria-label="页面通道索引">
        <p class="mono hero__rail-caption">CHANNEL 01—05</p>
        <ol class="hero__rail-list">
          <li class="hero__rail-item" data-index-item data-index-target="channel">
            <a href="#channel"><span class="hero__rail-num mono">01</span><span class="hero__rail-label">官方通道</span></a>
          </li>
          <li class="hero__rail-item" data-index-item data-index-target="steps">
            <a href="#steps"><span class="hero__rail-num mono">02</span><span class="hero__rail-label">访问三步</span></a>
          </li>
          <li class="hero__rail-item" data-index-item data-index-target="fitting">
            <a href="#fitting"><span class="hero__rail-num mono">03</span><span class="hero__rail-label">设备与阅读</span></a>
          </li>
          <li class="hero__rail-item" data-index-item data-index-target="compare">
            <a href="#compare"><span class="hero__rail-num mono">04</span><span class="hero__rail-label">版本对照</span></a>
          </li>
          <li class="hero__rail-item" data-index-item data-index-target="care">
            <a href="#care"><span class="hero__rail-num mono">05</span><span class="hero__rail-label">维护与响应</span></a>
          </li>
        </ol>
        <p class="status-lamp hero__lamp">
          <span class="status-lamp__dot"></span>
          <span class="status-lamp__text">通道在线</span>
        </p>
      </nav>

      <div class="hero__main">
        <nav class="breadcrumbs hero__crumbs" aria-label="当前位置">
          <ol class="breadcrumbs__list">
            <li aria-current="page">首页 · 官方矩阵通道 V4</li>
          </ol>
        </nav>

        <p class="eyebrow">官方矩阵新版通道</p>
        <h1 class="hero__title">竞博JBO<br>矩阵通道 <span class="hero__v">V4</span></h1>

        <p class="hero__lead">
          jbo-matrix-v4.com.cn 是竞博JBO中国官方网站当前使用的通道。您从手机上打开它，日常访问时首页升级版的排版与加载都更稳；
          第一次来，也能顺着下面三段走完一次完整访问，不用来回试。
        </p>

        <div class="hero__actions">
          <a class="btn btn--primary" href="#steps">看三段怎么走</a>
          <a class="btn btn--ghost" href="/features/">进入与登录说明</a>
        </div>

        <ul class="hero__facts">
          <li><span class="hero__fact-key mono">域名</span><span class="hero__fact-val">jbo-matrix-v4.com.cn</span></li>
          <li><span class="hero__fact-key mono">V4 上线</span><span class="hero__fact-val">2025.03</span></li>
          <li><span class="hero__fact-key mono">备案</span><span class="hero__fact-val">冀ICP备54768667号</span></li>
        </ul>
      </div>

      <figure class="figure hero__figure" data-reveal>
        <div class="hero__frame">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200"
               alt="深墨蓝底色上由电光青线条拼接出的矩阵通道纵深，中央有一条向上的光带">
        </div>
        <figcaption class="figure__caption">矩阵通道 V4 主视觉 · 冷色光带与细密网格</figcaption>
      </figure>

    </div>
  </section>

  <section class="section steps" id="steps" data-section>
    <div class="container">
      <div class="section__head steps__head">
        <p class="eyebrow">02 / 访问三步</p>
        <h2 class="steps__title">从打开到查更新，三段就走完</h2>
      </div>

      <p class="prose steps__lead">
        第一次在手机上找入口，最费时间的往往是中间那一段：地址对不对、点进去到底是不是新版本。
        把一次访问拆成三段，每段只需要先确认一件事，走岔了也清楚该退回哪一步。
      </p>

      <figure class="figure steps__banner" data-reveal>
        <div class="steps__banner-frame">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600"
               alt="三段式发光路径示意图，三个暖橙色节点沿横向依次排布并与步骤条对齐"
               loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption">三段路径 · 地址 → 设备 → 状态</figcaption>
      </figure>

      <ol class="steps__list">
        <li class="step" data-reveal>
          <p class="step__num mono">STEP 01</p>
          <h3 class="step__title">先认准地址栏里的那串域名</h3>
          <p class="step__text">
            打开浏览器，地址栏显示 jbo-matrix-v4.com.cn，就说明您进的是当前这一版官方通道，后面几栏才有意义。
          </p>
          <details class="step__more">
            <summary class="step__summary">走岔了会怎样</summary>
            <p>旧书签或手动输入时多一个字，页面通常会停在上一版的样子。退回地址栏重新输一遍，比在页面里反复点要快得多。</p>
          </details>
        </li>

        <li class="step" data-reveal style="--reveal-delay:80ms">
          <p class="step__num mono">STEP 02</p>
          <h3 class="step__title">选一台顺手的设备打开</h3>
          <p class="step__text">
            手机竖屏、平板横屏、桌面宽屏都按同一套通道编号排布，从哪一栏进，栏目都落在同一个位置。
          </p>
          <details class="step__more">
            <summary class="step__summary">走岔了会怎样</summary>
            <p>跨设备切换时如果刚换过网络，页面会先停顿一两秒。等状态灯从灰转亮再点，能省掉一次空转。</p>
          </details>
        </li>

        <li class="step" data-reveal style="--reveal-delay:160ms">
          <p class="step__num mono">STEP 03</p>
          <h3 class="step__title">看一眼状态灯，再去查更新</h3>
          <p class="step__text">
            右上方那盏通道状态灯亮起，表示当前连接是通的。这时打开更新记录，看到的才是最新的版本号与栏目条目。
          </p>
          <details class="step__more">
            <summary class="step__summary">走岔了会怎样</summary>
            <p>刚切完网络，状态灯需要几秒刷新。落地就连点，容易看到上一屏缓存下来的内容，翻一眼就会对不上。</p>
          </details>
        </li>
      </ol>

      <p class="steps__footnote">
        想把每一步再看细一点，<a href="/features/">进入与登录</a>页把三步拆得更碎，每一段都配了对照提示。
      </p>
    </div>
  </section>

  <section class="section fit" id="fitting" data-section>
    <div class="container">
      <div class="fit__layout">

        <div class="fit__body">
          <p class="eyebrow">03 / 设备与阅读</p>
          <h2 class="fit__title">屏幕大一点小一点，都读得顺</h2>
          <p class="prose fit__lead">
            2025 年 3 月完成的二期适配，把手机端的排版宽度、行高和通道编号统一调了一遍。
            您现在往下翻，不会出现半截被裁掉的标题，也不会因为字号忽大忽小而找不到自己在哪一段。
          </p>

          <ul class="fit__ranges">
            <li class="fit__range">
              <span class="fit__range-num mono">320–430</span>
              <span class="fit__range-text">手机竖屏单列阅读，通道编号贴边排布，不压住正文。</span>
            </li>
            <li class="fit__range">
              <span class="fit__range-num mono">431–600</span>
              <span class="fit__range-text">大屏手机或横握使用，栏目标题与摘要在同一行并排。</span>
            </li>
            <li class="fit__range">
              <span class="fit__range-num mono">601–900</span>
              <span class="fit__range-text">平板竖屏，左侧索引与右侧内容可以同时看到。</span>
            </li>
            <li class="fit__range">
              <span class="fit__range-num mono">901 以上</span>
              <span class="fit__range-text">桌面宽屏完整铺开，一屏之内能看到两组信息。</span>
            </li>
          </ul>

          <div class="scene-switch" data-reveal>
            <p class="mono scene-switch__caption">场景预览 · 切换看看</p>

            <input class="scene-switch__radio" type="radio" name="home-scene" id="home-scene-a" checked>
            <input class="scene-switch__radio" type="radio" name="home-scene" id="home-scene-b">
            <input class="scene-switch__radio" type="radio" name="home-scene" id="home-scene-c">

            <div class="scene-switch__controls">
              <label class="chip scene-switch__chip" for="home-scene-a">正常网络</label>
              <label class="chip scene-switch__chip" for="home-scene-b">弱网环境</label>
              <label class="chip scene-switch__chip" for="home-scene-c">夜间阅读</label>
            </div>

            <div class="scene-switch__stage">
              <div class="scene-card scene-card--a">
                <p class="mono scene-card__tag">PREVIEW / 正常网络</p>
                <p class="scene-card__line">通道编号与正文同时到达，翻页不掉位，栏目一眼能找到。</p>
              </div>
              <div class="scene-card scene-card--b">
                <p class="mono scene-card__tag">PREVIEW / 弱网环境</p>
                <p class="scene-card__line">移动网络下首屏基本在 1.8 秒内出现，先看到标题与编号，图片随后补上。</p>
              </div>
              <div class="scene-card scene-card--c">
                <p class="mono scene-card__tag">PREVIEW / 夜间阅读</p>
                <p class="scene-card__line">低亮度环境里正文与编号的对比依旧清晰，连看几屏也不费眼。</p>
              </div>
            </div>
          </div>
        </div>

        <figure class="figure fit__figure" data-reveal>
          <div class="fit__frame">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900"
                 alt="暗色手机界面局部特写，通道序号与入口按钮边缘带青色高光，体现移动端排版"
                 loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">手机竖屏下的通道编号与入口按钮</figcaption>
        </figure>

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

  <section class="section compare" id="compare" data-section>
    <div class="container">
      <div class="section__head">
        <p class="eyebrow">04 / 版本对照</p>
        <h2 class="compare__title">换了版本之后，变动集中在三处</h2>
      </div>

      <p class="prose compare__lead">
        更新记录栏目按月归档，累计收录 136 条版本与栏目条目。如果只想快速判断自己习惯的那几处有没有变，
        看下面三项就够了，剩下的再交给时间轴。
      </p>

      <div class="compare__cards">
        <article class="compare__card compare__card--old panel" data-reveal>
          <p class="compare__tag mono">此前的访问方式</p>
          <dl class="compare__rows">
            <div class="compare__row">
              <dt>入口位置</dt>
              <dd>一行文字链接放在页面顶部，手机上往往要先往下滑一段才看得见。</dd>
            </div>
            <div class="compare__row">
              <dt>阅读排版</dt>
              <dd>栏目顺序固定，小屏上字号偏小，看长内容时常要手动放大。</dd>
            </div>
            <div class="compare__row">
              <dt>更新查询</dt>
              <dd>条目按时间倒序排下来，要逐屏滚动才能找到与自己相关的版本。</dd>
            </div>
          </dl>
        </article>

        <article class="compare__card compare__card--v4 panel panel--accent" data-reveal style="--reveal-delay:100ms">
          <p class="compare__tag compare__tag--live mono">矩阵通道 V4</p>
          <dl class="compare__rows">
            <div class="compare__row">
              <dt>入口位置</dt>
              <dd>第 2 栏固定为进入与登录，三段步骤放在同一屏里，不必边滑边记。</dd>
            </div>
            <div class="compare__row">
              <dt>阅读排版</dt>
              <dd>按四个宽度区间分别适配，通道编号与正文各归各位，小屏不再挤成一团。</dd>
            </div>
            <div class="compare__row">
              <dt>更新查询</dt>
              <dd>条目分版本迭代、栏目改版、适配优化、服务公告四类，每条都标明建议动作。</dd>
            </div>
          </dl>
        </article>
      </div>

      <div class="compare__guide" data-reveal>
        <p class="mono compare__guide-key">先看哪一项</p>
        <p class="compare__guide-text">
          三项里先看更新查询，这一处改得最多；看完再回头对入口位置，最后才去比阅读排版。
          顺序反过来容易越看越乱，白跑一趟。
        </p>
        <a class="btn btn--ghost btn--sm" href="/notes/">打开完整更新时间轴</a>
      </div>

      <figure class="figure compare__figure" data-reveal>
        <div class="compare__frame">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800"
               alt="纵向时间轴光带与版本节点，节点边缘带竞博红脉冲光晕，表现版本演进"
               loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption">版本节点沿时间轴依次点亮，红点为重要变更</figcaption>
      </figure>
    </div>
  </section>

  <section class="section care" id="care" data-section>
    <div class="container">
      <div class="section__head">
        <p class="eyebrow">05 / 维护与响应</p>
        <h2 class="care__title">长期用得住，靠的是每天都在做的事</h2>
      </div>

      <p class="prose care__lead">
        内容团队共 12 人，分内容编辑、版本校订、前端适配三个小组。版本号沿用 V4.x 体系，
        主版本每年做一次较大调整，小版本按需发布。服务咨询覆盖全国 26 个省份，其中河北、山东、河南、广东四地访问最集中。
      </p>

      <ul class="care__stats">
        <li class="care__stat" data-reveal>
          <p class="care__num">2 次</p>
          <p class="care__label">每日通道巡检</p>
          <p class="care__note">上午与傍晚各一轮，状态灯与实际连接同步刷新。</p>
        </li>
        <li class="care__stat" data-reveal style="--reveal-delay:70ms">
          <p class="care__num">2–3 条</p>
          <p class="care__label">每月记录条目</p>
          <p class="care__note">小版本按需发布，改动当周就会进更新记录。</p>
        </li>
        <li class="care__stat" data-reveal style="--reveal-delay:140ms">
          <p class="care__num">68 条</p>
          <p class="care__label">常见问题</p>
          <p class="care__note">分六个主题整理，每月复核一轮，答案跟着版本走。</p>
        </li>
        <li class="care__stat" data-reveal style="--reveal-delay:210ms">
          <p class="care__num">12 人</p>
          <p class="care__label">内容与适配团队</p>
          <p class="care__note">编辑、校订与前端适配三条线各有人盯。</p>
        </li>
      </ul>

      <div class="care__channels" data-reveal>
        <div class="care__channel">
          <p class="mono care__channel-key">客服邮箱</p>
          <p class="care__channel-value">support@jbo-matrix-v4.com.cn</p>
          <button class="btn btn--ghost btn--sm care__copy" type="button"
                  data-copy-email="support@jbo-matrix-v4.com.cn">
            <span data-copy-label>复制邮箱</span>
          </button>
        </div>
        <div class="care__channel">
          <p class="mono care__channel-key">服务电话</p>
          <p class="care__channel-value">400-4066-6552</p>
          <p class="care__channel-note">工作日 9:00–18:00 接听</p>
        </div>
        <div class="care__channel">
          <p class="mono care__channel-key">联系地址</p>
          <p class="care__channel-value">河北省石家庄市长安区中山东路418号</p>
          <p class="care__channel-note">咨询请优先走邮箱与电话</p>
        </div>
      </div>

      <div class="care__links">
        <a class="btn btn--primary" href="/support/">去支持中心自查</a>
        <a class="btn btn--ghost" href="/contact-us/">联系我们</a>
        <a class="btn btn--ghost" href="/history/">品牌历程</a>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-rail: 172px;
  --home-gap: clamp(20px, 3vw, 40px);
}

.page-home [data-section] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(18px, 3vw, 36px) clamp(48px, 7vw, 104px);
  border-bottom: 1px solid var(--line);
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(30, 58, 110, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 58, 110, 0.4) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(125% 85% at 72% 0%, #000 8%, transparent 74%);
  mask-image: radial-gradient(125% 85% at 72% 0%, #000 8%, transparent 74%);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  top: -25%;
  right: 20%;
  width: 1px;
  height: 150%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 8%, var(--cyan) 48%, transparent 92%);
  opacity: 0.45;
  transform: rotate(17deg);
}

.page-home .hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.page-home .hero__crumbs {
  margin-bottom: clamp(14px, 2vw, 24px);
}

.page-home .hero__rail {
  display: none;
}

.page-home .hero__rail-caption {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-home .hero__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-home .hero__rail-item a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.page-home .hero__rail-item:last-child a {
  border-bottom: 1px solid var(--line);
}

.page-home .hero__rail-item a:hover,
.page-home .hero__rail-item a:focus-visible {
  color: var(--cyan-hi);
  border-top-color: var(--cyan);
}

.page-home .hero__rail-num {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  transition: color 160ms var(--ease);
}

.page-home .hero__rail-item[data-active="true"] a {
  color: var(--cyan);
  border-top-color: var(--cyan);
}

.page-home .hero__rail-item[data-active="true"] .hero__rail-num {
  color: var(--cyan);
}

.page-home .hero__lamp {
  margin: 18px 0 0;
}

.page-home .hero__title {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 100px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-home .hero__v {
  color: var(--cyan);
}

@supports ((-webkit-text-stroke: 1px #000)) {
  .page-home .hero__v {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.16vw, 2.2px) var(--cyan);
  }
}

.page-home .hero__lead {
  max-width: 34em;
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.85;
  color: var(--text-dim);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.page-home .hero__facts {
  list-style: none;
  margin: 0;
  padding: clamp(14px, 2vw, 18px) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.page-home .hero__fact-key {
  color: var(--muted);
  margin-right: 8px;
}

.page-home .hero__fact-val {
  color: var(--text-dim);
}

.page-home .hero__frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel);
  max-height: 520px;
}

.page-home .hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

/* ---------- 区块标题 ---------- */
.page-home .steps__title,
.page-home .fit__title,
.page-home .compare__title,
.page-home .care__title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--text);
}

.page-home .steps__lead,
.page-home .fit__lead,
.page-home .compare__lead,
.page-home .care__lead {
  margin-top: clamp(14px, 2vw, 20px);
  color: var(--text-dim);
}

/* ---------- 三步 ---------- */
.page-home .steps__banner {
  margin: clamp(20px, 3vw, 32px) 0 0;
}

.page-home .steps__banner-frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel-2);
}

.page-home .steps__banner-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
}

.page-home .steps__list {
  list-style: none;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .step {
  position: relative;
  padding: clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 22px);
  background: var(--panel);
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
}

.page-home .step__num {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.page-home .step__num::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.16);
  vertical-align: middle;
}

.page-home .step__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.45;
  color: var(--text);
}

.page-home .step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-home .step__more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.page-home .step__summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--red);
}

.page-home .step__summary::-webkit-details-marker {
  display: none;
}

.page-home .step__summary::after {
  content: " +";
}

.page-home .step__more[open] .step__summary::after {
  content: " −";
}

.page-home .step__more p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .steps__footnote {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .steps__footnote a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 设备与阅读 ---------- */
.page-home .fit__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.page-home .fit__ranges {
  list-style: none;
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-home .fit__range {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-home .fit__range-num {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan);
  padding-top: 2px;
}

.page-home .fit__frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel);
}

.page-home .fit__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

/* 场景切换 */
.page-home .scene-switch {
  position: relative;
  margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(16px, 2.5vw, 22px);
  border: 2px solid var(--graphite);
  background: var(--panel-2);
}

.page-home .scene-switch__caption {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-home .scene-switch__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.page-home .scene-switch__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-home .scene-switch__chip {
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.page-home #home-scene-a:checked ~ .scene-switch__controls .scene-switch__chip[for="home-scene-a"],
.page-home #home-scene-b:checked ~ .scene-switch__controls .scene-switch__chip[for="home-scene-b"],
.page-home #home-scene-c:checked ~ .scene-switch__controls .scene-switch__chip[for="home-scene-c"] {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(34, 224, 214, 0.08);
}

.page-home .scene-switch__stage {
  display: grid;
  min-height: 92px;
}

.page-home .scene-card {
  display: none;
  gap: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--cyan);
}

.page-home #home-scene-a:checked ~ .scene-switch__stage .scene-card--a,
.page-home #home-scene-b:checked ~ .scene-switch__stage .scene-card--b,
.page-home #home-scene-c:checked ~ .scene-switch__stage .scene-card--c {
  display: grid;
}

.page-home .scene-card--b {
  border-left-color: var(--orange);
}

.page-home .scene-card--c {
  border-left-color: var(--cyan-hi);
  background: linear-gradient(90deg, rgba(111, 243, 236, 0.08), transparent 70%);
}

.page-home .scene-card__tag {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-home .scene-card__line {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* ---------- 版本对照 ---------- */
.page-home .compare__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-home .compare__card {
  padding: clamp(20px, 2.5vw, 30px);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.page-home .compare__card--old {
  --panel: #0A1224;
}

.page-home .compare__card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 7px 8px 0 0 #03060F;
}

.page-home .compare__tag {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-home .compare__tag--live {
  color: var(--red);
}

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

.page-home .compare__row {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.page-home .compare__row:first-child {
  border-top: 0;
  padding-top: 8px;
}

.page-home .compare__row dt {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-home .compare__row dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-dim);
}

.page-home .compare__guide {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(18px, 2.5vw, 26px);
  display: grid;
  gap: 12px;
  justify-items: start;
  border: 2px solid var(--line);
  border-left: 4px solid var(--cyan);
  background: linear-gradient(90deg, rgba(34, 224, 214, 0.07), transparent 58%);
}

.page-home .compare__guide-key {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.page-home .compare__guide-text {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-home .compare__figure {
  margin: clamp(24px, 4vw, 40px) 0 0;
}

.page-home .compare__frame {
  overflow: hidden;
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  background: var(--panel);
}

.page-home .compare__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* ---------- 维护与响应 ---------- */
.page-home .care__stats {
  list-style: none;
  margin: clamp(24px, 3.5vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.page-home .care__stat {
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
}

.page-home .care__num {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-home .care__label {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--cyan);
}

.page-home .care__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .care__channels {
  margin-top: clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 2px solid var(--graphite);
  background: var(--panel-2);
}

.page-home .care__channel {
  padding: clamp(18px, 2.5vw, 24px);
  border-bottom: 1px solid var(--line);
}

.page-home .care__channel:last-child {
  border-bottom: 0;
}

.page-home .care__channel-key {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-home .care__channel-value {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

.page-home .care__channel-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.page-home .care__links {
  margin-top: clamp(20px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-home .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 2px solid var(--graphite);
    border-bottom: 2px solid var(--graphite);
  }

  .page-home .step {
    border: 0;
    border-right: 1px solid var(--line);
    box-shadow: none;
    background: transparent;
  }

  .page-home .step:last-child {
    border-right: 0;
  }
}

@media (min-width: 860px) {
  .page-home .compare__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-home .compare__card--v4 {
    margin-top: 48px;
  }

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

  .page-home .care__channel {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .page-home .care__channel:last-child {
    border-right: 0;
  }
}

@media (min-width: 900px) {
  .page-home .fit__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-home .fit__figure {
    order: -1;
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: var(--home-rail) minmax(0, 1.55fr) minmax(0, 0.85fr);
    align-items: start;
    gap: clamp(24px, 3vw, 48px);
  }

  .page-home .hero__rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding-top: 6px;
  }

  .page-home .hero__figure {
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .compare__card,
  .page-home .hero__rail-item a,
  .page-home .scene-switch__chip {
    transition: none;
  }

  .page-home .compare__card:hover {
    transform: none;
  }
}