.page-news{
  --news-rule:2px solid var(--by-line-strong);
  --news-line:1px solid var(--by-line);
  background:var(--by-paper);
  color:var(--by-ink);
  font-family:var(--by-font-cn);
  line-height:1.75;
  overflow-x:clip;
}
.page-news .by-mono{font-family:var(--by-font-mono);}

/* 页头 */
.page-news .news-top{
  position:relative;
  padding-top:clamp(16px,3vw,30px);
  padding-bottom:clamp(26px,5vw,54px);
  background-image:linear-gradient(var(--by-line) 1px,transparent 1px),linear-gradient(90deg,var(--by-line) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:center bottom;
}
.page-news .news-top::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--by-indigo);
  opacity:.85;
}
.page-news .news-head{max-width:900px;padding-top:clamp(14px,3vw,26px);}
.page-news .news-head h1{
  margin:.35em 0 .3em;
  font-size:clamp(2rem,7vw,4.1rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--by-indigo);
  text-wrap:balance;
}
.page-news .news-head__lede{
  margin:0;
  max-width:64ch;
  font-size:clamp(.95rem,1.5vw,1.05rem);
  line-height:1.8;
  color:rgba(20,22,28,.82);
}
.page-news .news-head__marks{
  list-style:none;
  margin:clamp(20px,3vw,32px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--by-line);
  border:var(--news-rule);
  grid-template-columns:1fr;
}
.page-news .news-head__marks li{
  background:var(--by-paper);
  padding:14px 16px;
  font-size:.86rem;
  display:flex;
  align-items:baseline;
  gap:.6em;
  color:rgba(20,22,28,.78);
}
.page-news .news-head__marks .by-mono{
  font-size:1.15rem;
  font-weight:700;
  color:var(--by-amber);
}

/* 本期索引 */
.page-news .news-feature{padding-top:clamp(30px,5vw,56px);}
.page-news .news-feature__head{max-width:70ch;margin-bottom:clamp(20px,3vw,32px);}
.page-news .news-feature__grid{display:grid;gap:18px;grid-template-columns:1fr;}
.page-news .news-lead{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  box-shadow:var(--by-shadow-card);
  overflow:hidden;
}
.page-news .news-lead__media{position:relative;background:var(--by-mist);}
.page-news .news-lead__media img{
  display:block;width:100%;height:auto;
  aspect-ratio:2/1;object-fit:cover;
}
.page-news .news-lead__pin{
  position:absolute;left:14px;bottom:14px;
  background:var(--by-amber);
  color:var(--by-midnight);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  padding:4px 10px;
  border:2px solid var(--by-midnight);
}
.page-news .news-lead__body{padding:clamp(18px,3vw,28px);}
.page-news .news-lead__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;}
.page-news .news-lead__body h3{
  margin:0 0 10px;
  font-size:clamp(1.18rem,3.2vw,1.6rem);
  line-height:1.32;
  font-weight:900;
  color:var(--by-indigo);
}
.page-news .news-lead__body p{
  margin:0 0 18px;
  font-size:.94rem;
  line-height:1.8;
  color:rgba(20,22,28,.8);
}

/* 时间标签 */
.page-news .news-time{
  display:inline-block;
  font-family:var(--by-font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  line-height:1.5;
  padding:2px 8px;
  border-radius:var(--by-radius);
  color:var(--by-midnight);
  background:var(--by-celadon-light);
  white-space:nowrap;
}
.page-news .news-time--light{
  background:rgba(168,203,191,.22);
  color:var(--by-celadon-light);
}

/* 最新更新 */
.page-news .news-latest{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-indigo);
  color:var(--by-paper);
  padding:clamp(18px,3vw,26px);
  box-shadow:var(--by-shadow-card);
}
.page-news .news-latest__title{
  margin:0 0 14px;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--by-amber-light);
}
.page-news .news-latest__list{list-style:none;margin:0;padding:0;}
.page-news .news-latest__list li{
  display:grid;
  gap:6px;
  padding:14px 0;
  border-top:1px solid rgba(247,244,237,.2);
}
.page-news .news-latest__list li:first-child{border-top:0;padding-top:0;}
.page-news .news-latest__list a{
  color:var(--by-paper);
  text-decoration:none;
  display:grid;
  gap:4px;
}
.page-news .news-latest__list a:hover .news-latest__t,
.page-news .news-latest__list a:focus-visible .news-latest__t{color:var(--by-amber-light);}
.page-news .news-latest__k{
  font-size:.68rem;
  letter-spacing:.1em;
  color:rgba(247,244,237,.62);
}
.page-news .news-latest__t{
  font-size:.94rem;
  font-weight:700;
  line-height:1.5;
  transition:color .25s var(--by-ease);
}
.page-news .news-latest__list .news-time{justify-self:start;}

/* 主体两栏 */
.page-news .news-body{padding-top:clamp(10px,2vw,20px);}
.page-news .news-body__grid{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr;}

/* 左栏 */
.page-news .news-side{display:grid;gap:18px;align-content:start;}
.page-news .news-side__title{
  margin:0;
  font-size:clamp(1.3rem,4vw,1.7rem);
  font-weight:900;
  line-height:1.25;
  color:var(--by-indigo);
}
.page-news .news-side__nav{
  display:grid;
  gap:8px;
  border-top:var(--news-rule);
  padding-top:14px;
}
.page-news .news-cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border:2px solid var(--by-line-strong);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  color:var(--by-indigo);
  text-decoration:none;
  font-size:.92rem;
  font-weight:700;
  transition:background .25s var(--by-ease),color .25s var(--by-ease),transform .25s var(--by-ease);
}
.page-news .news-cat__n{font-size:.72rem;color:rgba(20,22,28,.55);}
.page-news .news-cat:hover,
.page-news .news-cat:focus-visible{
  background:var(--by-indigo);
  color:var(--by-paper);
  transform:translate(-2px,-2px);
}
.page-news .news-cat:hover .news-cat__n,
.page-news .news-cat:focus-visible .news-cat__n{color:var(--by-amber-light);}
.page-news .news-cat--on{
  background:var(--by-indigo);
  color:var(--by-paper);
}
.page-news .news-cat--on .news-cat__n{color:var(--by-amber-light);}

