.page-news {
  --pn-hair: var(--navy-700);
  --pn-glow: 0 0 0 1px rgba(0, 229, 255, .28), 0 18px 48px -24px rgba(0, 229, 255, .5);
  background-color: var(--navy-950);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- 封面 ---------- */
.page-news .pn-cover {
  position: relative;
  overflow: hidden;
  border-bottom: var(--edge);
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2.25rem, 5vw, 3.75rem);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 229, 255, .18) 0%, rgba(0, 229, 255, 0) 56%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 176, 32, .12) 0%, rgba(255, 176, 32, 0) 62%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
}

.page-news .pn-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(121, 242, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 242, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 76%);
}

.page-news .pn-cover .breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.page-news .pn-cover-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.page-news .pn-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--cyan-300);
}

.page-news .pn-kicker-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: .15rem .35rem;
  border: 1px solid rgba(255, 176, 32, .55);
  border-radius: 2px;
  color: var(--amber-300);
  font-weight: 700;
}

.page-news .pn-title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 9vw, 4.4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--paper);
}

.page-news .pn-lede {
  max-width: 46ch;
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--steel);
}

.page-news .pn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  color: var(--paper);
}

.page-news .pn-meta-key {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--steel);
}

.page-news .pn-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.page-news .pn-cover-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--pn-hair);
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: var(--pn-glow);
}

.page-news .pn-cover-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .pn-cover-media .media-caption,
.page-news .pn-vmedia .media-caption,
.page-news .pn-storymedia .media-caption {
  padding: .75rem .9rem .9rem;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--steel);
}

/* ---------- 分类索引 ---------- */
.page-news .pn-index {
  padding-block: clamp(1.25rem, 3vw, 2rem);
  background: var(--navy-900);
  border-bottom: var(--edge);
}

.page-news .pn-index-title {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-news .pn-chips {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}

.page-news .pn-chip {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem .9rem;
  border: 1px solid var(--pn-hair);
  border-radius: var(--radius);
  background: var(--navy-800);
  color: var(--paper);
  text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.page-news .pn-chip:hover,
.page-news .pn-chip:focus-visible {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .3);
  transform: translateY(-1px);
}

.page-news .pn-chip:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 3px;
}

.page-news .pn-chip-num {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--amber-500);
}

.page-news .pn-chip-label {
  font-weight: 700;
  font-size: .95rem;
}

.page-news .pn-chip-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--steel);
  white-space: nowrap;
}

/* ---------- 章节通用头 ---------- */
.page-news .pn-timeline-wrap,
.page-news .pn-versions-sec,
.page-news .pn-stories-sec {
  padding-block: clamp(2.25rem, 5vw, 4rem);
  background: var(--navy-950);
}

.page-news .pn-versions-sec {
  background: var(--navy-900);
  border-block: var(--edge);
}

.page-news .pn-sec-num {
  margin: 0 0 .55rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--amber-500);
}

.page-news .pn-sec-head h2,
.page-news .pn-recall h2 {
  margin: 0 0 .7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--paper);
}

.page-news .pn-sec-lede {
  max-width: 58ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: .98rem;
  line-height: 1.8;
  color: var(--steel);
}

/* ---------- 时间线 ---------- */
.page-news .pn-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--pn-hair);
}

.page-news .pn-entry {
  display: grid;
  gap: .4rem;
  padding-block: 1rem;
  border-top: 1px solid var(--pn-hair);
}

.page-news .pn-when {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--amber-300);
  white-space: nowrap;
}

.page-news .pn-entry-body {
  min-width: 0;
}

.page-news .pn-entry-body > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .7rem;
  padding: .1rem 0;
  list-style: none;
  cursor: pointer;
  border-radius: 2px;
}

.page-news .pn-entry-body > summary::-webkit-details-marker {
  display: none;
}

.page-news .pn-entry-body > summary:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 4px;
}

.page-news .pn-cat {
  padding: .12rem .45rem;
  border: 1px solid var(--pn-hair);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--steel);
  white-space: nowrap;
}

.page-news .pn-cat[data-cat="feedback"] {
  color: var(--cyan-300);
  border-color: rgba(0, 229, 255, .42);
}

.page-news .pn-cat[data-cat="version"] {
  color: var(--amber-300);
  border-color: rgba(255, 211, 122, .42);
}

.page-news .pn-cat[data-cat="entry"] {
  color: var(--green);
  border-color: rgba(46, 230, 168, .42);
}

.page-news .pn-cat[data-cat="story"] {
  color: var(--paper);
  border-color: var(--haze);
}

.page-news .pn-entry-title {
  flex: 1 1 12rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper);
  transition: color .2s var(--ease);
}

.page-news .pn-entry-body > summary:hover .pn-entry-title {
  color: var(--cyan-300);
}

.page-news .pn-entry-body > summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--cyan-500);
}

.page-news .pn-entry-body[open] > summary::after {
  content: "－";
}

.page-news .pn-entry-detail {
  padding: .75rem 0 .25rem;
  max-width: 62ch;
}

.page-news .pn-entry-detail p {
  margin: 0 0 .7rem;
  font-size: .94rem;
  line-height: 1.85;
  color: var(--steel);
}

