.page-news {
  --news-line: 1px solid rgba(30, 26, 22, .16);
  --news-line-ink: 1px solid rgba(199, 208, 219, .28);
}

/* 面包屑 */
.page-news .news-crumb {
  padding-top: 20px;
}
.page-news .news-crumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.page-news .breadcrumb a {
  color: var(--slate);
  text-decoration: none;
}
.page-news .breadcrumb a:hover {
  color: var(--cyan-ink);
}
.page-news .breadcrumb__sep {
  color: var(--silver);
}
.page-news .breadcrumb__current {
  color: var(--brown);
  font-weight: 700;
}

/* 首屏 */
.page-news .news-masthead {
  padding-top: 18px;
}
.page-news .news-masthead__grid {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 4vw, 52px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0, 229, 255, .18), transparent 55%),
    linear-gradient(150deg, var(--ink-deep) 0%, var(--ink) 58%, #103459 100%);
  border: 2px solid var(--ink-deep);
  box-shadow: var(--shadow-brut);
  color: var(--cream);
}
.page-news .news-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cyan);
}
.page-news .news-masthead h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 7vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.page-news .news-masthead h1 em {
  font-style: normal;
  color: var(--cyan);
}
.page-news .news-lede {
  margin: 0 0 22px;
  max-width: 46em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--silver);
}
.page-news .news-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.page-news .news-fig {
  padding: 12px 10px;
  border: 2px solid rgba(0, 229, 255, .38);
  background: rgba(6, 21, 43, .58);
}
.page-news .news-fig__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(17px, 3.6vw, 25px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cyan);
}
.page-news .news-fig__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--silver);
}
.page-news .news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-news .news-masthead__media {
  margin: 0;
  border: 2px solid rgba(0, 229, 255, .42);
  background: var(--ink-deep);
}
.page-news .news-masthead__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-masthead__media .media__caption {
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 229, 255, .3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--silver);
}

/* 分类标签墙 */
.page-news .news-filters {
  padding-top: 30px;
}
.page-news .news-filters__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--slate);
  text-transform: uppercase;
}
.page-news .news-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-filters__list .tag {
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.page-news .news-filters__list .tag:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--brown);
}

/* 更新日志 */
.page-news .news-ledger {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(24px, 4vw, 40px);
}
.page-news .news-ledger__rail {
  padding-left: 14px;
  border-left: 2px solid var(--brown);
}
.page-news .news-ledger__rail .rail__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--slate);
}
.page-news .news-ledger__rail .rail__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-ledger__rail .rail__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid transparent;
  font-size: 13px;
  color: var(--slate);
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.page-news .news-ledger__rail .rail__link .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--red);
}
.page-news .news-ledger__rail .rail__link:hover {
  border-color: var(--brown);
  background: var(--cream);
  color: var(--brown);
}
.page-news .news-ledger__rail .rail__link[aria-current="true"] {
  border-color: var(--brown);
  background: var(--brown);
  color: var(--cream);
}
.page-news .news-ledger__rail .rail__link[aria-current="true"] .mono {
  color: var(--amber);
}
.page-news .news-ledger__stream {
  display: grid;
  gap: 16px;
}
.page-news .batch {
  position: relative;
  padding: clamp(16px, 2.4vw, 26px);
  border: 2px solid var(--brown);
  background: var(--cream);
  box-shadow: var(--shadow-brut);
}
.page-news .batch--lead {
  background: linear-gradient(160deg, #FFFDF8 0%, var(--cream) 58%, #EBE3D6 100%);
}
.page-news .batch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.page-news .batch__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--red);
}
.page-news .batch__when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
}
.page-news .batch__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.35;
  color: var(--brown);
}
.page-news .batch--lead .batch__title {
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.25;
}
.page-news .batch__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.78;
  color: #453C33;
}
.page-news .batch__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.page-news .batch__meta {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(30, 26, 22, .22);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

/* 精选案例 */
.page-news .news-cases {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(22px, 3vw, 34px);
}
.page-news .news-case-lead {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--brown);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: var(--shadow-blue);
}
.page-news .news-case-lead .media {
  position: relative;
  margin: 0;
  border-bottom: 2px solid var(--brown);
}
.page-news .news-case-lead .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-case-lead .media__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 4px 8px;
  border: 2px solid var(--brown);
  background: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--brown);
}
.page-news .news-case-lead .card__body {
  padding: clamp(16px, 2.4vw, 24px);
}
.page-news .news-case-lead__text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.78;
  color: #453C33;
}
.page-news .news-case-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--brown);
  list-style: none;
}
.page-news .case-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px 4px;
  border-bottom: var(--news-line);
  transition: background .18s var(--ease);
}
.page-news .case-row:hover {
  background: var(--mist);
}
.page-news .case-row .case-row__no {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan-ink);
}
.page-news .case-row__title {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.5;
  color: var(--brown);
}
.page-news .case-row__text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}
.page-news .news-more {
  margin: 24px 0 0;
}

