.page-home {
  --home-line: rgba(175, 194, 198, 0.18);
  --home-line-strong: rgba(175, 194, 198, 0.38);
  --home-tick: rgba(201, 162, 39, 0.52);
  display: block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

.page-home a:focus-visible,
.page-home summary:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

/* 页面位置条 */
.page-home .page-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cool);
}
.page-home .page-context .ctx-brand { color: var(--gold); }
.page-home .page-context .ctx-sep { color: var(--home-tick); }
.page-home .page-context .ctx-ver { color: var(--cool-soft); }

/* 首屏预览台 */
.page-home .hero {
  position: relative;
  border-bottom: 1px solid var(--home-line);
  background-image:
    linear-gradient(to right, var(--home-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--home-line) 1px, transparent 1px);
  background-size: 140px 140px;
  background-position: center top;
  overflow: hidden;
}
.page-home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 82% 6%, rgba(201, 162, 39, 0.12), transparent 62%);
  pointer-events: none;
}
.page-home .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 38px;
  padding-top: clamp(34px, 6vw, 68px);
  padding-bottom: clamp(42px, 7vw, 84px);
}
.page-home .hero-lead { display: block; }
.page-home .hero-lead .eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
}
.page-home h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 8.2vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 15em;
}
.page-home .hero-lede {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--cool-soft);
}
.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.page-home .hero-foot {
  margin: 24px 0 0;
  color: var(--cool);
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.page-home .hero-index { display: grid; align-content: start; }
.page-home .index-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid var(--home-line);
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.page-home .index-item:last-of-type { border-bottom: 1px solid var(--home-line); }
.page-home .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.page-home .index-text {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.25s var(--ease);
}
.page-home .index-text em {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--cool);
}
.page-home .index-item:hover .index-text,
.page-home .index-item:focus-visible .index-text { color: var(--gold-lit); }
.page-home .index-item:hover { border-top-color: var(--gold-hair); }

.page-home .version-card {
  position: relative;
  margin-top: 22px;
  border: 1px solid var(--gold-hair);
  background: var(--panel);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.92);
}
.page-home .version-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 42px;
  height: 3px;
  background: var(--gold);
}
.page-home .version-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 0.9;
  border-bottom: 1px solid var(--home-line);
}
.page-home .version-body {
  display: grid;
  gap: 7px;
  padding: 16px 18px 20px;
}
.page-home .version-body .mono-label {
  margin: 0;
  color: var(--cool-soft);
}
.page-home .version-body .tag { justify-self: start; }

/* 规模条 */
.page-home .stat-band {
  background: var(--char);
  border-bottom: 1px solid var(--home-line);
  padding-bottom: 22px;
}
.page-home .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-home .stat-cell {
  padding: 20px 14px 20px 0;
  border-bottom: 1px solid var(--home-line);
}
.page-home .stat-cell:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--home-line);
}
.page-home .stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
}
.page-home .stat-label {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--cool);
}
.page-home .stat-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cool);
}
.page-home .stat-note a {
  color: var(--gold-lit);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 章节通用 */
.page-home .section {
  padding: clamp(48px, 7.5vw, 100px) 0;
  border-bottom: 1px solid var(--home-line);
}
.page-home .section-grid { display: grid; gap: 34px; }
.page-home .section-head { display: grid; gap: 14px; align-content: start; }
.page-home .section-head--wide { max-width: 72ch; margin-bottom: 38px; }
.page-home .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 4.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.page-home .section-head .prose { margin: 0; }
.page-home .prose {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--cool-soft);
}
.page-home .prose a {
  color: var(--gold-lit);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-home .section-body .btn--quiet { margin-top: 22px; }

.page-home .spec-list {
  margin: 26px 0 0;
  border-top: 1px solid var(--home-line);
}
.page-home .spec-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--home-line);
}
.page-home .spec-list dt {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cool);
}
.page-home .spec-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--paper);
}

/* 步骤卡 */
.page-home .step-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.page-home .step-item {
  position: relative;
  padding: 0 0 26px 44px;
}
.page-home .step-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--home-line);
}
.page-home .step-item:last-child { padding-bottom: 0; }
.page-home .step-item:last-child::before { display: none; }
.page-home .step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 1px solid var(--gold-hair);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.page-home .step-item h3 {
  margin: 3px 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-home .step-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--cool-soft);
}