.page-news .pn-jump {
  display: inline-block;
  font-size: .85rem;
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(121, 242, 255, .45);
  padding-bottom: 1px;
}

.page-news .pn-jump:hover {
  color: var(--cyan-500);
  border-bottom-color: var(--cyan-500);
}

.page-news .pn-jump:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 3px;
}

/* ---------- 纸层区 ---------- */
.page-news .pn-paper {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4rem);
  background:
    repeating-linear-gradient(0deg, rgba(27, 69, 102, .045) 0 1px, transparent 1px 4px),
    var(--paper);
  color: var(--navy-900);
  border-block: 2px solid var(--haze);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.page-news .pn-sec-head--paper h2 {
  color: var(--navy-900);
}

.page-news .pn-sec-head--paper .pn-sec-num {
  color: var(--navy-700);
}

.page-news .pn-sec-head--paper .pn-sec-lede {
  color: var(--navy-800);
}

/* ---------- 四维反馈 ---------- */
.page-news .pn-dims {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-news .pn-dim {
  padding: 1.1rem 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--haze);
  border-top: 3px solid var(--navy-700);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(215, 230, 242, .75);
}

.page-news .pn-dim-num {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--navy-700);
}

.page-news .pn-dim-name {
  margin: 0 0 .3rem;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navy-900);
}

.page-news .pn-dim-result {
  margin: 0 0 .65rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--navy-800);
  letter-spacing: .04em;
}

.page-news .pn-dim-text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--navy-800);
}

.page-news .pn-meter {
  margin-top: .95rem;
  height: 6px;
  border-radius: 99px;
  background: var(--haze);
  overflow: hidden;
}

.page-news .pn-meter > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--navy-700), var(--cyan-500));
}

.page-news .pn-dim:nth-child(1) .pn-meter > span { width: 88%; }
.page-news .pn-dim:nth-child(2) .pn-meter > span { width: 76%; }
.page-news .pn-dim:nth-child(3) .pn-meter > span { width: 92%; }
.page-news .pn-dim:nth-child(4) .pn-meter > span { width: 84%; }

/* ---------- 版本演进 ---------- */
.page-news .pn-versions {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .pn-vmedia {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--pn-hair);
  border-radius: var(--radius);
  background: var(--navy-800);
}

.page-news .pn-vmedia img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .pn-vlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-vitem {
  position: relative;
  padding: 0 0 1.6rem 3.1rem;
}

.page-news .pn-vitem:last-child {
  padding-bottom: 0;
}

.page-news .pn-vitem::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 1.7rem;
  bottom: .2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--navy-700), transparent);
}

.page-news .pn-vitem:last-child::before {
  display: none;
}

.page-news .pn-vnode {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: .16rem .3rem;
  border-radius: 2px;
  background: var(--amber-500);
  color: var(--navy-950);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}

.page-news .pn-vwhen {
  margin: 0 0 .25rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--steel);
}

.page-news .pn-vitem h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--paper);
}

.page-news .pn-vitem p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--steel);
}

/* ---------- 入口覆盖 ---------- */
.page-news .pn-covmedia {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  border: 2px solid var(--haze);
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: 4px 4px 0 rgba(215, 230, 242, .8);
}

.page-news .pn-covmedia img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .pn-covmedia .media-caption {
  padding: .6rem .85rem .75rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--navy-800);
  background: #fff;
}

.page-news .pn-coverage {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-news .pn-cov-item {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--haze);
  border-radius: var(--radius);
}

.page-news .pn-cov-item h3 {
  margin: 0 0 .45rem;
  padding-left: .9rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy-900);
}

.page-news .pn-cov-item h3::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.6rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-500);
  transform: translateX(-2px);
}

.page-news .pn-cov-item p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--navy-800);
}

/* ---------- 服务故事 ---------- */
.page-news .pn-storymedia {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  border: 1px solid var(--pn-hair);
  border-radius: var(--radius);
  background: var(--navy-900);
}

.page-news .pn-storymedia img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .pn-stories {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-news .pn-story {
  position: relative;
  padding: 1.2rem 1.2rem 1.3rem;
  background: var(--navy-900);
  border: 1px solid var(--pn-hair);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-news .pn-story::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-500), rgba(0, 229, 255, 0));
}

.page-news .pn-story-tag {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--amber-300);
}

.page-news .pn-story h3 {
  margin: 0 0 .55rem;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--paper);
}

.page-news .pn-story p {
  margin: 0 0 .9rem;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--steel);
}

/* ---------- 回看与咨询 ---------- */
.page-news .pn-sec-num--paper {
  color: var(--navy-700);
}

.page-news .pn-recall {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.page-news .pn-recall h2 {
  color: var(--navy-900);
}

.page-news .pn-recall-text {
  margin: 0 0 1.25rem;
  max-width: 54ch;
  font-size: .95rem;
  line-height: 1.85;
  color: var(--navy-800);
}

.page-news .pn-recall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.page-news .pn-recall-links {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-recall-links a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem 1rem;
  border: 1px solid var(--haze);
  border-left: 3px solid var(--navy-700);
  border-radius: var(--radius);
  background: #fff;
  color: var(--navy-900);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: border-left-color .2s var(--ease), transform .2s var(--ease);
}

.page-news .pn-recall-links a:hover,
.page-news .pn-recall-links a:focus-visible {
  border-left-color: var(--cyan-500);
  transform: translateX(2px);
}

.page-news .pn-recall-links a:focus-visible {
  outline: 2px solid var(--navy-700);
  outline-offset: 3px;
}

.page-news .pn-recall-links span {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--navy-700);
}

