.page-home {
  --home-pad: clamp(56px, 8vw, 104px);
  --home-ink-veil: rgba(11, 11, 12, 0.92);
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}

.page-home img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 14px;
}

.page-home .eyebrow--light {
  color: var(--gold);
}

/* ---------- 首屏 ---------- */
.page-home .hero-home {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(116px, 16vh, 176px) 0 clamp(48px, 7vh, 88px);
  overflow: hidden;
}

.page-home .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(158deg, rgba(11, 11, 12, 0.94) 0%, rgba(59, 31, 43, 0.78) 46%, rgba(123, 30, 58, 0.52) 100%);
}

.page-home .hero-inner {
  position: relative;
  z-index: 1;
}

.page-home .hero-eyebrow {
  color: var(--gold);
}

.page-home .hero-title {
  margin: 0;
  font-size: clamp(44px, 11vw, 100px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--paper);
}

.page-home .hero-title-em {
  color: var(--gold);
}

.page-home .hero-lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.page-home .hero-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.page-home .hero-stamp {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.page-home .hero-meta-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.66);
}

.page-home .hero-split {
  margin-top: clamp(36px, 6vw, 64px);
  display: grid;
  gap: 26px;
}

.page-home .split-panel {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--wine);
  transform: rotate(-0.8deg);
}

.page-home .split-panel--web {
  background: var(--grape);
  transform: rotate(0.8deg);
}

.page-home .split-panel-body {
  padding: clamp(22px, 3vw, 34px);
}

.page-home .split-index {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--wine);
}

.page-home .split-title {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-home .split-sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--graphite);
}

.page-home .split-device {
  margin: 20px 0 0;
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
}

.page-home .split-device img {
  width: 100%;
  height: clamp(160px, 30vw, 240px);
  object-fit: cover;
  opacity: 0.92;
}

.page-home .split-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.page-home .split-list--top {
  margin-top: 22px;
}

.page-home .split-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px dashed rgba(11, 11, 12, 0.22);
  font-size: 15.5px;
  line-height: 1.65;
}

.page-home .split-list li:last-child {
  border-bottom: 0;
}

.page-home .split-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  background: var(--gold);
}

.page-home .split-link {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  min-height: 44px;
  background: var(--wine);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.page-home .split-link:hover,
.page-home .split-link:focus-visible {
  background: var(--ink);
  color: var(--gold);
}

/* ---------- 路径导读 ---------- */
.page-home .path-section {
  background: var(--grape);
  padding: var(--home-pad) 0;
  border-bottom: 3px solid var(--ink);
}

.page-home .path-grid {
  display: grid;
  gap: 40px;
}

.page-home .path-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .path-lede {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--graphite);
}

.page-home .path-figure {
  margin: 30px 0 0;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--wine);
}

.page-home .path-figure img {
  width: 100%;
  height: clamp(180px, 34vw, 300px);
  object-fit: cover;
}

.page-home .path-figure figcaption {
  padding: 12px 16px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 1.6;
}

.page-home .path-folds {
  margin-top: 28px;
  border-top: 2px solid var(--ink);
}

.page-home .fold {
  border-bottom: 2px solid var(--ink);
}

.page-home .fold summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

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

.page-home .fold summary:hover {
  color: var(--wine);
}

.page-home .fold-num {
  color: var(--gold-text);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.page-home .fold-steps {
  margin: 0 0 20px;
  padding: 0 0 0 44px;
  color: var(--graphite);
  font-size: 15.5px;
  line-height: 1.8;
}

.page-home .fold-steps li {
  margin-bottom: 8px;
}

.page-home .path-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-home .aside-block {
  padding: 22px;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.page-home .aside-block--wine {
  background: var(--wine);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.page-home .aside-block--gold {
  background: var(--ink-soft);
  color: var(--grape);
  border-color: var(--gold);
}

.page-home .aside-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-home .aside-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--graphite);
}

.page-home .aside-num {
  margin: 0;
  font-size: clamp(48px, 8vw, 68px);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.page-home .aside-label {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- 活动索引 ---------- */
.page-home .activity-section {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: var(--home-pad) 0;
  overflow: hidden;
}

.page-home .activity-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .activity-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.page-home .activity-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(11, 11, 12, 0.82) 0%, rgba(59, 31, 43, 0.72) 100%);
}

.page-home .activity-inner {
  position: relative;
  z-index: 1;
}

.page-home .activity-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-home .activity-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .activity-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.76);
  max-width: 56ch;
}

