@charset "utf-8";
/* ==========================================================================
   上海品茶工作室 · UI v3
   Template: BENTO VIOLET  /  浅色 bento 网格 · 左轴分栏首屏
   01 令牌 02 基础 03 通告跑马灯 04 导航 05 首屏分栏+2x2拼贴+数据带
   06 区块通用 07 Bento 服务网格 08 文章双列卡 09 FAQ 左轴双栏
   10 横向 CTA 11 页脚 12 文章页 13 响应式
   ========================================================================== */

/* ---------- 01 令牌 ---------- */
:root{
--font:Arial,Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--dim:#7A7A8C;
--violet-deep:#3123B4;
--violet-soft:#605EF4;
--orange:#F63319;
--r4:23.2px;
--r3:16.8px;
--r2:15.8px;
--text:#4A4A57;
--surface2:#FAFAFC;
--sh:0 1px 2px rgba(20,20,32,.04), 0 10px 26px -18px rgba(20,20,32,.2);
--r1:9.9px;
--sh-h:0 2px 6px rgba(20,20,32,.05), 0 26px 54px -26px rgba(59,42,215,.36);
--max:1220px;
--line:#E6E8EE;
--line2:#EFEFF4;
--ink-bar:#141420;
--ink:#141420;
--violet:#3B2AD7;
--orange-soft:#F95C3E;
--surface:#FFFFFF;
--bg:#F5F5F8
}