/* ---------- 响应式 ---------- */
@media (min-width: 560px) {
  .page-news .pn-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .pn-recall-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .page-news .pn-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .pn-entry {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .4rem 1.5rem;
    padding-block: 1.15rem;
  }

  .page-news .pn-when {
    padding-top: .18rem;
  }
}

@media (min-width: 900px) {
  .page-news .pn-cover-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .page-news .pn-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-news .pn-chip {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
  }

  .page-news .pn-chip-note {
    margin-left: 0;
  }

  .page-news .pn-versions {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .page-news .pn-versions .pn-vmedia {
    position: sticky;
    top: calc(var(--bar-h) + 1.25rem);
  }

  .page-news .pn-stories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .pn-recall {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: center;
  }
}

@media (min-width: 1180px) {
  .page-news .pn-dims {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .pn-chip,
  .page-news .pn-entry-title,
  .page-news .pn-recall-links a {
    transition: none;
  }

  .page-news .pn-chip:hover,
  .page-news .pn-recall-links a:hover {
    transform: none;
  }
}

<main id="main-content" class="page-news">
  <section class="pn-cover">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb-list">
          <li><a href="/">首页</a></li>
          <li aria-current="page">动态与故事</li>
        </ol>
      </nav>
      <div class="pn-cover-grid">
        <div class="pn-cover-copy" data-reveal>
          <p class="pn-kicker"><span class="pn-kicker-num">03</span>周期第3周 · 评价反馈</p>
          <h1 class="pn-title">动态与故事</h1>
          <p class="pn-lede">换机后第一次打开、旧收藏突然失效、版本更新后不确定步骤有没有变——这些是咨询里最常出现的问题。新2投注指南把每期的操作反馈和版本变化整理在这里，方便您回看自己遇到的情况。</p>
          <ul class="pn-meta">
            <li><span class="pn-meta-key">更新节奏</span>每4周第3周</li>
            <li><span class="pn-meta-key">观察维度</span>入口可达性 · 步骤清晰度</li>
            <li><span class="pn-meta-key">覆盖</span>31个省级区域</li>
          </ul>
          <div class="pn-cover-actions">
            <a class="cta cta-primary" href="#feedback">读本期反馈摘要</a>
            <a class="cta cta-ghost" href="#timeline">浏览近期动态</a>
          </div>
        </div>
        <figure class="media media--panel pn-cover-media" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="暗色控制台风格的反馈仪表盘，四个维度的指针与第3周标签">
          <figcaption class="media-caption">第3周评价反馈的四维观察总览</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pn-index" aria-labelledby="pn-index-title">
    <div class="wrap">
      <h2 class="pn-index-title" id="pn-index-title">按主题翻</h2>
      <div class="pn-chips">
        <a class="pn-chip" href="#feedback">
          <span class="pn-chip-num">01</span>
          <span class="pn-chip-label">评价反馈</span>
          <span class="pn-chip-note">第3周发布</span>
        </a>
        <a class="pn-chip" href="#versions">
          <span class="pn-chip-num">02</span>
          <span class="pn-chip-label">版本说明</span>
          <span class="pn-chip-note">V28 至 V32</span>
        </a>
        <a class="pn-chip" href="#coverage">
          <span class="pn-chip-num">03</span>
          <span class="pn-chip-label">入口观察</span>
          <span class="pn-chip-note">12类场景</span>
        </a>
        <a class="pn-chip" href="#stories">
          <span class="pn-chip-num">04</span>
          <span class="pn-chip-label">服务故事</span>
          <span class="pn-chip-note">匿名场景</span>
        </a>
      </div>
    </div>
  </section>

  <section class="pn-timeline-wrap" id="timeline" data-section aria-labelledby="pn-timeline-title">
    <div class="wrap">
      <header class="pn-sec-head" data-reveal>
        <p class="pn-sec-num">近期动态</p>
        <h2 id="pn-timeline-title">最近发生了什么</h2>
        <p class="pn-sec-lede">按时间倒序排列。每条都写清楚当时的观察和接下来的动作，您可以挑与自己情况接近的展开看。</p>
      </header>
      <ol class="pn-timeline">
        <li class="pn-entry" data-reveal>
          <span class="pn-when">第3周</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="feedback">评价反馈</span>
              <span class="pn-entry-title">换机后重新登录，清单核对这一步最容易被跳过</span>
            </summary>
            <div class="pn-entry-detail">
              <p>本周期收到的反馈里，超过一半的卡点出现在“还没核对服务清单就先去登录”。清单里包含账号访问、设备迁移、入口核对等 18 个细项，跳过其中任意一项都可能在后面被拦住。下一版本会在手机版入口处加一行醒目提示，把核对清单放在第一步。</p>
              <a class="pn-jump" href="#feedback">看四维反馈摘要</a>
            </div>
          </details>
        </li>
        <li class="pn-entry" data-reveal>
          <span class="pn-when">第3周</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="entry">入口观察</span>
              <span class="pn-entry-title">旧收藏地址在换机后失效的比例明显升高</span>
            </summary>
            <div class="pn-entry-detail">
              <p>从旧设备迁移过来的浏览器收藏，指向的入口地址有一部分已经过期。建议您在换机后先到下载中心取一次最新的入口信息，不要直接点旧的收藏链接。桌面端和手机端目前都可以查询覆盖范围。</p>
              <a class="pn-jump" href="/download/">去下载中心</a>
            </div>
          </details>
        </li>
        <li class="pn-entry" data-reveal>
          <span class="pn-when">上月</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="version">版本说明</span>
              <span class="pn-entry-title">V32 手机版流程压缩，换机重登从六步减到三步</span>
            </summary>
            <div class="pn-entry-detail">
              <p>V32 把原来分散在三个页面的核对、查询、登录合成一条连续路径。对换设备后第一次进入的用户来说，最直接的感受是少翻了两次页、少填了一次重复信息。</p>
              <a class="pn-jump" href="#versions">看版本演进</a>
            </div>
          </details>
        </li>
        <li class="pn-entry" data-reveal>
          <span class="pn-when">上月</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="story">服务故事</span>
              <span class="pn-entry-title">从旧手机换到新机，她只用了三步就重新进入</span>
            </summary>
            <div class="pn-entry-detail">
              <p>这位长期使用者在换机后先核对了服务清单，再用 Z4G 面板确认了所在省份的入口状态，最后按手机版提示完成登录。她提到最省心的是清单里写清楚了每一步该看什么，不用反复试。</p>
              <a class="pn-jump" href="/questions/">查看常见问题</a>
            </div>
          </details>
        </li>
        <li class="pn-entry" data-reveal>
          <span class="pn-when">本季度</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="entry">入口观察</span>
              <span class="pn-entry-title">12类入口场景里，首次访问者的停留时间最长</span>
            </summary>
            <div class="pn-entry-detail">
              <p>第一次找入口的用户平均会在首页多停留一段时间，原因多是不确定该点哪个按钮。已有内容把首次访问的场景单独拆出来，放在问答中心第一条，按序号一步步引导。</p>
              <a class="pn-jump" href="/questions/">去问答中心</a>
            </div>
          </details>
        </li>
        <li class="pn-entry" data-reveal>
          <span class="pn-when">本季度</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="feedback">评价反馈</span>
              <span class="pn-entry-title">面板响应速度改善，售后处理仍然是最受关注的一项</span>
            </summary>
            <div class="pn-entry-detail">
              <p>四个维度中，面板响应的满意度较上周期有所提升，主要来自查询结果的返回速度。售后处理依然排在关注度首位，工作日 9:00–18:00 的在线咨询响应最稳定，非工作时间的留言会在下一个工作日处理。</p>
              <a class="pn-jump" href="/inquiry/">咨询通道</a>
            </div>
          </details>
        </li>
        <li class="pn-entry" data-reveal>
          <span class="pn-when">上月</span>
          <details class="pn-entry-body">
            <summary>
              <span class="pn-cat" data-cat="story">服务故事</span>
              <span class="pn-entry-title">第一次使用的人，花了十分钟找到正确入口</span>
            </summary>
            <div class="pn-entry-detail">
              <p>这位首次访问的用户一开始在搜索引擎里反复试，后来从问答中心的场景分类里找到了对应的入口说明。他说最有帮助的是看到“第一次找入口”这件事本身有覆盖范围说明，不用自己猜。</p>
              <a class="pn-jump" href="#stories">看更多场景</a>
            </div>
          </details>
        </li>
      </ol>
    </div>
  </section>

  <section class="pn-paper pn-feedback-sec" id="feedback" data-section aria-labelledby="pn-feedback-title">
    <div class="wrap">
      <header class="pn-sec-head pn-sec-head--paper" data-reveal>
        <p class="pn-sec-num">本期反馈</p>
        <h2 id="pn-feedback-title">四个维度，看懂这一期的变化</h2>
        <p class="pn-sec-lede">我们按入口可达性、步骤清晰度、面板响应、售后处理四个维度汇总本周期收到的意见，每一项都对应一条具体的改进动作。</p>
      </header>
      <div class="pn-dims">
        <article class="pn-dim" data-reveal>
          <span class="pn-dim-num">01</span>
          <h3 class="pn-dim-name">入口可达性</h3>
          <p class="pn-dim-result">92% 的用户能顺利找到入口</p>
          <p class="pn-dim-text">换机后直接搜索的用户里，多数能在两次尝试内进入正确页面。剩下的卡点集中在旧地址失效，下一步会在入口提示里加一句旧收藏的提醒。</p>
          <div class="pn-meter" role="img" aria-label="入口可达性评分"><span></span></div>
        </article>
        <article class="pn-dim" data-reveal>
          <span class="pn-dim-num">02</span>
          <h3 class="pn-dim-name">步骤清晰度</h3>
          <p class="pn-dim-result">按序号操作后，完成率提升</p>
          <p class="pn-dim-text">清单核对这一步被跳过的比例仍然偏高。下一版会在每个步骤前加上编号和一句话说明，让第一次用的人也能判断自己走到了哪一步。</p>
          <div class="pn-meter" role="img" aria-label="步骤清晰度评分"><span></span></div>
        </article>
        <article class="pn-dim" data-reveal>
          <span class="pn-dim-num">03</span>
          <h3 class="pn-dim-name">面板响应</h3>
          <p class="pn-dim-result">查询反馈速度较上期改善</p>
          <p class="pn-dim-text">Z4G 面板的入口覆盖查询在多数设备上都能快速返回结果。少数旧机型上出现的延迟，已经记录并在排查中。</p>
          <div class="pn-meter" role="img" aria-label="面板响应评分"><span></span></div>
        </article>
        <article class="pn-dim" data-reveal>
          <span class="pn-dim-num">04</span>
          <h3 class="pn-dim-name">售后处理</h3>
          <p class="pn-dim-result">工作日咨询响应稳定</p>
          <p class="pn-dim-text">工作时间的在线咨询基本能在当天得到回复，非工作时间的留言会在下一个工作日跟进。反馈进入处理流程后，会有明确的下一步，不用再反复追问。</p>
          <div class="pn-meter" role="img" aria-label="售后处理评分"><span></span></div>
        </article>
      </div>
    </div>
  </section>

  <section class="pn-versions-sec" id="versions" data-section aria-labelledby="pn-versions-title">
    <div class="wrap">
      <header class="pn-sec-head" data-reveal>
        <p class="pn-sec-num">版本说明</p>
        <h2 id="pn-versions-title">从 V28 到 V32，每一步都在为换设备的您着想</h2>
        <p class="pn-sec-lede">版本号看起来只是数字，但对换机的人来说，每一次版本迭代都对应着少走一步、少等一次。</p>
      </header>
      <div class="pn-versions">
        <figure class="media media--wide pn-vmedia" data-reveal>
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="V28、V30、V32 三个版本标签沿时间轴排列的抽象示意图" loading="lazy" decoding="async">
          <figcaption class="media-caption">V28 到 V32 的关键更新节点</figcaption>
        </figure>
        <ol class="pn-vlist">
          <li class="pn-vitem" data-reveal>
            <span class="pn-vnode">V28</span>
            <p class="pn-vwhen">2021年</p>
            <h3>第一版服务中心清单上线</h3>
            <p>把账号访问、设备迁移、入口核对等 18 个细项归到同一张清单里，让换机的人第一次有了可以照着走的顺序。</p>
          </li>
          <li class="pn-vitem" data-reveal>
            <span class="pn-vnode">V30</span>
            <p class="pn-vwhen">2023年</p>
            <h3>Z4G 面板推出</h3>
            <p>入口覆盖范围查询从“问客服”变成“自己查”。桌面端和手机端都能通过面板确认当前所在区域的入口状态。</p>
          </li>
          <li class="pn-vitem" data-reveal>
            <span class="pn-vnode">V32</span>
            <p class="pn-vwhen">2025年</p>
            <h3>新版认证页面升级完成</h3>
            <p>服务中心手机版把核对、查询、登录三个环节合成一条连续路径，换机后的重新登录流程压缩为三步。服务清单查看、入口覆盖查询、反馈提交指引和常见问题检索都整合在同一入口里。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="pn-paper pn-coverage-sec" id="coverage" data-section aria-labelledby="pn-coverage-title">
    <div class="wrap">
      <header class="pn-sec-head pn-sec-head--paper" data-reveal>
        <p class="pn-sec-num">入口观察</p>
        <h2 id="pn-coverage-title">不同设备、不同地区，入口情况怎么看</h2>
        <p class="pn-sec-lede">入口覆盖范围不是一成不变的。下面这张网格帮您快速判断：手边的设备能不能直接用，还是要先做一步核对。</p>
      </header>
      <figure class="media media--wide pn-covmedia" data-reveal>
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="不同设备类型与区域场景的抽象覆盖网格图" loading="lazy" decoding="async">
        <figcaption class="media-caption">设备类型与区域场景的抽象填充示意</figcaption>
      </figure>
      <div class="pn-coverage">
        <article class="pn-cov-item" data-reveal>
          <h3>安卓手机换机</h3>
          <p>从旧安卓机换到新安卓机，建议先在新机上打开一次下载中心，重新获取入口信息，不要直接点旧收藏。</p>
        </article>
        <article class="pn-cov-item" data-reveal>
          <h3>苹果手机换机</h3>
          <p>迁移过来的收藏可能保留旧路径。换机后先到手机版确认当前入口状态，再按序号操作，能减少反复尝试。</p>
        </article>
        <article class="pn-cov-item" data-reveal>
          <h3>桌面端与平板</h3>
          <p>大屏上可以直接用 Z4G 面板查覆盖范围，查询结果支持逐项查看，适合需要同时核对多个细项的情况。</p>
        </article>
        <article class="pn-cov-item" data-reveal>
          <h3>跨省使用场景</h3>
          <p>31 个省级区域已覆盖。跨省使用时入口状态可能有所不同，出发前用面板查一次所在省份，会更稳妥。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="pn-stories-sec" id="stories" data-section aria-labelledby="pn-stories-title">
    <div class="wrap">
      <header class="pn-sec-head" data-reveal>
        <p class="pn-sec-num">服务故事</p>
        <h2 id="pn-stories-title">他们遇到的情况，也许和您一样</h2>
        <p class="pn-sec-lede">下面这些场景来自实际咨询和反馈，细节已做匿名处理，没有真实姓名和证言。</p>
      </header>
      <figure class="media media--wide pn-storymedia" data-reveal>
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="换机、首次访问、长期使用三个匿名场景的抽象卡片组合" loading="lazy" decoding="async">
        <figcaption class="media-caption">三类常见场景的抽象示意</figcaption>
      </figure>
      <div class="pn-stories">
        <article class="pn-story" data-reveal>
          <p class="pn-story-tag">换机场景</p>
          <h3>旧手机的收藏没跟过来</h3>
          <p>换机后第一件事不是急着登录，而是先核对清单里设备迁移那一项。确认后再从新设备进入手机版，按序号走完即可。这位用户说，提前看一眼清单省了她半小时。</p>
          <a class="pn-jump" href="/questions/">遇到换机问题</a>
        </article>
        <article class="pn-story" data-reveal>
          <p class="pn-story-tag">首次访问</p>
          <h3>第一次来，不知道从哪里点</h3>
          <p>第一次找入口的用户最需要的是明确的起点。问答中心把首次访问的场景单独排在前面，先看覆盖范围说明，再按提示走，比反复试错省时间。</p>
          <a class="pn-jump" href="/questions/">查看首次访问指引</a>
        </article>
        <article class="pn-story" data-reveal>
          <p class="pn-story-tag">长期使用</p>
          <h3>用久了，更关心版本有没有变</h3>
          <p>长期使用的用户会定期回来看版本变化和评价反馈，确认入口状态有没有调整。每 4 周第 3 周的反馈更新，就是这个节奏。</p>
          <a class="pn-jump" href="/about-us/">了解服务历程</a>
        </article>
      </div>
    </div>
  </section>

  <section class="pn-paper pn-recall-sec" aria-labelledby="pn-recall-title">
    <div class="wrap">
      <div class="pn-recall">
        <div data-reveal>
          <p class="pn-sec-num pn-sec-num--paper">回看与咨询</p>
          <h2 id="pn-recall-title">想找回之前看过的内容？</h2>
          <p class="pn-recall-text">按分类回看您关心的主题，或者直接联系我们。工作日 9:00–18:00 在线，非工作时间留言会在下一个工作日回复。</p>
          <div class="pn-recall-actions">
            <a class="cta cta-ghost" href="/inquiry/">联系客服咨询</a>
          </div>
        </div>
        <div data-reveal>
          <ul class="pn-recall-links">
            <li><a href="/download/">下载中心<span>Z4G 面板与手机版入口</span></a></li>
            <li><a href="/questions/">问答中心<span>第一次找入口覆盖范围</span></a></li>
            <li><a href="/about-us/">品牌自述<span>服务原则与认证历程</span></a></li>
            <li><a href="/inquiry/">咨询通道<span>邮件、电话与工作时间</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</main>

.page-news {
  --pn-line: var(--navy-700);
  --pn-line-soft: rgba(27, 69, 102, .55);
  --pn-paper-border: var(--haze);
  background: var(--navy-950);
  color: var(--paper);
  overflow-x: hidden;
}

/* ── 封面 ── */
.page-news .pn-cover {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 229, 255, .16) 0%, rgba(0, 229, 255, 0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 176, 32, .10) 0%, rgba(255, 176, 32, 0) 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  border-bottom: var(--edge);
}

.page-news .pn-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(121, 242, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 242, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.page-news .pn-cover .wrap {
  position: relative;
  z-index: 1;
}

.page-news .pn-cover .breadcrumb-list a {
  color: var(--cyan-300);
  text-decoration: none;
}

.page-news .pn-cover .breadcrumb-list a:hover,
.page-news .pn-cover .breadcrumb-list a:focus-visible {
  color: var(--cyan-500);
}

.page-news .pn-cover-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: clamp(1rem, 3vw, 1.75rem);
}

.page-news .pn-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  padding: .35rem .75rem .35rem .45rem;
  border: 1px solid var(--pn-line);
  border-left: 3px solid var(--amber-500);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--steel);
  background: rgba(10, 27, 46, .6);
}