.page-home .activity-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 82%);
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .activity-card {
  scroll-snap-align: start;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-top: 6px solid var(--gold);
  padding: 22px 20px 24px;
  box-shadow: 8px 8px 0 var(--wine);
}

.page-home .activity-tag {
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--wine);
}

.page-home .activity-name {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.page-home .activity-desc {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-home .activity-meta {
  margin: 0;
  padding-top: 14px;
  border-top: 2px solid var(--snow);
}

.page-home .activity-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.page-home .activity-meta dt {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gold-text);
  letter-spacing: 0.04em;
}

.page-home .activity-meta dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: right;
  color: var(--ink);
}

.page-home .activity-foot {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 4px solid var(--gold);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- 内容节奏 ---------- */
.page-home .rhythm-section {
  background: var(--snow);
  padding: var(--home-pad) 0;
  border-bottom: 3px solid var(--ink);
}

.page-home .rhythm-grid {
  display: grid;
  gap: 40px;
}

.page-home .rhythm-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .rhythm-lede {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--graphite);
}

.page-home .rhythm-link {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  min-height: 44px;
  background: var(--wine);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.page-home .rhythm-link:hover,
.page-home .rhythm-link:focus-visible {
  background: var(--ink);
  color: var(--gold);
}

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

.page-home .rhythm-item {
  display: flex;
  gap: 16px;
  padding: 18px 18px 18px 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.page-home .rhythm-item:first-child {
  border-top: 2px solid var(--ink);
}

.page-home .rhythm-num {
  flex: 0 0 auto;
  width: 46px;
  padding-left: 14px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

.page-home .rhythm-item h3 {
  margin: 0 0 6px;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-home .rhythm-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--graphite);
}

.page-home .rhythm-stats {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}

.page-home .stat {
  padding: 18px 20px;
  background: var(--paper);
  border-left: 6px solid var(--wine);
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.page-home .stat-num {
  margin: 0;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.page-home .stat-label {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

/* ---------- 联系与信任 ---------- */
.page-home .trust-section {
  background: var(--plum);
  color: var(--paper);
  padding: var(--home-pad) 0;
}

.page-home .trust-grid {
  display: grid;
  gap: 32px;
}

.page-home .trust-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--paper);
}

.page-home .trust-lede {
  margin: 18px 0 0;
  max-width: 50ch;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}

.page-home .trust-note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

.page-home .trust-note .mono {
  color: var(--gold);
}

.page-home .trust-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-home .trust-btn {
  display: inline-block;
  padding: 12px 24px;
  min-height: 44px;
  background: var(--gold);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.page-home .trust-btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--gold);
  box-shadow: none;
}

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

.page-home .trust-btn--ghost:hover,
.page-home .trust-btn--ghost:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.page-home .trust-card {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--wine);
  padding: clamp(22px, 3vw, 30px);
}

.page-home .trust-card-title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--wine);
}

.page-home .trust-list {
  margin: 0;
}

.page-home .trust-row {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(11, 11, 12, 0.22);
}

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

.page-home .trust-row dt {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-text);
}

.page-home .trust-row dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  word-break: break-word;
}

.page-home .trust-card-foot {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--graphite);
}

/* ---------- 常见问答 ---------- */
.page-home .faq-section {
  background: var(--paper);
  padding: var(--home-pad) 0;
}

.page-home .faq-head {
  max-width: 60ch;
}

.page-home .faq-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .faq-lede {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--graphite);
}

.page-home .faq-list {
  list-style: none;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-home .faq-list li {
  border-bottom: 2px solid var(--ink);
}

.page-home .faq-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  min-height: 44px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
}

.page-home .faq-num {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

.page-home .faq-list a:hover,
.page-home .faq-list a:focus-visible {
  color: var(--wine);
  padding-left: 12px;
}

.page-home .faq-more {
  margin: 24px 0 0;
  font-size: 15px;
}

.page-home .faq-more a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-home .faq-more a:hover,
.page-home .faq-more a:focus-visible {
  color: var(--wine);
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-home .activity-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px;
  }

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

  .page-home .activity-rail {
    grid-auto-columns: minmax(280px, 46%);
  }
}

