.page-disclaimer {
  --notice-dash: color-mix(in srgb, var(--mist) 42%, transparent);
}

.page-disclaimer .notice-hero {
  padding-block: clamp(28px, 6vw, 64px) clamp(24px, 4vw, 40px);
}

.page-disclaimer .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.page-disclaimer .hero-title h1 {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
}

.page-disclaimer .hero-lead {
  margin: 0;
  max-width: 46ch;
  color: var(--ink);
  align-self: end;
}

.page-disclaimer .notice-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: var(--space-2);
}

.page-disclaimer .note-card {
  --accent: var(--mist);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  border-radius: 20px;
  border-top: 4px solid var(--accent);
  background: var(--paper-warm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 280ms var(--ease-soft), background-color 280ms var(--ease-soft);
}

.page-disclaimer .note-card--spring { --accent: var(--spring); }
.page-disclaimer .note-card--summer { --accent: var(--summer); }
.page-disclaimer .note-card--autumn { --accent: var(--autumn); }
.page-disclaimer .note-card--winter { --accent: var(--winter); }

.page-disclaimer .note-card:hover,
.page-disclaimer .note-card:focus-visible {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent) 22%, var(--paper));
}

.page-disclaimer .card-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
}

.page-disclaimer .card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-deep);
}

.page-disclaimer .card-extra {
  font-size: 14px;
  line-height: 1.7;
  color: var(--winter);
  overflow: hidden;
}

.page-disclaimer .axis-figure {
  margin: var(--space-2) 0 0;
}

.page-disclaimer .axis-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.page-disclaimer .notice-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-2);
}

.page-disclaimer .notice-flow {
  min-width: 0;
}

.page-disclaimer .rule {
  padding-block: clamp(22px, 3.4vw, 34px);
  border-bottom: 1px dashed var(--notice-dash);
}

.page-disclaimer .rule:first-child { padding-top: 0; }
.page-disclaimer .rule:last-child { border-bottom: 0; }

.page-disclaimer .rule:nth-child(1) { --rule-accent: var(--spring); }
.page-disclaimer .rule:nth-child(2) { --rule-accent: var(--summer); }
.page-disclaimer .rule:nth-child(3) { --rule-accent: var(--autumn); }
.page-disclaimer .rule:nth-child(4) { --rule-accent: var(--winter); }
.page-disclaimer .rule:nth-child(5) { --rule-accent: var(--spring); }

.page-disclaimer .rule-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}

.page-disclaimer .rule-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--rule-accent, var(--mist)) 58%, var(--ink-deep));
}

.page-disclaimer .rule h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
}

.page-disclaimer .rule p {
  margin: 0 0 12px;
  max-width: 62ch;
  color: var(--ink);
}

.page-disclaimer .rule p:last-child { margin-bottom: 0; }

.page-disclaimer .season-axis {
  display: none;
}

@media (min-width: 640px) {
  .page-disclaimer .notice-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-disclaimer .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-2);
    align-items: end;
  }
}