/* 城市观察 */
.page-news .news-cities {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(22px, 3vw, 34px);
}
.page-news .news-cities__media {
  margin: 0;
  border: 2px solid rgba(0, 229, 255, .42);
  background: rgba(6, 21, 43, .5);
}
.page-news .news-cities__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-cities__media .media__caption {
  padding: 10px 12px;
  border-top: var(--news-line-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--silver);
}
.page-news .region-grid {
  display: grid;
  gap: 14px;
}
.page-news .region {
  padding: 16px;
  border: 2px solid rgba(199, 208, 219, .34);
  background: rgba(6, 21, 43, .55);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.page-news .region:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}
.page-news .region__name {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-news .region__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--silver);
}

/* 指南补新 */
.page-news .news-accordion {
  margin-top: clamp(22px, 3vw, 34px);
  border: 2px solid var(--brown);
  background: #FFFFFF;
  box-shadow: var(--shadow-brut);
}
.page-news .news-accordion .accordion__item + .accordion__item {
  border-top: var(--news-line);
}
.page-news .news-accordion .accordion__item h3 {
  margin: 0;
}
.page-news .news-accordion .accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 18px clamp(14px, 2vw, 22px);
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--brown);
  cursor: pointer;
  transition: background .18s var(--ease);
}
.page-news .news-accordion .accordion__btn:hover {
  background: var(--mist);
}
.page-news .news-accordion .accordion__btn[aria-expanded="true"] {
  background: var(--cream);
}
.page-news .news-accordion .accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--brown);
}
.page-news .news-accordion .accordion__icon::before,
.page-news .news-accordion .accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--brown);
}
.page-news .news-accordion .accordion__icon::before {
  left: 2px;
  right: 2px;
  top: 6px;
  height: 2px;
}
.page-news .news-accordion .accordion__icon::after {
  top: 2px;
  bottom: 2px;
  left: 6px;
  width: 2px;
  transition: transform .2s var(--ease);
}
.page-news .news-accordion .accordion__btn[aria-expanded="true"] .accordion__icon::after {
  transform: scaleY(0);
}
.page-news .news-accordion .accordion__inner {
  padding: 0 clamp(14px, 2vw, 22px) 20px;
  border-left: 4px solid var(--cyan);
  margin-left: clamp(14px, 2vw, 22px);
}
.page-news .news-accordion .accordion__inner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #453C33;
}
.is-js .page-news .news-accordion .accordion__panel {
  display: none;
}
.is-js .page-news .news-accordion .accordion__item.is-open .accordion__panel,
.is-js .page-news .news-accordion .accordion__panel.is-open {
  display: block;
}

/* 版本迭代 */
.page-news .news-versions {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}
.page-news .news-versions__intro .section__title {
  font-size: clamp(24px, 3.4vw, 34px);
}
.page-news .news-versions__text {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}
.page-news .news-versions__media {
  margin: 22px 0 0;
  border: 2px solid var(--brown);
  box-shadow: var(--shadow-brut);
}
.page-news .news-versions__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-versions__list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--brown);
  list-style: none;
}
.page-news .version {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: var(--news-line);
}
.page-news .version__when {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--red);
}
.page-news .version__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.5;
  color: var(--brown);
}
.page-news .version__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

/* 结尾行动区 */
.page-news .news-cta {
  padding-top: clamp(30px, 5vw, 60px);
  padding-bottom: clamp(30px, 5vw, 60px);
}
.page-news .news-cta__box {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 44px);
  border: 2px solid var(--ink-deep);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  box-shadow: var(--shadow-brut);
  color: var(--cream);
}
.page-news .news-cta__box::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border: 2px solid rgba(0, 229, 255, .35);
  border-radius: 50%;
}
.page-news .news-cta h2 {
  position: relative;
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.25;
  color: #FFFFFF;
}
.page-news .news-cta p {
  position: relative;
  margin: 0 0 20px;
  max-width: 52em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--silver);
}
.page-news .news-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 断点 */
@media (min-width: 700px) {
  .page-news .region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-news .news-masthead__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: end;
  }
  .page-news .news-cases {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-versions {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: start;
  }
}

@media (min-width: 1000px) {
  .page-news .news-ledger {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-ledger__rail {
    position: sticky;
    top: 96px;
  }
  .page-news .batch::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 28px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--brown);
    border-radius: 50%;
    background: var(--red);
  }
  .page-news .news-cities {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    align-items: start;
  }
}

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

