），
* 与站内 .sd-index-card-link / .case-card-link 是同一套做法。
* ========================================================= */
.jl-sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jl-sectors .price-item { position: relative; }
.jl-sectors .pi-overlay-link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: var(--radius);
}
/* 叠加层只负责点击，链接文字本身不再接收鼠标事件，避免盖住整卡 */
.jl-sectors .price-item .pi-cta { position: relative; z-index: 3; pointer-events: none; }
@media (max-width: 1024px) {
.jl-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.jl-sectors { grid-template-columns: 1fr; }
}
/* =========================================================
* 14. 玖隆联盟页「合作常见问题」沿用「合作保障」的卡片版式
*
* 版式直接复用 .al-types / .al-card.al-guard / .al-row，
* 但按要求「文字颜色不要更换」：
* - 合作保障标题是 var(--text) 深色；常见问题问句原本是
* var(--primary) 品牌蓝，这里锁回蓝色。
* - 答案两边都是 var(--text-medium)，颜色本就一致，覆盖只是留痕。
* 作用域限定在 .al-faq，不波及「合作保障」「四类合作方式」。
* ========================================================= */
.al-faq .al-card.al-guard h3 { color: var(--primary); }
.al-faq .al-row { color: var(--text-medium); }
/* =========================================================
* 15. 服务页「指导价」沿用价格页的卡片样式（.price-item / .pi-*）
*
* 网格按首页「业务板块」那套：**页面宽度内一行四个**。
* 注意不能直接复用 .jl-sectors —— 那里面还有一条
* .jl-sectors .price-item .pi-cta { pointer-events: none; }
* 是给首页那种「整卡叠加链接」用的；服务页的按钮是真链接，
* 套上去会让「立即咨询」点不动，所以这里单独写网格规则。
*
* 卡片不足 4 张时分两档处理（页面里实际有 4/4/2/1/1/1/1/2 张）：
* 1 张 → 撑满整行；2 张 → 各占半行（避免右侧留空档）
* ========================================================= */
.sp-plans {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* 只有 1 张卡时占满整行 */
.sp-plans > .price-item:only-child { grid-column: 1 / -1; }
/* 只有 2 张（或 3 张）时并排撑满，仅在桌面 4 列布局下需要 */
@media (min-width: 1025px) {
.sp-plans > .price-item:first-child:nth-last-child(2),
.sp-plans > .price-item:first-child:nth-last-child(2) ~ .price-item { grid-column: span 2; }
.sp-plans > .price-item:first-child:nth-last-child(3),
.sp-plans > .price-item:first-child:nth-last-child(3) ~ .price-item { grid-column: span 2; }
.sp-plans > .price-item:first-child:nth-last-child(3) ~ .price-item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
.sp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.sp-plans { grid-template-columns: 1fr; }
}
/* =========================================================
* 16. 服务页「服务边界」模块改用联盟页「资源合作」的卡片样式
*
* 网格与卡片直接复用 .al-types / .al-card / .al-row，
* 但本模块外层还有 .jl-scope —— 它带 text-align:center（这是该模块
* 本身「居中声明」的版心处理，不属于被参照的卡片样式），
* 居中会穿透到卡片里，所以这里把网格内的文字拉回左对齐。
* 顺带把 .al-types 默认的 margin-top:36px 收成原来的 28px 间距。
* 作用域限定在 .jl-scope 内，不影响联盟页的「资源合作」。
* ========================================================= */
.jl-scope .al-types {
text-align: left;
margin: 28px 0 24px;
}
/* =========================================================
* 17. 服务页「服务边界」模块铺满页面幅宽
*
* 原来 .jl-scope 带 940px 居中版心（见第 6 节），比同一页
* 「指导价」网格（.sp-plans，占满 .container 的 1152px）窄一截，
* 两段模块左右边缘对不齐。这里取消版心限制，让它与指导价网格同宽，
* 模块内两张卡片随之各占半行（.al-types 是 auto-fit，2 张就只有 2 列）。
*
* 作用域安全：.jl-scope 只出现在 8 个服务页（每页 1 处），
* 首页 / About / 联盟页都没有用它，改不到别处。
* ========================================================= */
.jl-scope { max-width: none; }
/* =========================================================
* 18. 联系我们页「高德 / 百度地图导航」按钮：修掉悬停时蓝底蓝字看不见的问题
*
* 问题现象：鼠标移到两个地图按钮上，底色变蓝、文字也是蓝的，字就消失了。
*
* 原因（层叠关系，不是随便调颜色）：
* 1) style.css 第 322 行给 `.wp-block-group.contact .contact-item .ci-text a`
* 加了 `color: var(--primary) !important`（用来压旧的 inline 白字，白卡上白字会隐形）。
* 带 !important 的声明会连 :hover 状态一起压住，所以悬停时字色仍是品牌蓝。
* 2) style.css 第 340 行 `.map-btn:hover { background: var(--primary); }`
* 把底色改成同一个品牌蓝 → 蓝底 + 蓝字 = 看不出字。
*
* 处理：按需求参照首页「电话：19974717371」按钮（.btn-secondary）的观感统一为
* 「描边胶囊 → 悬停实心蓝」：底色透明 + 品牌蓝描边 + 品牌蓝字；悬停填实心蓝、字转白。
* 这里的权重高于上面那条 !important（0,4,1 → 0,6,1），并且同样带 !important，
* 才能把悬停字色真正改回白色。
* ========================================================= */
.wp-block-group.contact .contact-item .ci-text a.map-btn {
background: transparent;
border: 1px solid var(--primary);
color: var(--primary) !important;
}
.wp-block-group.contact .contact-item .ci-text a.map-btn:hover {
background: var(--primary);
border-color: var(--primary);
color: #fff !important;
}
/* =========================================================
* 19. 首页首屏口号胶囊（.hero-badge）
*
* 背景：apple.css 里 .hero-badge（权重 0,1,0）定义了小胶囊样式，
* 但首页首屏的 同时命中 .hero p（权重 0,1,1），
* 而 0,1,1 > 0,1,0 —— 字号会被抬到 clamp(17px,2.2vw,21px)、
* 下边距变 36px、max-width 被限成 620px，胶囊会明显变大变形。
*
* 处理：用 p.hero-badge（0,2,1）把胶囊的观感拿回来，只作用于首屏这一个
，
* 不影响 .jl-trustbar / .hero-actions 等其它 .hero p 规则。
* ========================================================= */
.hero p.hero-badge {
display: inline-block;
font-size: 13px;
line-height: 1.45;
letter-spacing: 0;
max-width: none;
padding: 6px 16px;
margin: 0 0 24px;
background: #fff;
border: 1px solid var(--border);
border-radius: 980px;
color: var(--text-medium);
}
@media (max-width: 768px) {
.hero p.hero-badge { font-size: 12px; padding: 5px 14px; margin-bottom: 18px; }
}
/* =========================================================
* 20. 价格卡在「白底区块」上是隐形的 —— 给默认边框一个真实颜色
*
* 现象（像素实测）：8 个服务页的「指导价」区块是 .section（无背景 = 继承 body #FAFBFC），
* 而 apple.css 的 .price-item 是 `background:#fff; border:1px solid transparent`。
* 白卡 + 透明边框压在 #FAFBFC 上，两者亮度只差 1.6%，卡片边界完全看不出来，
* 4 档价格像散落的文字，价格卡组件等于失效。全页扫描 #D2D2D7 边框像素，
* 指导价所在的 y 区间一条边框线都没有（只在 FAQ 卡片区才有）。
*
* 处理：把 transparent 换成真实的分割线色。灰底区块上同样成立（白卡+细边更好读），
* 于是「业务板块 / 指导价」这类价格网格不再依赖灰底才看得清。
* ========================================================= */
.price-item { border-color: var(--border); }
/* 悬停时边框再深一档，与原有的浮起阴影配合 */
.price-item:hover { border-color: var(--border-dark); }
/* =========================================================
* 21. 服务页首屏右列：关键信息卡（替掉原来的空图位）
*
* 背景：首屏 .sp-hero-img 里原本是一个空的 .jl-imgslot —— 实测是一个 536×360 的
* 纯 #F5F5F7 灰框，比左侧文字列还矮 270px，是「网站没做完」最刺眼的信号。
* 没有实拍照片时，同一位置最该放的是「客户此刻最想确认的 5 件事」。
* 事实来源：起价取自本页价格卡；适用取自本页「谁适合这项服务」第 1 条；
* 其余三行是站内既有的统一口径，未新增任何承诺。
* ========================================================= */
.jl-keyfacts {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px 28px 24px;
box-shadow: 0 10px 34px rgba(0, 0, 0, .06);
}
.jl-keyfacts .kf-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.jl-keyfacts .kf-row {
display: grid;
grid-template-columns: 52px 1fr;
gap: 12px;
padding: 9px 0;
border-bottom: 1px dashed var(--border);
align-items: start;
}
.jl-keyfacts .kf-row:last-of-type { border-bottom: 0; }
.jl-keyfacts .kf-k { font-size: 13px; color: var(--text-light); letter-spacing: .05em; }
.jl-keyfacts .kf-v { font-size: 14px; color: var(--text); line-height: 1.55; }
/* 复用 .hero-actions 的按钮样式，只补这块地方需要的间距与分隔线 */
.jl-keyfacts .kf-cta {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.jl-keyfacts .kf-cta .btn-primary,
.jl-keyfacts .kf-cta .btn-secondary { font-size: 14px; padding: 9px 18px; }
@media (max-width: 860px) {
.jl-keyfacts { padding: 22px 20px 20px; }
.jl-keyfacts .kf-row { grid-template-columns: 46px 1fr; gap: 10px; }
}
/* =========================================================
* 22. 首页：首屏 hero 与「服务保障」4 张卡合并为一个整块
*
* 原来两者是两个独立区块（.hero + .jl-guarantee-band），中间有一条
* 灰白硬接缝。合并后 4 张卡进入 .hero > .container，与数据条同处一张
* 背景照片之上 —— 首页最上方从「两块」变成「一块」。
*
* 顺带处理两个遗留问题：
* 1) 4 张卡里各有一个空的 .gi-icon（48px 白色圆点，在白卡上本来就看不见），
* 白占 62px 高度 —— 已在内容里删除，不再输出；
* 2) 卡片原来靠 .jl-guarantee-band 的灰底 + 白卡形成对比，落在照片上没有边界
* → 改为白色卡片 + 真实边框 + 淡阴影，亮部与暗部都能立住（与第 20 节同理）。
*
* 注意：必须带 .hero 前缀。.hero p（0,1,1）会盖住 .guarantee-item p（0,1,1）之前的
* 同权重规则，用 .hero .guarantee-item p（0,2,1）才能拿回卡片里的字号与行高。
*
* 分隔线：初版在保障条上方加过一条 rgba(0,0,0,.08) 的 border-top，客户要求去掉
* —— 已删除（连同为它留的 padding-top），现在数据条与保障卡之间只有 40px 间距。
* ========================================================= */
.hero .guarantee-bar {
margin-top: 40px;
}
.hero .guarantee-item {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 22px 24px;
text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}
.hero .guarantee-item h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: -.015em;
}
.hero .guarantee-item p {
font-size: 13px;
color: var(--text-medium);
line-height: 1.6;
max-width: none;
margin-bottom: 0;
letter-spacing: 0;
}
@media (max-width: 860px) {
.hero .guarantee-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 32px;
}
.hero .guarantee-item { padding: 18px 18px 20px; }
}
@media (max-width: 520px) {
.hero .guarantee-bar { grid-template-columns: 1fr; }
}
/* =========================================================
* 23. 代理记账页「服务保障」4 卡（由首页首屏移入）
*
* 位置：放在「代理记账指导价」区块内、4 档价格与免费体检入口之后 ——
* 客户刚看完价格，紧接着回答「出了事谁负责」，是决策点上最合适的地方。
*
* 两个必须显式覆盖的点（否则样式会走偏）：
* 1) 第 10 节的 `.section .guarantee-bar`（同为 0,2,0 权重）会把区块内的保障条
* 强制成 2 列并把宽度限成 880px 居中 —— 那是给只有 2 项的交付标准板块写的。
* 本规则在文件更后面，同权重后者胜，因此要把它三个属性一起改回来。
* 2) 所在区块是白底 .section，卡片不能靠灰底衬托，必须靠边框 + 淡阴影立住，
* 与页面其它卡片（.price-item / .who-item）保持一致。
* 3) 版式按客户要求改为居中：图标 margin:0 auto + 卡片 text-align:center
* （第 22 节给首页写的是左对齐，这里必须显式改回居中）。
*
* 另：第 22 节的 `.hero .guarantee-*` 规则保留不动 —— 现在首页已无保障条，
* 属于备用规则；万一编辑器把旧版首页内容覆盖回来，那张卡仍会被正确渲染。
* ========================================================= */
.jl-guard-band { margin-top: 44px; }
.jl-guard-band > h3.wp-block-heading {
font-size: 20px;
font-weight: 600;
letter-spacing: -.015em;
margin: 0 0 20px;
}
.jl-guard-band .guarantee-bar {
grid-template-columns: repeat(4, minmax(0, 1fr));
max-width: none;
margin: 0;
}
.jl-guard-band .guarantee-item {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 22px 24px;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.jl-guard-band .guarantee-item h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: -.015em;
}
.jl-guard-band .guarantee-item p {
font-size: 13px;
color: var(--text-medium);
line-height: 1.6;
max-width: none;
margin-bottom: 0;
}
/* 图标：40px 圆角方块，水平居中于卡片（margin:0 auto），与文字居中对齐。
apple.css 的 .guarantee-item .gi-icon 是 48px 圆形，这里改成 40px 圆角方块。
底色不用 --primary-bg —— 该令牌实际是浅灰 #F5F5F7（名字有误导），
这里显式用主题蓝 10% 的淡蓝底（≈#E5F1FC）+ 主题蓝图标，
让这组「保障」在一整屏白底里能被看见；这也是苹果风图标底板的做法。 */
.jl-guard-band .guarantee-item .gi-icon {
width: 40px;
height: 40px;
margin: 0 auto 14px;
border-radius: 12px;
background: rgba(0, 113, 227, .10);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
}
.jl-guard-band .guarantee-item .gi-icon svg { display: block; }
@media (max-width: 860px) {
.jl-guard-band { margin-top: 34px; }
.jl-guard-band .guarantee-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jl-guard-band .guarantee-item { padding: 18px 18px 20px; }
}
@media (max-width: 520px) {
.jl-guard-band .guarantee-bar { grid-template-columns: 1fr; }
}
/* =========================================================
* 24. 首页首屏数据条：加大 4 项之间的间隔
*
* 现状（像素实测，1440px 视口）：4 项数字分别落在 x 170 / 311 / 453 / 576，
* 视觉间距 56 / 65 / 75 px —— 项与项靠得太近，4 个数据挤成一块。
* 间隔来源：.hero-stats 是 flex + gap:0，项间距完全由 .hero-stat 的
* padding-right:44px 撑出来（apple.css L296）。
* 处理：把 padding-right 加倍到 88px，并把 ≤768 断点从 36px 提到 48px。
* 数据条是块级元素、max-width:980px 固定宽，所以右边距加大只是让 4 项
* 在条内散开，不会撑破版面（实测总宽 706px < 条内可用 916px）。
* 范围：.hero-stat 全站只有首页 post 160 用到，且这里带 .hero 前缀再限定一次。
* 竖向排列（≤480px）时不需要右侧留白，归零。
* ========================================================= */
.hero .hero-stat { padding-right: 88px; }
/* 数据条加宽到首屏实际可用宽度（1152 版心 − 首屏左右各 24 内边距 = 1104）。
* 起因：客户把第 5 项改成「持证经营 + 财政局核发DLJZ43040820240037」，
* 该项宽约 186px，5 项墨迹合计约 642px，加 4×88px 间距 = 994px，
* 超过原来的条内可用 916px → 第 5 项折到第二行。
* 加宽后条内可用 1040px（1104 − 左 24 − 右 40），994px 放得下。
* 只放宽不改字号、不收间距，视觉密度与之前一致。 */
.hero .hero-stats { max-width: 1104px; }
@media (max-width: 768px) {
.hero .hero-stat { padding-right: 48px; }
}
@media (max-width: 480px) {
.hero .hero-stat { padding-right: 0; }
}
/* =========================================================
* 25. 首页首屏数据条：每项的数字与说明文字上下对调
*
* 原样：800+ → 对调后：服务企业
* 服务企业 立足湖南服务全国
* 立足湖南服务全国 800+
*
* 用 flex-direction: column-reverse 实现，不动任何内容（也就不用改文章，
* 避开编辑器覆盖的风险），想撤回只删这一行。
* .hero-stat 本身是 flex/column/gap:4px（apple.css L296），反转后间距仍由
* gap 控制，所以把 gap 从 4px 加到 6px，让「数字落到下面」这一步有呼吸。
* ========================================================= */
.hero .hero-stat {
flex-direction: column-reverse;
gap: 6px;
}
/* =========================================================
* 26. 首页首屏数据条：4 项 → 5 项后的排版
*
* 数据条内可用宽 916px（max-width:980 减去左右 padding 24/40）。
* 5 项的墨迹宽合计约 529px，加 4×88px 间距 = 881px ✓ 放得下；
* 但 flex 换行判定会把「最后一项的 padding-right」也算进行宽（529+5×88=969），
* 所以第 5 项被挤到了第二行（实测第一行 4 项、第二行 1 项）。
* 处理：最后一项的右侧留白归零 —— 它后面本来就不需要间距。
*
* 窄屏兜底：单行阈值约 1040px（再窄数据条本身会被容器压小），
* 低于它改成 3 列网格（3+2），避免出现「4+1」这种难看的一行孤项。
* 768 → 2 列；480 → 单列（竖排）。
* 注意：本节点在文件里位于第 24、25 节之后，同权重下后者胜，
* 所以 ≤768 时这里给的 20px 会覆盖第 24 节的 48px。
* ========================================================= */
.hero .hero-stat:last-child { padding-right: 0; }
@media (max-width: 1040px) {
.hero .hero-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 22px;
}
.hero .hero-stat { padding-right: 20px; }
}
@media (max-width: 768px) {
.hero .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.hero .hero-stats { grid-template-columns: 1fr; }
.hero .hero-stat { padding-right: 0; }
}
/* =========================================================
* 27. 客户案例页「按业务板块找案例」—— 导航改为卡片墙
*
* 原来 [jl_case_nav] 输出的是
一行一个链接，
* 8 个板块排成一列纯文字，看不出各自有多少案例、也不吸引点击。
*
* 现在：8 张卡片，每张 = 板块名 + 实时案例数（小胶囊）+ 该板块说明 + 跳转链接。
* 卡片直接复用 .al-card（白卡 + 1px var(--border) 真实边框 + 悬停浮起），
* 所以这里只管网格与胶囊、链接两处样式。
* 列数自适应：repeat(auto-fit, minmax(280px, 1fr)) —— 与行业资讯页 .blog-grid 同构。
* 3 张卡平铺满 3 栏（1440 容器 1154px ⇒ 3 条轨道、各约 373px）；
* auto-fit 会收掉空轨道 ⇒ 卡片数不足整排时不再留空栏（2026-10-02 实测）。
* ≤560 单列保留为兜底（实测 auto-fit 在该宽度本身也已退到 1 列）。
* 说明：.al-card 自带 display:flex/column，链接用 margin-top:auto 压到底部，
* 卡片高度不齐时按钮仍对齐。
* ========================================================= */
.jl-case-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
margin-top: 32px;
}
.jl-case-nav-card { padding: 22px; }
.jl-case-nav-card h3 { align-items: center; }
.jl-case-nav-num {
font-size: 12.5px;
font-weight: 600;
color: var(--text-light);
background: var(--primary-bg);
border-radius: 999px;
padding: 2px 10px;
letter-spacing: 0;
white-space: nowrap;
}
.jl-case-nav-card .al-row { font-size: 13.5px; }
.jl-case-nav-more {
margin-top: auto;
font-size: 13.5px;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.jl-case-nav-more:hover { color: var(--primary-dark); }
@media (max-width: 560px) {
.jl-case-nav { grid-template-columns: 1fr; }
}
/* =========================================================
* 28. 恰好 4 张卡的 .al-types 排成一行 4 个
*
* 背景：.al-types 默认 repeat(auto-fit, minmax(300px,1fr))，1152px 版心下
* 只能放 3 列 —— 玖隆联盟页「资源合作」正好是 4 张卡，于是排成「3 + 1」，
* 第 4 张孤零零占一行。
*
* 处理：用 :has() 精确判断「这个 al-types 里正好有 4 个 al-card」，
* 命中才改成 4 列，其它 al-types（FAQ 12 张、服务边界 2 张、三种做法 3 张）
* 完全不受影响。
* 为什么不用改文章加 class：内容层改动会被编辑器覆盖（本站已发生过多次），
* 纯 CSS 判断没有这个风险；旧浏览器不认 :has() 时退回默认 3 列，不会坏版。
* 列宽用 minmax(0,1fr)（不是 300px）：4 列时每列约 274px，写死 300 会撑破。
* ========================================================= */
.al-types:has(> .al-card:nth-child(4):last-child):not(.jl-stage-groups) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1040px) {
.al-types:has(> .al-card:nth-child(4):last-child):not(.jl-stage-groups) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.al-types:has(> .al-card:nth-child(4):last-child):not(.jl-stage-groups) {
grid-template-columns: 1fr;
}
}
/* =========================================================
* 29. 首页阶段区块（4 张组卡）排 2×2
*
* 这一块现在有 4 张组卡（注册与起步 / 日常账税 / 增长与资金 / 风险与异常），
* 每张里面是 3–6 条「阶段 + 描述 + 建议」。
* 若不管它，会先命中第 28 节「正好 4 张卡排 4 列」的规则 → 4 张挤成一行
* （每张仅约 274px，条目要折很多行）。组卡是纵向条目列表，2 列更合适。
*
* 选择器与第 28 节同为 (0,2,0)，靠本节点更靠后来胜出；容器上的
* .jl-stage-groups 是内容里加的专属类（注释与 div 同步改过）。
* ========================================================= */
.al-types.jl-stage-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
.al-types.jl-stage-groups {
grid-template-columns: 1fr;
}
}
/* =========================================================
* 30. 服务页「办理流程」＝方案 A 的卡片 + 方案 B 的连接线
*
* 旧样式（apple.css L931–995）与全站语言不一致：
* ① 圆点蓝黑交替（nth-child(2)(4) 是纯黑 #1D1D1F）；
* ② 连接符是 1.5px 边框拼的小箭头；
* ③ 说明文字 11px（全站最小）；
* ④ 步骤固定 110px 窄列，文字挤成 3–4 行；
* ⑤ .flow-diagram 有 min-height:320px，撑出大片空白。
*
* 现在改成：四张白色圆角卡（与首页组卡 / 服务页卡片同一套），
* 序号用浅蓝方片，说明 13.5px；卡片之间保留一段细灰线表示先后顺序
* （取代原来的箭头）。只改样式，不动任何文章内容。
*
* 连接线定位：卡片纵向正中（top:50% + translateY(-50%)，按需改为穿过序号方块中线的话
* 用 top:39px 即可）；线宽 = 网格 gap（16px），从卡片右侧 -16px 起画，刚好搭到下一张卡。
*
* apple.css 在 ≤768px 下有 .flow-step{flex-direction:row} 等规则，
* 但本节点选择器权重更高（0,3,0 > 0,1,0/0,2,0），不会被它们覆盖。
* ========================================================= */
.flow-diagram.sp-flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 30px 0 0;
min-height: 0;
}
.flow-diagram.sp-flow .flow-step {
position: relative;
display: block;
width: auto;
text-align: center;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 22px;
}
/* 卡片之间的连接线（方案 B） */
.flow-diagram.sp-flow .flow-step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -16px;
width: 16px;
height: 1px;
background: var(--border);
}
/* 卡片内的序号方块（1/2/3/4）：按客户要求隐藏。
* 想恢复：删掉下面这一行 display:none 即可（其余样式都还在）。
* 只作用在 .flow-diagram.sp-flow 里的 .step-circle，不影响站内其它同名元素。 */
.flow-diagram.sp-flow .step-circle {
display: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: rgba(0, 113, 227, .10);
color: var(--primary);
font-size: 14px;
font-weight: 700;
margin: 0 auto 14px;
box-shadow: none;
position: static;
}
.flow-diagram.sp-flow .step-circle::after { display: none; } /* 去掉旧箭头 */
.flow-diagram.sp-flow .step-label {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 7px;
line-height: 1.45;
}
.flow-diagram.sp-flow .step-desc {
font-size: 13.5px;
color: var(--text-medium);
margin: 0;
line-height: 1.62;
}
/* 两列时，第 2 张卡右边是下一行，不能画连接线 */
@media (max-width: 1040px) {
.flow-diagram.sp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow-diagram.sp-flow .flow-step:nth-child(2)::after { display: none; }
}
/* 单列时全部不画 */
@media (max-width: 620px) {
.flow-diagram.sp-flow { grid-template-columns: 1fr; }
.flow-diagram.sp-flow .flow-step::after { display: none; }
}
/* =========================================================
* 31. 首页首屏数据条：4 个数据「1 行 4 个」等分，第 5 项单独一行居中
*
* 起因：客户把 4 个数值都改长了（8大业务 / 800家 / 明码标价 / 6年经营），
* 第 5 项「持证经营 + 财政局核发DLJZ43040820240037」又被挤到第二行左侧，
* 看着像排版坏了。
*
* 处理：数据条改成 4 等分网格（每项占 1/4 列宽，间距交给 column-gap），
* 第 5 项不再参与数据行 —— 它本来也不是数据，是资质凭证：
* 整行居中、字号降到 17px、与上面 4 个数据分开 26px。
* 纯 CSS，不动任何文字；原来第 24 节的 88px 右留白与第 26 节的
* 3 列兜底都被这里（文件更靠后、同权重）接管，所以断点在本节重写。
* ========================================================= */
.hero .hero-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 24px;
row-gap: 0;
align-items: start;
max-width: 1104px;
}
.hero .hero-stat { padding-right: 0; }
/* 第 5 项：资质凭证，整行居中、小一号 */
.hero .hero-stat:nth-child(5) {
grid-column: 1 / -1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 8px 12px;
margin-top: 26px;
}
.hero .hero-stat:nth-child(5) .num {
font-size: 17px;
font-weight: 600;
letter-spacing: 0;
}
.hero .hero-stat:nth-child(5) .label { font-size: 13.5px; }
@media (max-width: 1040px) {
.hero .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
}
@media (max-width: 620px) {
.hero .hero-stats { grid-template-columns: 1fr; row-gap: 18px; }
}
/* =========================================================
* 32. 服务页「其他服务」：7 张卡改成「一行 4 个」
*
* 现状：.sd-index-grid 是 apple.css L1066 的
* repeat(auto-fit, minmax(300px,1fr)) —— 1152 版心下只能放 3 列，
* 而「其他服务」正好 7 张卡（其余 7 个服务各一张），于是排成 3 + 3 + 1，
* 第 7 张孤零零占一行。
*
* 处理：改成 4 列 → 7 张卡排成 4 + 3。
* 作用范围安全：全站扫描确认 .sd-index-grid 只在 8 个服务页的
* 「其他服务」这一处使用（每页 7 张 sd-index-card），没有别的地方会受影响。
* 列宽用 minmax(0,1fr)：4 列时每列约 264px（原来写死 300 会撑破）。
* ========================================================= */
.sd-index-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) {
.sd-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.sd-index-grid { grid-template-columns: 1fr; }
}
/* =========================================================
* 33. 首页首屏两段正文不折行：放开 .hero p 的 620px 宽度上限
*
* 现象：apple.css 第 273 行 .hero p{max-width:620px} 本是给「左侧文字列」定宽的，
* 但首屏第二段「税务合规 · 财务外包 · 项目申报 · 融资助贷 · 股权咨询 ·
* 信用修复，我们服务覆盖企业经营全周期。」在 21px 下**单行需要 916.9px**，
* 被 620px 卡住 → 折成两行，且断点落在词中间（「信用修 / 复」），很难看。
* 处理：只放开首屏这两段正文的宽度上限。注意 max-width 只限制「上限」，
* 不会把文字拉宽 —— 放开后文字仍按自身固有宽度渲染（374px / 845px），
* 并不会真的铺满 1152px。
* 排除：.hero-badge 与 .hero-actions 由 :not() 排除，观感不变
* （.hero-badge 另有 max-width:none 的覆盖，见第 20 节）。
* 实测：1440 / 1280 / 1024 视口 → 1 行；≤860px 容器本身就放不下，仍折行（物理限制）。
* 影响面：.hero 只有首页（ID 160）使用，全站其它页面不受影响。
* ========================================================= */
.hero > .container > p:not(.hero-badge):not(.hero-actions) {
max-width: 100%;
}
/* =========================================================
* 34. 208 页「按行业找解决方案」的 8 张行业入口卡（原生区块）
*
* 背景：这块的卡片墙原本由 [jl_case_nav] 短代码渲染，但那个短代码块
* 早已从页面正文里消失，只剩 +
。
* 2026-09-30 改为**正文里的原生 Gutenberg 区块**（用户要求不用短码），
* 卡片视觉沿用站内案例卡 .case-card 家族，布局沿用第 27 节的 .jl-case-nav 网格。
*
* 这里只补三件事（卡片外观一条都没重复定义）：
* ① .jl-desc 自带 margin-bottom:64px，第 27 节的网格又带 margin-top:32px。
* **实测（几何探针）相邻兄弟 margin 会折叠** ⇒ 当前间距恒为 max(64,32)=64px，
* 所以这条归零**单看是视觉空操作**，留着是为了让间距只由 .jl-desc 决定：
* 将来若把 .jl-desc 的下边距改小，间距会跟着走，不会被 32px 顶住。
* （别再写「不归零会变成 96px」—— 那是想当然，被实测否掉了。）
* ② .case-card 是块级，8 张卡的说明长短不一（35–49 字）→ 卡身改 flex 纵向，
* 否则底部「查看这 N 个案例」在不同卡片里高高低低；
* ③ .jl-case-nav-more 已有 margin-top:auto（27 节），这里给它一个能生效的父级，
* 让链接统一压到卡片底部（实测 3 行 / 2 行 / 8 行下逐行落差均为 0px）。
* 作用域：只在 .jl-case-nav 里生效，站内其它 .case-card（首页精选 / 8 个板块案例区）不受影响。
* ========================================================= */
.wp-block-group.container > .wp-block-group.jl-case-nav {
margin-top: 0;
}
.jl-case-nav .case-card {
display: flex;
flex-direction: column;
}
.jl-case-nav .case-card .case-body {
display: flex;
flex-direction: column;
flex: 1;
}
.jl-case-nav .case-card .case-meta {
margin-top: auto;
}
/* =========================================================
* 35. 行业资讯文章卡改纯文字卡（2026-10-02）
* 背景：原文章卡有 180px 图槽，没特色图时退到同一张兜底图
* （assets/img/case-default.webp），3 篇文章共用一张与财税无关的
* 「仓储货架」图，且三张完全一样。按需求去掉整个图槽，改纯文字卡。
* 范围：文章卡来自 home.php，不带 .case-card-link、也不进 .jl-case-nav，
* 所以这里用 .blog-grid + .case-card--text 双限定，绝不影响别处的案例卡。
* 三条规则与第 34 节同构：卡片纵向 flex → 内容区撑满 → 底部信息行贴底，
* 使同一行内长短不一的文章卡底部对齐，而不是内容浮在中间。
* ========================================================= */
.blog-grid .case-card--text {
display: flex;
flex-direction: column;
}
.blog-grid .case-card--text .case-body {
display: flex;
flex-direction: column;
flex: 1;
}
.blog-grid .case-card--text .case-meta {
margin-top: auto;
}
/* =========================================================
* 36. 208 页行业方案卡改「纯文字卡 + 行内蓝色角标」（2026-10-02）
*
* 需求原文：「行业方案区块卡片，参考行业资讯页面中卡片样式
* （保留行业方案区块卡片蓝色标题样式）」。
*
* 浏览器实测（计算样式）显示，两张卡真正的差别只有三点：
* ① 行业资讯卡（home.php）是**纯文字卡**，完全没有顶部图槽；
* 方案卡有一条 64px 的 .case-image-flat；
* ② 行业资讯卡标题是深色 rgb(25,42,61)（home.php 给链接写了 style="color:inherit"）；
* 方案卡标题是链接蓝 rgb(0,113,227)；
* ③ 方案卡多一个蓝色角标胶囊（原来绝对定位在 .case-image 里）。
* ⇒「参考行业资讯卡样式」= 去掉图槽；「保留蓝色标题」= 标题继续走全站链接蓝，
* 即卡片渲染函数里**不加** style="color:inherit"。
*
* 本节 2 条规则里，只有第 1 条是「必须的」：
* ① .case-tag 的原样式是 `.case-image .case-tag`（apple.css:599）。
* 图槽整块去掉后角标不再位于 .case-image 内 ⇒ 那条规则**完全不再命中**，
* 角标会掉成一行普通黑字。这里照原样重建（蓝底白字胶囊，尺寸字重与原来一致），
* 并改成行内块。
* ⚠️ 必须**显式**给 align-self —— 父级 .case-body 在第 34 节被改成 column flex，
* 默认 align-items:stretch 会把胶囊拉成整行宽的蓝条。
* 1.3.28 用 flex-start（贴左）；1.3.29 字号 12px → 14px（用户要求「字体再大一点」），
* 同时**误**把本行改成 center。1.3.30 恢复 flex-start（贴左）—— 用户澄清：
* 他说的「卡片标题」= 胶囊**下方**那个