/* 突优官网 · 子页样式（依赖 theme.css 的设计令牌） */

/* 顶部：面包屑 + 标题区 */
.sp-head{padding:calc(var(--s-900) + var(--s-600)) 0 var(--s-600);background:var(--bg)}
.sp-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-50);
  font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--fg-3);letter-spacing:.02em;
}
.sp-crumb a{color:var(--fg-3);transition:color 300ms var(--ease)}
.sp-crumb a:hover{color:var(--accent)}
.sp-crumb .sep{color:var(--fg-3)}
.sp-kicker{
  display:inline-flex;align-items:center;gap:var(--s-75);margin:var(--s-400) 0 var(--s-200);
  font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:.1em;color:var(--accent);font-weight:600;
}
.sp-kicker::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:var(--accent)}
.sp-head h1{
  font-size:clamp(var(--t-3xl),5vw,var(--t-5xl));line-height:1.12;letter-spacing:-0.025em;
  max-width:820px;
  background:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sp-head .sub{margin-top:var(--s-200);max-width:680px;font-size:var(--t-lg);line-height:var(--lh-lg);color:var(--fg-2)}
.sp-meta{margin-top:var(--s-300);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-100);font-size:var(--t-sm)}
.sp-meta .std{
  font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:.04em;color:var(--fg-2);
  background:var(--s1);border-radius:var(--r-sm);padding:var(--s-50) var(--s-75);
  font-variant-numeric:tabular-nums;
}
.sp-actions{margin-top:var(--s-400);display:flex;align-items:center;gap:var(--s-300);flex-wrap:wrap}

/* 正文两栏：内容 + 目录 */
.sp-main{padding:0 0 var(--s-800)}
.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--s-700);align-items:start}
.sp-article{min-width:0;max-width:760px}
.sp-article section{margin-bottom:var(--s-600)}
.sp-article h2{
  font-size:var(--t-2xl);line-height:var(--lh-2xl);font-weight:600;
  margin-bottom:var(--s-200);scroll-margin-top:calc(var(--s-900) + var(--s-300));
}
.sp-article h2 .n{
  font-size:var(--t-xs);letter-spacing:.08em;color:var(--fg-3);
  display:block;margin-bottom:var(--s-50);font-weight:500;font-variant-numeric:tabular-nums;
}
.sp-article p{font-size:var(--t-base);line-height:1.8;color:var(--fg-2);max-width:66ch}
.sp-article p + p{margin-top:var(--s-200)}
.sp-article b,.sp-article strong{color:var(--fg);font-weight:600}
.sp-article p a,.sp-article li a,.sp-article .sp-note a{color:var(--accent);transition:color 300ms var(--ease)}
.sp-article p a:hover,.sp-article li a:hover,.sp-article .sp-note a:hover{color:var(--accent-hi)}

/* 列表 */
.sp-list{list-style:none;display:flex;flex-direction:column;gap:var(--s-75);max-width:66ch}
.sp-list li{
  position:relative;padding-left:var(--s-300);
  font-size:var(--t-base);line-height:1.75;color:var(--fg-2);
}
.sp-list li::before{
  content:"";position:absolute;left:var(--s-75);top:11px;
  width:4px;height:4px;border-radius:var(--r-full);background:var(--accent);
}

/* 价值卡（原 .cards） */
.sp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-200);margin-top:var(--s-100)}
.sp-card{background:var(--s1);border-radius:var(--r-lg);padding:var(--s-300);transition:background-color 300ms var(--ease)}
.sp-card:hover{background:var(--s2)}
.sp-card b{display:block;font-size:var(--t-base);line-height:var(--lh-base);margin-bottom:var(--s-50)}
.sp-card span{display:block;font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--fg-2)}

/* 流程（原 .flow） */
.sp-steps{display:flex;flex-direction:column;gap:var(--s-75);margin-top:var(--s-100);max-width:66ch}
.sp-step{
  display:grid;grid-template-columns:var(--s-500) minmax(0,1fr);gap:var(--s-200);align-items:baseline;
  padding:var(--s-200) var(--s-300);border-radius:var(--r-md);background:var(--s1);
}
.sp-step .n{
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--accent);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sp-step span{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--fg-2)}