.page-news .pn-kicker-num {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--amber-500);
}

.page-news .pn-title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--paper);
}

.page-news .pn-lede {
  max-width: 58ch;
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--steel);
}

.page-news .pn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--paper);
}

.page-news .pn-meta-key {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--gray-steel, var(--steel));
}

.page-news .pn-meta li {
  padding-left: .7rem;
  border-left: 1px solid var(--pn-line);
}

.page-news .pn-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.page-news .pn-cover-media {
  position: relative;
  margin: 0;
  border: 1px solid var(--pn-line);
  background: var(--navy-900);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .18), 0 24px 48px -28px rgba(0, 229, 255, .4);
}

.page-news .pn-cover-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .pn-cover-media .media-caption {
  display: block;
  padding: .75rem 1rem;
  border-top: 1px solid var(--pn-line);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--steel);
}

/* ── 分类索引条 ── */
.page-news .pn-index {
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--navy-900);
  border-bottom: var(--edge);
}

.page-news .pn-index-title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .pn-chips {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}

.page-news .pn-chip {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .7rem .85rem;
  border: 1px solid var(--pn-line);
  background: rgba(5, 13, 26, .55);
  color: var(--paper);
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}

.page-news .pn-chip:hover,
.page-news .pn-chip:focus-visible {
  border-color: var(--cyan-500);
  background: rgba(0, 229, 255, .08);
  transform: translateY(-2px);
}