@media (max-width: 560px) {
  .page-news .news-figs {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-news .version {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .page-news .version__when {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .case-row,
  .page-news .region,
  .page-news .news-filters__list .tag,
  .page-news .news-ledger__rail .rail__link,
  .page-news .news-accordion .accordion__btn {
    transition: none;
  }
  .page-news .region:hover,
  .page-news .news-filters__list .tag:hover {
    transform: none;
  }
}


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

  <div class="wrap news-crumb">
    <nav class="breadcrumb" aria-label="页面路径">
      <a href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span class="breadcrumb__current">内容中心</span>
    </nav>
  </div>

  <section class="wrap news-masthead" aria-labelledby="news-title">
    <div class="news-masthead__grid">
      <div class="news-masthead__main">
        <p class="news-kicker">每周三上新 · 资料库批次更新</p>
        <h1 id="news-title">新案例、新观察、新教程，<em>每周三</em>在这里与您见面</h1>
        <p class="news-lede">6686主页内容中心把各地师傅的一线记录整理成看得懂、查得到的文章。想给自家的安装或清洁找个参照，可以先翻城市观察；想弄清服务通道怎么用，就看使用指南补新。资料库累计收录 1,240 篇以上指南与案例，案例来自 32 个城市。</p>
        <div class="news-figs">
          <div class="news-fig">
            <span class="news-fig__num mono">1,240+</span>
            <span class="news-fig__label">指南与案例累计篇数</span>
          </div>
          <div class="news-fig">
            <span class="news-fig__num mono">32</span>
            <span class="news-fig__label">已收录案例的城市</span>
          </div>
          <div class="news-fig">
            <span class="news-fig__num mono">周三</span>
            <span class="news-fig__label">每周固定上新日</span>
          </div>
        </div>
        <div class="news-actions">
          <a class="btn btn--primary" href="/experience/">进入服务体验中心</a>
          <a class="btn btn--ghost" href="/tutorial/">打开中文版使用指南</a>
        </div>
      </div>
      <figure class="media media--wide news-masthead__media">
        <img class="media__img" src="{zhanqunpic:h:560w:1400}" width="1400" height="560" alt="翻开的资料库页面与各城市地标卡片一同流动的插画" decoding="async">
        <figcaption class="media__caption">城市案例、区域观察与操作教程按批次汇入资料库</figcaption>
      </figure>
    </div>
  </section>

  <section class="wrap news-filters" aria-label="内容分类">
    <p class="news-filters__label">按内容类型浏览</p>
    <ul class="news-filters__list">
      <li><a class="tag tag--red" href="#updates">更新日志</a></li>
      <li><a class="tag tag--cyan" href="#cases">城市案例</a></li>
      <li><a class="tag tag--amber" href="#cities">区域观察</a></li>
      <li><a class="tag tag--dark" href="#guides">指南补新</a></li>
      <li><a class="tag" href="#versions">版本迭代</a></li>
    </ul>
  </section>

  <section class="section section--mist" id="updates">
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow">更新日志 / 按批次排列</p>
        <h2 class="section__title">每周三上新一批，最新的一批排在最前</h2>
        <p class="section__lead">一批里既有刚上线的城市案例，也有补入的操作说明和通道上的小改动。点左侧批次编号，可以直接跳到您想看的那一批。</p>
      </header>

      <div class="grid--rail news-ledger">
        <aside class="rail news-ledger__rail" data-rail-nav>
          <p class="rail__title">批次索引</p>
          <ul class="rail__list">
            <li><a class="rail__link" href="#batch-48" data-rail-link="batch-48"><span class="mono">48</span> 本周三</a></li>
            <li><a class="rail__link" href="#batch-47" data-rail-link="batch-47"><span class="mono">47</span> 上周三</a></li>
            <li><a class="rail__link" href="#batch-46" data-rail-link="batch-46"><span class="mono">46</span> 上上周三</a></li>
            <li><a class="rail__link" href="#batch-45" data-rail-link="batch-45"><span class="mono">45</span> 上月中旬</a></li>
            <li><a class="rail__link" href="#batch-44" data-rail-link="batch-44"><span class="mono">44</span> 上月首批</a></li>
          </ul>
        </aside>

        <div class="news-ledger__stream">
          <article class="batch batch--lead" id="batch-48" data-reveal>
            <div class="batch__head">
              <span class="batch__num mono">BATCH 48</span>
              <span class="batch__when mono">本周三</span>
            </div>
            <h3 class="batch__title">办公设备联调与老旧小区家电安装记录上线</h3>
            <p class="batch__text">本批新增 12 条城市案例，集中在办公空间多设备联调、老旧小区挂机安装两类高频场景；同步补入 3 篇水电与线路检查清单；服务通道的工单列表增加了按城市归档的快捷入口，翻找本地记录更快。</p>
            <ul class="batch__tags">
              <li><span class="tag tag--cyan">城市案例</span></li>
              <li><span class="tag tag--dark">指南补新</span></li>
              <li><span class="tag tag--amber">版本迭代</span></li>
            </ul>
            <p class="batch__meta">新增案例 12 条 · 指南 3 篇 · 通道 1 项调整</p>
          </article>

          <article class="batch" id="batch-47" data-reveal>
            <div class="batch__head">
              <span class="batch__num mono">BATCH 47</span>
              <span class="batch__when mono">上周三</span>
            </div>
            <h3 class="batch__title">华南三城夏季清洁与电器检测专题</h3>
            <p class="batch__text">广州、深圳、东莞的空调深度清洁与线路检测案例集中上线，另附一份电器使用年限自检表，方便您在预约前先判断家里设备的状态。</p>
            <ul class="batch__tags">
              <li><span class="tag tag--amber">区域观察</span></li>
              <li><span class="tag tag--cyan">城市案例</span></li>
            </ul>
            <p class="batch__meta">新增案例 9 条 · 专题 1 组</p>
          </article>

          <article class="batch" id="batch-46" data-reveal>
            <div class="batch__head">
              <span class="batch__num mono">BATCH 46</span>
              <span class="batch__when mono">上上周三</span>
            </div>
            <h3 class="batch__title">师傅资质查询补上服务评价与历史工单</h3>
            <p class="batch__text">资质查询在身份认证与技能证书之外，增加服务评价和历史工单两个维度，您可以在约定上门之前先看清这位师傅做过什么、客户怎么评价。</p>
            <ul class="batch__tags">
              <li><span class="tag tag--amber">版本迭代</span></li>
              <li><span class="tag tag--dark">指南补新</span></li>
            </ul>
            <p class="batch__meta">通道 2 项调整 · 配套指南 1 篇</p>
          </article>

          <article class="batch" id="batch-45" data-reveal>
            <div class="batch__head">
              <span class="batch__num mono">BATCH 45</span>
              <span class="batch__when mono">上月中旬</span>
            </div>
            <h3 class="batch__title">西南与华中区域的上门需求观察</h3>
            <p class="batch__text">成都、重庆、武汉、长沙四城的工单类型分布出现变化：安装与调试之外，季度性维护的需求上升明显，几类设备开始进入集中保养期。</p>
            <ul class="batch__tags">
              <li><span class="tag tag--amber">区域观察</span></li>
            </ul>
            <p class="batch__meta">观察 4 城 · 案例 6 条</p>
          </article>

          <article class="batch" id="batch-44" data-reveal>
            <div class="batch__head">
              <span class="batch__num mono">BATCH 44</span>
              <span class="batch__when mono">上月首批</span>
            </div>
            <h3 class="batch__title">家装收尾阶段的多工种协同记录</h3>
            <p class="batch__text">整理了 8 条新房入住前的上门记录，说明水电复检、设备安装与入住清洁的先后顺序，帮您少几趟返工和空等。</p>
            <ul class="batch__tags">
              <li><span class="tag tag--cyan">城市案例</span></li>
              <li><span class="tag tag--amber">版本迭代</span></li>
            </ul>
            <p class="batch__meta">新增案例 8 条 · 年度索引入口 1 项</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="cases">
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow">案例合集 / 精选</p>
        <h2 class="section__title">看别人家是怎么解决的，心里就有底了</h2>
        <p class="section__lead">案例都来自真实工单：什么场景、遇到什么问题、师傅怎么处理、最后是什么结果。想按城市、服务类别或年度组合筛选，服务体验中心里有完整合集。</p>
      </header>

      <div class="news-cases">
        <article class="card news-case-lead">
          <figure class="media media--wide">
            <img class="media__img" src="{zhanqunpic:h:520w:800}" width="800" height="520" alt="师傅在商业办公空间调试设备，窗外是城市天际线" loading="lazy" decoding="async">
            <span class="media__badge">华东 · 办公设备</span>
          </figure>
          <div class="card__body">
            <h3 class="card__title">上海：一间 60 人办公区的多设备联调</h3>
            <p class="news-case-lead__text">办公区要在同一个周末完成打印设备、投影终端与网络点位的安装调试。4 位师傅分成两组进场，先集中核对点位，再按部门顺序逐台调试，收尾时交给行政一份设备清单，后续报修可以直接照着报。</p>
            <p class="card__meta">安装 / 调试 · 本年度 · 4 位师傅协同</p>
          </div>
        </article>

        <ul class="news-case-list">
          <li class="case-row" data-reveal>
            <span class="case-row__no mono">01</span>
            <div class="case-row__main">
              <h3 class="case-row__title">杭州 · 老旧小区壁挂空调安装与管路整治</h3>
              <p class="case-row__text">墙面承重条件有限，先做支架加固再安装，排水坡度重新处理，避免后期滴水扰邻。</p>
              <span class="tag tag--cyan">安装</span>
            </div>
          </li>
          <li class="case-row" data-reveal>
            <span class="case-row__no mono">02</span>
            <div class="case-row__main">
              <h3 class="case-row__title">成都 · 三口之家全屋净水设备调试</h3>
              <p class="case-row__text">装修收尾阶段进场，逐路试水并记录压力值，把滤芯更换周期写在了设备侧面。</p>
              <span class="tag tag--cyan">调试</span>
            </div>
          </li>
          <li class="case-row" data-reveal>
            <span class="case-row__no mono">03</span>
            <div class="case-row__main">
              <h3 class="case-row__title">深圳 · 写字楼打印设备季度维护</h3>
              <p class="case-row__text">按季度上门做清洁与耗材检查，把常见卡纸成因逐条排除，行政不用再逐台报修。</p>
              <span class="tag tag--amber">维护</span>
            </div>
          </li>
          <li class="case-row" data-reveal>
            <span class="case-row__no mono">04</span>
            <div class="case-row__main">
              <h3 class="case-row__title">西安 · 门店开业前的设备检测与清洁</h3>
              <p class="case-row__text">开业前三天进场，线路检测和整体清洁连着做，赶在试营业前交出可用的设备状态。</p>
              <span class="tag tag--dark">检测</span>
            </div>
          </li>
          <li class="case-row" data-reveal>
            <span class="case-row__no mono">05</span>
            <div class="case-row__main">
              <h3 class="case-row__title">北京 · 联合办公区网络设备紧急恢复</h3>
              <p class="case-row__text">工作日白天报修，先远程确认现象再安排上门，恢复后补了一段日常自检的说明。</p>
              <span class="tag tag--red">紧急上门</span>
            </div>
          </li>
        </ul>
      </div>

      <p class="news-more">
        <a class="btn btn--dark" href="/experience/">筛选本地案例</a>
      </p>
    </div>
  </section>

  <section class="section section--ink" id="cities">
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow">城市观察 / 按区域看</p>
        <h2 class="section__title">同一类需求，在不同城市长得不一样</h2>
        <p class="section__lead">服务网络覆盖 26 个省份、32 座重点城市。我们把近期批次里的高频场景按区域归了归，帮您提前判断自己所在城市大概会遇到什么。</p>
      </header>

      <div class="news-cities">
        <figure class="media media--square news-cities__media">
          <img class="media__img" src="{zhanqunpic:h:480w:640}" width="640" height="480" alt="抽象城市地图与观察数据图表融合的插画" loading="lazy" decoding="async">
          <figcaption class="media__caption">区域观察按批次更新，与城市案例相互印证</figcaption>
        </figure>

        <div class="region-grid">
          <article class="region">
            <h3 class="region__name">华东</h3>
            <p class="region__text">上海、杭州等城市办公空间与新交付小区并存，安装与调试工单密集；换季时段的清洁需求上升明显。</p>
          </article>
          <article class="region">
            <h3 class="region__name">华南</h3>
            <p class="region__text">广州、深圳一带高温时段长，空调深度清洁与线路检测是近几批的重点，商用空间的维护需求也在增加。</p>
          </article>
          <article class="region">
            <h3 class="region__name">华北</h3>
            <p class="region__text">北京等城市联合办公与小型门店多，紧急上门和设备维护的工单集中在工作日白天，排期相对紧凑。</p>
          </article>
          <article class="region">
            <h3 class="region__name">华中</h3>
            <p class="region__text">武汉、长沙新旧小区交替，管路整治与设备重新定位的工单占比上升，施工前勘测尤其重要。</p>
          </article>
          <article class="region">
            <h3 class="region__name">西南</h3>
            <p class="region__text">成都、重庆新房集中交付，全屋设备调试成为装修收尾阶段最常见的需求，多工种衔接要提前排。</p>
          </article>
          <article class="region">
            <h3 class="region__name">西北</h3>
            <p class="region__text">西安等城市门店与小型商用空间装修周期短，检测与清洁常常连着安排，一次进场办完更省事。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="guides">
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow">指南补新 / 最近新增</p>
        <h2 class="section__title">通道改了什么，教程就补到哪里</h2>
        <p class="section__lead">下面几条是近期补入的说明，展开就能看到要点。需要一步不落的完整操作，请到中文版使用指南逐节对照。</p>
      </header>

      <div class="accordion news-accordion" data-accordion>
        <div class="accordion__item">
          <h3>
            <button class="accordion__btn" type="button" aria-expanded="false" aria-controls="guide-panel-1">
              第一次来，先看哪几步？
              <span class="accordion__icon" aria-hidden="true"></span>
            </button>
          </h3>
          <div class="accordion__panel" id="guide-panel-1">
            <div class="accordion__inner">
              <p>先确认要办的事属于哪一类：安装、调试、清洁、检测、维护还是紧急上门。类别定了再提交需求，按区域匹配师傅，随后进入资质确认环节。完整的四步路径可以对照中文版使用指南的首次访问部分。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <h3>
            <button class="accordion__btn" type="button" aria-expanded="false" aria-controls="guide-panel-2">
              怎么判断一位师傅靠不靠得住？
              <span class="accordion__icon" aria-hidden="true"></span>
            </button>
          </h3>
          <div class="accordion__panel" id="guide-panel-2">
            <div class="accordion__inner">
              <p>资质查询提供身份认证、技能证书、服务评价和历史工单四个维度。建议先看技能证书是否覆盖您要办的服务类别，再翻近期的评价与历史工单记录，看看同类活儿他做过多少。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <h3>
            <button class="accordion__btn" type="button" aria-expanded="false" aria-controls="guide-panel-3">
              工单提交之后怎么跟进？
              <span class="accordion__icon" aria-hidden="true"></span>
            </button>
          </h3>
          <div class="accordion__panel" id="guide-panel-3">
            <div class="accordion__inner">
              <p>提交后可以在通道内查看处理进度，工单平均首次响应时间在 2 小时以内。事情比较急的时候，优先通过服务通道提交工单，比邮件更快进入处理队列。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <h3>
            <button class="accordion__btn" type="button" aria-expanded="false" aria-controls="guide-panel-4">
              想按城市找本地案例怎么办？
              <span class="accordion__icon" aria-hidden="true"></span>
            </button>
          </h3>
          <div class="accordion__panel" id="guide-panel-4">
            <div class="accordion__inner">
              <p>服务体验中心提供 32 城热力分布与案例瀑布流，可按城市、服务类别和年度组合筛选。每座城市都有一份对应的案例合集，打开就能看到当地的实际服务记录。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--mist section--tight" id="versions">
    <div class="wrap">
      <div class="news-versions">
        <div class="news-versions__intro">
          <p class="section__eyebrow">版本迭代记录</p>
          <h2 class="section__title">通道与内容中心的这一年</h2>
          <p class="news-versions__text">按发生的时间先后排列，方便您对照自己正在使用的界面。看到不熟悉的功能，可以先到中文版使用指南找对应说明。</p>
          <figure class="media media--tall news-versions__media">
            <img class="media__img" src="{zhanqunpic:h:400w:640}" width="640" height="400" alt="PC 端服务通道界面演进卡片叠加的插画，配等宽数字标签" loading="lazy" decoding="async">
          </figure>
        </div>

        <ol class="news-versions__list">
          <li class="version" data-reveal>
            <span class="version__when mono">本周</span>
            <div>
              <h3 class="version__title">工单列表新增按城市归档的快捷入口</h3>
              <p class="version__text">常办多城市业务的行政与采购，可以按城市直接翻到对应工单，不必逐条筛。</p>
            </div>
          </li>
          <li class="version" data-reveal>
            <span class="version__when mono">约三周前</span>
            <div>
              <h3 class="version__title">资质查询补充服务评价与历史工单</h3>
              <p class="version__text">从两个维度扩到四个维度，预约前的判断依据更完整。</p>
            </div>
          </li>
          <li class="version" data-reveal>
            <span class="version__when mono">上个月</span>
            <div>
              <h3 class="version__title">案例合集支持城市、类别与年度组合筛选</h3>
              <p class="version__text">三个条件可以叠加使用，找同类场景的记录不再需要一页页翻。</p>
            </div>
          </li>
          <li class="version" data-reveal>
            <span class="version__when mono">上季度</span>
            <div>
              <h3 class="version__title">更新日志启用批次编号</h3>
              <p class="version__text">历史批次可回溯查阅，跨批次对比同一类服务的处理方式更方便。</p>
            </div>
          </li>
          <li class="version" data-reveal>
            <span class="version__when mono">本年度</span>
            <div>
              <h3 class="version__title">中文版界面完成一轮用语与字号优化</h3>
              <p class="version__text">术语统一为更直白的说法，长页面字号加大，手机上读起来更省力。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="wrap news-cta">
    <div class="news-cta__box">
      <h2>想先看您所在城市的记录？</h2>
      <p>告诉我们需要哪一类上门服务，通道会按区域匹配师傅，资质、技能证书与服务评价都能查到。工作日 9:00-18:00，客服邮箱会回复您的咨询；紧急事宜建议直接提交工单。</p>
      <div class="news-cta__actions">
        <a class="btn btn--primary" href="/contact-us/">前往联系入口</a>
        <a class="btn btn--ghost" href="/company/">查看品牌档案</a>
      </div>
    </div>
  </section>

</main>

.page-news {
  --news-line: 1px solid rgba(30, 26, 22, .16);
  --news-line-ink: 1px solid rgba(199, 208, 219, .28);
}

/* 面包屑 */
.page-news .news-crumb {
  padding-top: 20px;
}
.page-news .news-crumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.page-news .breadcrumb a {
  color: var(--slate);
  text-decoration: none;
}
.page-news .breadcrumb a:hover {
  color: var(--cyan-ink);
}
.page-news .breadcrumb__sep {
  color: var(--silver);
}
.page-news .breadcrumb__current {
  color: var(--brown);
  font-weight: 700;
}

/* 首屏 */
.page-news .news-masthead {
  padding-top: 18px;
}
.page-news .news-masthead__grid {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 4vw, 52px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0, 229, 255, .18), transparent 55%),
    linear-gradient(150deg, var(--ink-deep) 0%, var(--ink) 58%, #103459 100%);
  border: 2px solid var(--ink-deep);
  box-shadow: var(--shadow-brut);
  color: var(--cream);
}
.page-news .news-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cyan);
}
.page-news .news-masthead h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 7vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.page-news .news-masthead h1 em {
  font-style: normal;
  color: var(--cyan);
}
.page-news .news-lede {
  margin: 0 0 22px;
  max-width: 46em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--silver);
}
.page-news .news-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.page-news .news-fig {
  padding: 12px 10px;
  border: 2px solid rgba(0, 229, 255, .38);
  background: rgba(6, 21, 43, .58);
}
.page-news .news-fig__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(17px, 3.6vw, 25px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cyan);
}
.page-news .news-fig__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--silver);
}
.page-news .news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-news .news-masthead__media {
  margin: 0;
  border: 2px solid rgba(0, 229, 255, .42);
  background: var(--ink-deep);
}
.page-news .news-masthead__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-masthead__media .media__caption {
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 229, 255, .3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--silver);
}