.page-news .news-side__figure{margin:0;}
.page-news .news-side__figure .by-figure__frame{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  overflow:hidden;
  background:var(--by-mist);
}
.page-news .news-side__figure img{display:block;width:100%;height:auto;object-fit:cover;}

.page-news .news-side__box{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  border-left:8px solid var(--by-amber);
  background:var(--by-mist);
  padding:16px 18px;
  display:grid;
  gap:10px;
  justify-items:start;
}
.page-news .news-side__box-k{
  margin:0;
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--by-indigo-soft);
}
.page-news .news-side__box-t{
  margin:0;
  font-size:.86rem;
  line-height:1.7;
  color:rgba(20,22,28,.8);
}

/* 右栏流 */
.page-news .news-stream{display:grid;gap:clamp(34px,5vw,60px);}
.page-news .news-block{
  border-top:2px solid var(--by-indigo);
  padding-top:clamp(16px,2.5vw,26px);
  scroll-margin-top:24px;
}
.page-news .news-block__num{
  margin:0;
  font-size:.8rem;
  letter-spacing:.14em;
  color:var(--by-amber);
  font-weight:700;
}
.page-news .news-block__title{
  margin:.25em 0 .4em;
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--by-indigo);
}
.page-news .news-block__lede{
  margin:0 0 clamp(16px,2.5vw,24px);
  max-width:66ch;
  font-size:.95rem;
  line-height:1.8;
  color:rgba(20,22,28,.8);
}
.page-news .news-block__head--split{display:grid;gap:18px;grid-template-columns:1fr;}
.page-news .news-block__figure{margin:0;}
.page-news .news-block__figure .by-figure__frame{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-mist);
  overflow:hidden;
}
.page-news .news-block__figure img{display:block;width:100%;height:auto;object-fit:cover;}

/* 折叠列表 */
.page-news .news-acc{border-bottom:var(--news-line);}
.page-news .news-row{
  display:grid;
  grid-template-columns:2.1rem 1fr auto;
  align-items:center;
  gap:6px 10px;
  width:100%;
  margin:0;
  padding:14px 2px;
  background:transparent;
  border:0;
  border-top:var(--news-line);
  border-radius:0;
  font:inherit;
  text-align:left;
  color:var(--by-ink);
  cursor:pointer;
  transition:background .2s var(--by-ease),padding-left .2s var(--by-ease);
}
.page-news .news-acc__item:first-child .news-row{border-top:var(--news-rule);}
.page-news .news-row:hover,
.page-news .news-row:focus-visible{
  background:rgba(243,201,119,.28);
  padding-left:10px;
  outline:none;
}
.page-news .news-row__num{
  font-size:.78rem;
  color:var(--by-amber);
  font-weight:700;
}
.page-news .news-row__title{
  font-size:.97rem;
  font-weight:700;
  line-height:1.5;
  color:var(--by-indigo);
}
.page-news .news-row .news-time{grid-column:2;}
.page-news .news-row .by-acc__icon{
  grid-column:3;
  grid-row:1 / span 2;
  justify-self:end;
  width:1.25rem;
  height:1.25rem;
  border:2px solid var(--by-indigo);
  position:relative;
  flex:none;
}
.page-news .news-row .by-acc__icon::before,
.page-news .news-row .by-acc__icon::after{
  content:"";
  position:absolute;
  background:var(--by-indigo);
  transition:transform .2s var(--by-ease);
}
.page-news .news-row .by-acc__icon::before{left:3px;right:3px;top:50%;height:2px;margin-top:-1px;}
.page-news .news-row .by-acc__icon::after{top:3px;bottom:3px;left:50%;width:2px;margin-left:-1px;}
.page-news .news-row[aria-expanded="true"] .by-acc__icon::after{transform:scaleY(0);}
.page-news .news-row[aria-expanded="true"]{background:rgba(168,203,191,.22);}
.page-news .by-acc__panel{
  padding:2px 0 18px;
  border-left:4px solid var(--by-celadon);
  padding-left:14px;
  margin:0 0 6px 2.1rem;
}
.page-news .by-acc__panel p{
  margin:0;
  font-size:.9rem;
  line-height:1.85;
  color:rgba(20,22,28,.8);
}

/* 服务说明专题卡 */
.page-news .news-topics{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.page-news .news-topic{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  padding:clamp(16px,2.5vw,22px);
  display:grid;
  gap:8px;
  align-content:start;
  transition:transform .25s var(--by-ease),box-shadow .25s var(--by-ease);
}
.page-news .news-topic:hover{
  transform:translate(-3px,-3px);
  box-shadow:var(--by-shadow-card);
}
.page-news .news-topic__k{
  font-size:.7rem;
  letter-spacing:.12em;
  color:var(--by-celadon);
  font-weight:700;
}
.page-news .news-topic h3{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  line-height:1.4;
  color:var(--by-indigo);
}
.page-news .news-topic p{
  margin:0;
  font-size:.88rem;
  line-height:1.8;
  color:rgba(20,22,28,.78);
}
.page-news .news-topic__link{
  justify-self:start;
  margin-top:4px;
  font-size:.84rem;
  font-weight:700;
  color:var(--by-indigo);
  text-decoration:none;
  border-bottom:2px solid var(--by-amber);
  padding-bottom:2px;
}
.page-news .news-topic__link:hover,
.page-news .news-topic__link:focus-visible{color:var(--by-amber);}

/* 实践与区域 */
.page-news .news-practice__figure{margin:0 0 clamp(18px,3vw,26px);}
.page-news .news-practice__figure .by-figure__frame{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-mist);
  overflow:hidden;
}
.page-news .news-practice__figure img{display:block;width:100%;height:auto;object-fit:cover;}
.page-news .news-practice__grid{display:grid;gap:14px;grid-template-columns:1fr;}
.page-news .news-case{
  border-left:6px solid var(--by-indigo);
  background:var(--by-mist);
  border-radius:var(--by-radius);
  padding:18px 20px;
  display:grid;
  gap:8px;
  align-content:start;
}
.page-news .news-case h3{
  margin:0;
  font-size:1.02rem;
  font-weight:900;
  color:var(--by-indigo);
  line-height:1.4;
}
.page-news .news-case p{
  margin:0;
  font-size:.88rem;
  line-height:1.8;
  color:rgba(20,22,28,.8);
}
.page-news .news-area{
  margin-top:18px;
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  padding:clamp(16px,2.5vw,22px);
}
.page-news .news-area__k{
  margin:0 0 10px;
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--by-celadon);
  font-weight:700;
}
.page-news .news-area__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-news .news-area__list li{
  font-size:.88rem;
  line-height:1.75;
  color:rgba(20,22,28,.82);
  padding-left:16px;
  position:relative;
}
.page-news .news-area__list li::before{
  content:"";
  position:absolute;
  left:0;top:.7em;
  width:7px;height:7px;
  background:var(--by-amber);
}
.page-news .news-area__note{
  margin:14px 0 0;
  padding-top:12px;
  border-top:var(--news-line);
  font-size:.8rem;
  color:rgba(20,22,28,.6);
  font-family:var(--by-font-mono);
  letter-spacing:.02em;
}