/* 折叠说明 */
.page-home .note-fold,
.page-home .diff-fold {
  margin-top: 26px;
  border: 1px solid var(--home-line);
  background: var(--panel);
  transition: border-color 0.25s var(--ease);
}
.page-home .note-fold:hover,
.page-home .diff-fold:hover { border-color: var(--gold-hair); }
.page-home .note-fold summary,
.page-home .diff-fold summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
}
.page-home .note-fold summary::-webkit-details-marker,
.page-home .diff-fold summary::-webkit-details-marker { display: none; }
.page-home .note-fold summary::after,
.page-home .diff-fold summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--gold);
}
.page-home .note-fold[open] summary::after,
.page-home .diff-fold[open] summary::after { content: "–"; }
.page-home .note-fold p,
.page-home .diff-fold p {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--cool-soft);
}
.page-home .diff-stack { display: grid; gap: 0; align-content: start; }
.page-home .diff-stack .diff-fold:first-child { margin-top: 0; }
.page-home .fold-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* 图片容器 */
.page-home .shot {
  margin: 26px 0 0;
  padding: 8px;
  border: 1px solid var(--home-line);
  background: var(--char);
}
.page-home .shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--home-line);
}
.page-home .shot figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--cool);
}

/* 时间轴 */
.page-home .cadence-grid { display: grid; gap: 34px; }
.page-home .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}
.page-home .timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--home-line) 42%, var(--home-line) 100%);
}
.page-home .tl-node {
  position: relative;
  padding: 0 0 26px;
}
.page-home .tl-node::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--home-line-strong);
  background: var(--ink);
}
.page-home .tl-node--now::before {
  border-color: var(--amber);
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 138, 31, 0.16);
}
.page-home .tl-date {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.page-home .tl-node--now .tl-date { color: var(--amber); }
.page-home .tl-node p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--cool-soft);
}

/* 联系分流 */
.page-home .channel-grid {
  display: grid;
  gap: 16px;
}
.page-home .channel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  border: 1px solid var(--home-line);
  border-top: 2px solid var(--home-line);
  background: var(--panel);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.page-home .channel--gold { border-top-color: var(--gold); }
.page-home .channel--amber { border-top-color: var(--amber); }
.page-home .channel--cool { border-top-color: var(--cool); }
.page-home .channel:hover { background: #202730; }
.page-home .channel .mono-label { color: var(--cool); margin: 0; }
.page-home .channel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.page-home .channel p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cool-soft);
}
.page-home .channel a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-lit);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-hair);
  align-self: flex-start;
  padding-bottom: 2px;
}
.page-home .channel a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.page-home .contact-line {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
  color: var(--cool-soft);
  letter-spacing: 0.06em;
  line-height: 1.9;
  word-break: break-word;
}

/* 中屏起 */
@media (min-width: 760px) {
  .page-home .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .stat-cell { padding: 22px 20px 22px 0; }
  .page-home .stat-cell:nth-child(even) { padding-left: 22px; }
}

@media (min-width: 820px) {
  .page-home .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-home .stat-cell,
  .page-home .stat-cell:nth-child(even) {
    padding: 26px 22px;
    border-bottom: 0;
    border-left: 1px solid var(--home-line);
  }
  .page-home .stat-cell:first-child { padding-left: 0; border-left: 0; }
}

/* 桌面端非对称栅格 */
@media (min-width: 900px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
  }
  .page-home .section-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
  .page-home .section-grid--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .page-home .cadence-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 52px;
    align-items: start;
  }
  .page-home .cadence-grid .shot { margin-top: 4px; }
  .page-home .diff-stack {
    border-left: 1px solid var(--home-line);
    padding-left: 40px;
  }
  .page-home .shot { margin-top: 0; }
  .page-home .section-body > .shot { margin-top: 0; }
}