.page-news .pn-chip-num {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--amber-500);
}

.page-news .pn-chip-label {
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
}

.page-news .pn-chip-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--steel);
}

/* ── 章节通用 ── */
.page-news .pn-timeline-wrap,
.page-news .pn-versions-sec,
.page-news .pn-stories-sec {
  padding-block: clamp(2.25rem, 5vw, 4rem);
  background: var(--navy-950);
}

.page-news .pn-paper {
  padding-block: clamp(2.25rem, 5vw, 4rem);
  background: var(--paper);
  color: var(--navy-900);
  border-block: 1px solid var(--pn-paper-border);
  box-shadow: inset 0 0 0 1px #fff;
}

.page-news .pn-sec-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 68ch;
}

.page-news .pn-sec-num {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--amber-500);
}

.page-news .pn-sec-head h2 {
  margin: 0 0 .7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--paper);
}

.page-news .pn-sec-lede {
  margin: 0;
  font-size: .95rem;
  line-height: 1.85;
  color: var(--steel);
}

.page-news .pn-sec-head--paper h2 {
  color: var(--navy-900);
}

.page-news .pn-sec-head--paper .pn-sec-num {
  color: var(--navy-700);
}

.page-news .pn-sec-head--paper .pn-sec-lede {
  color: var(--navy-800);
}