/* 更新节奏 */
.page-news .news-rhythm__grid{display:grid;gap:14px;grid-template-columns:1fr;}
.page-news .news-ritem{
  border:var(--news-rule);
  border-top:8px solid var(--by-celadon);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  padding:18px 20px;
  display:grid;
  gap:8px;
  align-content:start;
}
.page-news .news-ritem__freq{
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--by-indigo-soft);
  font-weight:700;
}
.page-news .news-ritem h3{
  margin:0;
  font-size:1.02rem;
  font-weight:900;
  line-height:1.4;
  color:var(--by-indigo);
}
.page-news .news-ritem p{
  margin:0;
  font-size:.88rem;
  line-height:1.8;
  color:rgba(20,22,28,.78);
}
.page-news .news-get{
  margin-top:18px;
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-amber-light);
  padding:clamp(18px,3vw,28px);
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  align-items:center;
  box-shadow:var(--by-shadow-card);
}
.page-news .news-get h3{
  margin:0 0 8px;
  font-size:clamp(1.1rem,3vw,1.35rem);
  font-weight:900;
  line-height:1.35;
  color:var(--by-midnight);
}
.page-news .news-get p{
  margin:0;
  font-size:.9rem;
  line-height:1.8;
  color:var(--by-midnight);
}
.page-news .news-get__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-news .news-block__foot{
  margin:18px 0 0;
  font-size:.85rem;
  line-height:1.8;
  color:rgba(20,22,28,.7);
}
.page-news .news-block__foot a{
  color:var(--by-indigo);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--by-amber);
}
.page-news .news-block__foot a:hover,
.page-news .news-block__foot a:focus-visible{color:var(--by-amber);}

/* 响应式 */
@media (min-width:600px){
  .page-news .news-head__marks{grid-template-columns:repeat(3,1fr);}
  .page-news .news-row{grid-template-columns:2.4rem 1fr auto 1.4rem;gap:10px 12px;}
  .page-news .news-row .news-time{grid-column:auto;}
  .page-news .news-row .by-acc__icon{grid-column:4;grid-row:auto;}
  .page-news .news-topics{grid-template-columns:repeat(2,1fr);}
  .page-news .news-practice__grid{grid-template-columns:repeat(2,1fr);}
  .page-news .news-rhythm__grid{grid-template-columns:repeat(2,1fr);}
  .page-news .news-get{grid-template-columns:1.6fr 1fr;}
}