@media (min-width: 1180px) {
  .page-home h1 { font-size: 84px; }
  .page-home .hero-grid { gap: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-home *::before,
  .page-home *::after {
    animation: none !important;
    transition: none !important;
  }
  .page-home [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


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

  <div class="content-shell page-context" aria-label="页面位置">
    <span class="ctx-brand">皇冠体肓官</span>
    <span class="ctx-sep" aria-hidden="true">/</span>
    <span class="ctx-here">首页 · 索引 00</span>
    <span class="ctx-sep" aria-hidden="true">/</span>
    <span class="ctx-ver">当前版本 R12 · 最近更新 6月12日</span>
  </div>

  <section class="hero" aria-labelledby="hero-title">
    <div class="content-shell hero-grid">
      <div class="hero-lead" data-reveal>
        <p class="eyebrow">行家对照手册</p>
        <h1 id="hero-title">入口在哪、版本到几、桌面端怎么切，先看清再动手</h1>
        <p class="hero-lede">皇冠体肓把三件事摆在同一屏：顶部的焕新版入口、当前版本标识、以及每周三的说明节奏。确认自己处在哪一版之后，换手机也好，切大屏也好，剩下的只是几步操作。</p>
        <div class="hero-actions">
          <a class="btn btn--primary" href="#entry">看入口与版本</a>
          <a class="btn btn--ghost" href="/answers/">进答疑中心</a>
        </div>
        <p class="hero-foot mono-label">客服工作日 9:00-18:00 在线 · 工单平均首次响应 45 分钟</p>
      </div>

      <div class="hero-index" data-reveal>
        <a class="index-item" href="#entry">
          <span class="index-num">01</span>
          <span class="index-text">焕新版入口<em>常驻页面顶部，进去第一眼先认版本标识</em></span>
        </a>
        <a class="index-item" href="#switch">
          <span class="index-num">02</span>
          <span class="index-text">桌面端切换<em>在设置里手动切，布局与数据面板同步</em></span>
        </a>
        <a class="index-item" href="#cadence">
          <span class="index-num">03</span>
          <span class="index-text">每周三说明<em>最近一次 6月12日，当前公开版本 R12</em></span>
        </a>

        <div class="version-card">
          <img class="version-shot" src="{zhanqunpic:h:640w:960}" width="960" height="640" alt="首页顶部版本入口与版本标识的界面局部示意，暖金标签标出入口位置">
          <div class="version-body">
            <span class="tag tag--gold">当前版本 R12</span>
            <p class="mono-label">上一稳定版 R11</p>
            <p class="mono-label">最近更新 6月12日</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="stat-band" aria-label="服务规模">
    <div class="content-shell stat-grid">
      <div class="stat-cell">
        <span class="stat-num">26</span>
        <span class="stat-label">服务团队人数，分版本研究、内容校对、桌面端体验、客户支持四组</span>
      </div>
      <div class="stat-cell">
        <span class="stat-num">12</span>
        <span class="stat-label">自 2017 年起公开的版本说明数量，R12 是当前公开版本</span>
      </div>
      <div class="stat-cell">
        <span class="stat-num">31</span>
        <span class="stat-label">线上指引覆盖的省级区域</span>
      </div>
      <div class="stat-cell">
        <span class="stat-num">12万</span>
        <span class="stat-label">累计为 12 万次版本查询给出过指引</span>
      </div>
    </div>
    <div class="content-shell">
      <p class="stat-note">四组怎么分工、2017 年以来的每一步，都写在<a href="/company/">品牌档案</a>里。</p>
    </div>
  </section>

  <section id="entry" class="section" aria-labelledby="entry-title">
    <div class="content-shell section-grid">
      <div class="section-head" data-reveal>
        <span class="mono-label">01 / 入口与版本</span>
        <h2 id="entry-title" class="section-title">入口就在顶部，进去先看那枚版本标识</h2>
        <p class="prose">入口不藏在菜单第二层。点开之后，标题下方直接标出版本编号和最近更新日期，你不需要在几个页面之间来回猜。</p>
      </div>
      <div class="section-body" data-reveal>
        <p class="prose">当前公开版本是 R12，最近一次说明整理落在 6月12日。手里截图如果停在 R11，那是上一稳定版的资料，字段和面板跟现在并不完全一样——先认编号，再谈差异，省掉一半来回。</p>
        <dl class="spec-list">
          <div>
            <dt>当前公开版本</dt>
            <dd>R12</dd>
          </div>
          <div>
            <dt>上一稳定版</dt>
            <dd>R11</dd>
          </div>
          <div>
            <dt>最近更新日期</dt>
            <dd>6月12日</dd>
          </div>
          <div>
            <dt>说明整理节奏</dt>
            <dd>每周三</dd>
          </div>
        </dl>
        <a class="btn btn--quiet" href="/features/">查看版本对照 →</a>
      </div>
    </div>
  </section>

  <section id="switch" class="section" aria-labelledby="switch-title">
    <div class="content-shell section-grid section-grid--flip">
      <div class="section-body" data-reveal>
        <div class="section-head">
          <span class="mono-label">02 / 换设备</span>
          <h2 id="switch-title" class="section-title">换一部手机，账号和订阅都还在原来的位置</h2>
        </div>
        <ol class="step-list">
          <li class="step-item">
            <span class="step-num">01</span>
            <h3>用原账号登录</h3>
            <p>移动端更换设备后可直接用原账号登录，不用重新注册，也不需要额外绑定。</p>
          </li>
          <li class="step-item">
            <span class="step-num">02</span>
            <h3>看一眼订阅栏</h3>
            <p>版本更新、对照表增补、桌面端面板变更、每周三说明，四类提醒跟着账号走，换机后照旧。</p>
          </li>
          <li class="step-item">
            <span class="step-num">03</span>
            <h3>要大屏就去设置切桌面端</h3>
            <p>桌面端形态需要在设置里手动切换，切换后布局与数据面板同步为桌面端形态，9 个数据模块可折叠、可记住布局。</p>
          </li>
        </ol>
        <details class="note-fold">
          <summary>换机与切换时容易忽略的几点</summary>
          <p>切换设备不会改变订阅栏里的内容；桌面端形态不会自动启用，必须在设置里手动切；切过去以后随时能切回移动端布局，数据面板刷新一次即可同步。</p>
        </details>
      </div>
      <figure class="shot" data-reveal>
        <img src="{zhanqunpic:h:720w:1200}" width="1200" height="720" loading="lazy" decoding="async" alt="移动设备更换后使用原账号继续登录并保留订阅栏内容的流程示意">
        <figcaption>换机流程：原账号登录 → 订阅栏照旧 → 需要时切桌面端</figcaption>
      </figure>
    </div>
  </section>

  <section id="cadence" class="section" aria-labelledby="cadence-title">
    <div class="content-shell">
      <div class="section-head section-head--wide" data-reveal>
        <span class="mono-label">03 / 更新节奏</span>
        <h2 id="cadence-title" class="section-title">每周三出一轮说明，版本沿 R 系列往前走</h2>
        <p class="prose">版本对照表每月增补一次，每周三的说明把当轮关键变更讲在前面：入口位置、桌面端面板、订阅栏有改动，当天就能看到改了哪里。过去几年的迭代记录都留在<a href="/information/">更新与观察</a>。</p>
      </div>
      <div class="cadence-grid">
        <ol class="timeline" data-reveal>
          <li class="tl-node">
            <span class="tl-date">2017</span>
            <p>开始持续整理账号跨设备使用与版本差异说明，同年发布第一个公开版本。</p>
          </li>
          <li class="tl-node">
            <span class="tl-date">2022</span>
            <p>加入桌面端控制台说明，9 个数据模块的支持范围一并公开。</p>
          </li>
          <li class="tl-node">
            <span class="tl-date">2024</span>
            <p>焕新版入口移回页面顶部，进入后直接显示版本标识与更新日期。</p>
          </li>
          <li class="tl-node">
            <span class="tl-date">R11</span>
            <p>上一稳定版，目前仍在流转的旧截图大多出自这一轮。</p>
          </li>
          <li class="tl-node tl-node--now">
            <span class="tl-date">6月12日</span>
            <p>最近一次说明整理，R12 的订阅栏与产品线对照表在这一轮同步完成。</p>
          </li>
          <li class="tl-node">
            <span class="tl-date">本周三</span>
            <p>下一轮说明，桌面端面板与订阅栏的变更会排在最前面。</p>
          </li>
        </ol>
        <figure class="shot" data-reveal>
          <img src="{zhanqunpic:h:480w:1200}" width="1200" height="480" loading="lazy" decoding="async" alt="每周三说明节奏、6月12日最近更新与 R12 版本节点的纵向时间轴示意">
          <figcaption>说明节奏：每周三一轮，6月12日为最近节点</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section id="diff" class="section" aria-labelledby="diff-title">
    <div class="content-shell section-grid">
      <div class="section-head" data-reveal>
        <span class="mono-label">04 / 新旧差异</span>
        <h2 id="diff-title" class="section-title">新版比旧版多出来的，主要是这三处</h2>
        <p class="prose">如果你手上是 R11 的资料，最值得先看的是订阅栏、产品线对照表和桌面端控制台。点开任意一条，先把结论拿走。</p>
        <a class="btn btn--primary" href="/features/">查看版本对照</a>
      </div>
      <div class="diff-stack" data-reveal>
        <details class="diff-fold">
          <summary><span class="fold-index">A</span> 订阅栏：四类提醒各自开关</summary>
          <p>版本更新、对照表增补、桌面端面板变更、每周三说明，这四类提醒可以分别开启，邮件与站内两条通道都支持。旧版资料里没有这一栏。</p>
        </details>
        <details class="diff-fold">
          <summary><span class="fold-index">B</span> 产品线对照表：6 条产品线、34 项字段差异</summary>
          <p>入门版、标准版、桌面增强版、团队协作版、订阅版、渠道版逐条排开，字段差异直接写在各行里，适合拿着旧版资料一栏一栏对位置。</p>
        </details>
        <details class="diff-fold">
          <summary><span class="fold-index">C</span> 桌面端控制台：9 个数据模块</summary>
          <p>支持布局记忆、面板折叠与数据刷新；切换设备后与移动端共用同一账号，订阅栏内容不会因此变化。</p>
        </details>
        <figure class="shot">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async" alt="新旧版本订阅栏和产品线字段对照表的局部截图式构图">
          <figcaption>订阅栏与产品线对照表：新增字段集中在这两处</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section id="contact-start" class="section section--contact" aria-labelledby="contact-title">
    <div class="content-shell">
      <div class="section-head section-head--wide" data-reveal>
        <span class="mono-label">05 / 找人</span>
        <h2 id="contact-title" class="section-title">哪一步卡住了，直接找人</h2>
        <p class="prose">客服工作日 9:00-18:00 在线，邮件与站内工单都可以；非工作时间的留言会在下个工作日优先处理。工作日内工单平均首次响应 45 分钟，复杂版本问题在 1 个工作日内给出处理路径。</p>
      </div>
      <div class="channel-grid">
        <article class="channel channel--gold" data-reveal>
          <span class="mono-label">入口相关</span>
          <h3>找不到入口、进不去</h3>
          <p>常见路径模板 18 套，覆盖入口定位、换设备、桌面端切换、订阅异常等情形。</p>
          <a href="/answers/">进入答疑中心</a>
        </article>
        <article class="channel channel--amber" data-reveal>
          <span class="mono-label">版本相关</span>
          <h3>分不清 R12 还是 R11</h3>
          <p>两版的字段差异、订阅栏说明和 6 条产品线划分都在这一页展开。</p>
          <a href="/features/">查看功能与版本</a>
        </article>
        <article class="channel channel--cool" data-reveal>
          <span class="mono-label">人工沟通</span>
          <h3>需要有人跟到底</h3>
          <p>客服邮箱、工单通道与响应时效集中在一处，附截图与设备信息能更快定位。</p>
          <a href="/find-us/">联系客服</a>
        </article>
      </div>
      <p class="contact-line mono-label">客服邮箱 kefu@golden-crown-tiyu.com.cn · 电话 400-6253-3006 · 工作日 9:00-18:00 在线</p>
    </div>
  </section>

</main>

.page-home {
  --home-line: rgba(175, 194, 198, 0.18);
  --home-line-strong: rgba(175, 194, 198, 0.38);
  --home-tick: rgba(201, 162, 39, 0.52);
  display: block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

.page-home a:focus-visible,
.page-home summary:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

/* 页面位置条 */
.page-home .page-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cool);
}
.page-home .page-context .ctx-brand { color: var(--gold); }
.page-home .page-context .ctx-sep { color: var(--home-tick); }
.page-home .page-context .ctx-ver { color: var(--cool-soft); }

/* 首屏预览台 */
.page-home .hero {
  position: relative;
  border-bottom: 1px solid var(--home-line);
  background-image:
    linear-gradient(to right, var(--home-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--home-line) 1px, transparent 1px);
  background-size: 140px 140px;
  background-position: center top;
  overflow: hidden;
}
.page-home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 82% 6%, rgba(201, 162, 39, 0.12), transparent 62%);
  pointer-events: none;
}
.page-home .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 38px;
  padding-top: clamp(34px, 6vw, 68px);
  padding-bottom: clamp(42px, 7vw, 84px);
}
.page-home .hero-lead { display: block; }
.page-home .hero-lead .eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
}
.page-home h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 8.2vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 15em;
}
.page-home .hero-lede {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--cool-soft);
}
.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.page-home .hero-foot {
  margin: 24px 0 0;
  color: var(--cool);
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.page-home .hero-index { display: grid; align-content: start; }
.page-home .index-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid var(--home-line);
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.page-home .index-item:last-of-type { border-bottom: 1px solid var(--home-line); }
.page-home .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.page-home .index-text {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.25s var(--ease);
}
.page-home .index-text em {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--cool);
}
.page-home .index-item:hover .index-text,
.page-home .index-item:focus-visible .index-text { color: var(--gold-lit); }
.page-home .index-item:hover { border-top-color: var(--gold-hair); }