/* 表格 */
.sp-article .table-wrap{max-height:none;margin-top:var(--s-100)}
.sp-article table{min-width:0}
.sp-article thead th{background:var(--s2)}
.sp-article tbody td:first-child{color:var(--fg);font-weight:500}

/* 提示块 / 机构 */
.sp-note{
  background:var(--s1);border-radius:var(--r-lg);padding:var(--s-300);
  font-size:var(--t-sm);line-height:1.75;color:var(--fg-2);max-width:66ch;
}
.sp-note b{color:var(--fg)}

/* 相关认证 */
.sp-chips{display:flex;flex-wrap:wrap;gap:var(--s-75)}
.sp-chips a{
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--fg-2);
  background:var(--s1);border-radius:var(--r-sm);padding:var(--s-75) var(--s-100);
  transition:background-color 300ms var(--ease), color 300ms var(--ease);
}
.sp-chips a:hover{background:var(--s2);color:var(--fg)}

/* 目录 */
.sp-toc{position:sticky;top:calc(var(--s-900) + var(--s-300))}
.sp-toc h2{
  font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:.08em;color:var(--fg-3);
  font-weight:600;margin-bottom:var(--s-100);
}
.sp-toc ol{list-style:none;display:flex;flex-direction:column;gap:var(--s-25)}
.sp-toc a{
  display:block;padding:var(--s-50) 0 var(--s-50) var(--s-100);
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--fg-3);
  border-left:1px solid var(--line);
  transition:color 300ms var(--ease), border-color 300ms var(--ease);
}
.sp-toc a:hover{color:var(--fg-2)}
.sp-toc a.active{color:var(--fg);border-left-color:var(--accent)}


/* 列表页卡片（分类首页 /cert/ /prod/ …） */
.sp-count{font-size:var(--t-sm);color:var(--fg-3);font-variant-numeric:tabular-nums}
.sp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-100);margin-top:var(--s-200)}
.sp-tile{
  display:flex;flex-direction:column;gap:var(--s-25);
  background:var(--s1);border-radius:var(--r-md);padding:var(--s-200);
  transition:background-color 300ms var(--ease), transform 500ms var(--ease);
}
.sp-tile:hover{background:var(--s2);transform:translateY(-2px)}
.sp-tile b{font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:600;color:var(--fg)}
.sp-tile small{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--fg-3)}
.sp-tile:hover b{color:var(--accent)}
@media (max-width:1080px){.sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sp-tiles{grid-template-columns:minmax(0,1fr)}}

/* 尾部 CTA */
.sp-cta{
  margin-top:var(--s-600);background:var(--s1);border-radius:var(--r-xl);
  padding:var(--s-400);display:flex;align-items:center;justify-content:space-between;gap:var(--s-300);
}
.sp-cta b{display:block;font-size:var(--t-lg);line-height:var(--lh-lg);color:var(--fg)}
.sp-cta p{margin-top:var(--s-50);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--fg-3);max-width:52ch}

/* 移动端 */
@media (max-width:1080px){
  .sp-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-400)}
  .sp-toc{position:static;order:2;margin-top:var(--s-600)}
  .sp-toc ol{flex-direction:row;flex-wrap:wrap;gap:var(--s-50)}
  .sp-toc a{border-left:0;background:var(--s1);border-radius:var(--r-sm);padding:var(--s-50) var(--s-75)}
  .sp-toc a.active{background:var(--s2);color:var(--fg)}
}
@media (max-width:760px){
  .sp-cards{grid-template-columns:minmax(0,1fr)}
  .sp-cta{flex-direction:column;align-items:flex-start;padding:var(--s-300)}
  .sp-head{padding:calc(var(--s-900) + var(--s-400)) 0 var(--s-500)}
}