@media (min-width:900px){
  .page-news .news-feature__grid{grid-template-columns:1.55fr .85fr;align-items:start;}
  .page-news .news-body__grid{grid-template-columns:270px minmax(0,1fr);align-items:start;}
  .page-news .news-side{position:sticky;top:24px;}
  .page-news .news-block__head--split{grid-template-columns:minmax(0,1fr) 340px;align-items:start;}
  .page-news .news-topics{grid-template-columns:repeat(3,1fr);}
  .page-news .news-rhythm__grid{grid-template-columns:repeat(3,1fr);}
  .page-news .news-practice__grid{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:1100px){
  .page-news .news-body__grid{grid-template-columns:300px minmax(0,1fr);}
}

@media (prefers-reduced-motion:reduce){
  .page-news .news-row,
  .page-news .news-cat,
  .page-news .news-topic{transition:none;}
}


<main id="main-content" class="page-news">
  <div class="by-wrap news-top">
    <nav class="by-crumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">观察报告</li>
      </ol>
    </nav>
    <div class="news-head">
      <p class="by-eyebrow">观察报告 · 每周更新 / 每月专题</p>
      <h1>版本一变，服务的细节就该有人先讲明白</h1>
      <p class="news-head__lede">准备升级、增加协作角色，或者要把品牌信息铺到外区域之前，团队最想知道的往往是别人已经遇到过什么、工单多久能接上话、新界面改到了哪一处。博业服务把每周的版本变化、每月的服务专题和每季度的区域走访整理成一份可以长期翻阅的报告集，让贵司在内部讨论时手里有具体依据，而不是只有一句“再看看”。</p>
      <ul class="news-head__marks">
        <li><span class="by-mono">06</span>本周更新篇目</li>
        <li><span class="by-mono">48</span>帮助中心常见问题同步更新</li>
        <li><span class="by-mono">28</span>省级行政区服务覆盖</li>
      </ul>
    </div>
  </div>

  <section class="by-section news-feature" aria-labelledby="feature-title">
    <div class="by-wrap">
      <div class="news-feature__head">
        <p class="by-eyebrow">01 / 本期索引</p>
        <h2 class="by-section__title" id="feature-title">本周先读这一篇</h2>
        <p class="by-lede">每周挑一篇与版本选择、售后判断最贴近的文章放在最前面，配齐操作路径和界面截图；其余更新按发布时间排在右侧。</p>
      </div>

      <div class="news-feature__grid">
        <article class="news-lead">
          <div class="news-lead__media">
            <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="新版板块索引界面的抽象头图，含浏览器框、版本标签和网格线条">
            <span class="news-lead__pin by-mono">V6</span>
          </div>
          <div class="news-lead__body">
            <div class="news-lead__meta">
              <span class="by-tag by-tag--amber">版本更新</span>
              <span class="news-time">本周更新</span>
            </div>
            <h3>第 6 版新版板块上线后，三个默认视图各管一件事</h3>
            <p>最近更新视图适合每天扫一眼，本周动过哪些模块一目了然；版本差异视图留给升级前的内部评审，两个版本的能力并排摆开；服务说明视图在客户提问时最顺手，支持时段、资料权限都写在同一处。文章把三者的切换位置和适用场合逐一说清，也附上了按模块筛选的实际操作步骤。</p>
            <a class="by-btn by-btn--solid by-btn--sm" href="#version">阅读全文</a>
          </div>
        </article>

        <aside class="news-latest" aria-label="最新更新">
          <h3 class="news-latest__title">最新更新</h3>
          <ol class="news-latest__list">
            <li>
              <a href="#version">
                <span class="news-latest__k by-mono">版本更新</span>
                <span class="news-latest__t">按模块筛选版本差异的三种用法</span>
              </a>
              <span class="news-time news-time--light">本周更新</span>
            </li>
            <li>
              <a href="#service">
                <span class="news-latest__k by-mono">服务说明</span>
                <span class="news-latest__t">工单提交时间落在下班后，响应怎么排</span>
              </a>
              <span class="news-time news-time--light">本周更新</span>
            </li>
            <li>
              <a href="#service">
                <span class="news-latest__k by-mono">服务说明</span>
                <span class="news-latest__t">四个人以上的团队，权限该怎么分</span>
              </a>
              <span class="news-time news-time--light">上月发布</span>
            </li>
            <li>
              <a href="#practice">
                <span class="news-latest__k by-mono">客户实践</span>
                <span class="news-latest__t">两个厂区的品牌信息，怎么在一个框架里统一</span>
              </a>
              <span class="news-time news-time--light">上月发布</span>
            </li>
            <li>
              <a href="#practice">
                <span class="news-latest__k by-mono">区域观察</span>
                <span class="news-latest__t">华中节点走访：跨省协同最常卡在哪一步</span>
              </a>
              <span class="news-time news-time--light">季度专题</span>
            </li>
            <li>
              <a href="#rhythm">
                <span class="news-latest__k by-mono">栏目说明</span>
                <span class="news-latest__t">今年报告的更新节奏与订阅方式</span>
              </a>
              <span class="news-time news-time--light">持续更新</span>
            </li>
          </ol>
        </aside>
      </div>
    </div>
  </section>

  <section class="by-section news-body">
    <div class="by-wrap news-body__grid">
      <aside class="news-side">
        <p class="by-eyebrow">02 / 栏目分类</p>
        <p class="news-side__title">按您关心的问题找文章</p>
        <nav class="news-side__nav" aria-label="报告分类">
          <a class="news-cat news-cat--on" href="#version" aria-current="true">
            <span class="news-cat__name">版本更新与新版板块</span>
            <span class="by-mono news-cat__n">04</span>
          </a>
          <a class="news-cat" href="#service">
            <span class="news-cat__name">服务说明专题</span>
            <span class="by-mono news-cat__n">03</span>
          </a>
          <a class="news-cat" href="#practice">
            <span class="news-cat__name">客户实践与区域观察</span>
            <span class="by-mono news-cat__n">04</span>
          </a>
          <a class="news-cat" href="#rhythm">
            <span class="news-cat__name">更新节奏与获取方式</span>
            <span class="by-mono news-cat__n">01</span>
          </a>
        </nav>

        <figure class="by-figure by-figure--square news-side__figure">
          <div class="by-figure__frame">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="四类报告标签与索引线稿组成的方形图形" loading="lazy" decoding="async">
          </div>
          <figcaption class="by-figure__caption">版本、服务、实践、区域四条线交替阅读，判断会更完整。</figcaption>
        </figure>

        <div class="news-side__box">
          <p class="by-mono news-side__box-k">QUICK / 版本对照</p>
          <p class="news-side__box-t">两个版本究竟差在哪几项，版本对照把所有模块排在同一页，支持时段和导出能力一次看全。</p>
          <a class="by-btn by-btn--sm" href="/tools/">打开版本对照</a>
        </div>
      </aside>

      <div class="news-stream">
        <article class="news-block" id="version">
          <div class="news-block__head">
            <p class="by-mono news-block__num">03</p>
            <h2 class="news-block__title">版本更新与新版板块</h2>
            <p class="news-block__lede">在浏览器查看博业新版板块，首页先给最近更新、版本差异、服务说明三个默认视图，再按版本、模块或更新时间缩小范围，不必逐页翻找。</p>
          </div>

          <div class="by-acc news-acc" data-acc>
            <div class="by-acc__item">
              <button class="by-acc__trigger news-row" type="button" aria-expanded="false" aria-controls="acc-v1" data-acc-trigger>
                <span class="news-row__num by-mono">01</span>
                <span class="news-row__title">第 6 版新版板块的三个默认视图怎么配合</span>
                <span class="news-time">本周更新</span>
                <span class="by-acc__icon" aria-hidden="true"></span>
              </button>
              <div class="by-acc__panel" id="acc-v1" hidden>
                <p>每天开一次看最近更新，升级前评审看版本差异，客户临时提问时切到服务说明，三段信息不用来回切换页面。视图之间的位置固定在标题下方，长期使用的人很快就能形成肌肉记忆。</p>
              </div>
            </div>

            <div class="by-acc__item">
              <button class="by-acc__trigger news-row" type="button" aria-expanded="false" aria-controls="acc-v2" data-acc-trigger>
                <span class="news-row__num by-mono">02</span>
                <span class="news-row__title">按版本、模块和更新时间筛选，分别适合谁</span>
                <span class="news-time">持续更新</span>
                <span class="by-acc__icon" aria-hidden="true"></span>
              </button>
              <div class="by-acc__panel" id="acc-v2" hidden>
                <p>版本筛选留给升级前的内部评审；模块筛选适合只关心其中几项能力的团队，比如只看售后反馈与资料导出；更新时间适合每月复盘时截取当月的变更记录，交给不常登录的同事。</p>
              </div>
            </div>

            <div class="by-acc__item">
              <button class="by-acc__trigger news-row" type="button" aria-expanded="false" aria-controls="acc-v3" data-acc-trigger>
                <span class="news-row__num by-mono">03</span>
                <span class="news-row__title">从第 5 版到第 6 版，索引结构动了三处</span>
                <span class="news-time">上月发布</span>
                <span class="by-acc__icon" aria-hidden="true"></span>
              </button>
              <div class="by-acc__panel" id="acc-v3" hidden>
                <p>条目改为按模块归组，更新时间作为独立标识挂在每条右侧，差异说明可以直接从条目跳到对应的模块解释。老用户升级后如果找不到某一项，先从模块分组入手，通常两步就能回到原位。</p>
              </div>
            </div>

            <div class="by-acc__item">
              <button class="by-acc__trigger news-row" type="button" aria-expanded="false" aria-controls="acc-v4" data-acc-trigger>
                <span class="news-row__num by-mono">04</span>
                <span class="news-row__title">增强版的模块级导出，说明写在哪一条下面</span>
                <span class="news-time">上月发布</span>
                <span class="by-acc__icon" aria-hidden="true"></span>
              </button>
              <div class="by-acc__panel" id="acc-v4" hidden>
                <p>导出说明挂在对应模块条目下，写清可导出的字段与文件类型，方便交接给外部设计或数据同事。标准版在基础资料下载处可以取到品牌信息表、版本对照表和服务记录摘要三类文件。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="news-block" id="service">
          <div class="news-block__head news-block__head--split">
            <div>
              <p class="by-mono news-block__num">04</p>
              <h2 class="news-block__title">服务说明专题</h2>
              <p class="news-block__lede">每月挑一个最常被追问的判断问题讲透：支持时段怎么排、承诺与反馈为什么放在一起、多角色团队怎么分权。看完仍有疑问，帮助中心有更细的问答。</p>
            </div>
            <figure class="by-figure by-figure--tall news-block__figure">
              <div class="by-figure__frame">
                <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="服务时长、售后承诺和评价反馈关系的专题图表" loading="lazy" decoding="async">
              </div>
              <figcaption class="by-figure__caption">从提交到评价，一条服务链上的三个观察点。</figcaption>
            </figure>
          </div>

          <div class="news-topics">
            <article class="news-topic">
              <span class="by-mono news-topic__k">SVC-01</span>
              <h3>支持时段与首次响应，两个版本差在哪</h3>
              <p>标准版工作日 9:00-18:00 在线支持，工单首次响应不超过 4 小时；增强版 8:30 开始、19:00 结束，首次响应压缩到 2 小时。专题里把午休、临近下班和节假日的排期一并写清，也说明了跨版本协作时按哪个时段执行。</p>
              <a class="news-topic__link" href="/help/">在帮助中心看服务时长说明</a>
            </article>

            <article class="news-topic">
              <span class="by-mono news-topic__k">SVC-02</span>
              <h3>承诺和评价放在同一处，看结果更省事</h3>
              <p>不论标准版还是增强版，提交后都进入同一处处理队列，按版本对应的响应时长分级推进。处理进度和后续评价收在同一栏目里，切换一下就能看到别人对同类问题的真实感受，不必另找地方拼凑判断依据。</p>
              <a class="news-topic__link" href="/tools/">看两个版本的处理差异</a>
            </article>

            <article class="news-topic">
              <span class="by-mono news-topic__k">SVC-03</span>
              <h3>四个人以上的团队，角色怎么分</h3>
              <p>常见的分法是：品牌负责人管信息展示与文案，运营同事管版本订阅与月度复盘，采购或行政对接资料导出，服务顾问则负责季度回访。增强版的多角色权限让这几类人各看各的，交接时不必共用同一账号。</p>
              <a class="news-topic__link" href="/help/">查看账号权限问答</a>
            </article>
          </div>
        </article>

        <article class="news-block" id="practice">
          <div class="news-block__head">
            <p class="by-mono news-block__num">05</p>
            <h2 class="news-block__title">客户实践与区域观察</h2>
            <p class="news-block__lede">不同行业的团队怎么用版本对照和服务说明，是我们每季度走访时最愿意花时间听的部分。这里记下做法，也记下走弯路的环节。</p>
          </div>

          <figure class="by-figure by-figure--wide news-practice__figure">
            <div class="by-figure__frame">
              <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="区域服务节点与连线组成的抽象观察图" loading="lazy" decoding="async">
            </div>
            <figcaption class="by-figure__caption">以山西为基点，华北、华中、华东、华南与西南五个协作节点轮值走访。</figcaption>
          </figure>

          <div class="news-practice__grid">
            <article class="news-case">
              <span class="by-tag by-tag--celadon">制造</span>
              <h3>两个厂区，一套品牌信息</h3>
              <p>一家制造客户的品牌组只有三个人，却要同时照顾总部与外地厂区的对外说法。他们把展示内容统一在标准版里，遇到需要交给外部设计公司的部分，用增强版的模块级导出单独取数，两边版本不再互相覆盖。</p>
            </article>

            <article class="news-case">
              <span class="by-tag by-tag--celadon">零售</span>
              <h3>总部管版本，门店只管用</h3>
              <p>连锁零售客户的难点在人：门店店长不关心版本号，只需要拿到准确的品牌表达。于是总部用增强版管理角色与回访，门店以标准版账号查看展示内容，每季度由服务顾问整理一次变更摘要下发。</p>
            </article>

            <article class="news-case">
              <span class="by-tag by-tag--celadon">专业服务</span>
              <h3>把季度回访变成复盘材料</h3>
              <p>一家专业服务机构把每季度的回访记录存档，年终直接用作内部复盘：哪些模块真正被使用、哪些权限设了却没人动。他们的经验是，回访前先把当季度的使用情况过一遍，沟通效率会明显提升。</p>
            </article>
          </div>

          <div class="news-area">
            <p class="by-mono news-area__k">区域观察</p>
            <ul class="news-area__list">
              <li>华北与华中节点：跨省协作最常卡在角色交接，走访中整理出一份四人以上团队的分权建议。</li>
              <li>华东与华南节点：渠道服务商使用频繁，8 个行业的版本选择偏好差异明显。</li>
              <li>西南节点：中小企业居多，对开通时长和资料导出更敏感，增强版通常在第二季度进入。</li>
            </ul>
            <p class="news-area__note">服务网络覆盖 28 个省级行政区，12 家渠道服务商参与区域协同。</p>
          </div>
        </article>

        <article class="news-block" id="rhythm">
          <div class="news-block__head">
            <p class="by-mono news-block__num">06</p>
            <h2 class="news-block__title">更新节奏与获取方式</h2>
            <p class="news-block__lede">报告按周、按月、按季度三层推进，节奏稳定，适合长期跟进；需要纸面材料时，摘要可以邮件索取。</p>
          </div>

          <div class="news-rhythm__grid">
            <article class="news-ritem">
              <span class="by-mono news-ritem__freq">WEEKLY</span>
              <h3>每周四：版本与使用短文</h3>
              <p>当周新版板块的变化、一两个操作细节，篇幅控制在五分钟能读完，适合贴进内部周报。</p>
            </article>
            <article class="news-ritem">
              <span class="by-mono news-ritem__freq">MONTHLY</span>
              <h3>每月一期：服务说明专题</h3>
              <p>围绕一个判断问题展开，例如支持时段怎么算、多角色怎么分权，配操作路径与问答入口。</p>
            </article>
            <article class="news-ritem">
              <span class="by-mono news-ritem__freq">QUARTERLY</span>
              <h3>每季度：区域服务观察</h3>
              <p>记录各节点的走访发现与行业差异，每年还会汇总一份版本使用趋势摘要，供年度规划参考。</p>
            </article>
          </div>

          <div class="news-get">
            <div class="news-get__body">
              <h3>需要一份能转发的更新摘要？</h3>
              <p>写信到客服邮箱，说明贵司所属行业、团队人数和关注方向，我们会把最近几期的摘要整理成一份文件回复。工作日 9:00-18:00 内回复；如需电话沟通，在邮件中留下联系方式，客服会主动回拨。</p>
            </div>
            <div class="news-get__acts">
              <a class="by-btn by-btn--amber" href="mailto:contact@boye-hub.com.cn">写邮件索取摘要</a>
              <a class="by-btn by-btn--sm" href="/find-us/">查看联系方式</a>
            </div>
          </div>

          <p class="news-block__foot">想先了解团队与服务体系，可翻阅<a href="/brand/">品牌档案</a>；要直接比较两个版本，从<a href="/tools/">版本对照</a>开始更快。</p>
        </article>
      </div>
    </div>
  </section>
</main>

.page-news{
  --news-rule:2px solid var(--by-line-strong);
  --news-line:1px solid var(--by-line);
  background:var(--by-paper);
  color:var(--by-ink);
  font-family:var(--by-font-cn);
  line-height:1.75;
  overflow-x:clip;
}
.page-news .by-mono{font-family:var(--by-font-mono);}

/* 页头 */
.page-news .news-top{
  position:relative;
  padding-top:clamp(16px,3vw,30px);
  padding-bottom:clamp(26px,5vw,54px);
  background-image:linear-gradient(var(--by-line) 1px,transparent 1px),linear-gradient(90deg,var(--by-line) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:center bottom;
}
.page-news .news-top::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--by-indigo);
  opacity:.85;
}
.page-news .news-head{max-width:900px;padding-top:clamp(14px,3vw,26px);}
.page-news .news-head h1{
  margin:.35em 0 .3em;
  font-size:clamp(2rem,7vw,4.1rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--by-indigo);
}
.page-news .news-head__lede{
  margin:0;
  max-width:64ch;
  font-size:clamp(.95rem,1.5vw,1.05rem);
  line-height:1.8;
  color:rgba(20,22,28,.82);
}
.page-news .news-head__marks{
  list-style:none;
  margin:clamp(20px,3vw,32px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--by-line);
  border:var(--news-rule);
  grid-template-columns:1fr;
}
.page-news .news-head__marks li{
  background:var(--by-paper);
  padding:14px 16px;
  font-size:.86rem;
  display:flex;
  align-items:baseline;
  gap:.6em;
  color:rgba(20,22,28,.78);
}
.page-news .news-head__marks .by-mono{
  font-size:1.15rem;
  font-weight:700;
  color:var(--by-amber);
}

