/* XTPB merged addon css */

/* addon: pbi_sitehero */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「官网首屏」
 * 左：胶囊 + h1 + 副标题 + 两个按钮 + 三个小勾；右：CSS 画的设备样机（电脑英文站 / 手机中文站）；
 * 下：四格数据条。样机零图片。
 *
 * ★ 这份 CSS 会被合并进 uploads/xt-pagebuilder/xtpb-page-css-{id}.css ★
 *   不能写相对 url()；改完刷前台没变 → 去构建器里保存一次页面。
 * ★ 类名全部带 pbi-wh- 前缀 ★ 主题同时加载 bootstrap，.btn / .card / .badge 这种名字会撞。
 * ====================================================================== */

.pbi-wh{
  --wh-ink:#15171A; --wh-text:#5B6472; --wh-dim:#8A94A3; --wh-line:#E4E9F0;
  --wh-soft:#F5F7FA; --wh-tint:#F0F6FF; --wh-blue:#007BFF; --wh-blue-d:#0A63CC; --wh-navy:#0E1319;
  --wh-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));

  /* 主题 header 是 absolute 浮在内容上的，首屏自己让出顶部（同 pbi-shero） */
  padding-top:150px; padding-bottom:90px; overflow:hidden;
}
.pbi-wh.has-texture::before,
.pbi-wh.has-texture::after{ content:""; position:absolute; border-radius:50%; filter:blur(20px); pointer-events:none; z-index:0; }
.pbi-wh.has-texture::before{ width:720px; height:520px; left:-200px; top:-260px; background:radial-gradient(closest-side,rgba(92,171,255,.28),rgba(92,171,255,0)); }
.pbi-wh.has-texture::after{ width:820px; height:620px; right:-240px; top:-240px; background:radial-gradient(closest-side,rgba(0,123,255,.18),rgba(0,123,255,0)); }

.pbi-wh-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:56px; align-items:center; }
.pbi-wh.no-viz .pbi-wh-grid{ grid-template-columns:minmax(0,1fr); }
.pbi-wh-left{ min-width:0; }