@media (min-width: 1024px) {
  .page-disclaimer .notice-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-disclaimer .notice-body {
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: var(--space-2);
  }

  .page-disclaimer .season-axis {
    display: block;
    align-self: start;
    position: sticky;
    top: 120px;
    padding-top: 8px;
  }

  .page-disclaimer .axis-svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.page-disclaimer .axis-rule {
  stroke: var(--notice-dash);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.page-disclaimer .axis-tick {
  stroke: var(--mist);
  stroke-width: 1;
}

.page-disclaimer .axis-dot--spring { fill: var(--spring); }
.page-disclaimer .axis-dot--summer { fill: var(--summer); }
.page-disclaimer .axis-dot--autumn { fill: var(--autumn); }
.page-disclaimer .axis-dot--winter { fill: var(--winter); }

@media (hover: hover) {
  .page-disclaimer .card-extra {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 280ms var(--ease-soft),
                opacity 240ms var(--ease-soft),
                margin-top 280ms var(--ease-soft);
  }

  .page-disclaimer .note-card:hover .card-extra,
  .page-disclaimer .note-card:focus-visible .card-extra {
    max-height: 120px;
    opacity: 1;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .note-card,
  .page-disclaimer .card-extra {
    transition: none;
  }
}


<main id="main-content" class="page-disclaimer">
  <div class="wrap">
    <nav class="breadcrumbs" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="crumb-sep">/</span>
      <span aria-current="page">访问须知</span>
    </nav>

    <header class="notice-hero">
      <div class="hero-grid">
        <div class="hero-title">
          <p class="index-label">NO. 08 · NOTICE</p>
          <h1>访问须知</h1>
        </div>
        <p class="lead hero-lead">在四季查区域、约上门、看手记的时候，您可能会遇到两个版本入口，或者手上那一期清单和页面上的时间对不上。下面几条把版本怎么选、清单算到哪一期、订阅从哪里进、图文怎么用，以及出问题找谁说清楚，几分钟就能读完。</p>
      </div>
    </header>

    <div class="notice-cards" data-reveal>
      <a class="note-card note-card--spring" href="#versions">
        <span class="card-index">01</span>
        <span class="card-title">两个版本，各管一段</span>
        <span class="card-extra">两版打开后查的是同一份区域数据，覆盖范围完全一致。</span>
      </a>
      <a class="note-card note-card--summer" href="#timing">
        <span class="card-index">02</span>
        <span class="card-title">清单每季度换一版</span>
        <span class="card-extra">网络不稳时，离线对照表能先顶上上一季度的信息。</span>
      </a>
      <a class="note-card note-card--autumn" href="#subscribe">
        <span class="card-index">03</span>
        <span class="card-title">订阅在会员页第二栏</span>
        <span class="card-extra">续期、发票与设备管理排在同一列，往下拉就能看到。</span>
      </a>
      <a class="note-card note-card--winter" href="#content-use">
        <span class="card-index">04</span>
        <span class="card-title">图文引用先说一声</span>
        <span class="card-extra">色环图形与图示同样在这条规则里，一并说明用途即可。</span>
      </a>
    </div>

    <figure class="axis-figure" data-reveal>
      <img src="{zhanqunpic:h:360w:1200}" width="1200" height="360" alt="横向排开的节气刻度与四段季节色带组成的抽象图示，没有文字" loading="lazy" decoding="async">
    </figure>

    <div class="notice-body">
      <div class="notice-flow">
        <section class="rule" id="versions" data-reveal>
          <div class="rule-head">
            <span class="rule-num">01</span>
            <h2>两个版本，各管一段</h2>
          </div>
          <p>简体版跟着每一次改版往前走，入口位置和页面排布会随更新调整，您看到的始终是最新一版的样子。稳定版的入口位置在两年内保持不动，适合把四季放进收藏夹、每天从同一个地方点进来的会员。两版共用同一份区域数据，同一时间查到的覆盖范围完全一样，您按自己的习惯用哪一版都行。</p>
          <p>只想快些确认自家区县在不在清单里，直接到<a href="/tools/">服务与工具</a>用区域查询；如果哪天一个入口打不开，换另一个版本进去，看到的清单和信息是一样的。</p>
        </section>

        <section class="rule" id="timing" data-reveal>
          <div class="rule-head">
            <span class="rule-num">02</span>
            <h2>区域清单按季度走</h2>
          </div>
          <p>已覆盖区域清单从 2024 年 10 月起改为按季度更新，每季度首月发布当期版本，21 个城市、146 个区县的开通情况都在里头。跨季度查看时，以最新一期为准；上一期的内容会保留到新版发布为止，中间不会出现空档。</p>
          <p>在外面跑、网络不太稳的时候，可以先打开离线对照表，里面是上一季度已经发布过的城市与区县信息，对照着看也能判断大概。等回到有网的环境，再刷新一次确认当期版本。</p>
        </section>

        <section class="rule" id="subscribe" data-reveal>
          <div class="rule-head">
            <span class="rule-num">03</span>
            <h2>订阅入口在会员页第二栏</h2>
          </div>
          <p>会员体系改版后，订阅续期、发票申请与设备管理三项集中在会员页第二栏，和订单、发票入口排在同一列。iOS 设备上的订阅入口也挪到了这里，第一栏找不到的时候往下一栏看，通常一眼就能认出那一排按钮。</p>
          <p>体验会员、标准会员与年度会员三档都在同一个入口里切换，权益差别落在预约优先级、专属客服通道和回访频次上，续期前后都能在会员页对照着看。</p>
        </section>

        <section class="rule" id="content-use" data-reveal>
          <div class="rule-head">
            <span class="rule-num">04</span>
            <h2>站内图文引用的规矩</h2>
          </div>
          <p>站内发布的文字、四季色环图形和各类图示，都是我们为会员阅读整理的内容。整篇转载、截图发到公开渠道，或放进培训材料之前，请先写信到 kefu@siji-member.com.cn，说明用途、发布渠道和大致的范围，我们回复之后再用。</p>
          <p>随手转给家人朋友、或者打印一份留着自己对照，不需要事先打招呼。填地址和手机号之前想弄清这些信息怎么用、能保留多久，可以翻一翻<a href="/data-privacy/">数据与隐私</a>那一页。</p>
        </section>

        <section class="rule" id="feedback" data-reveal>
          <div class="rule-head">
            <span class="rule-num">05</span>
            <h2>遇到问题找谁</h2>
          </div>
          <p>页面打不开、登录异常，或者看到的清单和刚发布的公告对不上，都可以从<a href="/contact/">联系与反馈</a>的反馈栏提交，把设备型号、版本和问题描述写清楚，再留一个方便回复的联系方式。反馈按受理、复现、修复、回访四个环节推进，超过八成的兼容问题在第一次回复里就会给出一个可以先用的临时办法。</p>
          <p>客服邮箱与电话在工作日 10:00 至 18:00 有人值守，这段时间收到的反馈在两个工作日内答复，非工作时间的来信顺延到下一个工作日处理。想先自己排查一遍，<a href="/faq/">常见问题</a>里按故障场景列了几种能马上试的办法。想确认站点归属，可以对照页脚常驻的客服邮箱与川ICP备87645300号。</p>
        </section>
      </div>

      <aside class="season-axis" aria-hidden="true">
        <svg class="axis-svg" viewBox="0 0 120 480" focusable="false">
          <line class="axis-rule" x1="60" y1="12" x2="60" y2="468"></line>
          <circle class="axis-dot axis-dot--spring" cx="60" cy="60" r="7"></circle>
          <line class="axis-tick" x1="72" y1="60" x2="106" y2="60"></line>
          <circle class="axis-dot axis-dot--summer" cx="60" cy="180" r="7"></circle>
          <line class="axis-tick" x1="72" y1="180" x2="106" y2="180"></line>
          <circle class="axis-dot axis-dot--autumn" cx="60" cy="300" r="7"></circle>
          <line class="axis-tick" x1="72" y1="300" x2="96" y2="300"></line>
          <circle class="axis-dot axis-dot--winter" cx="60" cy="420" r="7"></circle>
          <line class="axis-tick" x1="72" y1="420" x2="88" y2="420"></line>
        </svg>
      </aside>
    </div>
  </div>
</main>

.page-disclaimer {
  --notice-dash: color-mix(in srgb, var(--mist) 42%, transparent);
}

.page-disclaimer .notice-hero {
  padding-block: clamp(28px, 6vw, 64px) clamp(24px, 4vw, 40px);
}

.page-disclaimer .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.page-disclaimer .hero-title h1 {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
}

.page-disclaimer .hero-lead {
  margin: 0;
  max-width: 46ch;
  color: var(--ink);
  align-self: end;
}

.page-disclaimer .notice-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: var(--space-2);
}

.page-disclaimer .note-card {
  --accent: var(--mist);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  border-radius: 20px;
  border-top: 4px solid var(--accent);
  background: var(--paper-warm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 280ms var(--ease-soft), background-color 280ms var(--ease-soft);
}

.page-disclaimer .note-card--spring { --accent: var(--spring); }
.page-disclaimer .note-card--summer { --accent: var(--summer); }
.page-disclaimer .note-card--autumn { --accent: var(--autumn); }
.page-disclaimer .note-card--winter { --accent: var(--winter); }

.page-disclaimer .note-card:hover,
.page-disclaimer .note-card:focus-visible {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent) 22%, var(--paper));
}

.page-disclaimer .card-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
}

