.page-about {
  --about-rule: var(--border-thick) solid var(--color-ink);
  --about-rule-soft: var(--border-thin) solid var(--color-line);
}

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

/* ---------- 面包屑 ---------- */
.page-about .about-crumbs {
  padding-top: var(--space-3);
  padding-bottom: var(--space-1);
}

/* ---------- 共用小结构 ---------- */
.page-about .section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.page-about .stance-grid__text p,
.page-about .phase__body p,
.page-about .about-next__inner p {
  max-width: var(--measure);
}

/* ---------- 定位与主张 ---------- */
.page-about .stance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.page-about .stance-grid__text .title-1 {
  margin: var(--space-2) 0 var(--space-4);
}

.page-about .stance-grid__text p + p {
  margin-top: var(--space-3);
}

.page-about .stance-grid__media .image-frame {
  margin: 0;
}

@media (min-width: 880px) {
  .page-about .stance-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .page-about .stance-grid__media {
    margin-top: var(--space-6);
  }
}

/* ---------- 错位数字块 ---------- */
.page-about .about-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.page-about .about-fig {
  border: var(--about-rule);
  box-shadow: var(--shadow-2);
  background: var(--color-surface);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-about .about-fig--a { background: var(--color-primary-soft); }
.page-about .about-fig--b { background: var(--color-surface); }
.page-about .about-fig--c { background: var(--color-surface-deep); }
.page-about .about-fig--d { background: var(--color-highlight); }

.page-about .about-fig__num {
  display: block;
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-heading);
}

.page-about .about-fig--a .about-fig__num { font-size: var(--text-2xl); }
.page-about .about-fig--b .about-fig__num { font-size: var(--text-xl); }
.page-about .about-fig--c .about-fig__num { font-size: var(--text-xl); }
.page-about .about-fig--d .about-fig__num { font-size: var(--text-lg); }

.page-about .about-fig__label {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}

@media (min-width: 700px) {
  .page-about .about-figures {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .page-about .about-fig--a { grid-column: 1 / span 4; }
  .page-about .about-fig--b { grid-column: 5 / span 3; margin-top: var(--space-6); }
  .page-about .about-fig--c { grid-column: 8 / span 4; }
  .page-about .about-fig--d { grid-column: 2 / span 6; margin-top: var(--space-4); }
}

@media (min-width: 1040px) {
  .page-about .about-fig--d { grid-column: 3 / span 5; }
}

/* ---------- 发展阶段 ---------- */
.page-about .phases-head {
  max-width: var(--measure);
}

.page-about .phases-band {
  margin: 0 0 var(--space-6);
}

.page-about .phase-list {
  display: block;
}

.page-about .phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-6);
  border-top: var(--border-thick) solid var(--color-ink);
}

.page-about .phase:last-child {
  padding-bottom: 0;
}

.page-about .phase__rail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-about .phase__index {
  font-size: var(--text-base);
  color: var(--color-primary);
  letter-spacing: var(--tracking-heading);
}

.page-about .phase__years {
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  line-height: 1;
  text-decoration: none;
  border-bottom: var(--border-thick) solid var(--color-accent);
}

.page-about .phase__years:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 3px;
}

.page-about .phase__tag {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  border: var(--about-rule-soft);
  padding: 2px var(--space-1);
}

.page-about .phase__body h3 {
  margin: 0 0 var(--space-2);
}

.page-about .phase__body p + p {
  margin-top: var(--space-2);
}