/* ── 时间线 ── */
.page-news .pn-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--edge);
}

.page-news .pn-entry {
  display: grid;
  gap: .5rem;
  align-items: start;
  padding-block: .9rem;
  border-top: var(--edge);
}

.page-news .pn-when {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--amber-300);
  white-space: nowrap;
}

.page-news .pn-entry-body {
  min-width: 0;
}

.page-news .pn-entry summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .65rem;
  padding: .2rem 0;
  cursor: pointer;
  list-style: none;
}

.page-news .pn-entry summary::-webkit-details-marker {
  display: none;
}

.page-news .pn-entry summary:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 4px;
}

.page-news .pn-cat {
  display: inline-block;
  padding: .1rem .45rem;
  border: 1px solid var(--pn-line);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--steel);
  white-space: nowrap;
}

.page-news .pn-cat[data-cat="feedback"] {
  border-color: rgba(0, 229, 255, .5);
  color: var(--cyan-300);
}

.page-news .pn-cat[data-cat="version"] {
  border-color: rgba(255, 176, 32, .5);
  color: var(--amber-300);
}

.page-news .pn-cat[data-cat="entry"] {
  border-color: rgba(46, 230, 168, .5);
  color: var(--green);
}

.page-news .pn-cat[data-cat="story"] {
  border-color: var(--haze);
  color: var(--paper);
}