.page-home .version-card {
  position: relative;
  margin-top: 22px;
  border: 1px solid var(--gold-hair);
  background: var(--panel);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.92);
}
.page-home .version-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 42px;
  height: 3px;
  background: var(--gold);
}
.page-home .version-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 0.9;
  border-bottom: 1px solid var(--home-line);
}
.page-home .version-body {
  display: grid;
  gap: 7px;
  padding: 16px 18px 20px;
}
.page-home .version-body .mono-label {
  margin: 0;
  color: var(--cool-soft);
}
.page-home .version-body .tag { justify-self: start; }

/* 规模条 */
.page-home .stat-band {
  background: var(--char);
  border-bottom: 1px solid var(--home-line);
  padding-bottom: 22px;
}
.page-home .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-home .stat-cell {
  padding: 20px 14px 20px 0;
  border-bottom: 1px solid var(--home-line);
}
.page-home .stat-cell:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--home-line);
}
.page-home .stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
}
.page-home .stat-label {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--cool);
}
.page-home .stat-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cool);
}
.page-home .stat-note a {
  color: var(--gold-lit);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 章节通用 */
.page-home .section {
  padding: clamp(48px, 7.5vw, 100px) 0;
  border-bottom: 1px solid var(--home-line);
}
.page-home .section-grid { display: grid; gap: 34px; }
.page-home .section-head { display: grid; gap: 14px; align-content: start; }
.page-home .section-head--wide { max-width: 72ch; margin-bottom: 38px; }
.page-home .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 4.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.page-home .section-head .prose { margin: 0; }
.page-home .prose {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--cool-soft);
}
.page-home .prose a {
  color: var(--gold-lit);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-home .section-body .btn--quiet { margin-top: 22px; }

.page-home .spec-list {
  margin: 26px 0 0;
  border-top: 1px solid var(--home-line);
}
.page-home .spec-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--home-line);
}
.page-home .spec-list dt {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cool);
}
.page-home .spec-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--paper);
}