@media (min-width: 820px) {
  .page-about .phase {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .page-about .phase__rail {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ---------- 能力与边界 ---------- */
.page-about .boundary-head {
  max-width: var(--measure);
}

.page-about .boundary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.page-about .boundary-grid__media figure {
  margin: 0;
}

.page-about .boundary {
  border: var(--about-rule);
  box-shadow: var(--shadow-2);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}

.page-about .boundary__head {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  border-bottom: var(--border-thick) solid var(--color-ink);
}

.page-about .boundary--yes .boundary__head {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-about .boundary--no .boundary__head {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-about .boundary__list {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  list-style: none;
}

.page-about .boundary--yes .boundary__list li {
  border-left: var(--border-thick) solid var(--color-primary);
}

.page-about .boundary--no .boundary__list li {
  border-left: var(--border-thick) solid var(--color-accent);
}

.page-about .boundary__list li {
  padding: var(--space-2) 0 var(--space-2) var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  border-bottom: var(--about-rule-soft);
}

.page-about .boundary__list li:last-child {
  border-bottom: 0;
}

.page-about .boundary__list strong {
  font-weight: var(--weight-heading);
}

.page-about .boundary__note {
  color: var(--color-ink-soft);
  margin: 0;
}

@media (min-width: 900px) {
  .page-about .boundary-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .page-about .boundary-grid__media {
    margin-top: var(--space-6);
  }
}

/* ---------- 运营原则 ---------- */
.page-about .principles-head {
  max-width: var(--measure);
}

.page-about .principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

.page-about .principle {
  min-width: 0;
}

.page-about .principle__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
}

.page-about .principle__num {
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: var(--tracking-heading);
  transition: color 120ms linear;
  flex: 0 0 auto;
}

.page-about .principle__label {
  flex: 1 1 auto;
  text-align: left;
}

.page-about .principle__head:hover .principle__num,
.page-about .principle__head:focus-visible .principle__num {
  color: var(--color-accent);
}

.page-about .principle .expander__body p {
  max-width: var(--measure);
}

@media (min-width: 760px) {
  .page-about .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* ---------- 结尾引导 ---------- */
.page-about .about-next__inner .kicker {
  color: var(--color-contrast-accent);
}

.page-about .about-next__kicker {
  color: var(--color-contrast-accent);
}

.page-about .about-next__inner h2 {
  margin: var(--space-1) 0 var(--space-3);
}

.page-about .about-next__inner p {
  color: var(--color-contrast-ink);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

@media (min-width: 700px) {
  .page-about .about-next__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
    column-gap: var(--space-6);
    align-items: end;
  }
  .page-about .about-next__kicker,
  .page-about .about-next__inner h2,
  .page-about .about-next__inner p {
    grid-column: 1;
  }
  .page-about .about-next__links {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
    justify-content: flex-end;
  }
}
</main>

.page-about {
  --about-rule: var(--border-thick) solid var(--color-ink);
  --about-rule-soft: var(--border-thin) solid var(--color-line);
}

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

/* 面包屑条 */
.page-about .about-crumbs {
  padding-top: var(--space-3);
  padding-bottom: var(--space-1);
}

/* 通用文本测量宽度 */
.page-about .section-head {
  max-width: var(--measure);
}

.page-about .stance-grid__text p,
.page-about .phase__body p,
.page-about .about-next__inner p {
  max-width: var(--measure);
}

/* ---------- 第一节：定位与主张 ---------- */
.page-about .stance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.page-about .stance-grid__text .title-1 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-about .stance-grid__text p + p {
  margin-top: var(--space-3);
}

.page-about .stance-grid__media .image-frame {
  margin: 0;
}

@media (min-width: 900px) {
  .page-about .stance-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .page-about .stance-grid__media {
    margin-top: var(--space-6);
  }
}

/* 错位数字块 */
.page-about .about-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.page-about .about-fig {
  border: var(--about-rule);
  box-shadow: var(--shadow-2);
  background: var(--color-surface);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-about .about-fig--a {
  background: var(--color-primary-soft);
}

.page-about .about-fig--b {
  background: var(--color-surface);
}

.page-about .about-fig--c {
  background: var(--color-surface-deep);
}

.page-about .about-fig--d {
  background: var(--color-highlight);
}

.page-about .about-fig__num {
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-heading);
}

.page-about .about-fig--b .about-fig__num,
.page-about .about-fig--c .about-fig__num {
  font-size: var(--text-xl);
}

.page-about .about-fig--d .about-fig__num {
  font-size: var(--text-lg);
}

.page-about .about-fig__label {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}

@media (min-width: 700px) {
  .page-about .about-figures {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .page-about .about-fig--a {
    grid-column: 1 / span 4;
  }
  .page-about .about-fig--b {
    grid-column: 5 / span 3;
    margin-top: var(--space-6);
  }
  .page-about .about-fig--c {
    grid-column: 8 / span 3;
  }
  .page-about .about-fig--d {
    grid-column: 2 / span 5;
    margin-top: var(--space-3);
  }
}

/* ---------- 第二节：发展阶段 ---------- */
.page-about .phases-head {
  margin-bottom: var(--space-4);
}

.page-about .phases-band {
  margin: 0 0 var(--space-6);
}

.page-about .phase-list {
  border-top: var(--border-thick) solid var(--color-ink);
}

.page-about .phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--border-thick) solid var(--color-ink);
}

.page-about .phase__rail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-about .phase__index {
  font-size: var(--text-base);
  color: var(--color-primary);
  border: var(--about-rule);
  background: var(--color-surface);
  padding: 2px var(--space-1);
  line-height: var(--leading-heading);
}

.page-about .phase__years {
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  text-decoration: none;
  border-bottom: var(--border-thick) solid var(--color-accent);
}

.page-about .phase__years:hover,
.page-about .phase__years:focus-visible {
  color: var(--color-accent);
  outline: none;
}

.page-about .phase__years:focus-visible {
  background: var(--color-highlight);
}

.page-about .phase__tag {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  border: var(--about-rule);
  padding: 2px var(--space-1);
  line-height: var(--leading-heading);
}

.page-about .phase__body h3 {
  margin-bottom: var(--space-2);
}

.page-about .phase__body p + p {
  margin-top: var(--space-2);
}

@media (min-width: 820px) {
  .page-about .phase {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .page-about .phase__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ---------- 第三节：能力边界 ---------- */
.page-about .boundary-head {
  margin-bottom: var(--space-4);
}

.page-about .boundary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.page-about .boundary-grid__media figure {
  margin: 0;
}

.page-about .boundary {
  border: var(--about-rule);
  box-shadow: var(--shadow-2);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}

.page-about .boundary__head {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  border-bottom: var(--border-thick) solid var(--color-ink);
}

.page-about .boundary--yes .boundary__head {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-about .boundary--no .boundary__head {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-about .boundary__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.page-about .boundary__list li {
  padding: var(--space-2) 0 var(--space-2) var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  border-bottom: var(--about-rule-soft);
}

.page-about .boundary__list li:last-child {
  border-bottom: 0;
}

.page-about .boundary--yes .boundary__list li {
  border-left: var(--border-thick) solid var(--color-primary);
}

.page-about .boundary--no .boundary__list li {
  border-left: var(--border-thick) solid var(--color-accent);
}

.page-about .boundary__list strong {
  color: var(--color-ink);
}

.page-about .boundary__note {
  color: var(--color-ink-soft);
  margin: 0;
}

@media (min-width: 900px) {
  .page-about .boundary-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .page-about .boundary-grid__media {
    margin-top: var(--space-4);
  }
}

/* ---------- 第四节：运营原则 ---------- */
.page-about .principles-head {
  margin-bottom: var(--space-4);
}

.page-about .principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

.page-about .principle {
  background: var(--color-surface);
}

.page-about .principle__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
}

.page-about .principle__num {
  font-size: var(--text-2xl);
  line-height: 1;
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  transition: color 120ms linear;
  flex: 0 0 auto;
}

.page-about .principle__label {
  flex: 1 1 auto;
}

.page-about .principle__head:hover .principle__num,
.page-about .principle__head:focus-visible .principle__num {
  color: var(--color-accent);
}

.page-about .principle__head:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

.page-about .principle .expander__body p {
  max-width: var(--measure);
}

@media (min-width: 760px) {
  .page-about .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 第五节：继续查阅 ---------- */
.page-about .about-next__kicker {
  color: var(--color-contrast-accent);
}

.page-about .about-next__inner h2 {
  color: var(--color-contrast-ink);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.page-about .about-next__inner p {
  color: var(--color-contrast-ink);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (min-width: 880px) {
  .page-about .about-next__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
    column-gap: var(--space-6);
    align-items: end;
  }
  .page-about .about-next__kicker,
  .page-about .about-next__inner h2,
  .page-about .about-next__inner p {
    grid-column: 1;
  }
  .page-about .about-next__inner p {
    margin-bottom: 0;
  }
  .page-about .about-next__links {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-content: flex-end;
    margin-top: 0;
  }
}

/* ---------- 窄屏兜底 ---------- */
@media (max-width: 420px) {
  .page-about .about-fig__num,
  .page-about .phase__years,
  .page-about .principle__num {
    font-size: var(--text-lg);
  }
  .page-about .about-next__links .btn {
    width: 100%;
    text-align: center;
  }
}

<main id="main-content" class="page-about">
  <div class="container about-crumbs">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">总台首页</a></li>
        <li class="breadcrumbs__item"><span class="breadcrumbs__current" aria-current="page">品牌概况</span></li>
      </ol>
    </nav>
  </div>

  <section class="section about-stance" aria-labelledby="stance-title">
    <div class="container">
      <div class="stance-grid">
        <div class="stance-grid__text">
          <p class="kicker">品牌概况 / PROFILE</p>
          <h1 class="title-1" id="stance-title">奇异果中心是谁，这份资料库为什么按年份与品类排列</h1>
          <p class="lead">奇异果中心是 kiwi-dream-qiyiguo.com.cn 的维护方。这个站点既不出售商品，也不做转化漏斗，它把品牌站自 2019 年以来的案例、产品线版本号与变更说明整理成一份可以按年份和品类交叉查阅的长期档案，供新老用户、内容研究者与合作方按需调阅。</p>
          <p>记录者是我们对自己的定位。页面上的每一条内容都对应一个可追溯的编号，编号写明品类型前缀、年份与序号；同一条目在不同页面出现时，字段与数字保持同一口径。需要回看某一年的某一类变更，可以从 <a class="link-underline" href="/reports/">阶段报告条目流</a> 进入；想知道条目从录入到发布之间经过哪些环节，可以看 <a class="link-underline" href="/team/">团队与分工</a>。</p>
          <p>站点由奇异果中心维护，31 人分在资料编排、内容校订、检索与前端、用户沟通四个职能组，每条内容都要过校订这一环才会进入档案。这套结构决定了我们说话的边界：只写有编号可查的事，不写无法回看的口径。</p>
        </div>
        <div class="stance-grid__media">
          <figure class="image-frame">
            <div class="image-frame__media">
              <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="奇异果切面与摊开的纸质资料册并置的静物特写">
            </div>
            <figcaption class="image-frame__caption">图 01 · 果肉切面与摊开的资料册，站点视觉与档案属性的对照</figcaption>
          </figure>
        </div>
      </div>

      <div class="about-figures" aria-label="站点规模概览">
        <div class="about-fig about-fig--a">
          <span class="about-fig__num num-mono">420</span>
          <span class="about-fig__label">条案例在库，覆盖 8 个一级品类</span>
        </div>
        <div class="about-fig about-fig--b">
          <span class="about-fig__num num-mono">156</span>
          <span class="about-fig__label">条版本变更记录，逐条标注产品线</span>
        </div>
        <div class="about-fig about-fig--c">
          <span class="about-fig__num num-mono">28</span>
          <span class="about-fig__label">个季度权益快照，自 2019 年第一季度起</span>
        </div>
        <div class="about-fig about-fig--d">
          <span class="about-fig__num num-mono">2019—2025</span>
          <span class="about-fig__label">七个年度区间，按季滚动追加</span>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--alt about-phases" aria-labelledby="phases-title">
    <div class="container">
      <div class="section-head phases-head">
        <p class="kicker">阶段编号 · 01 / 02 / 03</p>
        <h2 class="title-2" id="phases-title">三个阶段，把七年拆成可读的区间</h2>
        <p class="measure">七个年度可以压成三个区间来看：先把编号规则立住，再把品类与版本记录补齐，最后把会员权益按季度存成快照。左侧的年份区间是索引，右侧是叙述，点击年份可以直接落到对应段落。</p>
      </div>

      <figure class="image-frame phases-band">
        <div class="image-frame__media image-frame__media--wide">
          <img src="{zhanqunpic:h:380w:1240}" width="1240" height="380" alt="按年份顺序排列的色卡与标签条俯拍平铺" loading="lazy" decoding="async">
        </div>
        <figcaption class="image-frame__caption">图 02 · 年份色卡与标签条，用于三个区间的横向定位</figcaption>
      </figure>

      <div class="phase-list">
        <article class="phase" id="phase-a">
          <div class="phase__rail">
            <span class="phase__index num-mono">01</span>
            <a class="phase__years num-mono" href="#phase-a">2019—2021</a>
            <span class="phase__tag">立库</span>
          </div>
          <div class="phase__body">
            <h3 class="title-3">把编号规则先立住</h3>
            <p>站点从零开始收录品牌站案例，第一件定下来的事是编号规则：品类型前缀＋年份＋序号，编号在全站范围内唯一，不重复使用。这一步决定了后面所有条目的可追溯性——看到一个编号，就能反推它属于哪一年、哪一类、在同批次里排第几。</p>
            <p>同期建立的是年份与品类两条索引。两条索引可以叠加使用，也可以单独走时间轴；使用者不必先知道具体编号，从年份或从品类切入都能落到同一条目上。这一区间的工作量集中在规则与字段，而不在数量。</p>
          </div>
        </article>

        <article class="phase" id="phase-b">
          <div class="phase__rail">
            <span class="phase__index num-mono">02</span>
            <a class="phase__years num-mono" href="#phase-b">2022—2023</a>
            <span class="phase__tag">扩充</span>
          </div>
          <div class="phase__body">
            <h3 class="title-3">补齐品类与版本变更</h3>
            <p>一级品类在这一区间扩到 8 个，案例条目累积到 420 条；版本变更记录单独成列，累计 156 条，每条都标注所属产品线、年份区间与变更说明。品类标签与年份轴在这个阶段被正式拉通，交叉检索从此成为主要走法。</p>
            <p>为了让长表格不至于读不下去，条目流在表格之间插入了短句导语与季度色带。这一做法沿用至今：连续三段以上纯文字的排布在站内是不被允许的，段落之间必须有底色或色带作为呼吸点。</p>
          </div>
        </article>

        <article class="phase" id="phase-c">
          <div class="phase__rail">
            <span class="phase__index num-mono">03</span>
            <a class="phase__years num-mono" href="#phase-c">2024—2025</a>
            <span class="phase__tag">按季归档</span>
          </div>
          <div class="phase__body">
            <h3 class="title-3">会员权益转为季度快照</h3>
            <p>会员权益从按年记录改为按季归档，自 2019 年第一季度起共保留 28 个季度快照，当季快照随季度更新。订阅差异也不再散落在说明文字里，而是收进一张 12 条对照项的表格，分订阅类别差异、获取与调阅通道、安装与准备条件三组呈现。</p>
            <p>资料库最近一次补充在 2025 年 3 月，此后的追加以季度为批次，批次信息写在条目编号里。历史版本仍然保留原编号，不因新批次发布而重新编号。</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section about-boundary" aria-labelledby="boundary-title">
    <div class="container">
      <div class="section-head boundary-head">
        <p class="kicker">能力 / 边界</p>
        <h2 class="title-2" id="boundary-title">这套资料库能给你什么，不给你什么</h2>
        <p class="measure">把边界写在明处，比事后解释省事。下面两栏对照着看：左边能拿到的，右边一概没有。</p>
      </div>

      <div class="boundary-grid">
        <div class="boundary-grid__media">
          <figure class="image-frame">
            <div class="image-frame__media">
              <img src="{zhanqunpic:h:540w:720}" width="720" height="540" alt="自然光下的资料盒与目录抽屉特写，画面中无人物" loading="lazy" decoding="async">
            </div>
            <figcaption class="image-frame__caption">图 03 · 目录抽屉与资料盒，检索动作发生的地方</figcaption>
          </figure>
        </div>

        <div class="boundary-grid__panels">
          <div class="boundary boundary--yes">
            <h3 class="boundary__head">可以拿到</h3>
            <ul class="boundary__list">
              <li><strong>条目检索。</strong>420 条案例与 156 条版本变更记录都带年份与品类字段，两条线索可叠加使用，也可只取其一。</li>
              <li><strong>时间轴浏览。</strong>按年度或季度顺序回看，适合梳理某条产品线在连续区间里的变化轨迹。</li>
              <li><strong>订阅差异对照。</strong>12 条对照项分三组呈现，入口在 <a class="link-underline" href="/get-app/">订阅与获取对照</a>。</li>
              <li><strong>季度权益快照。</strong>自 2019 年第一季度起保留 28 个快照，当季快照随季度更新，历史快照留存不覆盖。</li>
              <li><strong>协议文本调阅。</strong>奇异果注册条目另附协议文本，通过邮件索取，标题注明“资料调阅”，具体写法见 <a class="link-underline" href="/connect/">联系通道</a>。</li>
            </ul>
          </div>

          <div class="boundary boundary--no">
            <h3 class="boundary__head">不在范围内</h3>
            <ul class="boundary__list">
              <li><strong>下载文件。</strong>站内没有安装包、附件或压缩文件，页面上也不设下载入口。</li>
              <li><strong>表单收集。</strong>需要联系或索取资料，只能走邮箱、电话与信件三条路，站内不提交任何内容。</li>
              <li><strong>交易与招募。</strong>不出售商品，不发布岗位，不设置任何形式的报名或登记。</li>
              <li><strong>客服范围之外的咨询。</strong>客服渠道只回应资料调阅与站点内容问题，其他方向不在回复范围内。</li>
              <li><strong>第三方口径。</strong>条目只记录站点自身的产品线与权益变更，不代表任何机构、品牌或媒体的立场。</li>
            </ul>
          </div>

          <p class="boundary__note text-sm">邮件往来中的信息如何处理、留存多久、可以要求做什么，统一写在 <a class="link-underline" href="/privacy/">隐私政策</a> 里。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--deep about-principles" aria-labelledby="principles-title">
    <div class="container">
      <div class="section-head principles-head">
        <p class="kicker">运营原则 · 四条</p>
        <h2 class="title-2" id="principles-title">一直没变过的四条做法</h2>
        <p class="measure">这四条不写在别处，只写在这里。展开每一条，可以看它在条目流里具体落在哪个位置。</p>
      </div>

      <div class="principle-grid">
        <div class="expander principle" data-expander>
          <button class="expander__head principle__head" type="button" data-expander-head>
            <span class="principle__num num-mono">01</span>
            <span class="principle__label title-4">可追溯</span>
            <span class="expander__sign" aria-hidden="true">＋</span>
          </button>
          <div class="expander__panel">
            <div class="expander__inner">
              <div class="expander__body">
                <p>每条条目都带年份与品类两个字段，在条目流里以等宽小字贴在卡片左上角。看到条目就能定位它属于哪个年度区间、落在哪个一级品类下，不需要借助外部说明。</p>
              </div>
            </div>
          </div>
        </div>

        <div class="expander principle" data-expander>
          <button class="expander__head principle__head" type="button" data-expander-head>
            <span class="principle__num num-mono">02</span>
            <span class="principle__label title-4">编号唯一</span>
            <span class="expander__sign" aria-hidden="true">＋</span>
          </button>
          <div class="expander__panel">
            <div class="expander__inner">
              <div class="expander__body">
                <p>品类型前缀＋年份＋序号组成一个编号，编号在全站范围内唯一且不复用。条目被修订时沿用原编号，只在变更说明里追加一条记录，因此同一个编号不会指向两段不同内容。</p>
              </div>
            </div>
          </div>
        </div>

        <div class="expander principle" data-expander>
          <button class="expander__head principle__head" type="button" data-expander-head>
            <span class="principle__num num-mono">03</span>
            <span class="principle__label title-4">口径一致</span>
            <span class="expander__sign" aria-hidden="true">＋</span>
          </button>
          <div class="expander__panel">
            <div class="expander__inner">
              <div class="expander__body">
                <p>案例总数、版本变更条数、季度快照数量与订阅对照项数在条目流、对照页与概况页之间取同一组值。任意一处调整口径，其余页面同步更新；不出现同一指标在两页给出两个数字的情况。</p>
              </div>
            </div>
          </div>
        </div>

        <div class="expander principle" data-expander>
          <button class="expander__head principle__head" type="button" data-expander-head>
            <span class="principle__num num-mono">04</span>
            <span class="principle__label title-4">按季补充</span>
            <span class="expander__sign" aria-hidden="true">＋</span>
          </button>
          <div class="expander__panel">
            <div class="expander__inner">
              <div class="expander__body">
                <p>追加以季度为批次，批次标识写在新增条目的编号里，便于区分本轮补充与历史记录。资料库最近一次补充在 2025 年 3 月，本轮之后的条目会在下一批次出现，旧编号保持不动。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--contrast about-next" aria-labelledby="next-title">
    <div class="container about-next__inner">
      <p class="kicker about-next__kicker">继续查阅</p>
      <h2 class="title-3" id="next-title">从这里往下走</h2>
      <p>要按时间或按分类翻条目，去阶段报告条目流；要比对新老用户在订阅上的差异，去订阅与获取对照；要索取协议文本或某一年的历史版本，走联系通道，并在邮件标题里注明用途。</p>
      <div class="about-next__links">
        <a class="btn btn--primary" href="/reports/">翻条目流</a>
        <a class="btn btn--ghost" href="/get-app/">看订阅对照</a>
        <a class="btn btn--accent" href="/connect/">写调阅邮件</a>
      </div>
    </div>
  </section>
</main>