/* 本期索引 */
.page-news .news-feature{padding-top:clamp(30px,5vw,56px);}
.page-news .news-feature__head{max-width:70ch;margin-bottom:clamp(20px,3vw,32px);}
.page-news .news-feature__grid{display:grid;gap:18px;grid-template-columns:1fr;}
.page-news .news-lead{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  box-shadow:var(--by-shadow-card);
  overflow:hidden;
}
.page-news .news-lead__media{position:relative;background:var(--by-mist);}
.page-news .news-lead__media img{
  display:block;width:100%;height:auto;
  aspect-ratio:2/1;object-fit:cover;
}
.page-news .news-lead__pin{
  position:absolute;left:14px;bottom:14px;
  background:var(--by-amber);
  color:var(--by-midnight);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  padding:4px 10px;
  border:2px solid var(--by-midnight);
}
.page-news .news-lead__body{padding:clamp(18px,3vw,28px);}
.page-news .news-lead__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;}
.page-news .news-lead__body h3{
  margin:0 0 10px;
  font-size:clamp(1.18rem,3.2vw,1.6rem);
  line-height:1.32;
  font-weight:900;
  color:var(--by-indigo);
}
.page-news .news-lead__body p{
  margin:0 0 18px;
  font-size:.94rem;
  line-height:1.8;
  color:rgba(20,22,28,.8);
}