@media (min-width: 960px) {
  .page-home .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

  .page-home .split-panel--web {
    margin-top: 44px;
  }

  .page-home .split-device img {
    height: 220px;
  }

  .page-home .path-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.72fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-home .path-aside {
    padding-top: 8px;
  }

  .page-home .activity-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 8px;
    gap: 20px;
  }

  .page-home .rhythm-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
  }

  .page-home .rhythm-head {
    position: sticky;
    top: 96px;
  }

  .page-home .trust-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
  }

  .page-home .trust-row {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .split-panel,
  .page-home .split-panel--web {
    transform: none;
  }
}
</style>
<<<END>>>

等等——我误加了 `</style>` 和 `<<<END>>>`。应当只输出两个标记。修正输出。

重新输出，去掉多余。但注意 PAGE_CSS 标记只能出现一次，我已经写了。重来一次完整正确输出。

需要重新输出整个内容？是的，我要给出正确的最终答案。上面已经生成了完整内容，只需去掉尾部多出的 `</style>` 和 `<<<END>>>`。

但输出格式要求：只输出标记和内容。我就重新完整输一遍。
<main id="main-content" class="page-home">

  <section class="hero-home" aria-labelledby="hero-title">
    <div class="hero-visual">
      <img src="{zhanqunpic:h:1350w:2400}" width="2400" height="1350" alt="暗调葡萄园夜景与天山轮廓，远处手机屏幕泛起一层光晕，画面中没有人物面部">
    </div>
    <div class="wrap hero-inner">
      <p class="eyebrow hero-eyebrow">首页 · 注册地入口总览</p>
      <h1 id="hero-title" class="hero-title">先看屏幕<br><span class="hero-title-em">再选入口</span></h1>
      <p class="hero-lede">从苹果手机打开，第一屏就把订阅栏和账户设置送到眼前，几步就回到上回停下的位置；换成桌面浏览器，客服通道多出一个落脚点，活动页也少走两步。拉的还是同一张地图，差别只在您手边是哪块屏幕。</p>
      <div class="hero-meta">
        <span class="mono hero-stamp">内地更新时间 2025-06-12</span>
        <span class="hero-meta-note">订阅栏与账户设置按本次复核后的顺序呈现</span>
      </div>

      <div class="hero-split">
        <article class="split-panel split-panel--apple">
          <div class="split-panel-body">
            <p class="split-index mono">01</p>
            <h2 class="split-title">苹果手机打开</h2>
            <p class="split-sub">首屏留给订阅栏，账户设置在下一层</p>
            <figure class="split-device">
              <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="苹果手机在暗色背景中亮起，屏幕以抽象的订阅栏与账户设置区块示意，没有真实界面文字">
            </figure>
            <ul class="split-list">
              <li>打开后先看到订阅栏，更新通知集中在顶部</li>
              <li>账户设置在同一屏往下滑一段即可触达</li>
              <li>活动以卡片摘要形式出现，方便快速扫过</li>
            </ul>
            <a class="split-link" href="/products/">看苹果版入口说明</a>
          </div>
        </article>

        <article class="split-panel split-panel--web">
          <div class="split-panel-body">
            <p class="split-index mono">02</p>
            <h2 class="split-title">桌面浏览器打开</h2>
            <p class="split-sub">多一个客服通道，路径短两步</p>
            <ul class="split-list split-list--top">
              <li>页面右侧固定客服通道，遇到卡点不必退出</li>
              <li>活动入口比手机端少两步，层级更扁平</li>
              <li>活动详情页额外列出报名截止时间，方便排期</li>
              <li>桌面端适合一次比对多场活动的开放情况</li>
            </ul>
            <a class="split-link" href="/products/">看网页版入口说明</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="path-section" aria-labelledby="path-title">
    <div class="wrap path-grid">
      <div class="path-main">
        <p class="eyebrow">路径导读</p>
        <h2 id="path-title" class="path-title">两条路线，差在层级与步数</h2>
        <p class="path-lede">手机端与电脑端的差异主要落在两处：入口堆叠了几层，客服通道摆在什么位置。把这两处认清楚，找活动入口时就不必反复退回首页重新试。</p>

        <figure class="path-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面浏览器窗口的光晕与线性客服图标，路径线条在桌面上比手机端少两段" loading="lazy" decoding="async">
          <figcaption>桌面端的活动路径比手机端少两步，客服通道固定在页面右侧</figcaption>
        </figure>

        <div class="path-folds">
          <details class="fold">
            <summary><span class="mono fold-num">01</span> 苹果版：从打开到活动卡片的四步</summary>
            <ol class="fold-steps">
              <li>打开应用，首屏即订阅栏，先确认有没有新的更新提示。</li>
              <li>向下滑到账户设置，核对登录状态，避免中途被要求重新验证。</li>
              <li>从账户设置返回主区域，活动以卡片摘要的形式排列。</li>
              <li>点开卡片看摘要信息，需要更完整的说明时记下活动名称，转到网页版查看。</li>
            </ol>
          </details>
          <details class="fold">
            <summary><span class="mono fold-num">02</span> 网页版：从打开到活动详情页的两步</summary>
            <ol class="fold-steps">
              <li>打开站点，顶部即活动入口，比手机端少两级。</li>
              <li>进入活动详情页，报名截止时间直接列在说明区。</li>
            </ol>
          </details>
          <details class="fold">
            <summary><span class="mono fold-num">03</span> 走错版本时怎么回到正确路径</summary>
            <ol class="fold-steps">
              <li>先确认当前设备是手机还是桌面浏览器。</li>
              <li>回到主入口，不要顺着旧链接继续往下点。</li>
              <li>仍未定位时把设备、版本和卡住的页面写清楚，通过客服通道询问。</li>
            </ol>
          </details>
        </div>
      </div>

      <aside class="path-aside" aria-label="路径差异旁注">
        <div class="aside-block">
          <h3 class="aside-title">入口层级</h3>
          <p class="aside-text">手机端把订阅栏放在最前面，账户设置排在第二层；桌面端把活动入口直接提到顶部，中间少了一次跳转。</p>
        </div>
        <div class="aside-block aside-block--wine">
          <p class="aside-num mono">2</p>
          <p class="aside-label">网页版比苹果版少走的步数</p>
        </div>
        <div class="aside-block">
          <h3 class="aside-title">客服通道位置</h3>
          <p class="aside-text">网页版比苹果版多一个客服通道，位置固定在页面右侧；手机端要从账户设置里转出去，遇到登不上的情况时多花几分钟。</p>
        </div>
        <div class="aside-block aside-block--gold">
          <p class="aside-label">报名截止时间在网页版详情页直接展示，手机端以卡片摘要为主，需要精确日期时建议换到桌面查看。</p>
        </div>
      </aside>
    </div>
  </section>

  <section class="activity-section" id="activity-index" aria-labelledby="activity-title">
    <div class="activity-visual">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="暗色桌面上的日历轮廓与金色时间刻度，抽象的活动卡片排成一列，画面中没有人物" loading="lazy" decoding="async">
    </div>
    <div class="wrap activity-inner">
      <div class="activity-head">
        <div>
          <p class="eyebrow eyebrow--light">活动入口索引</p>
          <h2 id="activity-title" class="activity-title">四类活动，各有各的入口</h2>
        </div>
        <p class="activity-lede">内容订阅、专题日、版本体验、账户设置指引放在不同的位置。先认出活动属于哪一类，再按适用设备绕开多余的层级；需要掐时间报名的，直接走网页版的详情页。</p>
      </div>

      <div class="activity-rail">
        <article class="activity-card">
          <p class="activity-tag mono">内容订阅</p>
          <h3 class="activity-name">更新提醒与订阅确认</h3>
          <p class="activity-desc">适合想第一时间知道版本变动的老用户。苹果版在订阅栏直接处理，网页版从账户设置进入。</p>
          <dl class="activity-meta">
            <div><dt>适用设备</dt><dd>手机 / 桌面</dd></div>
            <div><dt>入口层级</dt><dd>苹果版首屏 · 网页版第二层</dd></div>
            <div><dt>时间提示</dt><dd>网页版详情页列出截止时间</dd></div>
          </dl>
        </article>

        <article class="activity-card">
          <p class="activity-tag mono">专题日</p>
          <h3 class="activity-name">限时专题与集中展示</h3>
          <p class="activity-desc">专题日通常在网页版首页顶部集中展示，手机端以卡片摘要出现，名称与摘要一致，可以对照着找。</p>
          <dl class="activity-meta">
            <div><dt>适用设备</dt><dd>手机 / 桌面</dd></div>
            <div><dt>入口层级</dt><dd>网页版顶部直达</dd></div>
            <div><dt>时间提示</dt><dd>报名截止时间以详情页为准</dd></div>
          </dl>
        </article>

        <article class="activity-card">
          <p class="activity-tag mono">版本体验</p>
          <h3 class="activity-name">新入口的试用与反馈</h3>
          <p class="activity-desc">新版本入口会先开放一段体验期。想知道自己当前是什么版本，先在账户设置里看一眼版本说明。</p>
          <dl class="activity-meta">
            <div><dt>适用设备</dt><dd>苹果手机优先</dd></div>
            <div><dt>入口层级</dt><dd>账户设置下层</dd></div>
            <div><dt>时间提示</dt><dd>体验期结束后入口回到常规位置</dd></div>
          </dl>
        </article>

        <article class="activity-card">
          <p class="activity-tag mono">账户设置指引</p>
          <h3 class="activity-name">通知方式与设备切换</h3>
          <p class="activity-desc">换手机或换浏览器前后，先在这里把通知方式确认一遍，能省掉后面反复找回入口的时间。</p>
          <dl class="activity-meta">
            <div><dt>适用设备</dt><dd>手机 / 桌面</dd></div>
            <div><dt>入口层级</dt><dd>两端一致</dd></div>
            <div><dt>时间提示</dt><dd>改动后当日生效</dd></div>
          </dl>
        </article>
      </div>

      <p class="activity-foot">活动信息随时间调整，遇到展示不一致时，以网页版详情页列出的时间为准，也可以直接联系客服确认。</p>
    </div>
  </section>

  <section class="rhythm-section" aria-labelledby="rhythm-title">
    <div class="wrap rhythm-grid">
      <div class="rhythm-head">
        <p class="eyebrow">内容中心</p>
        <h2 id="rhythm-title" class="rhythm-title">每周有人复核，每月两次比对</h2>
        <p class="rhythm-lede">六个人盯入口，五个人写内容、三个人接咨询，按周轮值。版本一变，说明就先动；活动一换，索引跟着改。您看到的入口顺序，是最近一次比对后的样子。</p>
        <a class="rhythm-link" href="/information/">进入内容中心</a>
      </div>

      <div class="rhythm-main">
        <ol class="rhythm-list">
          <li class="rhythm-item">
            <p class="rhythm-num mono">01</p>
            <div>
              <h3>注册地服务</h3>
              <p>把服务地区、联系方式与咨询流程讲清楚，第一次找过来的访客能先知道该问谁。</p>
            </div>
          </li>
          <li class="rhythm-item">
            <p class="rhythm-num mono">02</p>
            <div>
              <h3>版本入口</h3>
              <p>苹果版与网页版分两条线记录，标注适用设备、登录状态要求和路径步数，目前维护三十六个入口路径条目。</p>
            </div>
          </li>
          <li class="rhythm-item">
            <p class="rhythm-num mono">03</p>
            <div>
              <h3>活动索引</h3>
              <p>按内容订阅、专题日、版本体验、账户设置指引四类归位，每类标明入口层级和时间提示。</p>
            </div>
          </li>
          <li class="rhythm-item">
            <p class="rhythm-num mono">04</p>
            <div>
              <h3>账户设置</h3>
              <p>通知方式、设备切换、登录状态三件事集中讲，避免换手机时把入口顺序重新猜一遍。</p>
            </div>
          </li>
          <li class="rhythm-item">
            <p class="rhythm-num mono">05</p>
            <div>
              <h3>常见问答</h3>
              <p>十二组路径问答覆盖订阅栏、客服通道、报名截止时间与入口回退，先看问答往往比逐个试更快。</p>
            </div>
          </li>
          <li class="rhythm-item">
            <p class="rhythm-num mono">06</p>
            <div>
              <h3>平台动态</h3>
              <p>按版本迭代、入口说明、活动索引、账户设置、专题速览五类标签归档，想追一条线的变化从头翻到尾即可。</p>
            </div>
          </li>
        </ol>

        <div class="rhythm-stats">
          <div class="stat">
            <p class="stat-num mono">48</p>
            <p class="stat-label">版本与入口说明累计发布，其中苹果版十八篇、网页版十六篇、账户与订阅设置十四篇</p>
          </div>
          <div class="stat">
            <p class="stat-num mono">24</p>
            <p class="stat-label">本年度完成的版本对比更新次数，每月固定两次复核入口路径与客服通道</p>
          </div>
          <div class="stat">
            <p class="stat-num mono">3</p>
            <p class="stat-label">持续维护的专题线：注册地入口速查、苹果版首屏指南、网页版客服通道说明</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="trust-section" aria-labelledby="trust-title">
    <div class="wrap trust-grid">
      <div class="trust-copy">
        <p class="eyebrow eyebrow--light">联系与信任</p>
        <h2 id="trust-title" class="trust-title">卡在某一步，直接找人问</h2>
        <p class="trust-lede">注册地咨询、苹果版打开后找不到订阅栏、网页版客服通道位置记不清，都可以写信或打电话。工作日的咨询按设备、版本、入口、客服四步顺序排查，通常在这四步里就能对上具体的说明页。</p>
        <p class="trust-note">服务地区为新疆，站点备案号 <span class="mono">新ICP备67243298号-1</span>。年度咨询约一万二千次，问题多集中在苹果版首屏模块、网页版客服通道与报名截止时间三处。</p>
        <div class="trust-actions">
          <a class="trust-btn" href="/contact-us/">查看联系页面</a>
          <a class="trust-btn trust-btn--ghost" href="/faqs/">先看常见问答</a>
        </div>
      </div>

      <div class="trust-card">
        <h3 class="trust-card-title">客服通道</h3>
        <dl class="trust-list">
          <div class="trust-row">
            <dt>邮箱</dt>
            <dd class="mono">contact@lafei-playhub.com.cn</dd>
          </div>
          <div class="trust-row">
            <dt>电话</dt>
            <dd class="mono">400-1250-7075</dd>
          </div>
          <div class="trust-row">
            <dt>服务时间</dt>
            <dd>内地时间工作日 10:00-19:00</dd>
          </div>
          <div class="trust-row">
            <dt>联系地址</dt>
            <dd>新疆省乌鲁木齐市天山区解放南路88号红山国际大厦12层</dd>
          </div>
        </dl>
        <p class="trust-card-foot">写信时附上设备型号、打开的是苹果版还是网页版、卡在哪一屏，回复会更快。</p>
      </div>
    </div>
  </section>

  <section class="faq-section" aria-labelledby="faq-title">
    <div class="wrap faq-inner">
      <div class="faq-head">
        <p class="eyebrow">常见问答</p>
        <h2 id="faq-title" class="faq-title">先从这几问开始</h2>
        <p class="faq-lede">这些问题几乎每周都被问到。答案整理在问答页里，按设备分好段，翻到对应的一节就能照着走。</p>
      </div>
      <ul class="faq-list">
        <li><a href="/faqs/"><span class="mono faq-num">01</span> 苹果版打开后第一屏应该先看哪里？</a></li>
        <li><a href="/faqs/"><span class="mono faq-num">02</span> 订阅栏和账户设置分别在第几层？</a></li>
        <li><a href="/faqs/"><span class="mono faq-num">03</span> 网页版的客服通道固定在什么位置？</a></li>
        <li><a href="/faqs/"><span class="mono faq-num">04</span> 手机上怎么确认一场活动的报名截止时间？</a></li>
        <li><a href="/faqs/"><span class="mono faq-num">05</span> 顺着旧链接走错了，怎么退回主入口？</a></li>
      </ul>
      <p class="faq-more"><a href="/values/">了解拉菲平台注册地服务介绍与内容中心的分工</a></p>
    </div>
  </section>