.page-news .pn-entry-title {
  flex: 1 1 12rem;
  font-family: var(--font-heading);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
  transition: color .2s var(--ease);
}

.page-news .pn-entry summary:hover .pn-entry-title {
  color: var(--cyan-300);
}

.page-news .pn-entry summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--cyan-500);
}

.page-news .pn-entry[open] summary::after {
  content: "－";
}

.page-news .pn-entry-detail {
  padding: .5rem 0 .25rem;
  max-width: 68ch;
}

.page-news .pn-entry-detail p {
  margin: 0 0 .7rem;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--steel);
}

.page-news .pn-jump {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(121, 242, 255, .4);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-news .pn-jump:hover,
.page-news .pn-jump:focus-visible {
  color: var(--amber-300);
  border-bottom-color: var(--amber-300);
}

/* ── 四维反馈 ── */
.page-news .pn-dims {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-news .pn-dim {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--haze);
  border-left: 3px solid var(--navy-700);
  box-shadow: 4px 4px 0 rgba(215, 230, 242, .7);
}

.page-news .pn-dim-num {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--amber-500);
  padding: .1rem .3rem;
  background: var(--navy-950);
  align-self: flex-start;
}

.page-news .pn-dim-name {
  margin: 0 0 .35rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-900);
}

.page-news .pn-dim-result {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--navy-700);
}

.page-news .pn-dim-text {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--navy-800);
}

.page-news .pn-meter {
  margin-top: auto;
  height: 6px;
  background: var(--haze);
  border-radius: 3px;
  overflow: hidden;
}

.page-news .pn-meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--navy-700), var(--cyan-500), var(--amber-500));
  border-radius: 3px;
}