/* 步骤卡 */
.page-home .step-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.page-home .step-item {
  position: relative;
  padding: 0 0 26px 44px;
}
.page-home .step-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--home-line);
}
.page-home .step-item:last-child { padding-bottom: 0; }
.page-home .step-item:last-child::before { display: none; }
.page-home .step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 1px solid var(--gold-hair);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.page-home .step-item h3 {
  margin: 3px 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-home .step-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--cool-soft);
}

/* 折叠说明 */
.page-home .note-fold,
.page-home .diff-fold {
  margin-top: 26px;
  border: 1px solid var(--home-line);
  background: var(--panel);
  transition: border-color 0.25s var(--ease);
}
.page-home .note-fold:hover,
.page-home .diff-fold:hover { border-color: var(--gold-hair); }
.page-home .note-fold summary,
.page-home .diff-fold summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
}
.page-home .note-fold summary::-webkit-details-marker,
.page-home .diff-fold summary::-webkit-details-marker { display: none; }
.page-home .note-fold summary::after,
.page-home .diff-fold summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--gold);
}
.page-home .note-fold[open] summary::after,
.page-home .diff-fold[open] summary::after { content: "–"; }
.page-home .note-fold p,
.page-home .diff-fold p {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--cool-soft);
}
.page-home .diff-stack { display: grid; gap: 0; align-content: start; }
.page-home .diff-stack .diff-fold:first-child { margin-top: 0; }
.page-home .fold-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* 图片容器 */
.page-home .shot {
  margin: 26px 0 0;
  padding: 8px;
  border: 1px solid var(--home-line);
  background: var(--char);
}
.page-home .shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--home-line);
}
.page-home .shot figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--cool);
}