</main>

.page-home {
  --home-pad: clamp(56px, 8vw, 104px);
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}

.page-home img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 14px;
}

.page-home .eyebrow--light {
  color: var(--gold);
}

/* 首屏 */
.page-home .hero-home {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(116px, 16vh, 176px) 0 clamp(48px, 7vh, 88px);
  overflow: hidden;
}

.page-home .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, rgba(11, 11, 12, 0.94) 0%, rgba(59, 31, 43, 0.78) 46%, rgba(123, 30, 58, 0.52) 100%);
}

.page-home .hero-inner {
  position: relative;
  z-index: 1;
}

.page-home .hero-eyebrow {
  color: var(--gold);
}

.page-home .hero-title {
  margin: 0;
  font-size: clamp(44px, 11vw, 100px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--paper);
}

.page-home .hero-title-em {
  color: var(--gold);
}

.page-home .hero-lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.page-home .hero-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.page-home .hero-stamp {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.page-home .hero-meta-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.66);
}

.page-home .hero-split {
  margin-top: clamp(36px, 6vw, 64px);
  display: grid;
  gap: 26px;
}

.page-home .split-panel {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--wine);
  transform: rotate(-0.8deg);
}

.page-home .split-panel--web {
  background: var(--grape);
  transform: rotate(0.8deg);
}