/* 胶囊：主题同款（白边 + 左侧蓝色 chip） */
.pbi-wh .pbi-wh-pill{
  display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 18px 0 5px;
  border-radius:80px; background:rgba(255,255,255,.6); border:3px solid #fff;
  box-shadow:0 2px 2px rgba(21,23,25,.1); font-size:14px; font-weight:600; color:#000; line-height:1;
}
.pbi-wh .pbi-wh-pill:not(:has(b)){ padding-left:16px; }
.pbi-wh .pbi-wh-pill b{ height:26px; line-height:26px; padding:0 10px; border-radius:80px; background-image:var(--wh-grad); color:#fff; font-size:14px; font-weight:600; }

.pbi-wh .pbi-wh-h1{ margin:26px 0 0; font-size:54px; line-height:1.22; font-weight:800; letter-spacing:-1px; color:var(--wh-ink); }
.pbi-wh .pbi-wh-lead{ margin:24px 0 0; max-width:560px; font-size:17px; line-height:1.9; color:var(--wh-text); }

/* 按钮：主题同款（胶囊 + 右侧深色圆） */
.pbi-wh-btns{ margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; }
.pbi-wh .pbi-wh-btn{
  display:inline-flex; align-items:center; gap:16px; height:60px; padding:0 8px 0 26px;
  border-radius:80px; font-size:17px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pbi-wh .pbi-wh-btn i{ width:44px; height:44px; border-radius:50%; background:var(--wh-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; }
.pbi-wh .pbi-wh-btn.is-main{ background-image:var(--wh-grad); color:#fff; box-shadow:0 14px 30px rgba(0,110,255,.28); border:3px solid rgba(255,255,255,.6); }
.pbi-wh .pbi-wh-btn.is-alt{ background:rgba(255,255,255,.75); color:var(--wh-ink); box-shadow:0 2px 2px rgba(21,23,25,.1); border:3px solid #fff; }
.pbi-wh .pbi-wh-btn:hover{ transform:translateY(-2px); }
.pbi-wh .pbi-wh-btn.is-main:hover{ color:#fff; }
.pbi-wh .pbi-wh-btn.is-alt:hover{ color:var(--wh-ink); }

.pbi-wh .pbi-wh-ticks{ margin:28px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; }
.pbi-wh .pbi-wh-ticks li{ display:flex; align-items:center; gap:6px; font-size:14px; line-height:1.6; color:var(--wh-text); }
.pbi-wh .pbi-wh-ticks i{ color:var(--wh-blue); }

/* ----------------------------------------------------------- 设备样机 */
.pbi-wh-viz{ position:relative; height:540px; min-width:0; }
.pbi-wh-browser{
  position:absolute; left:0; top:24px; width:90%;
  border-radius:16px; background:#fff; border:1px solid var(--wh-line); overflow:hidden;
  box-shadow:0 50px 90px rgba(20,60,120,.18), 0 8px 20px rgba(20,60,120,.06);
}
.pbi-wh-bar{ height:38px; display:flex; align-items:center; gap:6px; padding:0 14px; background:var(--wh-soft); border-bottom:1px solid var(--wh-line); }
.pbi-wh-bar s{ width:9px; height:9px; border-radius:50%; background:#D5DCE6; text-decoration:none; }
.pbi-wh-url{ margin-left:14px; flex:1; min-width:0; height:22px; border-radius:6px; background:#fff; border:1px solid var(--wh-line); font-size:10.5px; line-height:20px; padding:0 10px; color:var(--wh-dim); white-space:nowrap; overflow:hidden; }
.pbi-wh-url i{ color:#22A06B; margin-right:4px; }

.pbi-wh-ms{ font-family:"Plus Jakarta Sans",sans-serif; line-height:1.4; }
.pbi-wh-ms-nav{ display:flex; align-items:center; gap:14px; padding:10px 18px; border-bottom:1px solid #EEF2F6; }
.pbi-wh-ms-logo{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--wh-ink); white-space:nowrap; }
.pbi-wh-ms-logo s{ width:16px; height:16px; border-radius:5px; background-image:var(--wh-grad); }
.pbi-wh-ms-links{ display:flex; gap:12px; margin-left:auto; font-size:9.5px; color:var(--wh-text); white-space:nowrap; overflow:hidden; }
.pbi-wh-ms-cta{ padding:4px 10px; border-radius:20px; background:var(--wh-blue); color:#fff; font-size:9px; font-weight:700; white-space:nowrap; }
.pbi-wh-ms-hero{ margin:12px; border-radius:12px; padding:22px 22px 24px; color:#fff; background:linear-gradient(120deg,#0E2A4D 0%,#123A6B 60%,#1F5FAE 100%); position:relative; overflow:hidden; }
.pbi-wh-ms-hero::after{ content:""; position:absolute; right:-30px; top:-30px; width:180px; height:180px; border-radius:50%; background:radial-gradient(closest-side,rgba(92,171,255,.5),rgba(92,171,255,0)); }
.pbi-wh-ms-hero small{ display:block; font-size:8.5px; letter-spacing:.12em; color:#9FC4F0; font-weight:700; }
.pbi-wh-ms-hero b{ display:block; margin-top:6px; font-size:17px; line-height:1.3; font-weight:800; max-width:260px; color:#fff; }
.pbi-wh .pbi-wh-ms-hero p{ margin:6px 0 0; font-size:9px; line-height:1.6; color:#C9DBF2; max-width:250px; }
.pbi-wh-ms-btns{ margin-top:12px; display:flex; gap:6px; position:relative; z-index:1; }
.pbi-wh-ms-btns span{ padding:4px 10px; border-radius:20px; font-size:8.5px; font-weight:700; background:#fff; color:#123A6B; }
.pbi-wh-ms-btns span + span{ background:rgba(255,255,255,.14); color:#fff; }
.pbi-wh-ms-prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 12px; }
.pbi-wh-ms-prod{ border:1px solid #EEF2F6; border-radius:10px; padding:8px; min-width:0; }
.pbi-wh-ms-img{ height:48px; border-radius:7px; background:linear-gradient(135deg,#EEF4FB,#DCE7F4); display:flex; align-items:center; justify-content:center; color:#7FA6D6; font-size:18px; }
.pbi-wh-ms-prod b{ display:block; margin-top:6px; font-size:9px; color:var(--wh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbi-wh-ms-prod em{ display:block; font-style:normal; font-size:8px; color:var(--wh-dim); white-space:nowrap; overflow:hidden; }
.pbi-wh-ms-stats{ display:flex; justify-content:space-around; margin:10px 12px 14px; padding:8px 0; border-radius:10px; background:var(--wh-soft); }
.pbi-wh-ms-stats span{ font-size:8.5px; color:var(--wh-text); text-align:center; }
.pbi-wh-ms-stats b{ display:block; font-size:12px; color:var(--wh-ink); }

.pbi-wh-phone{ position:absolute; right:0; bottom:0; width:196px; height:400px; border-radius:34px; background:var(--wh-navy); padding:9px; box-shadow:0 40px 70px rgba(14,19,25,.28); z-index:2; }
.pbi-wh-phone-in{ height:100%; border-radius:26px; background:#fff; overflow:hidden; position:relative; line-height:1.4; }
.pbi-wh-phone-in::before{ content:""; position:absolute; top:7px; left:50%; width:58px; height:16px; margin-left:-29px; border-radius:10px; background:var(--wh-navy); z-index:2; }
.pbi-wh-mp-nav{ display:flex; align-items:center; justify-content:space-between; padding:30px 12px 8px; font-size:10px; font-weight:800; color:var(--wh-ink); }
.pbi-wh-mp-nav i{ font-size:14px; color:var(--wh-text); }
.pbi-wh-mp-hero{ margin:0 10px; border-radius:12px; padding:14px 12px; color:#fff; background:linear-gradient(140deg,#1F5FAE,#007BFF); }
.pbi-wh-mp-hero b{ display:block; font-size:13.5px; line-height:1.35; color:#fff; }
.pbi-wh .pbi-wh-mp-hero p{ margin:5px 0 0; font-size:8.5px; line-height:1.5; color:#D6E7FF; }
.pbi-wh-mp-act{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 10px 0; }
.pbi-wh-mp-act span{ display:flex; align-items:center; justify-content:center; gap:4px; height:26px; border-radius:8px; font-size:9px; font-weight:700; background:var(--wh-tint); color:var(--wh-blue-d); white-space:nowrap; }
.pbi-wh-mp-act span.is-wx{ background:#E8F7EE; color:#1A8F4E; }
.pbi-wh-mp-sec{ margin:12px 10px 0; font-size:9.5px; font-weight:800; color:var(--wh-ink); }
.pbi-wh-mp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 10px 0; }
.pbi-wh-mp-grid div{ border-radius:8px; border:1px solid #EEF2F6; padding:6px; min-width:0; }
.pbi-wh-mp-grid s{ display:block; height:40px; border-radius:6px; background:linear-gradient(135deg,#EEF4FB,#DCE7F4); text-decoration:none; }
.pbi-wh-mp-grid em{ display:block; margin-top:4px; font-style:normal; font-size:8px; color:var(--wh-text); white-space:nowrap; overflow:hidden; }
.pbi-wh-mp-cert{ margin:8px 10px 0; display:flex; gap:4px; }
.pbi-wh-mp-cert span{ flex:1; height:22px; border-radius:6px; background:var(--wh-soft); font-size:7.5px; line-height:22px; text-align:center; color:var(--wh-dim); font-weight:700; white-space:nowrap; overflow:hidden; }

.pbi-wh-float{ position:absolute; z-index:3; background:#fff; border-radius:14px; border:1px solid var(--wh-line); box-shadow:0 18px 40px rgba(20,60,120,.14); display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; line-height:1.4; }
.pbi-wh-ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--wh-tint); color:var(--wh-blue); flex:none; }
.pbi-wh-float b{ display:block; font-size:12px; color:var(--wh-ink); white-space:nowrap; }
.pbi-wh-float em{ display:block; font-style:normal; font-size:10.5px; color:var(--wh-dim); white-space:nowrap; }
.pbi-wh-float.is-mail{ left:-26px; bottom:36px; }
.pbi-wh-float.is-lang{ right:170px; top:0; padding:6px; gap:4px; border-radius:12px; }
.pbi-wh-float.is-lang span{ padding:4px 10px; border-radius:8px; font-size:11px; font-weight:700; color:var(--wh-text); }
.pbi-wh-float.is-lang span.on{ background-image:var(--wh-grad); color:#fff; }

/* ------------------------------------------------------------- 数据条 */
.pbi-wh-strip{ margin-top:64px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#fff; border-radius:24px; box-shadow:0 30px 60px rgba(20,60,120,.08); border:1px solid #EEF2F6; padding:26px 8px; position:relative; z-index:2; }
.pbi-wh-strip.is-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pbi-wh-strip.is-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pbi-wh-strip.is-1{ grid-template-columns:minmax(0,1fr); }
.pbi-wh-stat{ display:flex; gap:14px; align-items:center; padding:0 24px; border-left:1px solid var(--wh-line); min-width:0; }
.pbi-wh-stat:first-child{ border-left:0; }
.pbi-wh-stat > i{ flex:none; width:44px; height:44px; border-radius:13px; background:var(--wh-tint); color:var(--wh-blue); display:flex; align-items:center; justify-content:center; font-size:20px; }
.pbi-wh-stat b{ display:block; font-size:28px; font-weight:800; color:var(--wh-ink); letter-spacing:-.5px; line-height:1.15; white-space:nowrap; }
.pbi-wh-stat b small{ font-size:13px; font-weight:600; color:var(--wh-text); margin-left:4px; letter-spacing:0; }
.pbi-wh-stat span{ display:block; font-size:13px; color:var(--wh-dim); line-height:1.6; margin-top:2px; }

/* 编辑器预览里别让浮层动画抖 */
.pbi-wh.is-preview .pbi-wh-btn:hover{ transform:none; }

@media (prefers-reduced-motion: reduce){ .pbi-wh .pbi-wh-btn{ transition:none; } .pbi-wh .pbi-wh-btn:hover{ transform:none; } }

/* ============================================================== 响应式 */
@media (max-width:1399px){
  .pbi-wh .pbi-wh-h1{ font-size:50px; }
}
@media (max-width:1199px){
  .pbi-wh{ padding-top:150px; padding-bottom:80px; }
  .pbi-wh-grid{ grid-template-columns:minmax(0,1fr); gap:48px; }
  .pbi-wh-viz{ max-width:720px; width:100%; margin:0 auto; }
  .pbi-wh-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .pbi-wh-stat:nth-child(3){ border-left:0; }
}
@media (max-width:767px){
  .pbi-wh{ padding-top:120px; padding-bottom:64px; }
  .pbi-wh .pbi-wh-h1{ font-size:31px; line-height:1.3; letter-spacing:-.3px; }
  .pbi-wh .pbi-wh-lead{ font-size:15.5px; }
  .pbi-wh .pbi-wh-btn{ height:54px; font-size:15.5px; padding-left:20px; }
  .pbi-wh .pbi-wh-btn i{ width:40px; height:40px; }
  .pbi-wh-viz{ height:420px; }
  .pbi-wh-browser{ width:100%; max-height:350px; }
  .pbi-wh-phone{ width:150px; height:310px; right:-6px; border-radius:28px; padding:7px; }
  .pbi-wh-phone-in{ border-radius:22px; }
  .pbi-wh-float.is-lang{ right:120px; }
  .pbi-wh-float.is-mail{ left:0; bottom:-6px; }
  .pbi-wh-ms-links{ display:none; }
  .pbi-wh-strip{ grid-template-columns:1fr 1fr; padding:6px 0; margin-top:48px; row-gap:0; }
  .pbi-wh-stat{ display:block; border-left:0; padding:16px 18px; }
  .pbi-wh-stat:nth-child(even){ border-left:1px solid var(--wh-line); }
  .pbi-wh-stat:nth-child(n+3){ border-top:1px solid var(--wh-line); }
  .pbi-wh-stat > i{ width:34px; height:34px; font-size:16px; border-radius:10px; margin-bottom:8px; }
  .pbi-wh-stat b{ font-size:22px; }
}
@media (max-width:380px){ .pbi-wh .pbi-wh-h1{ font-size:28px; } }



/* addon: pbi_dual */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「两种配法」：居中头 → 两张对照卡 → 共用底座 → 不太适合
 * 合并进页面 CSS；改完去构建器保存一次页面。类名全部 pbi-du- 前缀。
 * ====================================================================== */

.pbi-du{
  --du-ink:#15171A; --du-text:#5B6472; --du-dim:#8A94A3; --du-line:#E4E9F0;
  --du-soft:#F5F7FA; --du-panel:#F7F9FC; --du-blue:#007BFF; --du-navy:#0E1319;
  --du-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}
.pbi-du.is-bg-soft{ background:var(--du-soft); }
.pbi-du.is-bg-white{ background:#fff; }

.pbi-du-head{ text-align:center; max-width:780px; margin:0 auto 52px; }
.pbi-du .pbi-du-kicker{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--du-dim); }
.pbi-du .pbi-du-h2{ margin:0; font-size:42px; line-height:1.32; font-weight:700; letter-spacing:-.3px; color:var(--du-ink); }
.pbi-du .pbi-du-lead{ margin:18px 0 0; font-size:15.5px; line-height:1.9; color:var(--du-text); }

.pbi-du-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.pbi-du-pair.is-1{ grid-template-columns:minmax(0,1fr); max-width:720px; margin:0 auto; }

.pbi-du-side{ background:#fff; border:1px solid var(--du-line); border-radius:24px; padding:34px 34px 30px; position:relative; overflow:hidden; }
.pbi-du.is-bg-white .pbi-du-side{ background:var(--du-panel); }
.pbi-du-side::before{ content:""; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(closest-side,rgba(92,171,255,.16),rgba(92,171,255,0)); pointer-events:none; }
.pbi-du-side-hd{ display:flex; align-items:center; gap:14px; position:relative; }
.pbi-du-ic{ flex:none; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; background-image:var(--du-grad); color:#fff; box-shadow:0 10px 22px rgba(0,110,255,.25); }
.pbi-du-side.is-b .pbi-du-ic{ background:var(--du-navy); box-shadow:0 10px 22px rgba(14,19,25,.2); }
.pbi-du-side-hd small{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--du-dim); line-height:1.5; }
.pbi-du .pbi-du-t{ margin:0; font-size:22px; line-height:1.35; font-weight:700; letter-spacing:0; color:var(--du-ink); }

.pbi-du .pbi-du-rows{ list-style:none; margin:26px 0 0; padding:0; position:relative; }
.pbi-du .pbi-du-rows li{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:16px; padding:15px 0; border-top:1px solid var(--du-line); }
.pbi-du .pbi-du-rows li:first-child{ border-top:0; }
.pbi-du-k{ font-size:13px; font-weight:700; color:var(--du-dim); line-height:1.7; }
.pbi-du-v{ min-width:0; }
.pbi-du-v b{ font-size:15px; line-height:1.7; color:var(--du-ink); font-weight:600; }
.pbi-du-v em{ display:block; font-style:normal; font-size:13px; line-height:1.7; color:var(--du-text); margin-top:2px; }
.pbi-du-tag{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:6px; font-size:11.5px; font-weight:700; line-height:1.7; vertical-align:1px; background:#E8F7EE; color:#1A8F4E; }
.pbi-du-tag.is-warn{ background:#FFF4E5; color:#B26A00; }

.pbi-du-base{ margin-top:24px; background:#fff; border:1px solid var(--du-line); border-radius:24px; padding:28px 34px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:30px; align-items:center; }
.pbi-du.is-bg-white .pbi-du-base{ background:var(--du-panel); }
.pbi-du-base-t b{ display:block; font-size:19px; color:var(--du-ink); line-height:1.5; }
.pbi-du-base-t span{ display:block; margin-top:4px; font-size:13.5px; color:var(--du-dim); line-height:1.7; }
.pbi-du .pbi-du-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.pbi-du .pbi-du-chips li{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; background:var(--du-panel); border:1px solid #EAEFF5; font-size:14px; font-weight:600; line-height:1.5; color:var(--du-ink); }
.pbi-du.is-bg-white .pbi-du-chips li{ background:#fff; }
.pbi-du-chips i{ color:var(--du-blue); font-size:15px; }

.pbi-du .pbi-du-note{ margin:22px 0 0; text-align:center; font-size:14px; line-height:1.8; color:var(--du-dim); }
.pbi-du-note b{ color:var(--du-text); font-weight:700; }

@media (max-width:1399px){ .pbi-du .pbi-du-h2{ font-size:38px; } }
@media (max-width:1199px){ .pbi-du .pbi-du-h2{ font-size:34px; } }
@media (max-width:991px){
  .pbi-du-pair{ grid-template-columns:minmax(0,1fr); }
  .pbi-du-base{ grid-template-columns:minmax(0,1fr); gap:16px; }
}
@media (max-width:767px){
  .pbi-du-head{ margin-bottom:32px; }
  .pbi-du .pbi-du-h2{ font-size:26px; line-height:1.4; }
  .pbi-du .pbi-du-lead{ font-size:14.5px; }
  .pbi-du-side{ padding:26px 20px 22px; }
  .pbi-du .pbi-du-rows li{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .pbi-du-base{ padding:22px 20px; }
}



/* addon: pbi_sitemap */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「网站结构」：左标题右说明 → 首页大线框 + 栏目卡网格 → 底部三条
 * 合并进页面 CSS；改完去构建器保存一次页面。类名 pbi-sm- 前缀（线框 .wf 收在 .pbi-sm 下）。
 * ====================================================================== */

.pbi-sm{
  --sm-ink:#15171A; --sm-text:#5B6472; --sm-dim:#8A94A3; --sm-line:#E4E9F0;
  --sm-soft:#F5F7FA; --sm-panel:#F7F9FC; --sm-tint:#F0F6FF; --sm-blue:#007BFF; --sm-blue-d:#0A63CC;
}
.pbi-sm.is-bg-white{ background:#fff; }
.pbi-sm.is-bg-soft{ background:var(--sm-soft); }
.pbi-sm[id]{ scroll-margin-top:80px; }

.pbi-sm-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:56px; margin-bottom:48px; }
.pbi-sm-head-l{ min-width:0; }
.pbi-sm .pbi-sm-kicker{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--sm-dim); }
.pbi-sm .pbi-sm-h2{ margin:0; font-size:42px; line-height:1.32; font-weight:700; letter-spacing:-.3px; color:var(--sm-ink); }
.pbi-sm .pbi-sm-lead{ flex:none; width:460px; margin:0; font-size:15.5px; line-height:1.9; color:var(--sm-text); }

.pbi-sm-map{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,2fr); gap:20px; }
.pbi-sm.no-home .pbi-sm-map{ grid-template-columns:minmax(0,1fr); }
.pbi-sm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }

.pbi-sm-pg{ border:1px solid var(--sm-line); border-radius:20px; background:#fff; padding:18px; display:flex; flex-direction:column; min-width:0; transition:box-shadow .25s ease, transform .25s ease; }
.pbi-sm.is-bg-soft .pbi-sm-pg{ background:#fff; }
.pbi-sm-pg:hover{ box-shadow:0 20px 40px rgba(20,60,120,.08); transform:translateY(-2px); }
.pbi-sm-wf{ border-radius:12px; background:var(--sm-panel); border:1px solid #EEF2F6; padding:10px; display:flex; flex-direction:column; gap:6px; height:112px; overflow:hidden; }
.pbi-sm-pg.is-home .pbi-sm-wf{ flex:1; height:auto; min-height:300px; }
.pbi-sm .wf{ border-radius:5px; background:#E3EAF3; }
.pbi-sm .wf.b{ background:linear-gradient(120deg,#123A6B,#1F5FAE); }
.pbi-sm .wf.l{ background:#D6E3F3; }
.pbi-sm .wf-row{ display:grid; gap:6px; }
.pbi-sm-pg.is-extra{ border-style:dashed; border-color:#BBD9FF; background:linear-gradient(180deg,#F5F9FF,#fff); }
.pbi-sm-pg.is-extra .pbi-sm-wf{ background:#fff; border-style:dashed; border-color:#CFE3FF; align-items:center; justify-content:center; color:#7FB2F0; font-size:26px; }

.pbi-sm-pg-hd{ margin-top:14px; display:flex; align-items:center; gap:8px; }
.pbi-sm .pbi-sm-pg-t{ margin:0; font-size:16.5px; line-height:1.4; font-weight:700; letter-spacing:0; color:var(--sm-ink); }
.pbi-sm-pg-hd em{ margin-left:auto; font-style:normal; font-size:11.5px; font-weight:700; color:var(--sm-blue-d); background:var(--sm-tint); padding:2px 8px; border-radius:6px; white-space:nowrap; }
.pbi-sm .pbi-sm-pg-d{ margin:6px 0 0; font-size:13.5px; line-height:1.75; color:var(--sm-text); }

.pbi-sm-foot{ margin-top:22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.pbi-sm-foot.is-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pbi-sm-foot.is-1{ grid-template-columns:minmax(0,1fr); }
.pbi-sm-mf{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; border-radius:18px; background:var(--sm-panel); border:1px solid #EEF2F6; }
.pbi-sm.is-bg-soft .pbi-sm-mf{ background:#fff; }
.pbi-sm-mf > i{ flex:none; font-size:22px; color:var(--sm-blue); margin-top:2px; }
.pbi-sm-mf b{ display:block; font-size:15.5px; line-height:1.5; color:var(--sm-ink); }
.pbi-sm-mf span{ display:block; margin-top:2px; font-size:13.5px; line-height:1.7; color:var(--sm-text); }

.pbi-sm-empty{ padding:40px; text-align:center; color:var(--sm-dim); border:1px dashed var(--sm-line); border-radius:16px; }

@media (prefers-reduced-motion: reduce){ .pbi-sm-pg{ transition:none; } .pbi-sm-pg:hover{ transform:none; } }

@media (max-width:1399px){ .pbi-sm .pbi-sm-h2{ font-size:38px; } .pbi-sm .pbi-sm-lead{ width:410px; } }
@media (max-width:1199px){
  .pbi-sm .pbi-sm-h2{ font-size:34px; }
  .pbi-sm .pbi-sm-lead{ width:340px; font-size:15px; }
  .pbi-sm-map{ grid-template-columns:minmax(0,1fr); }
  .pbi-sm-pg.is-home .pbi-sm-wf{ min-height:200px; }
}
@media (max-width:991px){
  .pbi-sm-head{ display:block; margin-bottom:32px; }
  .pbi-sm .pbi-sm-lead{ width:auto; max-width:620px; margin-top:16px; }
  .pbi-sm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pbi-sm-foot, .pbi-sm-foot.is-2{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  .pbi-sm .pbi-sm-h2{ font-size:26px; line-height:1.4; }
  .pbi-sm .pbi-sm-lead{ font-size:14.5px; }
  .pbi-sm-grid{ grid-template-columns:minmax(0,1fr); }
}



/* addon: pbi_scope */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「交付清单」（大数字头 · 四条横排 · 标签流）
 *
 * ★ 2026-09-18 重做 ★
 * 客户原话：**「这个表感觉每个里面都太长了 能不能换一个方式」**。
 *
 * 最早那版是四栏并排、每栏一列勾选清单。量下来整节 1043px（1440 宽），
 * 四栏被撑成等高 656px —— 可内容是 6 / 8 / 11 / 7 条，
 * 01 和 04 下面空掉一大片，03 一路拖到底。「太长」一半来自内容多，
 * 另一半来自**四栏参差**：一屏里同时看到一列很满、两列半空，眼睛没有落点。
 *
 * 中间试过「分组 tab」（一次只显示一组），高度能压到 713~796px，
 * 但客户看完说 **「不用分组 这样不直观」** —— 说得对：
 * 这一块卖的就是「包含这么多」，把 3/4 藏起来，分量感也跟着藏没了。
 *
 * 最终方案：**四条横排，条目全部变成标签流**。
 *   - 32 条一条不少，全部在页面上，不需要任何交互
 *   - 但没有一列长清单了 —— 每组就是一片标签，扫一眼就完
 *   - 组与组之间是四张独立的卡，参差的问题也不存在了
 * 高度和老版基本持平，换来的是「不再像一张 32 行的表」。
 *
 * ★ 这份 CSS 会被合并进 uploads/xt-pagebuilder/xtpb-page-css-{id}.css ★
 *   1. 不能写相对 url()：相对路径从 uploads 目录解析，必然 404。这一节零图片，不涉及。
 *   2. 改完刷前台没变的话，去构建器里重新保存一次页面 —— 规则见
 *      Frontend::get_page_css()：`_xtpb_page_css` 里一旦带上
 *      `XTPB merged addon css` 标记，前台就不再读磁盘了。
 * ====================================================================== */

.pbi-scope{
  --sp-ink:#15171A;
  --sp-text:#5B6472;
  --sp-mute:#8A94A3;
  --sp-line:rgba(21,23,25,.08);
  --sp-blue:#007BFF;
  --sp-soft:#F5F7FA;
  --sp-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}

.pbi-scope.is-bg-soft.is-bleed{ background:var(--sp-soft); }
.pbi-scope.is-bg-white.is-bleed{ background:#fff; }

.pbi-scope:not(.is-bleed) .pbi-wrap{
  padding-top:70px; padding-bottom:70px; border-radius:24px;
}
.pbi-scope.is-bg-soft:not(.is-bleed) .pbi-wrap{ background:var(--sp-soft); }
.pbi-scope.is-bg-white:not(.is-bleed) .pbi-wrap{ background:#fff; }

/* ---------------------------------------------------------------- 板块头 */
/* 标题和大数字放平在一行：老版三行竖着堆，光头部就吃掉 280px */
.pbi-scope-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin-bottom:40px;
}
.pbi-scope-head-l{ min-width:0; }

.pbi-scope-kicker{
  display:inline-block; margin-bottom:14px;
  font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--sp-mute);
}
.pbi-scope .pbi-scope-h2{
  margin:0; font-size:42px; line-height:1.32; font-weight:700;
  letter-spacing:-.3px; color:var(--sp-ink);
}
.pbi-scope-lead{
  margin:16px 0 0; max-width:600px;
  font-size:16px; line-height:1.85; color:var(--sp-text);
}

/* 右上角那个数字。tabular-nums 是给计数动画用的：
   比例数字在 0→32 的过程中每一帧宽度都不一样，整块会抖。 */
.pbi-scope-total{ flex:none; text-align:right; }
.pbi-scope-total b{
  display:block; font-size:56px; line-height:1; font-weight:800; letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
  background-image:var(--sp-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pbi-scope-total span{ display:block; margin-top:8px; font-size:13px; color:var(--sp-mute); }

/* ------------------------------------------------------------ 四条横排 */
.pbi-scope-rows{ display:flex; flex-direction:column; gap:16px; }

/* align-items:center —— 左边那块（编号+组名+一句话）比右边标签矮的时候
   居中比顶对齐好看；顶对齐会让短组的左栏孤零零吊在上面。 */
.pbi-scope-row{
  display:grid; grid-template-columns:300px minmax(0,1fr); gap:34px;
  align-items:center;
  background:#fff; border-radius:22px; padding:30px 34px;
  box-shadow:0 18px 44px rgba(21,23,25,.05);
  transition:box-shadow .35s ease;
}
.pbi-scope.is-bg-white .pbi-scope-row{
  background:var(--sp-soft); box-shadow:none;
}
.pbi-scope-row:hover{ box-shadow:0 26px 60px rgba(21,23,25,.09); }

.pbi-scope-row-hd{ min-width:0; }
.pbi-scope-row-no{
  font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--sp-blue);
}
.pbi-scope .pbi-scope-row-t{
  margin:7px 0 0; font-size:20px; font-weight:700; line-height:1.45; color:var(--sp-ink);
}
.pbi-scope-row-c{
  display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
  background:rgba(21,23,25,.05); font-size:12px; font-weight:400; color:var(--sp-mute);
  vertical-align:middle;
}
.pbi-scope-row-d{
  margin:8px 0 0; font-size:13.5px; line-height:1.75; color:var(--sp-mute);
}

/* ------------------------------------------------------------ 标签流 */
/* align-content:flex-start —— 行高由内容决定，别把两行标签在竖直方向拉开 */
.pbi-scope-tags{
  display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;
  margin:0; padding:0; list-style:none;
}
/* 标签整体是 baseline 对齐：主文本和后面那截说明文字大小不同，
   baseline 对齐才不会一高一低。小圆点单独 align-self:center。 */
.pbi-scope .pbi-scope-tag{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:10px 16px; border-radius:12px; background:var(--sp-soft);
  transition:background-color .25s ease, transform .25s ease;
}
.pbi-scope.is-bg-white .pbi-scope-tag{ background:#fff; }
.pbi-scope .pbi-scope-tag:hover{
  background:rgba(0,123,255,.07); transform:translateY(-1px);
}
.pbi-scope-tag i{
  flex:none; align-self:center; width:7px; height:7px; border-radius:50%;
  background-image:var(--sp-grad);
}
.pbi-scope .pbi-scope-tag b{
  font-size:15px; font-weight:600; line-height:1.55; color:var(--sp-ink);
}
.pbi-scope .pbi-scope-tag em{
  font-size:13.5px; font-style:normal; line-height:1.55; color:var(--sp-mute);
}
/* ★ 开头的条目：重点（外贸 / 国内分岔、同行容易省掉的那一步）—— 淡蓝底 + 蓝边 */
.pbi-scope .pbi-scope-tag.is-key,
.pbi-scope.is-bg-white .pbi-scope-tag.is-key{ background:#EAF3FF; box-shadow:inset 0 0 0 1px #CFE3FF; }


/* 构建器预览里那条提示 */
.pbi-scope-note{
  padding:14px 18px; border-radius:12px; background:rgba(255,193,7,.12);
  font-size:13px; color:#8a6d1a;
}

@media (prefers-reduced-motion: reduce){
  .pbi-scope-row,.pbi-scope .pbi-scope-tag{ transition:none; }
  .pbi-scope .pbi-scope-tag:hover{ transform:none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:1399px){
  .pbi-scope .pbi-scope-h2{ font-size:38px; }
  .pbi-scope-total b{ font-size:50px; }
  .pbi-scope-row{ grid-template-columns:272px minmax(0,1fr); gap:28px; padding:26px 28px; }
}
@media (max-width:1199px){
  .pbi-scope .pbi-scope-h2{ font-size:34px; }
  .pbi-scope-row{ grid-template-columns:238px minmax(0,1fr); gap:24px; padding:24px 24px; }
  .pbi-scope .pbi-scope-row-t{ font-size:18px; }
}
@media (max-width:991px){
  /* 左栏再窄下去组名就开始一行两个字了，改成上下堆 */
  .pbi-scope-row{ display:block; }
  .pbi-scope-row-hd{ margin-bottom:14px; }
  .pbi-scope-row-d{ margin-top:4px; }
}
@media (max-width:767px){
  /* 手机上标题和数字并排会把标题挤成一列字，改成上下 */
  .pbi-scope-head{ display:block; margin-bottom:22px; }
  .pbi-scope-total{ text-align:left; margin-top:18px; display:flex; align-items:baseline; gap:10px; }
  .pbi-scope-total b{ font-size:40px; }
  .pbi-scope-total span{ margin-top:0; }

  .pbi-scope .pbi-scope-h2{ font-size:26px; line-height:1.4; }
  .pbi-scope-lead{ font-size:14.5px; }

  .pbi-scope-rows{ gap:12px; }
  .pbi-scope-row{ padding:22px 20px; border-radius:18px; }
  .pbi-scope-tags{ gap:8px; }
  .pbi-scope .pbi-scope-tag{ padding:8px 13px; border-radius:11px; }
  .pbi-scope .pbi-scope-tag b{ font-size:14.5px; }
  .pbi-scope .pbi-scope-tag em{ font-size:13px; }

  .pbi-scope:not(.is-bleed) .pbi-wrap{ padding-top:44px; padding-bottom:44px; border-radius:18px; }
}



/* addon: pbi_price */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「价格与版本」（第二版）
 * 头部（左标题右说明）→ 两条选择轴 → 2×2 价格卡 → 横比表 + 旗舰清单 → 附加服务
 * 合并进页面 CSS；改完去构建器保存一次页面。类名 pbi-pr- 前缀。
 * ====================================================================== */

.pbi-pr{
  --pr-ink:#15171A; --pr-text:#5B6472; --pr-dim:#8A94A3; --pr-line:#E4E9F0;
  --pr-soft:#F5F7FA; --pr-panel:#F7F9FC; --pr-tint:#F0F6FF;
  --pr-blue:#007BFF; --pr-blue-d:#0A63CC; --pr-navy-2:#1B2430;
  --pr-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}
.pbi-pr.is-bg-soft.is-bleed{ background:var(--pr-soft); }
.pbi-pr.is-bg-white.is-bleed{ background:#fff; }
.pbi-pr[id]{ scroll-margin-top:80px; }

/* ---------------------------------------------------------------- 头部 */
.pbi-pr-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:56px; margin-bottom:44px; }
.pbi-pr-head-l{ min-width:0; }
.pbi-pr .pbi-pr-kicker{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--pr-dim); }
.pbi-pr .pbi-pr-h2{ margin:0; font-size:42px; line-height:1.32; font-weight:700; letter-spacing:-.3px; color:var(--pr-ink); }
.pbi-pr .pbi-pr-lead{ flex:none; width:460px; margin:0; font-size:15.5px; line-height:1.9; color:var(--pr-text); }

/* ------------------------------------------------------------ 选择轴 */
/* gap:1px + 容器底色当分隔线；底色必须不透明 */
.pbi-pr-axes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--pr-line); border:1px solid var(--pr-line); border-radius:20px; overflow:hidden; margin-bottom:28px; }
.pbi-pr-axes.is-1{ grid-template-columns:minmax(0,1fr); }
.pbi-pr-axis{ background:#fff; padding:24px 28px 26px; }
.pbi-pr.is-bg-soft .pbi-pr-axis{ background:#fff; }
.pbi-pr-axis-hd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pbi-pr-axis-n{ flex:none; width:24px; height:24px; border-radius:8px; background-image:var(--pr-grad); color:#fff; font-size:12.5px; font-weight:800; line-height:24px; text-align:center; }
.pbi-pr-axis-hd b{ font-size:16.5px; color:var(--pr-ink); line-height:1.5; }
.pbi-pr-axis-hd em{ font-style:normal; font-size:13px; color:var(--pr-dim); }
.pbi-pr-axis-ends{ margin-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pbi-pr-end{ border:1px solid var(--pr-line); border-radius:12px; padding:12px 14px; background:var(--pr-panel); }
.pbi-pr-end b{ display:block; font-size:14.5px; color:var(--pr-ink); line-height:1.5; }
.pbi-pr-end span{ display:block; margin-top:3px; font-size:13px; line-height:1.65; color:var(--pr-text); }

/* ------------------------------------------------------------ 2×2 卡 */
.pbi-pr-groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
/* 组框是外层 grid 兄弟会被拉成等高；组内 flex 把剩余高度给卡片区，卡片 stretch，四个按钮对齐 */
.pbi-pr-group{ display:flex; flex-direction:column; border:1px solid var(--pr-line); border-radius:24px; padding:22px 22px 24px; }
.pbi-pr.is-bg-white .pbi-pr-group{ background:var(--pr-panel); }
.pbi-pr.is-bg-soft .pbi-pr-group{ background:#fff; }
.pbi-pr .pbi-pr-group.is-featured{ border-color:#BBD9FF; background:linear-gradient(180deg,#EAF3FF 0%,#F5F9FF 220px); }
.pbi-pr-group-hd{ display:flex; align-items:center; gap:12px; padding:2px 6px 18px; }
.pbi-pr-group-tag{ flex:none; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:800; line-height:1.5; background:#fff; color:var(--pr-ink); box-shadow:0 1px 2px rgba(21,23,25,.08); }
.pbi-pr-group.is-featured .pbi-pr-group-tag{ background-image:var(--pr-grad); color:#fff; box-shadow:none; }
.pbi-pr .pbi-pr-group-t{ margin:0; font-size:15px; font-weight:700; line-height:1.5; color:var(--pr-ink); }
.pbi-pr .pbi-pr-group-d{ margin:0; font-size:13px; line-height:1.6; color:var(--pr-dim); }

.pbi-pr-cards{ flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pbi-pr-cards.is-1{ grid-template-columns:minmax(0,1fr); }
.pbi-pr-flat{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.pbi-pr-flat.is-1{ grid-template-columns:minmax(0,420px); justify-content:center; }
.pbi-pr-flat.is-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pbi-pr-flat.is-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.pbi-pr-card{ position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--pr-line); border-radius:18px; background:#fff; padding:24px 22px 22px; }
.pbi-pr-card.is-pro{ border-color:#CFE3FF; }
.pbi-pr-badge{ position:absolute; top:-10px; right:16px; padding:3px 11px; border-radius:999px; background-image:var(--pr-grad); color:#fff; font-size:11.5px; font-weight:700; line-height:1.6; letter-spacing:.04em; box-shadow:0 6px 16px rgba(0,110,255,.26); }
.pbi-pr .pbi-pr-name{ margin:0; font-size:19px; line-height:1.4; font-weight:700; letter-spacing:0; color:var(--pr-ink); }
.pbi-pr .pbi-pr-posit{ margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--pr-blue-d); font-weight:600; }
.pbi-pr-price{ margin-top:16px; display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.pbi-pr-cur{ font-size:19px; font-weight:700; line-height:1; color:var(--pr-ink); transform:translateY(-6px); }
.pbi-pr-num{ font-size:42px; font-weight:800; line-height:1; color:var(--pr-ink); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.pbi-pr-was{ font-size:13.5px; line-height:1; color:var(--pr-dim); text-decoration:line-through; transform:translateY(-6px); }
.pbi-pr .pbi-pr-once{ margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--pr-dim); }
/* min-height 是对齐用的：四段一句话都写两行，下面规格才横向对齐 */
.pbi-pr .pbi-pr-sum{ margin:16px 0 0; padding-top:16px; border-top:1px solid var(--pr-line); font-size:13.5px; line-height:1.75; color:var(--pr-text); min-height:64px; }
.pbi-pr .pbi-pr-specs{ list-style:none; margin:10px 0 0; padding:0; }
.pbi-pr .pbi-pr-specs li{ padding:9px 0; border-top:1px dashed var(--pr-line); }
.pbi-pr .pbi-pr-specs li:first-child{ border-top:0; }
.pbi-pr-k{ display:block; font-size:11.5px; line-height:1.6; letter-spacing:.04em; color:var(--pr-dim); }
.pbi-pr-v{ display:block; margin-top:2px; font-size:13.5px; line-height:1.6; color:var(--pr-ink); font-weight:600; }
.pbi-pr-v.is-off{ color:var(--pr-dim); font-weight:500; }
.pbi-pr-v.is-on{ color:var(--pr-blue-d); }
.pbi-pr-act{ margin-top:auto; padding-top:20px; }
.pbi-pr .pbi-pr-btn{ display:block; text-align:center; text-decoration:none; padding:13px 16px; border-radius:12px; font-size:14.5px; font-weight:700; line-height:1.2; border:1px solid var(--pr-line); color:var(--pr-ink); background:#fff; transition:transform .22s ease, box-shadow .22s ease; }
.pbi-pr .pbi-pr-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(21,23,25,.10); color:var(--pr-ink); }
.pbi-pr .pbi-pr-btn.is-main{ background-image:var(--pr-grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(0,110,255,.24); }
.pbi-pr .pbi-pr-btn.is-main:hover{ color:#fff; box-shadow:0 16px 34px rgba(0,110,255,.30); }

/* ------------------------------------------------------- 横比表 + 清单 */
.pbi-pr-cmp{ margin-top:56px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:24px; align-items:start; }
.pbi-pr-cmp.is-single{ grid-template-columns:minmax(0,1fr); }
.pbi-pr-cmp-l{ min-width:0; }
.pbi-pr .pbi-pr-cmp-t{ margin:0 0 16px; font-size:20px; line-height:1.4; font-weight:700; letter-spacing:0; color:var(--pr-ink); }

.pbi-pr-tbl-wrap{ border:1px solid var(--pr-line); border-radius:20px; background:#fff; overflow:hidden; }
.pbi-pr-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pbi-pr .pbi-pr-tbl{ width:100%; min-width:640px; border-collapse:collapse; margin:0; }
.pbi-pr .pbi-pr-tbl th,
.pbi-pr .pbi-pr-tbl td{ padding:13px 14px; text-align:left; vertical-align:top; font-size:13.5px; line-height:1.65; color:var(--pr-text); border:0; border-bottom:1px solid var(--pr-line); }
.pbi-pr .pbi-pr-tbl thead th{ background:var(--pr-navy-2); color:#fff; font-weight:700; white-space:nowrap; border-bottom:0; }
.pbi-pr .pbi-pr-tbl thead th small{ display:block; font-size:11.5px; color:#9FB4CC; font-weight:600; }
.pbi-pr .pbi-pr-tbl thead th.c-pro{ background:#123A6B; }
.pbi-pr .pbi-pr-tbl td.c-pro{ background:var(--pr-tint); }
.pbi-pr .pbi-pr-tbl td:first-child{ color:var(--pr-ink); font-weight:600; white-space:nowrap; }
.pbi-pr .pbi-pr-tbl tbody tr:last-child td{ border-bottom:0; }
.pbi-pr-cell-price{ display:block; font-size:16px; font-weight:800; color:var(--pr-ink); font-variant-numeric:tabular-nums; }
.pbi-pr-cell-was{ display:block; font-size:11.5px; font-weight:500; color:var(--pr-dim); text-decoration:line-through; }
.pbi-pr-yes{ color:var(--pr-blue-d); font-weight:700; white-space:nowrap; }
.pbi-pr-no{ color:#B6BFCB; }
.pbi-pr .pbi-pr-tbl-hint{ margin:0; padding:12px 16px; font-size:12.5px; line-height:1.75; color:var(--pr-dim); background:#FCFDFE; border-top:1px solid var(--pr-line); }
.pbi-pr-tbl-hint i{ color:var(--pr-blue); margin-right:5px; }

.pbi-pr-pro{ border-radius:20px; border:1px solid #CFE3FF; background:linear-gradient(180deg,#F0F6FF,#fff 260px); padding:22px 24px 20px; }
.pbi-pr-pro-hd{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.pbi-pr-pro-hd b{ font-size:20px; color:var(--pr-ink); line-height:1.4; }
.pbi-pr-pro-hd span{ font-size:13px; color:var(--pr-dim); }
.pbi-pr .pbi-pr-pro-list{ list-style:none; margin:0; padding:0; }
.pbi-pr .pbi-pr-pro-list li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; padding:9px 0; border-top:1px dashed #D8E6F7; }
.pbi-pr .pbi-pr-pro-list li:first-child{ border-top:0; }
.pbi-pr-pro-list i{ color:var(--pr-blue); font-size:15px; line-height:1.5; }
.pbi-pr-pro-list b{ font-size:14px; line-height:1.5; color:var(--pr-ink); }
.pbi-pr-pro-list em{ font-style:normal; font-size:12.5px; color:var(--pr-dim); margin-left:6px; }

/* ------------------------------------------------------------ 附加服务 */
.pbi-pr-addon{ margin-top:40px; }
/* gap:1px + 容器底色当分隔线；底色必须不透明 */
.pbi-pr-adds{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--pr-line); border:1px solid var(--pr-line); border-radius:20px; overflow:hidden; }
.pbi-pr-adds.is-1{ grid-template-columns:minmax(0,1fr); }
.pbi-pr-adds.is-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pbi-pr-adds.is-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pbi-pr-add{ background:#fff; padding:24px 26px 26px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; }
.pbi-pr-add-i{ width:42px; height:42px; border-radius:13px; background:var(--pr-tint); color:var(--pr-blue-d); display:flex; align-items:center; justify-content:center; font-size:19px; }
.pbi-pr .pbi-pr-add-t{ margin:0; font-size:16px; line-height:1.4; font-weight:700; letter-spacing:0; color:var(--pr-ink); }
.pbi-pr .pbi-pr-add-p{ margin:4px 0 0; font-size:22px; font-weight:800; color:var(--pr-ink); line-height:1.3; }
.pbi-pr-add-p small{ font-size:12.5px; color:var(--pr-dim); font-weight:600; margin-left:3px; }
.pbi-pr .pbi-pr-add-p.is-quote{ font-size:16px; color:var(--pr-blue-d); }
.pbi-pr .pbi-pr-add-d{ margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--pr-text); }
.pbi-pr .pbi-pr-notes{ list-style:none; margin:18px 0 0; padding:0; }
.pbi-pr .pbi-pr-notes li{ position:relative; padding-left:16px; font-size:13.5px; line-height:1.9; color:var(--pr-text); }
.pbi-pr .pbi-pr-notes li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:#C6D2E0; }

.pbi-pr-empty{ padding:40px; text-align:center; color:var(--pr-dim); border:1px dashed var(--pr-line); border-radius:16px; }

@media (prefers-reduced-motion: reduce){ .pbi-pr .pbi-pr-btn{ transition:none; } .pbi-pr .pbi-pr-btn:hover{ transform:none; } }

/* ============================================================== 响应式 */
@media (max-width:1399px){ .pbi-pr .pbi-pr-h2{ font-size:38px; } .pbi-pr .pbi-pr-lead{ width:410px; } }
/* 1200 以下两组并排单卡只剩 ~210px，中文会碎成三行 → 两组上下排 */
@media (max-width:1199px){
  .pbi-pr .pbi-pr-h2{ font-size:34px; }
  .pbi-pr .pbi-pr-lead{ width:340px; font-size:15px; }
  .pbi-pr-groups{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .pbi-pr-flat{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pbi-pr .pbi-pr-sum{ min-height:0; }
  .pbi-pr-cmp{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:991px){
  .pbi-pr-head{ display:block; margin-bottom:28px; }
  .pbi-pr .pbi-pr-lead{ width:auto; max-width:620px; margin-top:16px; }
  .pbi-pr-adds, .pbi-pr-adds.is-2, .pbi-pr-adds.is-4{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  .pbi-pr .pbi-pr-h2{ font-size:26px; line-height:1.4; }
  .pbi-pr .pbi-pr-lead{ font-size:14.5px; }
  .pbi-pr-axes, .pbi-pr-axis-ends{ grid-template-columns:minmax(0,1fr); }
  .pbi-pr-axis{ padding:20px 18px 22px; }
  .pbi-pr-cards, .pbi-pr-flat, .pbi-pr-flat.is-2, .pbi-pr-flat.is-3{ grid-template-columns:minmax(0,1fr); }
  .pbi-pr-group{ padding:16px 14px 18px; border-radius:20px; }
  .pbi-pr-card{ padding:22px 18px 20px; }
  .pbi-pr-cmp{ margin-top:44px; }
  .pbi-pr-pro{ padding:20px 18px 16px; }
  .pbi-pr-add{ padding:22px 18px 24px; }
}



/* addon: pbi_timeline */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「合作流程」：左标题右说明 → 横向时间线 → 资料清单 → 一行说明
 * 合并进页面 CSS；改完去构建器保存一次页面。类名 pbi-tl- 前缀。
 * ====================================================================== */

.pbi-tl{
  --tl-ink:#15171A; --tl-text:#5B6472; --tl-dim:#8A94A3; --tl-line:#E4E9F0;
  --tl-soft:#F5F7FA; --tl-panel:#F7F9FC; --tl-tint:#F0F6FF; --tl-blue:#007BFF; --tl-blue-d:#0A63CC;
  --tl-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}
.pbi-tl.is-bg-soft{ background:var(--tl-soft); }
.pbi-tl.is-bg-white{ background:#fff; }

.pbi-tl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:56px; margin-bottom:48px; }
.pbi-tl-head-l{ min-width:0; }
.pbi-tl .pbi-tl-kicker{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--tl-dim); }
.pbi-tl .pbi-tl-h2{ margin:0; font-size:42px; line-height:1.32; font-weight:700; letter-spacing:-.3px; color:var(--tl-ink); }
.pbi-tl .pbi-tl-lead{ flex:none; width:460px; margin:0; font-size:15.5px; line-height:1.9; color:var(--tl-text); }

/* 时间线：圆点之间一条虚线（画在容器上，从第一个圆点中心到最后一个） */
.pbi-tl-flow{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.pbi-tl-flow.is-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.pbi-tl-flow.is-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pbi-tl-flow.is-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pbi-tl-flow.is-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pbi-tl-flow.is-1{ grid-template-columns:minmax(0,1fr); }
.pbi-tl-flow::before{ content:""; position:absolute; left:24px; right:24px; top:23px; height:2px; background:repeating-linear-gradient(90deg,#BBD9FF 0 6px,transparent 6px 12px); }
.pbi-tl-step{ position:relative; min-width:0; display:flex; flex-direction:column; }
.pbi-tl-n{ position:relative; z-index:1; width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid #BBD9FF; color:var(--tl-blue); font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pbi-tl-step.is-key .pbi-tl-n{ background-image:var(--tl-grad); border-color:transparent; color:#fff; box-shadow:0 10px 22px rgba(0,110,255,.3); }
.pbi-tl-card{ flex:1; margin-top:18px; background:#fff; border:1px solid var(--tl-line); border-radius:18px; padding:18px 18px 20px; display:flex; flex-direction:column; align-items:flex-start; }
.pbi-tl.is-bg-white .pbi-tl-card{ background:var(--tl-panel); }
.pbi-tl-step.is-key .pbi-tl-card{ border-color:#BBD9FF; background:linear-gradient(180deg,#F0F6FF,#fff 140px); }
.pbi-tl .pbi-tl-t{ margin:0; font-size:16px; line-height:1.4; font-weight:700; letter-spacing:0; color:var(--tl-ink); }
.pbi-tl .pbi-tl-d{ margin:8px 0 0; font-size:13.5px; line-height:1.75; color:var(--tl-text); }
.pbi-tl-when{ display:inline-block; margin-top:12px; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:700; line-height:1.7; background:var(--tl-tint); color:var(--tl-blue-d); }
.pbi-tl-when.is-amber{ background:#FFF4E5; color:#B26A00; }

.pbi-tl-prep{ margin-top:28px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:32px; background:#fff; border:1px solid var(--tl-line); border-radius:22px; padding:28px 32px; align-items:start; }
.pbi-tl.is-bg-white .pbi-tl-prep{ background:var(--tl-panel); }
.pbi-tl-prep-t b{ display:block; font-size:19px; line-height:1.5; color:var(--tl-ink); }
.pbi-tl-prep-t span{ display:block; margin-top:6px; font-size:13.5px; line-height:1.75; color:var(--tl-dim); }
.pbi-tl-prep-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px; }
.pbi-tl-pi{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; }
.pbi-tl-pi > i{ width:34px; height:34px; border-radius:10px; background:var(--tl-panel); border:1px solid #EAEFF5; color:var(--tl-blue); display:flex; align-items:center; justify-content:center; font-size:16px; }
.pbi-tl.is-bg-white .pbi-tl-pi > i{ background:#fff; }
.pbi-tl-pi b{ display:block; font-size:14.5px; color:var(--tl-ink); line-height:1.5; }
.pbi-tl-pi span{ display:block; font-size:12.5px; line-height:1.7; color:var(--tl-dim); }
.pbi-tl .pbi-tl-note{ margin:18px 0 0; font-size:13px; line-height:1.8; color:var(--tl-dim); text-align:center; }

.pbi-tl-empty{ padding:40px; text-align:center; color:var(--tl-dim); border:1px dashed var(--tl-line); border-radius:16px; }

@media (max-width:1399px){ .pbi-tl .pbi-tl-h2{ font-size:38px; } .pbi-tl .pbi-tl-lead{ width:410px; } }
@media (max-width:1199px){
  .pbi-tl .pbi-tl-h2{ font-size:34px; }
  .pbi-tl .pbi-tl-lead{ width:340px; font-size:15px; }
  .pbi-tl-flow, .pbi-tl-flow.is-5, .pbi-tl-flow.is-4{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:28px; }
  .pbi-tl-flow::before{ display:none; }
}
@media (max-width:991px){
  .pbi-tl-head{ display:block; margin-bottom:32px; }
  .pbi-tl .pbi-tl-lead{ width:auto; max-width:620px; margin-top:16px; }
  .pbi-tl-prep{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .pbi-tl-prep-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .pbi-tl .pbi-tl-h2{ font-size:26px; line-height:1.4; }
  .pbi-tl .pbi-tl-lead{ font-size:14.5px; }
  .pbi-tl-flow, .pbi-tl-flow.is-5, .pbi-tl-flow.is-4, .pbi-tl-flow.is-3, .pbi-tl-flow.is-2{ grid-template-columns:minmax(0,1fr); }
  .pbi-tl-prep{ padding:22px 20px; }
  .pbi-tl-prep-grid{ grid-template-columns:minmax(0,1fr); }
}



/* addon: pbi_edge */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「交付边界」（整节深色 · 线框表 · 两条细则）
 *
 * ★ 2026-09-18 重做 ★
 *
 * 老版的问题不是某个细节，是**它和前面两块长得一样**：
 * 「适合谁」是卡片阵，「交付清单」是卡片阵，这里又是 2×2 的大卡 ——
 * 读者翻到第三屏，看到的还是同一张版式换内容。
 * 另外三处具体的毛病：
 *   1. 整节 988px，一屏放不下，而这是全页最不该抢戏的内容（免责/排除）。
 *   2. 卡片宽 840px，正文一行四十多个汉字，行长远超舒适区。
 *   3. 说明那句折两行、第二行只剩「估。」两个字，孤字很难看。
 *   4. 底部那块深色板把**最不重要的免责声明做成了整节最醒目的东西**，
 *      而且和上面四张浅色卡是两套完全不同的语言，硬堆在一起。
 *
 * 新版的判断：这一块的语义是**划界**，那就让它自己看起来像一条界线 ——
 *   · **整节深色**。页面节奏变成 白 → 浅灰 → 深，这一节自然分得开，
 *     也不用再靠底部塞一块深板来「压住」声明。
 *     （老版那个深板的用意是让声明被读到，方向对；但整节深色之后，
 *     声明回到正常字号反而更可信 —— 不像在喊。）
 *   · 四条排除项改成 **2×2 线框表**（gap:1px 露底色当线），去掉卡片阴影。
 *     和「适合谁」的自查表同一手法，但这里是深色 + 无勾选框，质感不同。
 *   · 说明那句挪到标题右边，头部从三行压成一行。
 *   · 两条细则收成表下面的两栏小字，用一条细线和上面分开。
 *
 * ★ 视觉上仍然刻意不用红色 ★
 * 「不包含」用红叉、红底，读起来像是在列自己的缺陷。这里用一条中性的短横，
 * 配一句「不是不做，是不在标准价里」—— 同样的信息，语气完全不同。
 *
 * ★ 这份 CSS 会被合并进 uploads/xt-pagebuilder/xtpb-page-css-{id}.css ★
 *   1. 不能写相对 url()：相对路径从 uploads 目录解析，必然 404。这一节零图片，不涉及。
 *   2. 改完刷前台没变的话，去构建器里重新保存一次页面 —— 规则见
 *      Frontend::get_page_css()：`_xtpb_page_css` 里一旦带上
 *      `XTPB merged addon css` 标记，前台就不再读磁盘了。
 * ====================================================================== */

.pbi-edge{
  /* 浅色底时的一套（bg = 白 / 浅灰） */
  --eg-bg:#fff;
  --eg-panel:#fff;
  --eg-line:#E8ECF1;          /* 表格线：必须不透明，它是 board 的背景 */
  --eg-hair:rgba(21,23,25,.10);
  --eg-ink:#15171A;
  --eg-text:#5B6472;
  --eg-mute:#8A94A3;
  --eg-chip:rgba(21,23,25,.05);
  --eg-hover:#F7FAFF;
  --eg-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}
.pbi-edge.is-bg-soft{ --eg-bg:#F5F7FA; --eg-panel:#fff; }

/* 深色。整节换一套变量，下面的规则一条都不用改。 */
.pbi-edge.is-bg-dark{
  --eg-bg:#0E1319;
  --eg-panel:#161C24;
  --eg-line:#2A3340;
  --eg-hair:rgba(255,255,255,.10);
  --eg-ink:#fff;
  --eg-text:rgba(255,255,255,.66);
  --eg-mute:rgba(255,255,255,.44);
  --eg-chip:rgba(255,255,255,.07);
  --eg-hover:#1B222B;
}

.pbi-edge.is-bleed{ background:var(--eg-bg); }
.pbi-edge:not(.is-bleed) .pbi-wrap{
  background:var(--eg-bg);
  padding-top:70px; padding-bottom:70px; border-radius:24px;
}

/* 主题的渐变高亮在深底上偏暗，换一组更亮的。
   .pbi .pbi-hl 是 (0,2,0)，这里 (0,3,0) 才盖得住。 */
.pbi-edge.is-bg-dark .pbi-hl,
.pbi-edge.is-bg-dark .pbi-hl > div,
.pbi-edge.is-bg-dark .pbi-hl .char{
  background-image:linear-gradient(103.71deg,#8FCBFF 17.96%,#3BA0FF 66.13%);
}

/* ---------------------------------------------------------------- 板块头 */
/* 说明那句挪到标题右边：老版它在标题下面自己占两行，
   而且最后一行只剩两个字，孤字。 */
.pbi-edge-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:56px; margin-bottom:40px;
}
.pbi-edge-head-l{ min-width:0; }

.pbi-edge-kicker{
  display:inline-block; margin-bottom:14px;
  font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--eg-mute);
}
.pbi-edge .pbi-edge-h2{
  margin:0; font-size:42px; line-height:1.32; font-weight:700;
  letter-spacing:-.3px; color:var(--eg-ink);
}
.pbi-edge-lead{
  flex:none; width:460px; margin:0;
  font-size:15.5px; line-height:1.9; color:var(--eg-text);
}

/* ------------------------------------------------------------ 排除项表 */
/* board 的背景色就是表格线，靠 gap:1px 露出来。
   两列、单列都不用另写分隔线规则。 */
.pbi-edge-board{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--eg-line); border-radius:22px; overflow:hidden;
}
/* align-content:start —— 格子被同一行里更高的那个撑高时，
   默认 stretch 会把内部两行（标题行 / 说明行）一起拉开，
   于是同一行两格的说明起始高度差一截，看着像没对齐。 */
.pbi-edge-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px;
  align-content:start;
  background:var(--eg-panel); padding:32px 34px 34px;
  transition:background-color .3s ease;
}
.pbi-edge-item:hover{ background:var(--eg-hover); }

/* 那条短横就是「不包含」的记号。不用红叉：列自己的缺陷和划清边界，
   语气差得远。 */
.pbi-edge-dash{
  grid-row:1; grid-column:1; align-self:center;
  width:16px; height:2px; border-radius:2px;
  background-image:var(--eg-grad);
}
.pbi-edge .pbi-edge-item h3{
  grid-row:1; grid-column:2; margin:0;
  font-size:19px; font-weight:700; line-height:1.5; color:var(--eg-ink);
}
.pbi-edge .pbi-edge-item p{
  grid-row:2; grid-column:2; margin:10px 0 0;
  font-size:14.5px; line-height:1.9; color:var(--eg-text);
}

.pbi-edge-tip{
  display:flex; align-items:flex-start; gap:8px;
  margin:20px 0 0; font-size:14px; line-height:1.8; color:var(--eg-mute);
}
.pbi-edge-tip i{
  flex:none; margin-top:10px; width:16px; height:2px; border-radius:2px;
  background:var(--eg-mute); opacity:.6;
}

/* -------------------------------------------------------------- 细则 */
/* 老版是一块深色通栏板。整节已经是深色了，再压一块反而分不出层次；
   而且声明用「正常字号 + 一条分隔线」比做成一块黑板更可信 —— 不像在喊。 */
.pbi-edge-notes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 56px;
  margin-top:40px; padding-top:34px; border-top:1px solid var(--eg-hair);
}
.pbi-edge-note-t{
  display:inline-block; margin-bottom:11px; padding:4px 12px; border-radius:999px;
  background:var(--eg-chip); font-size:12.5px; font-weight:600; color:var(--eg-ink);
}
.pbi-edge .pbi-edge-note p{
  margin:0; font-size:14px; line-height:1.95; color:var(--eg-mute);
}

/* 构建器预览里那条提示 */
.pbi-edge-warn{
  padding:14px 18px; border-radius:12px; background:rgba(255,193,7,.12);
  font-size:13px; color:#8a6d1a;
}

@media (prefers-reduced-motion: reduce){
  .pbi-edge-item{ transition:none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:1399px){
  .pbi-edge .pbi-edge-h2{ font-size:38px; }
  .pbi-edge-lead{ width:410px; }
}
@media (max-width:1199px){
  .pbi-edge .pbi-edge-h2{ font-size:34px; }
  .pbi-edge-lead{ width:340px; font-size:15px; }
  .pbi-edge-item{ padding:26px 26px 28px; }
  .pbi-edge .pbi-edge-item h3{ font-size:18px; }
  .pbi-edge-notes{ gap:26px 40px; }
}
@media (max-width:991px){
  /* 标题和说明并排到这里就挤了，改上下 */
  .pbi-edge-head{ display:block; margin-bottom:24px; }
  .pbi-edge-lead{ width:auto; max-width:620px; margin-top:16px; }
}
@media (max-width:767px){
  .pbi-edge .pbi-edge-h2{ font-size:26px; line-height:1.4; }
  .pbi-edge-board{ grid-template-columns:minmax(0,1fr); border-radius:16px; }
  .pbi-edge-item{ padding:24px 20px 26px; }
  .pbi-edge-notes{ grid-template-columns:minmax(0,1fr); gap:20px; margin-top:26px; padding-top:22px; }
  .pbi-edge:not(.is-bleed) .pbi-wrap{ padding-top:44px; padding-bottom:44px; border-radius:18px; }
}



/* addon: pbi_cta */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「结尾行动」（一张渐变卡 · 两个按钮 · 一行出口）
 *
 * ★ 为什么不用主题自带的 cta ★
 * 主题里那个 `cta` 是「首页 CTA（Synex index-5）」—— 从另一套模板搬来的首页尾块，
 * 带一张 testimonial-bg.jpg 背景图，分类挂在 Factory 下，字段也是首页那套
 * （subtitle / desciption / items）。放到服务页尾部对不上，所以单开一个。
 *
 * ★ 为什么是亮的 ★
 * 它上面一块是「交付边界」，整节近黑（#0E1319）。两块深色叠在一起没有对比，
 * 而且整页节奏会变成「说 → 说 → 这些我们不做 → 请联系我们」，
 * 从一屏免责声明直接转到要联系方式，落差太硬。
 * 这里用浅底 + 一张品牌蓝渐变卡收尾，等于把灯打开 —— 蓝色本来就是全页
 * 勾选框、序号、小圆点一直在用的那个颜色，收尾用它不是新引入一种颜色。
 *
 * ★ 卡片底部那行「出口」是有用的 ★
 * 客户决定不单独做「下一步导航条」，那这一行就得把它的活接过来：
 * 指向价格页、模块与教程分类、其他服务页。读者是在这一页做决定的，
 * 别的内容再好，这一页不给路径他就得自己翻导航。
 * 顺带也是站内链接（对自己的 SEO 有用），以及把四个服务页串起来。
 *
 * ★ 这份 CSS 会被合并进 uploads/xt-pagebuilder/xtpb-page-css-{id}.css ★
 *   1. 不能写相对 url()：相对路径从 uploads 目录解析，必然 404。这一节零图片，不涉及。
 *   2. 改完刷前台没变的话，去构建器里重新保存一次页面 —— 规则见
 *      Frontend::get_page_css()：`_xtpb_page_css` 里一旦带上
 *      `XTPB merged addon css` 标记，前台就不再读磁盘了。
 * ====================================================================== */

.pbi-cta{
  --ct-ink:#15171A;
  --ct-text:#5B6472;
  --ct-soft:#F5F7FA;
  --ct-grad:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
  --ct-on:#fff;                      /* 卡片上的主色（文字/按钮底） */
  --ct-on-dim:rgba(255,255,255,.80);
  --ct-hair:rgba(255,255,255,.22);
  --ct-chip:rgba(255,255,255,.14);
  --ct-btn-ink:#0A63CC;              /* 主按钮的字色：白底蓝字 */
}

.pbi-cta.is-bg-soft.is-bleed{ background:var(--ct-soft); }
.pbi-cta.is-bg-white.is-bleed{ background:#fff; }
.pbi-cta:not(.is-bleed) .pbi-wrap{ padding-top:40px; padding-bottom:40px; }

/* ------------------------------------------------------------------ 卡 */
.pbi-cta-card{
  position:relative; overflow:hidden;
  border-radius:28px; padding:56px 60px;
  background-image:var(--ct-grad);
  box-shadow:0 30px 70px rgba(0,80,180,.22);
}
/* 右上角一团更亮的光：纯渐变的大色块容易显得像一张色卡，
   加一层 radial 之后才有「面」的感觉。不加载任何图片。 */
.pbi-cta-card::before{
  content:""; position:absolute; top:-40%; right:-10%;
  width:60%; padding-bottom:60%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* 深色版：整页底部已经有别的深块时用，避免两块蓝叠一起 */
.pbi-cta.is-tone-dark .pbi-cta-card{
  background-image:none; background-color:#0E1319;
  box-shadow:0 30px 70px rgba(21,23,25,.24);
}
.pbi-cta.is-tone-dark .pbi-cta-card::before{
  background:radial-gradient(closest-side, rgba(92,171,255,.22), rgba(92,171,255,0) 70%);
}
.pbi-cta.is-tone-dark{ --ct-btn-ink:#0E1319; }

/* -------------------------------------------------------------- 正文区 */
.pbi-cta-main{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between; gap:56px;
}
.pbi-cta-tx{ min-width:0; max-width:720px; }

.pbi-cta-kicker{
  display:inline-block; margin-bottom:16px; padding:4px 13px; border-radius:999px;
  background:var(--ct-chip); color:var(--ct-on);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
}
.pbi-cta .pbi-cta-h2{
  margin:0; font-size:40px; line-height:1.34; font-weight:700;
  letter-spacing:-.3px; color:rgba(255,255,255,.80);
}
/* [hl] 在渐变卡上不能再走渐变文字（背景就是渐变，字会消失）。
   改成「整句略暗、高亮段纯白」—— 同样是强调，只换手法。 */
.pbi-cta .pbi-cta-h2 .pbi-hl,
.pbi-cta .pbi-cta-h2 .pbi-hl > div,
.pbi-cta .pbi-cta-h2 .pbi-hl .char{
  background-image:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--ct-on);
}
.pbi-cta-lead{
  margin:18px 0 0; max-width:640px;
  font-size:16px; line-height:1.85; color:var(--ct-on-dim);
}

/* -------------------------------------------------------------- 按钮 */
.pbi-cta-acts{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.pbi-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; }

.pbi-cta .pbi-cta-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 26px; border-radius:14px;
  font-size:15.5px; font-weight:700; line-height:1.2; white-space:nowrap;
  text-decoration:none; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.pbi-cta .pbi-cta-btn i{ font-size:14px; }

.pbi-cta .pbi-cta-btn.is-main{
  background:var(--ct-on); color:var(--ct-btn-ink);
  box-shadow:0 12px 28px rgba(8,40,90,.22);
}
.pbi-cta .pbi-cta-btn.is-main:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(8,40,90,.28); }

.pbi-cta .pbi-cta-btn.is-alt{
  background:transparent; color:var(--ct-on); border-color:var(--ct-hair);
}
.pbi-cta .pbi-cta-btn.is-alt:hover{ background:var(--ct-chip); transform:translateY(-2px); }

/* 按钮下面那句「先聊聊不收费」。降低点击成本的一句话，
   位置必须紧贴按钮 —— 放远了等于没写。 */
.pbi-cta-note{
  margin:0; font-size:13px; line-height:1.7; color:var(--ct-on-dim); opacity:.85;
  text-align:right;
}

/* -------------------------------------------------------------- 出口行 */
.pbi-cta-exits{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(var(--pbi-cta-exits,3),minmax(0,1fr));
  gap:14px;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--ct-hair);
}
.pbi-cta .pbi-cta-exit{
  display:block; padding:16px 18px; border-radius:14px;
  text-decoration:none; color:var(--ct-on);
  background:rgba(255,255,255,.08);
  transition:background-color .25s ease, transform .25s ease;
}
.pbi-cta .pbi-cta-exit:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.pbi-cta-exit-t{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; line-height:1.4;
}
.pbi-cta-exit-t i{ font-size:14px; opacity:.8; }
.pbi-cta-exit-d{
  display:block; margin-top:5px;
  font-size:12.5px; line-height:1.6; color:var(--ct-on-dim);
}

/* 构建器预览里那条提示 */
.pbi-cta-warn{
  padding:14px 18px; border-radius:12px; background:rgba(255,193,7,.12);
  font-size:13px; color:#8a6d1a;
}

@media (prefers-reduced-motion: reduce){
  .pbi-cta .pbi-cta-btn,.pbi-cta .pbi-cta-exit{ transition:none; }
  .pbi-cta .pbi-cta-btn:hover,.pbi-cta .pbi-cta-exit:hover{ transform:none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:1399px){
  .pbi-cta-card{ padding:48px 48px; }
  .pbi-cta .pbi-cta-h2{ font-size:36px; }
  .pbi-cta-main{ gap:40px; }
}
@media (max-width:1199px){
  /* 标题和按钮并排到这里就开始挤，改成上下：按钮落到文字下面、靠左 */
  .pbi-cta-main{ display:block; }
  .pbi-cta-acts{ align-items:flex-start; margin-top:30px; }
  .pbi-cta-note{ text-align:left; }
  .pbi-cta .pbi-cta-h2{ font-size:32px; }
  .pbi-cta-exits{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:34px; padding-top:28px; }
}
@media (max-width:767px){
  .pbi-cta-card{ padding:34px 24px; border-radius:22px; }
  .pbi-cta .pbi-cta-h2{ font-size:26px; line-height:1.4; }
  .pbi-cta-lead{ font-size:15px; margin-top:14px; }
  .pbi-cta-btns{ gap:10px; }
  .pbi-cta .pbi-cta-btn{ flex:1 1 100%; justify-content:center; padding:14px 20px; }
  .pbi-cta-exits{ grid-template-columns:minmax(0,1fr); gap:10px; margin-top:28px; padding-top:24px; }
  .pbi-cta:not(.is-bleed) .pbi-wrap{ padding-top:20px; padding-bottom:20px; }
}


.xtpb-builder-container .xtpb-section.xtpb-row-1789988427068, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427068, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427068, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427068 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427068:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427071, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427071, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427071, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427071 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427071:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427074, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427074, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427074, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427074 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427074:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427077, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427077, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427077, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427077 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427077:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427080, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427080, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427080, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427080 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427080:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427083, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427083, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427083, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427083 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427083:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427086, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427086, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427086, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427086 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427086:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789988427089, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789988427089, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789988427089, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789988427089 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789988427089:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section > .xtpb-section__inner,.xtpb-carousel-content-wrap .xtpb-container{max-width:1920px;padding-left:0px;padding-right:0px;box-sizing:border-box;}@media (max-width:767px){.xtpb-builder-container .xtpb-section > .xtpb-section__inner,.xtpb-carousel-content-wrap .xtpb-container{padding-left:0px;padding-right:0px;}}.xtpb-builder-container .xtpb-container-full{max-width:none;}.xtpb-builder-container .xtpb-section__grid,.xtpb-builder-container .xtpb-inner-section__grid{gap:var(--xtpb-gap,30px);}