/* ---------- 02 基础 ---------- */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
scroll-behavior:smooth}
body{background:var(--bg);font:400 16px/1.78 var(--font);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;margin:0}
img{height:auto;max-width:100%;display:block}
a{  text-decoration:none;
  color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{
letter-spacing:-.018em;
line-height:1.3;
font-weight:700;
color:var(--ink)
}
ul{margin:0;list-style:none;padding:0}
::selection{background:rgba(59,42,215,.2)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.nowrap{white-space:nowrap}
.navp7{z-index:1;position:relative}
.baseeg{padding:0 20px;max-width:var(--max);width:100%;margin:0 auto}
.a11y{overflow:hidden;position:absolute!important;height:1px;clip:rect(0 0 0 0);width:1px;white-space:nowrap}
.midjq{left:-9999px;position:absolute}
.midjq:focus{padding:10px 18px;box-shadow:var(--sh);background:var(--surface);border-radius:var(--r1);color:var(--violet);z-index:80;left:18px;top:14px}

/* ---------- 03 通告跑马灯 ---------- */
.pickb7{ position:relative;
 color:rgba(255,255,255,.88);
 overflow:hidden;
 background:var(--ink-bar)}
.hdgg{display:flex;
animation:barslide 30s linear infinite;
white-space:nowrap;
width:max-content;
padding:9px 0;
font-size:13px}
.hdgg span{display:inline-flex;padding:0 20px;align-items:center;gap:8px}
.hdgg span::before{height:5px;
border-radius:50%;
width:5px;
flex:none;
background:var(--orange-soft);
content:""}
@keyframes barslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 04 导航 ---------- */
.stackjs{-webkit-backdrop-filter:saturate(180%) blur(14px);background:rgba(255,255,255,.9);top:0;z-index:40;border-bottom:1px solid var(--line);position:sticky;backdrop-filter:saturate(180%) blur(14px)}
.frameuc{  margin:0 auto;
  gap:16px;
  align-items:center;
  height:68px;
  padding:0 20px;
  max-width:var(--max);
  display:flex}
.framex7{gap:10px;align-items:center;font-size:16px;display:flex;letter-spacing:-.012em;white-space:nowrap;font-weight:700;flex:none;color:var(--ink)}
.framex7 i{
width:30px;
background:linear-gradient(135deg,var(--violet),var(--orange));
flex:none;
position:relative;
height:30px;
border-radius:10px
}
.framex7 i::after{position:absolute;content:"";inset:9px;border:2px solid #fff;border-radius:4px}
.midjs{ gap:2px;
 flex:1;
 -webkit-overflow-scrolling:touch;
 scrollbar-width:none;
 overflow-x:auto;
 display:flex}
.midjs::-webkit-scrollbar{display:none}
.midjs a{color:var(--dim);white-space:nowrap;padding:9px 14px;transition:color .18s,background .18s;border-radius:var(--r1);font-size:15px;position:relative}
.midjs a:hover{ background:rgba(59,42,215,.06);
 color:var(--violet)}
.midjs a::after{content:"";bottom:4px;transform:scaleX(0);transition:transform .22s;transform-origin:left;background:linear-gradient(90deg,var(--violet),var(--orange));border-radius:2px;height:2px;position:absolute;left:14px;right:14px}
.midjs a:hover::after{transform:scaleX(1)}
.tilea9{font-weight:600;font-size:14.5px;display:inline-flex;transition:background .18s,transform .18s,box-shadow .18s;height:42px;letter-spacing:.01em;background:var(--ink);color:#fff;border-radius:999px;align-items:center;padding:0 22px;flex:none}
.tilea9:hover{box-shadow:0 12px 24px -12px rgba(59,42,215,.8);
background:var(--violet);
transform:translateY(-1px)}

/* ---------- 05 首屏 ---------- */
.laned0{  padding:56px 0 64px;
  background:
  radial-gradient(720px 420px at 96% -12%,rgba(59,42,215,.1),transparent 62%),
  radial-gradient(560px 340px at 2% 8%,rgba(246,51,25,.09),transparent 60%),var(--bg)}
.grpsz{ align-items:center;
 display:grid;
 gap:40px}
.itemht{gap:9px;padding:7px 15px;font-size:13px;background:rgba(59,42,215,.07);border-radius:999px;font-weight:600;color:var(--violet);align-items:center;border:1px solid rgba(59,42,215,.2);display:inline-flex}
.itemht b{
width:6px;
height:6px;
flex:none;
border-radius:50%;
background:var(--orange)
}
.lineuf{ margin-top:24px;
 line-height:1.16;
 font-size:clamp(28px,5.8vw,52px);
 letter-spacing:-.035em}
.mainuf{ max-width:600px;
 font-size:16.5px;
 color:var(--text);
 margin-top:22px}
.hdvq{gap:12px;flex-wrap:wrap;margin-top:30px;display:flex}
.liste8{align-items:center;display:inline-flex;border:1px solid transparent;height:50px;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;padding:0 26px;font-weight:600;border-radius:var(--r1);font-size:15px;justify-content:center}
.heroq1{background:var(--violet);box-shadow:0 16px 32px -16px rgba(59,42,215,.85);color:#fff}
.heroq1:hover{transform:translateY(-2px);
background:var(--violet-deep)}
.conttc{box-shadow:var(--sh);color:var(--ink);border-color:var(--line);background:var(--surface)}
.conttc:hover{border-color:rgba(246,51,25,.55);transform:translateY(-2px);color:var(--violet)}

.cellq4{grid-template-columns:1.1fr 1fr;gap:14px;display:grid;grid-template-rows:auto auto}
.cellq4 figure{ border-radius:var(--r3);
 box-shadow:var(--sh);
 margin:0;
 overflow:hidden;
 background:var(--surface2);
 border:1px solid var(--line)}
.cellq4 figure:nth-child(1){
grid-row:1/3;
position:relative
}
.cellq4 figure:nth-child(1) img{ position:absolute;
 inset:0;
 height:100%;
 object-fit:cover;
 width:100%}
.cellq4 figure:nth-child(2) img,.cellq4 figure:nth-child(3) img{object-fit:cover;width:100%;aspect-ratio:1/1}

.boxf4{background:var(--line);
margin-top:48px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px;
overflow:hidden;
border-radius:var(--r3);
border:1px solid var(--line)}
.boxf4 > div{background:var(--surface);padding:22px 20px}
.boxf4 b{display:block;
color:var(--ink);
letter-spacing:-.04em;
font-size:clamp(21px,3.6vw,29px);
font-variant-numeric:tabular-nums}
.boxf4 b i{color:var(--orange);font-style:normal}
.boxf4 span{
color:var(--dim);
display:block;
margin-top:6px;
font-size:13px
}

/* ---------- 06 区块通用 ---------- */
.flowkq{padding:78px 0}
.flowkq.midaw{ border-top:1px solid var(--line);
 background:var(--surface);
 border-bottom:1px solid var(--line)}
.carddv{max-width:680px;margin-bottom:42px}
.grpx6{
color:var(--orange);
font-size:12px;
font-weight:700;
letter-spacing:.2em;
align-items:center;
gap:8px;
display:inline-flex;
text-transform:uppercase
}
.grpx6::before{background:currentColor;width:22px;content:"";height:1.5px}
.carddv h2{font-size:clamp(23px,4.4vw,34px);letter-spacing:-.03em;margin-top:14px}
.carddv p{font-size:15.5px;margin-top:16px;color:var(--dim)}

/* ---------- 07 Bento 服务网格 ---------- */
.itemtd{display:grid;gap:16px;grid-template-columns:1fr}
.lineem{
transition:transform .22s,box-shadow .22s,border-color .22s;
background:var(--surface);
overflow:hidden;
position:relative;
box-shadow:var(--sh);
padding:26px;
display:flex;
border-radius:var(--r4);
flex-direction:column;
border:1px solid var(--line)
}
.lineem:hover{border-color:rgba(59,42,215,.34);box-shadow:var(--sh-h);transform:translateY(-4px)}
.lineem::before{
content:"";
pointer-events:none;
border-radius:50%;
height:120px;
right:-40px;
background:radial-gradient(circle,rgba(59,42,215,.09),transparent 70%);
width:120px;
position:absolute;
top:-40px
}
.chipdy{color:var(--orange);font-size:13px;font-weight:700;letter-spacing:.16em}
.lineem h3{font-size:18px;margin-top:14px;letter-spacing:-.02em}
.lineem p{color:var(--dim);margin-top:12px;font-size:14.7px}
.midk0{background:var(--surface2);
margin:-26px -26px 22px;
overflow:hidden}
.midk0 img{aspect-ratio:16/11;object-fit:cover;width:100%}
/* frame */
.lineem ul{margin-top:16px;gap:9px;display:grid}
.lineem li{font-size:14.3px;position:relative;padding-left:18px;color:var(--dim)}
.lineem li::before{height:7px;position:absolute;border-radius:2px;width:7px;content:"";top:9px;left:0;background:linear-gradient(135deg,var(--violet),var(--orange))}

/* ---------- 08 文章双列卡 ---------- */
.frameq5{  display:grid;
  gap:20px;
  grid-template-columns:1fr}
.tagwr{border:1px solid var(--line);
overflow:hidden;
border-radius:var(--r3);
box-shadow:var(--sh);
display:flex;
background:var(--surface);
flex-direction:column;
position:relative;
transition:transform .22s,box-shadow .22s,border-color .22s}
/* view */
.tagwr:hover{
transform:translateY(-4px);
border-color:rgba(59,42,215,.34);
box-shadow:var(--sh-h)
}
.nodeum{margin:0;background:var(--surface2);overflow:hidden;position:relative}
.nodeum img{
transition:transform .5s ease;
object-fit:cover;
width:100%;
aspect-ratio:4/3
}
.tagwr:hover .nodeum img{transform:scale(1.035)}
.flowbn{  top:12px;
  font-weight:800;
  color:transparent;
  letter-spacing:-.05em;
  position:absolute;
  font-size:38px;
  line-height:1;
  left:16px;
  -webkit-text-stroke:1.4px rgba(255,255,255,.7)}
.metab4{padding:22px 22px 24px;display:flex;flex:1;flex-direction:column}
.tagwr time{letter-spacing:.07em;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;color:var(--violet)}
.tagwr h3{margin-top:10px;
letter-spacing:-.022em;
font-size:18.5px;
line-height:1.45}
.tagwr h3 a:hover{color:var(--violet)}
.tagwr p{font-size:14.6px;color:var(--dim);margin-top:12px;flex:1}
.icoyt{gap:7px;color:var(--orange);margin-top:18px;font-weight:600;align-items:center;display:inline-flex;transition:gap .2s;font-size:14.5px}
.icoyt:hover{gap:12px}

/* ---------- 09 FAQ 左轴双栏 ---------- */
.boxs3{display:grid;gap:28px}
.flowp7{max-width:420px}
.flowp7 h2{letter-spacing:-.03em;font-size:clamp(22px,4vw,31px);margin-top:14px}
.flowp7 p{color:var(--dim);margin-top:16px;font-size:15.4px}
.listu6{margin-top:24px}
.outerxr{  gap:12px;
  display:grid}
.slotkv{box-shadow:var(--sh);
background:var(--surface);
border-radius:var(--r2);
padding:0 22px;
border:1px solid var(--line);
transition:border-color .2s,box-shadow .2s}
.slotkv:hover{border-color:rgba(59,42,215,.3)}
.slotkv[open]{  border-color:rgba(59,42,215,.5);
  box-shadow:var(--sh-h)}
.slotkv summary{
display:flex;
transition:color .18s;
align-items:center;
justify-content:space-between;
cursor:pointer;
list-style:none;
padding:20px 0;
gap:16px;
color:var(--ink);
font-size:15.6px;
font-weight:600
}
.slotkv summary::-webkit-details-marker{display:none}
.slotkv summary:hover{color:var(--violet)}
.slotkv summary::after{content:"＋";
color:var(--orange);
line-height:1;
flex:none;
font-size:17px}
.slotkv[open] summary::after{content:"－"}
.slotkv .boardku{font-size:14.8px;border-top:1px solid var(--line2);padding:0 0 22px;color:var(--dim);padding-top:16px}

/* ---------- 10 横向 CTA ---------- */
.itemd8{overflow:hidden;border-radius:var(--r4);box-shadow:var(--sh-h);border:1px solid var(--line);background:linear-gradient(118deg,rgba(59,42,215,.1),rgba(246,51,25,.09) 62%,rgba(59,42,215,.06)),var(--surface);padding:44px 30px;position:relative}
.itemd8::after{content:"";opacity:.6;pointer-events:none;position:absolute;background:repeating-linear-gradient(115deg,transparent 0 20px,rgba(59,42,215,.05) 20px 40px);inset:0}
.leadq7{gap:24px;display:grid;position:relative}
.noten3 h2{letter-spacing:-.03em;font-size:clamp(22px,4.2vw,32px)}
.noten3 p{
font-size:15.8px;
max-width:560px;
margin-top:14px;
color:var(--text)
}
.boardrs{flex-wrap:wrap;gap:12px;display:flex}

/* ---------- 11 页脚 ---------- */
.tagj1{border-top:1px solid var(--line);padding:56px 0 28px;background:var(--surface)}
.frameux{gap:30px;
display:grid}
.boxfd h4{text-transform:uppercase;margin-bottom:16px;letter-spacing:.16em;font-size:13px;color:var(--dim)}
.outerhe{gap:10px;align-items:center;font-weight:700;color:var(--ink);margin-bottom:14px;font-size:16px;display:flex}
.outerhe i{height:28px;border-radius:9px;flex:none;background:linear-gradient(135deg,var(--violet),var(--orange));width:28px}
.grpj3{line-height:1.85;font-size:14.4px;color:var(--dim);max-width:360px}
.baseqa{gap:11px;display:grid}
.baseqa a{font-size:14.4px;transition:color .18s;color:var(--text)}
.baseqa a:hover{color:var(--violet)}
/* base */
.tilea6{ flex-wrap:wrap;
 border-top:1px solid var(--line);
 gap:8px 18px;
 margin-top:40px;
 padding-top:20px;
 font-size:13px;
 color:var(--dim);
 justify-content:space-between;
 display:flex}

/* ---------- 12 文章页 ---------- */
.grpfr{padding:40px 0 68px}
.lnkpp{margin-bottom:22px;
font-size:13px;
color:var(--dim)}
.lnkpp a:hover{color:var(--violet)}
.lnkpp span{color:var(--text)}
.gridkr{max-width:800px}
.gridkr h1{letter-spacing:-.032em;font-size:clamp(24px,4.8vw,37px)}
.celld9{
gap:8px 16px;
color:var(--dim);
display:flex;
font-size:13px;
margin-top:16px;
align-items:center;
flex-wrap:wrap
}
.celld9 b{letter-spacing:.06em;font-weight:600;color:var(--orange)}
.celld9 em{
color:var(--violet);
font-weight:600;
font-style:normal
}
.flowbx{overflow:hidden;border-radius:var(--r4);border:1px solid var(--line);box-shadow:var(--sh);margin:30px 0;background:var(--surface2)}
.flowbx img{object-fit:cover;width:100%;aspect-ratio:16/10}
.itemgb{max-width:800px}
.itemgb h2{margin:42px 0 14px;font-size:clamp(19px,3.5vw,25px);letter-spacing:-.026em;line-height:1.4;padding-left:16px;border-left:3px solid var(--violet)}
.itemgb h3{font-size:17.4px;margin:28px 0 10px;color:var(--violet-deep)}
.itemgb p{margin:14px 0;font-size:16.1px}
.itemgb ul{margin:14px 0;gap:9px;padding-left:20px;list-style:disc;display:grid}
.itemgb li{font-size:15.5px}
/* tone */
.itemgb li::marker{color:var(--orange)}
.itemgb strong{color:var(--ink);font-weight:600}
.figwf{
border:1px solid var(--line);
background:var(--surface);
margin:26px 0;
border-left:3px solid var(--orange);
font-size:15px;
box-shadow:var(--sh);
padding:20px 22px;
border-radius:var(--r3);
color:var(--text)
}
.figwf b{color:var(--violet)}
.lnkcp{  font-weight:600;
  align-items:center;
  transition:gap .2s;
  font-size:15px;
  display:inline-flex;
  margin-top:40px;
  gap:8px;
  color:var(--violet)}
.lnkcp:hover{gap:13px}

/* ---------- 13 响应式 ---------- */
@media(min-width:700px){
  .boxf4{grid-template-columns:repeat(4,1fr)}
  .itemtd{gap:18px;grid-template-columns:repeat(2,1fr)}
  .lineem.basenz{grid-column:span 2}
  .frameq5{  grid-template-columns:repeat(2,1fr);
  gap:22px}
  .frameux{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
@media(min-width:1020px){
  .laned0{padding:68px 0 78px}
  .grpsz{gap:60px;grid-template-columns:1.04fr .96fr}
  .itemtd{
grid-template-columns:repeat(4,1fr);
gap:18px
}
  .lineem.basenz{grid-row:span 2;grid-column:span 2}
  .boxs3{gap:54px;grid-template-columns:.86fr 1.14fr;align-items:start}
  .flowp7{top:110px;position:sticky}
/* frame */
  .itemd8{padding:52px 46px}
  .leadq7{gap:40px;align-items:center;grid-template-columns:1.3fr auto}
}
@media(max-width:560px){
  .tilea9{display:none}
  .cellq4{gap:10px}
  .boxf4 > div{padding:18px 16px}
  .lineem{padding:22px}
  .midk0{margin:-22px -22px 20px}
  .flowbn{font-size:30px}
  .itemd8{padding:34px 22px}
}
@media(prefers-reduced-motion:reduce){
  *{
animation:none!important;
scroll-behavior:auto!important;
transition:none!important
}
  .pickb7{overflow-x:auto}
}

/* ---------- 相关文章（文章页内链，把权重留在站内） ---------- */
.contyv{margin-top:56px;border-top:1px solid var(--line,#E4E9EC);padding-top:30px}
.contyv h2{font-size:19px;
margin:0 0 16px}
.leadqj{  display:grid;
  gap:12px}
@media(min-width:720px){.leadqj{grid-template-columns:repeat(3,1fr)}}
.leadqj a{  background:var(--surface,var(--sheet,#fff));
  border:1px solid var(--line,#E4E9EC);
  transition:border-color .2s,transform .2s;
  padding:15px 17px;
  border-radius:var(--r2,14px);
  display:block}
.leadqj a:hover{transform:translateY(-2px);border-color:var(--brand,var(--jade,var(--accent,currentColor)))}
.leadqj h3{line-height:1.45;margin:0;font-size:15px}
.leadqj p{margin:8px 0 0;overflow:hidden;-webkit-box-orient:vertical;font-size:13px;-webkit-line-clamp:2;color:var(--dim,#7E9196);display:-webkit-box;line-height:1.6}


/* ---------- 14 扩展：关于我们 / 分类 ---------- */
.partee{gap:34px;
display:grid}
/* skin */
.slotm9{align-items:start;grid-template-columns:1fr 1fr;display:grid;gap:12px}
.slotm9 figure{box-shadow:var(--sh);border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);margin:0;background:var(--surface2)}
.slotm9 img{object-fit:cover;width:100%}
.slotm9 figure:first-child img{aspect-ratio:4/5}
.slotm9 figure:last-child img{
aspect-ratio:3/4;
margin-top:28px
}
.deckec h2{ letter-spacing:-.03em;
 font-size:clamp(23px,4.4vw,33px);
 margin-top:14px}
.deckec p{margin-top:18px;font-size:15.8px}
.boxa5{font-size:17px;color:var(--ink);border-left:2px solid var(--violet);line-height:1.74;margin:26px 0 0;padding:6px 0 6px 20px}
.boxa5 footer{  font-size:13px;
  color:var(--dim);
  margin-top:12px;
  letter-spacing:.05em}
.outergu{gap:0;
margin-top:32px;
border-top:1px solid var(--line);
display:grid}
.metan1{
display:grid;
border-bottom:1px solid var(--line2);
gap:16px;
padding:19px 2px;
grid-template-columns:76px 1fr
}
.rowvm{font-size:13px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--orange);letter-spacing:.1em}
/* theme */
.metan1 h3{  letter-spacing:-.02em;
  font-size:16.4px}
.metan1 p{font-size:14.5px;
color:var(--dim);
margin-top:8px}
.wrapj1{ border:1px solid var(--line);
 background:var(--line);
 margin-top:28px;
 overflow:hidden;
 display:grid;
 gap:1px;
 grid-template-columns:repeat(2,1fr);
 border-radius:var(--r2)}
.wrapj1 > div{background:var(--surface);padding:16px}
.wrapj1 b{  letter-spacing:-.04em;
  color:var(--ink);
  font-size:22px;
  display:block;
  font-variant-numeric:tabular-nums}
.wrapj1 b i{font-style:normal;color:var(--orange)}
.wrapj1 span{
display:block;
font-size:13px;
color:var(--dim);
margin-top:5px
}

.stacks8{  display:grid;
  gap:16px}
.tagp3{background:var(--surface);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);transition:transform .22s,box-shadow .22s,border-color .22s;padding:24px 22px;border-radius:var(--r3);position:relative}
.tagp3::before{  top:-1px;
  content:"";
  left:22px;
  position:absolute;
  background:linear-gradient(90deg,var(--violet),var(--orange));
  height:2px;
  width:26px}
.tagp3:hover{box-shadow:var(--sh-h);transform:translateY(-4px);border-color:rgba(59,42,215,.34)}
.tagab{font-size:12px;color:var(--orange);letter-spacing:.18em;font-weight:700}
.tagp3 h3{font-size:19px;letter-spacing:-.022em;margin-top:12px}
.tagp3 p{  font-size:14.7px;
  margin-top:12px;
  color:var(--dim)}
.tagp3 ul{  display:grid;
  margin-top:16px;
  gap:9px}
.tagp3 li{
position:relative;
padding-left:18px;
color:var(--dim);
font-size:14.2px
}
.tagp3 li::before{
content:"";
height:7px;
background:linear-gradient(135deg,var(--violet),var(--orange));
left:0;
width:7px;
top:9px;
position:absolute;
border-radius:2px
}
@media(min-width:700px){
  .wrapj1{grid-template-columns:repeat(4,1fr)}
  .stacks8{grid-template-columns:1fr 1fr}
}
@media(min-width:1020px){
  .partee{align-items:start;gap:52px;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}

/* ---------- 补齐 Base 通用区块类 ----------
   Base.stackqg()/about() 用的是 .blkuw / .unithw，
   而本模板的样式表只有 .flowkq / .carddv，导致这两个区块没有上下留白。 */
.blkuw{padding:78px 0}
.blkuw.midaw{ border-top:1px solid var(--line);
 background:var(--surface);
 border-bottom:1px solid var(--line)}
.unithw{margin-bottom:42px;
max-width:680px}
.unithw h2{letter-spacing:-.03em;margin-top:14px;font-size:clamp(23px,4.4vw,34px)}
.unithw p{font-size:15.5px;color:var(--dim);margin-top:16px}
.ftcn{display:block}
.zonex7{display:block}

/* ---------- 移动端打磨 ----------
   百度移动友好度要求可点击元素不能太小：窄屏下导航与页脚链接统一 ≥36px 高。
   字号方面：正文不小于 13px（各模板里 12.x 的辅助文字已统一抬到 13px）。 */
@media(max-width:767px){
  header a,aside a,nav a,.side-nav a,.side-cta,.side-mark,
  .midjs a,.nav-list a,.nav-cta,.topbar a,.liste8,.ft-links a,.baseqa a{min-height:36px;align-items:center;display:inline-flex}
  .ft-links a,.baseqa a{min-height:38px}
}