/* 分类标签墙 */
.page-news .news-filters {
  padding-top: 30px;
}
.page-news .news-filters__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--slate);
  text-transform: uppercase;
}
.page-news .news-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-filters__list .tag {
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.page-news .news-filters__list .tag:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--brown);
}

/* 更新日志 */
.page-news .news-ledger {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(24px, 4vw, 40px);
}
.page-news .news-ledger__rail {
  padding-left: 14px;
  border-left: 2px solid var(--brown);
}
.page-news .news-ledger__rail .rail__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--slate);
}
.page-news .news-ledger__rail .rail__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-ledger__rail .rail__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid transparent;
  font-size: 13px;
  color: var(--slate);
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.page-news .news-ledger__rail .rail__link .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--red);
}
.page-news .news-ledger__rail .rail__link:hover {
  border-color: var(--brown);
  background: var(--cream);
  color: var(--brown);
}
.page-news .news-ledger__rail .rail__link[aria-current="true"] {
  border-color: var(--brown);
  background: var(--brown);
  color: var(--cream);
}
.page-news .news-ledger__rail .rail__link[aria-current="true"] .mono {
  color: var(--amber);
}
.page-news .news-ledger__stream {
  display: grid;
  gap: 16px;
}
.page-news .batch {
  position: relative;
  padding: clamp(16px, 2.4vw, 26px);
  border: 2px solid var(--brown);
  background: var(--cream);
  box-shadow: var(--shadow-brut);
}
.page-news .batch--lead {
  background: linear-gradient(160deg, #FFFDF8 0%, var(--cream) 58%, #EBE3D6 100%);
}
.page-news .batch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.page-news .batch__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--red);
}
.page-news .batch__when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
}
.page-news .batch__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.35;
  color: var(--brown);
}
.page-news .batch--lead .batch__title {
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.25;
}
.page-news .batch__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.78;
  color: #453C33;
}
.page-news .batch__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.page-news .batch__meta {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(30, 26, 22, .22);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

/* 精选案例 */
.page-news .news-cases {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(22px, 3vw, 34px);
}
.page-news .news-case-lead {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--brown);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: var(--shadow-blue);
}
.page-news .news-case-lead .media {
  position: relative;
  margin: 0;
  border-bottom: 2px solid var(--brown);
}
.page-news .news-case-lead .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-case-lead .media__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 4px 8px;
  border: 2px solid var(--brown);
  background: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--brown);
}
.page-news .news-case-lead .card__body {
  padding: clamp(16px, 2.4vw, 24px);
}
.page-news .news-case-lead__text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.78;
  color: #453C33;
}
.page-news .news-case-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--brown);
  list-style: none;
}
.page-news .case-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px 4px;
  border-bottom: var(--news-line);
  transition: background .18s var(--ease);
}
.page-news .case-row:hover {
  background: var(--mist);
}
.page-news .case-row .case-row__no {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan-ink);
}
.page-news .case-row__title {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.5;
  color: var(--brown);
}
.page-news .case-row__text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}
.page-news .news-more {
  margin: 24px 0 0;
}