.page-home .split-panel-body {
  padding: clamp(22px, 3vw, 34px);
}

.page-home .split-index {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--wine);
}

.page-home .split-title {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-home .split-sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--graphite);
}

.page-home .split-device {
  margin: 20px 0 0;
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
}

.page-home .split-device img {
  width: 100%;
  height: clamp(160px, 30vw, 240px);
  object-fit: cover;
  opacity: 0.92;
}

.page-home .split-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.page-home .split-list--top {
  margin-top: 22px;
}

.page-home .split-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px dashed rgba(11, 11, 12, 0.22);
  font-size: 15.5px;
  line-height: 1.65;
}

.page-home .split-list li:last-child {
  border-bottom: 0;
}

.page-home .split-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  background: var(--gold);
}

.page-home .split-link {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  min-height: 44px;
  background: var(--wine);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.page-home .split-link:hover,
.page-home .split-link:focus-visible {
  background: var(--ink);
  color: var(--gold);
}

/* 路径导读 */
.page-home .path-section {
  background: var(--grape);
  padding: var(--home-pad) 0;
  border-bottom: 3px solid var(--ink);
}

.page-home .path-grid {
  display: grid;
  gap: 40px;
}

.page-home .path-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .path-lede {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--graphite);
}

.page-home .path-figure {
  margin: 30px 0 0;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--wine);
}