.page-news .pn-dim:nth-child(1) .pn-meter > span { width: 92%; }
.page-news .pn-dim:nth-child(2) .pn-meter > span { width: 78%; }
.page-news .pn-dim:nth-child(3) .pn-meter > span { width: 86%; }
.page-news .pn-dim:nth-child(4) .pn-meter > span { width: 94%; }

/* ── 版本演进 ── */
.page-news .pn-versions-sec {
  background: var(--navy-900);
  border-block: var(--edge);
}

.page-news .pn-versions {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .pn-vmedia,
.page-news .pn-storymedia,
.page-news .pn-covmedia {
  margin: 0;
  border: 1px solid var(--pn-line);
  background: var(--navy-950);
  overflow: hidden;
}

.page-news .pn-vmedia img,
.page-news .pn-storymedia img,
.page-news .pn-covmedia img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .pn-vmedia .media-caption,
.page-news .pn-storymedia .media-caption {
  display: block;
  padding: .7rem .9rem;
  border-top: 1px solid var(--pn-line);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--steel);
}

.page-news .pn-vlist {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
  border-left: 1px solid var(--pn-line);
}

.page-news .pn-vitem {
  position: relative;
  padding: 0 0 1.6rem 1.3rem;
}

.page-news .pn-vitem:last-child {
  padding-bottom: 0;
}

.page-news .pn-vitem::before {
  content: "";
  position: absolute;
  left: -1.32rem;
  top: .3rem;
  width: 9px;
  height: 9px;
  background: var(--navy-950);
  border: 2px solid var(--amber-500);
  border-radius: 50%;
}

.page-news .pn-vnode {
  display: inline-block;
  margin-bottom: .35rem;
  padding: .1rem .45rem;
  background: var(--amber-500);
  color: var(--navy-950);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.page-news .pn-vwhen {
  margin: 0 0 .25rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--steel);
}

.page-news .pn-vitem h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--paper);
}

.page-news .pn-vitem p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--steel);
}

/* ── 入口覆盖 ── */
.page-news .pn-covmedia {
  margin-bottom: 1.25rem;
  border-color: var(--haze);
  background: #fff;
}

.page-news .pn-covmedia .media-caption {
  display: block;
  padding: .7rem .9rem;
  border-top: 1px solid var(--haze);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--navy-700);
}

.page-news .pn-coverage {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-news .pn-cov-item {
  position: relative;
  padding: 1rem 1rem 1.1rem 1.4rem;
  background: #fff;
  border: 1px solid var(--haze);
}

.page-news .pn-cov-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cyan-500);
}

.page-news .pn-cov-item h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-heading);
  font-size: .98rem;
  font-weight: 800;
  color: var(--navy-900);
}

.page-news .pn-cov-item p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--navy-800);
}

/* ── 服务故事 ── */
.page-news .pn-storymedia {
  margin-bottom: 1.25rem;
}

.page-news .pn-stories {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-news .pn-story {
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--navy-900);
  border: 1px solid var(--pn-line);
  border-top: 2px solid var(--cyan-500);
}

.page-news .pn-story-tag {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--amber-300);
}

.page-news .pn-story h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--paper);
}

.page-news .pn-story p {
  margin: 0 0 .85rem;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--steel);
}

/* ── 回看与咨询 ── */
.page-news .pn-sec-num--paper {
  color: var(--navy-700);
}

.page-news .pn-recall {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.page-news .pn-recall h2 {
  margin: 0 0 .7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--navy-900);
}

.page-news .pn-recall-text {
  max-width: 56ch;
  margin: 0 0 1.25rem;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--navy-800);
}

.page-news .pn-recall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.page-news .pn-recall-links {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-recall-links a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem .9rem;
  border: 1px solid var(--haze);
  border-left: 3px solid var(--navy-700);
  background: #fff;
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy-900);
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.page-news .pn-recall-links a:hover,
.page-news .pn-recall-links a:focus-visible {
  border-left-color: var(--cyan-500);
  transform: translateX(3px);
}

.page-news .pn-recall-links span {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--navy-700);
}

/* ── 响应式 ── */
@media (min-width: 540px) {
  .page-news .pn-chips {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-news .pn-dims {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-news .pn-coverage {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-news .pn-recall-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .page-news .pn-cover-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
  }

  .page-news .pn-entry {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.15rem;
  }

  .page-news .pn-when {
    padding-top: .3rem;
  }

  .page-news .pn-versions {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }

  .page-news .pn-stories {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-news .pn-recall {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-news .pn-chips {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-news .pn-dims {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-news .pn-storymedia,
  .page-news .pn-covmedia {
    max-width: 78%;
  }
}

@media (min-width: 1200px) {
  .page-news .pn-lede {
    font-size: 1.06rem;
  }

  .page-news .pn-entry {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .pn-chip,
  .page-news .pn-entry-title,
  .page-news .pn-jump,
  .page-news .pn-recall-links a {
    transition: none;
  }

  .page-news .pn-chip:hover,
  .page-news .pn-recall-links a:hover {
    transform: none;
  }
}

.page-news {
  --gray-steel: currentColor;
}