/* 城市观察 */
.page-news .news-cities {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(22px, 3vw, 34px);
}
.page-news .news-cities__media {
  margin: 0;
  border: 2px solid rgba(0, 229, 255, .42);
  background: rgba(6, 21, 43, .5);
}
.page-news .news-cities__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-cities__media .media__caption {
  padding: 10px 12px;
  border-top: var(--news-line-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--silver);
}
.page-news .region-grid {
  display: grid;
  gap: 14px;
}
.page-news .region {
  padding: 16px;
  border: 2px solid rgba(199, 208, 219, .34);
  background: rgba(6, 21, 43, .55);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.page-news .region:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}
.page-news .region__name {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-news .region__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--silver);
}

/* 指南补新 */
.page-news .news-accordion {
  margin-top: clamp(22px, 3vw, 34px);
  border: 2px solid var(--brown);
  background: #FFFFFF;
  box-shadow: var(--shadow-brut);
}
.page-news .news-accordion .accordion__item + .accordion__item {
  border-top: var(--news-line);
}
.page-news .news-accordion .accordion__item h3 {
  margin: 0;
}
.page-news .news-accordion .accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 18px clamp(14px, 2vw, 22px);
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--brown);
  cursor: pointer;
  transition: background .18s var(--ease);
}
.page-news .news-accordion .accordion__btn:hover {
  background: var(--mist);
}
.page-news .news-accordion .accordion__btn[aria-expanded="true"] {
  background: var(--cream);
}
.page-news .news-accordion .accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--brown);
}
.page-news .news-accordion .accordion__icon::before,
.page-news .news-accordion .accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--brown);
}
.page-news .news-accordion .accordion__icon::before {
  left: 2px;
  right: 2px;
  top: 6px;
  height: 2px;
}
.page-news .news-accordion .accordion__icon::after {
  top: 2px;
  bottom: 2px;
  left: 6px;
  width: 2px;
  transition: transform .2s var(--ease);
}
.page-news .news-accordion .accordion__btn[aria-expanded="true"] .accordion__icon::after {
  transform: scaleY(0);
}
.page-news .news-accordion .accordion__inner {
  margin-left: clamp(14px, 2vw, 22px);
  padding: 0 clamp(14px, 2vw, 22px) 20px;
  border-left: 4px solid var(--cyan);
}
.page-news .news-accordion .accordion__inner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #453C33;
}
.is-js .page-news .news-accordion .accordion__panel {
  display: none;
}
.is-js .page-news .news-accordion .accordion__item.is-open .accordion__panel,
.is-js .page-news .news-accordion .accordion__panel.is-open {
  display: block;
}