.page-home .path-figure img {
  width: 100%;
  height: clamp(180px, 34vw, 300px);
  object-fit: cover;
}

.page-home .path-figure figcaption {
  padding: 12px 16px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 1.6;
}

.page-home .path-folds {
  margin-top: 28px;
  border-top: 2px solid var(--ink);
}

.page-home .fold {
  border-bottom: 2px solid var(--ink);
}

.page-home .fold summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

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

.page-home .fold summary:hover,
.page-home .fold summary:focus-visible {
  color: var(--wine);
}

.page-home .fold-num {
  color: var(--gold-text);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.page-home .fold-steps {
  margin: 0 0 20px;
  padding: 0 0 0 44px;
  color: var(--graphite);
  font-size: 15.5px;
  line-height: 1.8;
}

.page-home .fold-steps li {
  margin-bottom: 8px;
}

.page-home .path-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-home .aside-block {
  padding: 22px;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.page-home .aside-block--wine {
  background: var(--wine);
  color: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
}

.page-home .aside-block--gold {
  background: var(--ink-soft);
  color: var(--grape);
  border-color: var(--gold);
}

.page-home .aside-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-home .aside-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--graphite);
}

.page-home .aside-num {
  margin: 0;
  font-size: clamp(48px, 8vw, 68px);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.page-home .aside-label {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

/* 活动索引 */
.page-home .activity-section {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: var(--home-pad) 0;
  overflow: hidden;
}

.page-home .activity-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .activity-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.page-home .activity-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(11, 11, 12, 0.82) 0%, rgba(59, 31, 43, 0.72) 100%);
}