/* 时间标签 */
.page-news .news-time{
  display:inline-block;
  font-family:var(--by-font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  line-height:1.5;
  padding:2px 8px;
  border-radius:var(--by-radius);
  color:var(--by-midnight);
  background:var(--by-celadon-light);
  white-space:nowrap;
}
.page-news .news-time--light{
  background:rgba(168,203,191,.22);
  color:var(--by-celadon-light);
}

/* 最新更新 */
.page-news .news-latest{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-indigo);
  color:var(--by-paper);
  padding:clamp(18px,3vw,26px);
  box-shadow:var(--by-shadow-card);
}
.page-news .news-latest__title{
  margin:0 0 14px;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--by-amber-light);
}
.page-news .news-latest__list{list-style:none;margin:0;padding:0;}
.page-news .news-latest__list li{
  display:grid;
  gap:6px;
  padding:14px 0;
  border-top:1px solid rgba(247,244,237,.2);
}
.page-news .news-latest__list li:first-child{border-top:0;padding-top:0;}
.page-news .news-latest__list a{
  color:var(--by-paper);
  text-decoration:none;
  display:grid;
  gap:4px;
}
.page-news .news-latest__list a:hover .news-latest__t,
.page-news .news-latest__list a:focus-visible .news-latest__t{color:var(--by-amber-light);}
.page-news .news-latest__k{
  font-size:.68rem;
  letter-spacing:.1em;
  color:rgba(247,244,237,.62);
}
.page-news .news-latest__t{
  font-size:.94rem;
  font-weight:700;
  line-height:1.5;
  transition:color .25s var(--by-ease);
}
.page-news .news-latest__list .news-time{justify-self:start;}