.page-disclaimer .card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-deep);
}

.page-disclaimer .card-extra {
  font-size: 14px;
  line-height: 1.7;
  color: var(--winter);
  overflow: hidden;
}

.page-disclaimer .axis-figure {
  margin: var(--space-2) 0 0;
}

.page-disclaimer .axis-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.page-disclaimer .notice-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-2);
}

.page-disclaimer .notice-flow {
  min-width: 0;
}

.page-disclaimer .rule {
  padding-block: clamp(22px, 3.4vw, 34px);
  border-bottom: 1px dashed var(--notice-dash);
}

.page-disclaimer .rule:first-child { padding-top: 0; }
.page-disclaimer .rule:last-child { border-bottom: 0; }

.page-disclaimer .rule:nth-child(1) { --rule-accent: var(--spring); }
.page-disclaimer .rule:nth-child(2) { --rule-accent: var(--summer); }
.page-disclaimer .rule:nth-child(3) { --rule-accent: var(--autumn); }
.page-disclaimer .rule:nth-child(4) { --rule-accent: var(--winter); }
.page-disclaimer .rule:nth-child(5) { --rule-accent: var(--spring); }

.page-disclaimer .rule-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}

.page-disclaimer .rule-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--rule-accent, var(--mist)) 58%, var(--ink-deep));
}