.page-home .activity-inner {
  position: relative;
  z-index: 1;
}

.page-home .activity-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-home .activity-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .activity-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.76);
  max-width: 56ch;
}

.page-home .activity-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 82%);
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .activity-card {
  scroll-snap-align: start;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-top: 6px solid var(--gold);
  padding: 22px 20px 24px;
  box-shadow: 8px 8px 0 var(--wine);
}

.page-home .activity-tag {
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--wine);
}

.page-home .activity-name {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.page-home .activity-desc {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-home .activity-meta {
  margin: 0;
  padding-top: 14px;
  border-top: 2px solid var(--snow);
}

.page-home .activity-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.page-home .activity-meta dt {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gold-text);
  letter-spacing: 0.04em;
}

.page-home .activity-meta dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: right;
  color: var(--ink);
}

.page-home .activity-foot {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 4px solid var(--gold);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
}

/* 内容节奏 */
.page-home .rhythm-section {
  background: var(--snow);
  padding: var(--home-pad) 0;
  border-bottom: 3px solid var(--ink);
}

.page-home .rhythm-grid {
  display: grid;
  gap: 40px;
}

.page-home .rhythm-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .rhythm-lede {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--graphite);
}

.page-home .rhythm-link {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  min-height: 44px;
  background: var(--wine);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.page-home .rhythm-link:hover,
.page-home .rhythm-link:focus-visible {
  background: var(--ink);
  color: var(--gold);
}

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

.page-home .rhythm-item {
  display: flex;
  gap: 16px;
  padding: 18px 18px 18px 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.page-home .rhythm-item:first-child {
  border-top: 2px solid var(--ink);
}

.page-home .rhythm-num {
  flex: 0 0 auto;
  width: 46px;
  padding-left: 14px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

.page-home .rhythm-item h3 {
  margin: 0 0 6px;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-home .rhythm-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--graphite);
}

.page-home .rhythm-stats {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}

.page-home .stat {
  padding: 18px 20px;
  background: var(--paper);
  border-left: 6px solid var(--wine);
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.page-home .stat-num {
  margin: 0;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.page-home .stat-label {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

/* 联系与信任 */
.page-home .trust-section {
  background: var(--plum);
  color: var(--paper);
  padding: var(--home-pad) 0;
}

.page-home .trust-grid {
  display: grid;
  gap: 32px;
}

.page-home .trust-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--paper);
}

.page-home .trust-lede {
  margin: 18px 0 0;
  max-width: 50ch;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}

.page-home .trust-note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

.page-home .trust-note .mono {
  color: var(--gold);
}

.page-home .trust-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-home .trust-btn {
  display: inline-block;
  padding: 12px 24px;
  min-height: 44px;
  background: var(--gold);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.page-home .trust-btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--gold);
  box-shadow: none;
}

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

.page-home .trust-btn--ghost:hover,
.page-home .trust-btn--ghost:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.page-home .trust-card {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--wine);
  padding: clamp(22px, 3vw, 30px);
}

.page-home .trust-card-title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--wine);
}