/* 时间轴 */
.page-home .cadence-grid { display: grid; gap: 34px; }
.page-home .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}
.page-home .timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--home-line) 42%, var(--home-line) 100%);
}
.page-home .tl-node {
  position: relative;
  padding: 0 0 26px;
}
.page-home .tl-node::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--home-line-strong);
  background: var(--ink);
}
.page-home .tl-node--now::before {
  border-color: var(--amber);
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 138, 31, 0.16);
}
.page-home .tl-date {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.page-home .tl-node--now .tl-date { color: var(--amber); }
.page-home .tl-node p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--cool-soft);
}

/* 联系分流 */
.page-home .channel-grid {
  display: grid;
  gap: 16px;
}
.page-home .channel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  border: 1px solid var(--home-line);
  border-top: 2px solid var(--home-line);
  background: var(--panel);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.page-home .channel--gold { border-top-color: var(--gold); }
.page-home .channel--amber { border-top-color: var(--amber); }
.page-home .channel--cool { border-top-color: var(--cool); }
.page-home .channel:hover { background: #202730; }
.page-home .channel .mono-label { color: var(--cool); margin: 0; }
.page-home .channel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.page-home .channel p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cool-soft);
}
.page-home .channel a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-lit);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-hair);
  align-self: flex-start;
  padding-bottom: 2px;
}
.page-home .channel a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.page-home .contact-line {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
  color: var(--cool-soft);
  letter-spacing: 0.06em;
  line-height: 1.9;
  word-break: break-word;
}

/* 中屏起 */
@media (min-width: 760px) {
  .page-home .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .stat-cell { padding: 22px 20px 22px 0; }
  .page-home .stat-cell:nth-child(even) { padding-left: 22px; }
}

@media (min-width: 820px) {
  .page-home .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-home .stat-cell,
  .page-home .stat-cell:nth-child(even) {
    padding: 26px 22px;
    border-bottom: 0;
    border-left: 1px solid var(--home-line);
  }
  .page-home .stat-cell:first-child { padding-left: 0; border-left: 0; }
}

/* 桌面端非对称栅格 */
@media (min-width: 900px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
  }
  .page-home .section-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
  .page-home .section-grid--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .page-home .cadence-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 52px;
    align-items: start;
  }
  .page-home .cadence-grid .shot { margin-top: 4px; }
  .page-home .diff-stack {
    border-left: 1px solid var(--home-line);
    padding-left: 40px;
  }
  .page-home .shot { margin-top: 0; }
  .page-home .section-body > .shot { margin-top: 0; }
}

@media (min-width: 1180px) {
  .page-home h1 { font-size: 84px; }
  .page-home .hero-grid { gap: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-home *::before,
  .page-home *::after {
    animation: none !important;
    transition: none !important;
  }
  .page-home [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}