.page-disclaimer .rule h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
}

.page-disclaimer .rule p {
  margin: 0 0 12px;
  max-width: 62ch;
  color: var(--ink);
}

.page-disclaimer .rule p:last-child { margin-bottom: 0; }

.page-disclaimer .season-axis {
  display: none;
}

@media (min-width: 640px) {
  .page-disclaimer .notice-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-disclaimer .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-2);
    align-items: end;
  }
}

@media (min-width: 1024px) {
  .page-disclaimer .notice-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-disclaimer .notice-body {
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: var(--space-2);
  }

  .page-disclaimer .season-axis {
    display: block;
    align-self: start;
    position: sticky;
    top: 120px;
    padding-top: 8px;
  }

  .page-disclaimer .axis-svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.page-disclaimer .axis-rule {
  stroke: var(--notice-dash);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.page-disclaimer .axis-tick {
  stroke: var(--mist);
  stroke-width: 1;
}

.page-disclaimer .axis-dot--spring { fill: var(--spring); }
.page-disclaimer .axis-dot--summer { fill: var(--summer); }
.page-disclaimer .axis-dot--autumn { fill: var(--autumn); }
.page-disclaimer .axis-dot--winter { fill: var(--winter); }

@media (hover: hover) {
  .page-disclaimer .card-extra {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 280ms var(--ease-soft),
                opacity 240ms var(--ease-soft),
                margin-top 280ms var(--ease-soft);
  }

  .page-disclaimer .note-card:hover .card-extra,
  .page-disclaimer .note-card:focus-visible .card-extra {
    max-height: 120px;
    opacity: 1;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-disclaimer .note-card,
  .page-disclaimer .card-extra {
    transition: none;
  }
}