/* 版本迭代 */
.page-news .news-versions {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}
.page-news .news-versions__intro .section__title {
  font-size: clamp(24px, 3.4vw, 34px);
}
.page-news .news-versions__text {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}
.page-news .news-versions__media {
  margin: 22px 0 0;
  border: 2px solid var(--brown);
  box-shadow: var(--shadow-brut);
}
.page-news .news-versions__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-versions__list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--brown);
  list-style: none;
}
.page-news .version {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: var(--news-line);
}
.page-news .version__when {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--red);
}
.page-news .version__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.5;
  color: var(--brown);
}
.page-news .version__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

/* 结尾行动区 */
.page-news .news-cta {
  padding-top: clamp(30px, 5vw, 60px);
  padding-bottom: clamp(30px, 5vw, 60px);
}
.page-news .news-cta__box {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 44px);
  border: 2px solid var(--ink-deep);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  box-shadow: var(--shadow-brut);
  color: var(--cream);
}
.page-news .news-cta__box::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border: 2px solid rgba(0, 229, 255, .35);
  border-radius: 50%;
}
.page-news .news-cta h2 {
  position: relative;
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.25;
  color: #FFFFFF;
}
.page-news .news-cta p {
  position: relative;
  margin: 0 0 20px;
  max-width: 52em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--silver);
}
.page-news .news-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 断点 */
@media (min-width: 700px) {
  .page-news .region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-news .news-masthead__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: end;
  }
  .page-news .news-cases {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-versions {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: start;
  }
}

@media (min-width: 1000px) {
  .page-news .news-ledger {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-ledger__rail {
    position: sticky;
    top: 96px;
  }
  .page-news .batch::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 28px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--brown);
    border-radius: 50%;
    background: var(--red);
  }
  .page-news .news-cities {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    align-items: start;
  }
}

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

@media (max-width: 560px) {
  .page-news .news-figs {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-news .version {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .page-news .version__when {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .case-row,
  .page-news .region,
  .page-news .news-filters__list .tag,
  .page-news .news-ledger__rail .rail__link,
  .page-news .news-accordion .accordion__btn {
    transition: none;
  }
  .page-news .region:hover,
  .page-news .news-filters__list .tag:hover {
    transform: none;
  }
}