/* 主体两栏 */
.page-news .news-body{padding-top:clamp(10px,2vw,20px);}
.page-news .news-body__grid{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr;}

/* 左栏 */
.page-news .news-side{display:grid;gap:18px;align-content:start;}
.page-news .news-side__title{
  margin:0;
  font-size:clamp(1.3rem,4vw,1.7rem);
  font-weight:900;
  line-height:1.25;
  color:var(--by-indigo);
}
.page-news .news-side__nav{
  display:grid;
  gap:8px;
  border-top:var(--news-rule);
  padding-top:14px;
}
.page-news .news-cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border:2px solid var(--by-line-strong);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  color:var(--by-indigo);
  text-decoration:none;
  font-size:.92rem;
  font-weight:700;
  transition:background .25s var(--by-ease),color .25s var(--by-ease),transform .25s var(--by-ease);
}
.page-news .news-cat__name{line-height:1.4;}
.page-news .news-cat__n{font-size:.72rem;color:rgba(20,22,28,.55);}
.page-news .news-cat:hover,
.page-news .news-cat:focus-visible{
  background:var(--by-indigo);
  color:var(--by-paper);
  transform:translate(-2px,-2px);
}
.page-news .news-cat:hover .news-cat__n,
.page-news .news-cat:focus-visible .news-cat__n{color:var(--by-amber-light);}
.page-news .news-cat--on{
  background:var(--by-indigo);
  color:var(--by-paper);
}
.page-news .news-cat--on .news-cat__n{color:var(--by-amber-light);}

.page-news .news-side__figure{margin:0;}
.page-news .news-side__figure .by-figure__frame{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  overflow:hidden;
  background:var(--by-mist);
}
.page-news .news-side__figure img{display:block;width:100%;height:auto;object-fit:cover;}

.page-news .news-side__box{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  border-left:8px solid var(--by-amber);
  background:var(--by-mist);
  padding:16px 18px;
  display:grid;
  gap:10px;
  justify-items:start;
}
.page-news .news-side__box-k{
  margin:0;
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--by-indigo-soft);
}
.page-news .news-side__box-t{
  margin:0;
  font-size:.86rem;
  line-height:1.7;
  color:rgba(20,22,28,.8);
}

/* 右栏流 */
.page-news .news-stream{display:grid;gap:clamp(34px,5vw,60px);}
.page-news .news-block{
  border-top:2px solid var(--by-indigo);
  padding-top:clamp(16px,2.5vw,26px);
  scroll-margin-top:24px;
}
.page-news .news-block__num{
  margin:0;
  font-size:.8rem;
  letter-spacing:.14em;
  color:var(--by-amber);
  font-weight:700;
}
.page-news .news-block__title{
  margin:.25em 0 .4em;
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--by-indigo);
}
.page-news .news-block__lede{
  margin:0 0 clamp(16px,2.5vw,24px);
  max-width:66ch;
  font-size:.95rem;
  line-height:1.8;
  color:rgba(20,22,28,.8);
}
.page-news .news-block__head--split{display:grid;gap:18px;grid-template-columns:1fr;}
.page-news .news-block__figure{margin:0;}
.page-news .news-block__figure .by-figure__frame{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-mist);
  overflow:hidden;
}
.page-news .news-block__figure img{display:block;width:100%;height:auto;object-fit:cover;}

/* 折叠列表 */
.page-news .news-acc{border-bottom:var(--news-line);}
.page-news .news-row{
  display:grid;
  grid-template-columns:2.1rem 1fr auto;
  align-items:center;
  gap:6px 10px;
  width:100%;
  margin:0;
  padding:14px 2px;
  background:transparent;
  border:0;
  border-top:var(--news-line);
  border-radius:0;
  font:inherit;
  text-align:left;
  color:var(--by-ink);
  cursor:pointer;
  transition:background .2s var(--by-ease),padding-left .2s var(--by-ease);
}
.page-news .news-acc__item:first-child .news-row{border-top:var(--news-rule);}
.page-news .news-row:hover,
.page-news .news-row:focus-visible{
  background:rgba(243,201,119,.28);
  padding-left:10px;
  outline:none;
}
.page-news .news-row:focus-visible{box-shadow:inset 0 0 0 2px var(--by-indigo);}
.page-news .news-row__num{
  font-size:.78rem;
  color:var(--by-amber);
  font-weight:700;
}
.page-news .news-row__title{
  font-size:.97rem;
  font-weight:700;
  line-height:1.5;
  color:var(--by-indigo);
}
.page-news .news-row .news-time{grid-column:2;justify-self:start;}
.page-news .news-row .by-acc__icon{
  grid-column:3;
  grid-row:1 / span 2;
  justify-self:end;
  width:1.25rem;
  height:1.25rem;
  border:2px solid var(--by-indigo);
  position:relative;
  flex:none;
}
.page-news .news-row .by-acc__icon::before,
.page-news .news-row .by-acc__icon::after{
  content:"";
  position:absolute;
  background:var(--by-indigo);
  transition:transform .2s var(--by-ease);
}
.page-news .news-row .by-acc__icon::before{left:3px;right:3px;top:50%;height:2px;margin-top:-1px;}
.page-news .news-row .by-acc__icon::after{top:3px;bottom:3px;left:50%;width:2px;margin-left:-1px;}
.page-news .news-row[aria-expanded="true"] .by-acc__icon::after{transform:scaleY(0);}
.page-news .news-row[aria-expanded="true"]{background:rgba(168,203,191,.22);}
.page-news .by-acc__panel{
  padding:2px 0 18px 14px;
  border-left:4px solid var(--by-celadon);
  margin:0 0 6px 2.1rem;
}
.page-news .by-acc__panel p{
  margin:0;
  font-size:.9rem;
  line-height:1.85;
  color:rgba(20,22,28,.8);
}