.page-home .trust-list {
  margin: 0;
}

.page-home .trust-row {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(11, 11, 12, 0.22);
}

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

.page-home .trust-row dt {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-text);
}

.page-home .trust-row dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  word-break: break-word;
}

.page-home .trust-card-foot {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--graphite);
}

/* 常见问答 */
.page-home .faq-section {
  background: var(--paper);
  padding: var(--home-pad) 0;
}

.page-home .faq-head {
  max-width: 60ch;
}

.page-home .faq-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.page-home .faq-lede {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--graphite);
}

.page-home .faq-list {
  list-style: none;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-home .faq-list li {
  border-bottom: 2px solid var(--ink);
}

.page-home .faq-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  min-height: 44px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
}

.page-home .faq-num {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

.page-home .faq-list a:hover,
.page-home .faq-list a:focus-visible {
  color: var(--wine);
  padding-left: 12px;
}

.page-home .faq-more {
  margin: 24px 0 0;
  font-size: 15px;
}

.page-home .faq-more a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-home .faq-more a:hover,
.page-home .faq-more a:focus-visible {
  color: var(--wine);
}

/* 断点 */
@media (min-width: 720px) {
  .page-home .activity-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px;
  }

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

  .page-home .activity-rail {
    grid-auto-columns: minmax(280px, 46%);
  }
}

@media (min-width: 960px) {
  .page-home .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

  .page-home .split-panel--web {
    margin-top: 44px;
  }

  .page-home .split-device img {
    height: 220px;
  }

  .page-home .path-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.72fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-home .path-aside {
    padding-top: 8px;
  }

  .page-home .activity-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 8px;
    gap: 20px;
  }

  .page-home .rhythm-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
  }

  .page-home .rhythm-head {
    position: sticky;
    top: 96px;
  }

  .page-home .trust-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
  }

  .page-home .trust-row {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .split-panel {
    transform: none;
  }
}