/* 服务说明专题卡 */
.page-news .news-topics{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.page-news .news-topic{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  padding:clamp(16px,2.5vw,22px);
  display:grid;
  gap:8px;
  align-content:start;
  transition:transform .25s var(--by-ease),box-shadow .25s var(--by-ease);
}
.page-news .news-topic:hover{
  transform:translate(-3px,-3px);
  box-shadow:var(--by-shadow-card);
}
.page-news .news-topic__k{
  font-size:.7rem;
  letter-spacing:.12em;
  color:var(--by-celadon);
  font-weight:700;
}
.page-news .news-topic h3{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  line-height:1.4;
  color:var(--by-indigo);
}
.page-news .news-topic p{
  margin:0;
  font-size:.88rem;
  line-height:1.8;
  color:rgba(20,22,28,.78);
}
.page-news .news-topic__link{
  justify-self:start;
  margin-top:4px;
  font-size:.84rem;
  font-weight:700;
  color:var(--by-indigo);
  text-decoration:none;
  border-bottom:2px solid var(--by-amber);
  padding-bottom:2px;
}
.page-news .news-topic__link:hover,
.page-news .news-topic__link:focus-visible{color:var(--by-amber);}

/* 实践与区域 */
.page-news .news-practice__figure{margin:0 0 clamp(18px,3vw,26px);}
.page-news .news-practice__figure .by-figure__frame{
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-mist);
  overflow:hidden;
}
.page-news .news-practice__figure img{display:block;width:100%;height:auto;object-fit:cover;}
.page-news .news-practice__grid{display:grid;gap:14px;grid-template-columns:1fr;}
.page-news .news-case{
  border-left:6px solid var(--by-indigo);
  background:var(--by-mist);
  border-radius:var(--by-radius);
  padding:18px 20px;
  display:grid;
  gap:8px;
  align-content:start;
}
.page-news .news-case h3{
  margin:0;
  font-size:1.02rem;
  font-weight:900;
  color:var(--by-indigo);
  line-height:1.4;
}
.page-news .news-case p{
  margin:0;
  font-size:.88rem;
  line-height:1.8;
  color:rgba(20,22,28,.8);
}
.page-news .news-area{
  margin-top:18px;
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  padding:clamp(16px,2.5vw,22px);
}
.page-news .news-area__k{
  margin:0 0 10px;
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--by-celadon);
  font-weight:700;
}
.page-news .news-area__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-news .news-area__list li{
  font-size:.88rem;
  line-height:1.75;
  color:rgba(20,22,28,.82);
  padding-left:16px;
  position:relative;
}
.page-news .news-area__list li::before{
  content:"";
  position:absolute;
  left:0;top:.7em;
  width:7px;height:7px;
  background:var(--by-amber);
}
.page-news .news-area__note{
  margin:14px 0 0;
  padding-top:12px;
  border-top:var(--news-line);
  font-size:.8rem;
  color:rgba(20,22,28,.6);
  font-family:var(--by-font-mono);
  letter-spacing:.02em;
}

/* 更新节奏 */
.page-news .news-rhythm__grid{display:grid;gap:14px;grid-template-columns:1fr;}
.page-news .news-ritem{
  border:var(--news-rule);
  border-top:8px solid var(--by-celadon);
  border-radius:var(--by-radius);
  background:var(--by-paper);
  padding:18px 20px;
  display:grid;
  gap:8px;
  align-content:start;
}
.page-news .news-ritem__freq{
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--by-indigo-soft);
  font-weight:700;
}
.page-news .news-ritem h3{
  margin:0;
  font-size:1.02rem;
  font-weight:900;
  line-height:1.4;
  color:var(--by-indigo);
}
.page-news .news-ritem p{
  margin:0;
  font-size:.88rem;
  line-height:1.8;
  color:rgba(20,22,28,.78);
}
.page-news .news-get{
  margin-top:18px;
  border:var(--news-rule);
  border-radius:var(--by-radius);
  background:var(--by-amber-light);
  padding:clamp(18px,3vw,28px);
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  align-items:center;
  box-shadow:var(--by-shadow-card);
}
.page-news .news-get h3{
  margin:0 0 8px;
  font-size:clamp(1.1rem,3vw,1.35rem);
  font-weight:900;
  line-height:1.35;
  color:var(--by-midnight);
}
.page-news .news-get p{
  margin:0;
  font-size:.9rem;
  line-height:1.8;
  color:var(--by-midnight);
}
.page-news .news-get__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-news .news-block__foot{
  margin:18px 0 0;
  font-size:.85rem;
  line-height:1.8;
  color:rgba(20,22,28,.7);
}
.page-news .news-block__foot a{
  color:var(--by-indigo);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--by-amber);
}
.page-news .news-block__foot a:hover,
.page-news .news-block__foot a:focus-visible{color:var(--by-amber);}

/* 响应式 */
@media (min-width:600px){
  .page-news .news-head__marks{grid-template-columns:repeat(3,1fr);}
  .page-news .news-row{grid-template-columns:2.4rem 1fr auto 1.4rem;gap:10px 12px;}
  .page-news .news-row .news-time{grid-column:auto;}
  .page-news .news-row .by-acc__icon{grid-column:4;grid-row:auto;}
  .page-news .news-topics{grid-template-columns:repeat(2,1fr);}
  .page-news .news-practice__grid{grid-template-columns:repeat(2,1fr);}
  .page-news .news-rhythm__grid{grid-template-columns:repeat(2,1fr);}
  .page-news .news-get{grid-template-columns:1.6fr 1fr;}
}

@media (min-width:900px){
  .page-news .news-feature__grid{grid-template-columns:1.55fr .85fr;align-items:start;}
  .page-news .news-body__grid{grid-template-columns:270px minmax(0,1fr);align-items:start;}
  .page-news .news-side{position:sticky;top:24px;}
  .page-news .news-block__head--split{grid-template-columns:minmax(0,1fr) 340px;align-items:start;}
  .page-news .news-block__head--split .news-block__lede{margin-bottom:0;}
  .page-news .news-topics{grid-template-columns:repeat(3,1fr);}
  .page-news .news-rhythm__grid{grid-template-columns:repeat(3,1fr);}
  .page-news .news-practice__grid{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:1100px){
  .page-news .news-body__grid{grid-template-columns:300px minmax(0,1fr);}
}

@media (prefers-reduced-motion:reduce){
  .page-news .news-row,
  .page-news .news-cat,
  .page-news .news-topic{transition:none;}
}