/* XTPB merged addon css */

/* addon: pbi_shero */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页首屏（左文右链路图 · 底部白条四项）
 *
 * 规矩：版式、按钮、胶囊、渐变高亮全部走主题 main.css 和 pbi-shared/shared.css，
 * 这一份只管首屏自己的网格、链路图和底部白条。
 *
 * ★ 这份 CSS 会被合并进 uploads/xt-pagebuilder/xtpb-page-css-{id}.css ★
 *   1. 不能写相对 url() —— 相对路径从 uploads 目录解析，必然 404。这一节零图片，不涉及。
 *   2. 改完必须在构建器里保存一次页面才会刷新（Frontend::get_page_css 那套缓存）。
 *      只改这个文件、刷前台看不到变化，八成是忘了这一步，不是 CSS 写错了。
 * ====================================================================== */

.pbi-shero{
  --sh-ink:#15171A;
  --sh-text:#5B6472;
  --sh-line:rgba(21,23,25,.08);
  --sh-blue:#007BFF;
  --sh-soft:#F5F7FA;

  /* ★ 上留白必须让开头部 ★
     主题的头部是浮在内容上面的（absolute），它自己的首屏 .hero-1 写的是
     padding:160px 0 0（main.css:2983）。之前写 64px，链路图第一张卡直接被导航栏盖住。
     这里取 140 —— 头部实测约 120 高，留 20 的余量，同时把整块压进一屏
     （1440×900 下要能一眼看完，160 会差 20）。改数之前先去看 .hero-1 现在是多少。
     不能写 overflow:hidden —— 底部白条故意压出首屏，一裁就没了。 */
  padding-top:140px;
  padding-bottom:0;
}

/* 底纹：标题后面两团极淡的冷光，纯 CSS，不加载图片 */
.pbi-shero.has-texture::before{
  content:""; position:absolute; inset:-20% 0 auto 0; height:760px;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 44% at 18% 26%, rgba(92,171,255,.26), transparent 70%),
    radial-gradient(46% 46% at 82% 30%, rgba(0,123,255,.22), transparent 70%);
  filter:blur(10px);
}

.pbi-shero .container{ position:relative; z-index:2; }

.pbi-shero-grid{
  display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:60px; align-items:center;
  padding-bottom:48px;          /* 给底部白条让位 */
}
.pbi-shero.no-viz .pbi-shero-grid{ grid-template-columns:minmax(0,1fr); }
.pbi-shero.no-viz .pbi-shero-h1{ font-size:60px; }
.pbi-shero.no-viz .pbi-shero-left{ max-width:900px; }

/* min-width:0 少不了：grid 子项默认 min-width:auto，里面有个 nowrap 的元素
   就会把整列撑过容器宽度（360px 下实测溢出 29px）。 */
.pbi-shero-left{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }

.pbi-shero .pbi-shero-h1{
  margin:22px 0 0; font-size:52px; line-height:1.24; font-weight:700;
  letter-spacing:-.5px; color:var(--sh-ink);
}
.pbi-shero-lead{ margin:24px 0 0; font-size:17px; line-height:1.9; color:var(--sh-text); }
.pbi-shero-btns{ margin-top:36px; }

/* 构建器预览里那条提示，前台永远不会出现 */
.pbi-shero-note{
  margin-bottom:24px; padding:12px 16px; border-radius:10px;
  background:rgba(255,193,7,.12); border:1px solid rgba(255,193,7,.4);
  font-size:13px; line-height:1.7; color:#8A6D00;
}

/* ================================================================ 链路图 */
/* 四个节点竖着排，左边一根轨把它们串起来；连线上有一道流动的渐变，
   当前节点由内联 JS 每 1.8s 往下走一步。鼠标移上去或 prefers-reduced-motion 时停。 */
.pbi-shero-viz{ position:relative; z-index:2; min-width:0; }
.pbi-fv{ display:flex; flex-direction:column; gap:18px; }
.pbi-fv-step{ display:flex; gap:20px; align-items:stretch; cursor:default; }
.pbi-fv[data-auto="1"] .pbi-fv-step{ cursor:pointer; }

.pbi-fv-rail{ flex:none; width:34px; display:flex; flex-direction:column; align-items:center; }
.pbi-fv-dot{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#A9B2BF;
  background:#fff; border:1px solid var(--sh-line);
  transition:color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.pbi-fv-step.is-on .pbi-fv-dot{
  color:#fff; background-image:var(--pbi-grad); border-color:transparent;
  box-shadow:0 8px 20px rgba(0,123,255,.35); transform:scale(1.06);
}

/* 连线：底色一根淡线，上面叠一段流动的渐变。
   margin-bottom 要把步与步之间的 18px gap 桥掉，否则连线是断的。 */
.pbi-fv-step:not(:last-child) .pbi-fv-rail::after{
  content:""; flex:1; width:2px; border-radius:2px;
  margin-top:8px; margin-bottom:-18px;   /* 桥掉步与步之间的 gap，改 .pbi-fv 的 gap 时这里要跟着改 */
  background:
    linear-gradient(180deg, rgba(0,123,255,.55), rgba(0,123,255,0)) 0 -100%/100% 60% no-repeat,
    var(--sh-line);
  animation:pbi-fv-flow 2.4s linear infinite;
}
@keyframes pbi-fv-flow{ to{ background-position:0 200%, 0 0; } }

.pbi-fv-card{
  flex:1; min-width:0; padding:14px 16px;
  background:#fff; border:1px solid var(--sh-line); border-radius:14px;
  box-shadow:0 10px 30px rgba(21,23,25,.05);
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.pbi-fv-step.is-on .pbi-fv-card{
  border-color:transparent; box-shadow:0 18px 44px rgba(21,23,25,.11); transform:translateY(-2px);
}
.pbi-fv-card p{ margin:10px 0 0; font-size:13px; line-height:1.7; color:#8A94A3; }
.pbi-fv-card p b{
  display:block; font-size:15px; font-weight:700; color:var(--sh-ink); margin-bottom:2px;
}

/* ① 搜索框 */
.pbi-fv-search{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:22px;
  background:var(--sh-soft); border:1px solid var(--sh-line);
}
.pbi-fv-search > i{ font-size:12px; color:#A9B2BF; }
.pbi-fv-search span{
  flex:1; min-width:0; font-size:13px; color:#6B7482;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pbi-fv-g{ flex:none; font-size:13px; color:var(--sh-blue); }

/* ② 产品页缩影 */
.pbi-fv-page{ display:flex; align-items:center; gap:12px; }
.pbi-fv-pt{
  flex:none; width:52px; height:36px; border-radius:8px;
  background:linear-gradient(160deg,#E4ECF8,#CFE0F7);
}
.pbi-fv-spec{
  flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr;
  gap:6px 10px; align-items:center;
}
.pbi-fv-spec em{
  font-style:normal; font-size:11px; font-weight:700; color:#A9B2BF; letter-spacing:.5px;
  white-space:nowrap;
}
.pbi-fv-spec i{ height:7px; border-radius:4px; background:#E4E9F0; }
.pbi-fv-send{
  flex:none; padding:6px 12px; border-radius:16px;
  background-image:var(--pbi-grad); color:#fff;
  font-size:11px; font-weight:700; white-space:nowrap;
}

/* ③ 询盘入口 + 收件箱（原来的③④合并成一张卡） */
.pbi-fv-ways{ display:flex; gap:8px; flex-wrap:wrap; }
.pbi-fv-ways span{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:18px;
  background:rgba(0,123,255,.07); color:var(--sh-blue);
  font-size:12px; font-weight:600;
}

/* 入口和邮件之间那个向下的小箭头，把「发出 → 到达」串起来 */
.pbi-fv-arrow{
  display:flex; justify-content:center; align-items:center;
  height:18px; margin:5px 0 1px; color:#C6D0DC; font-size:12px;
}
.pbi-fv-mail{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:12px; background:var(--sh-soft);
}
.pbi-fv-avatar{
  flex:none; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,123,255,.08); color:var(--sh-blue); font-size:14px;
}
.pbi-fv-ml{ flex:1; min-width:0; }
.pbi-fv-ml b{
  display:block; font-size:13px; font-weight:700; color:var(--sh-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pbi-fv-ml em{ font-style:normal; font-size:11px; color:#A9B2BF; }
.pbi-fv-ok{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:16px;
  background:rgba(22,163,74,.10); color:#15803D;
  font-size:11px; font-weight:700; white-space:nowrap;
}

/* ================================================================ 底部白条 */
/* 压出首屏、跨到下一节上面。z-index 保证它盖在下一节之上。
   ★ 图标左、文字右的横排 ★
   原来是「图标一行、数字一行、说明一行」竖着堆，整条 193px 高，
   1440×900 的屏首屏要差 75px 才看得完。改成横排后 110 出头，一屏装得下。 */
.pbi-shero-strip{
  position:relative; z-index:3; margin-bottom:-78px;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border-radius:20px;
  box-shadow:0 30px 70px rgba(21,23,25,.10);
  overflow:hidden;
}
.pbi-shero-si{
  position:relative; padding:24px 26px;
  display:flex; align-items:center; gap:14px;
}
.pbi-shero-si + .pbi-shero-si::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px;
  width:1px; background:var(--sh-line);
}
.pbi-shero-sic{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:rgba(0,123,255,.08); color:var(--sh-blue); font-size:17px;
}
.pbi-shero-sbody{ flex:1; min-width:0; }
.pbi-shero-sn{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pbi-shero-sn b{ font-size:28px; line-height:1.15; font-weight:800; color:var(--sh-ink); }
.pbi-shero-sn em{ font-style:normal; font-size:13px; color:var(--sh-text); }
.pbi-shero-si p{ margin:3px 0 0; font-size:13px; line-height:1.6; color:#8A94A3; }

/* 三条时最后一格会空一半，改成三等分 */
.pbi-shero-strip:has(.pbi-shero-si:nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); }
.pbi-shero-strip:has(.pbi-shero-si:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); }
.pbi-shero-strip:has(.pbi-shero-si:only-child){ grid-template-columns:minmax(0,1fr); }

@media (prefers-reduced-motion: reduce){
  .pbi-fv-step:not(:last-child) .pbi-fv-rail::after{ animation:none; }
  .pbi-fv-dot,.pbi-fv-card{ transition:none; }
}

/* ================================================================ 响应式 */

/* ★ 矮屏再收一轮 ★
   首屏要能「一眼看完」，而屏幕高度和宽度是两回事：1366×768、1280×800 这类
   老笔记本宽度不小、但高度只有七八百。这里只按高度收留白和卡片内边距，
   不动字号 —— 字一小就不像首屏了。min-width 限定只在左右分栏时生效。 */
@media (min-width:1200px) and (max-height:840px){
  .pbi-shero{ padding-top:136px; }
  .pbi-shero-grid{ padding-bottom:34px; }
  .pbi-fv{ gap:13px; }
  .pbi-fv-step:not(:last-child) .pbi-fv-rail::after{ margin-bottom:-13px; }
  .pbi-fv-card{ padding:12px 14px; }
  .pbi-fv-card p{ margin-top:8px; }
  .pbi-shero-si{ padding:19px 24px; }
}


@media (max-width:1399px){
  .pbi-shero .pbi-shero-h1{ font-size:46px; }
  .pbi-shero.no-viz .pbi-shero-h1{ font-size:52px; }
  .pbi-shero-grid{ gap:44px; }
  .pbi-shero-si{ padding:22px 20px; gap:12px; }
  .pbi-shero-sn b{ font-size:25px; }
  .pbi-shero-si p{ font-size:12.5px; }
}
@media (max-width:1199px){
  .pbi-shero{ padding-top:150px; }
  .pbi-shero-grid{ grid-template-columns:minmax(0,1fr); gap:48px; padding-bottom:56px; }
  .pbi-shero-left{ max-width:720px; }
  .pbi-shero .pbi-shero-h1,
  .pbi-shero.no-viz .pbi-shero-h1{ font-size:42px; }
  .pbi-shero-viz{ max-width:640px; }
  .pbi-shero-strip{ grid-template-columns:repeat(2,1fr); }
  /* 两列时只给右侧那列画竖线，第三项的竖线要拿掉 */
  .pbi-shero-si:nth-child(3)::before{ display:none; }
  .pbi-shero-si:nth-child(n+3){ border-top:1px solid var(--sh-line); }
}
@media (max-width:767px){
  /* 窄屏头部是一条固定高度的横条，比桌面矮，但也得留够 */
  .pbi-shero{ padding-top:130px; }
  .pbi-shero .pbi-shero-h1,
  .pbi-shero.no-viz .pbi-shero-h1{ font-size:32px; letter-spacing:-.2px; }
  .pbi-shero-lead{ font-size:16px; }
  .pbi-shero-grid{ padding-bottom:40px; }
  .pbi-fv{ gap:16px; }
  .pbi-fv-step{ gap:14px; }
  .pbi-fv-step:not(:last-child) .pbi-fv-rail::after{ margin-bottom:-16px; }
  .pbi-fv-card{ padding:14px; }
  .pbi-fv-page{ flex-wrap:wrap; }
  .pbi-fv-send{ order:3; }
  /* 窄屏不再压出首屏，白条改成单列 */
  .pbi-shero-strip{ grid-template-columns:minmax(0,1fr); margin-bottom:0; }
  .pbi-shero-si{ padding:20px 20px; }
  .pbi-shero-si::before{ display:none !important; }
  .pbi-shero-si + .pbi-shero-si{ border-top:1px solid var(--sh-line); }
}



/* addon: pbi_fit */

/* file: frontend.css */
/* =========================================================================
 * PBI · 服务页「适合谁」（居中标题 · 一张自查表 · 底部脚注）
 *
 * ★ 2026-09-18 二次优化 ★
 * 客户原话：**「这个模块还是有点不太好看」**。
 * 上一版是「四张白卡横排」——问题不在细节，在于这个骨架页面上要出现三次：
 * 这里四张、「交付边界」四张、主题里别的板块也是同一套白底细边圆角卡。
 * 读者翻下来看到的是同一张版式换了三次内容。
 *
 * 这一版把四张分离的卡**合并成一张整表**：
 *   grid gap:1px + 表底色当线色 + 格子白底 —— 分隔线自动生成，
 *   四列、2×2、单列都不用另写规则，永远对齐。
 * 视觉重量从「四块飘着的卡」收成「一张浮起来的表」，
 * 也正好扣住这一块的语义：这是一张让人对号入座的自查表。
 *
 * 每格的锚点是「左勾选框 + 右序号」一行。序号是这一版新加的：
 * 老版靠一枚 opacity .045 的图标水印当视觉重量，那个淡度基本等于没画。
 *
 * ★ 这份 CSS 会被合并进 uploads/xt-pagebuilder/xtpb-page-css-{id}.css ★
 *
 *   1. 不能写相对 url() —— 相对路径从 uploads 目录解析，必然 404。这一节零图片，不涉及。
 *
 *   2. **改完这个文件，前台不一定跟着变。** 真正的规则在 Frontend::get_page_css()：
 *
 *        $target_css = get_post_meta( $id, '_xtpb_page_css' );
 *        if ( $addon_css && ! has_generated_addon_css( $target_css ) ) {
 *            $target_css = $addon_css . $target_css;   // 才去读磁盘上的模块 CSS
 *        }
 *
 *      `has_generated_addon_css()` 就是在 meta 里找 `XTPB merged addon css` 这行标记。
 *      **meta 里一旦带了标记，前台就再也不读磁盘**，模块 CSS 被冻结在写进 meta 的那一刻。
 *      所以：改完刷前台，没变的话去构建器里重新保存一次页面（保存会重写 meta）。
 *      合并后的文件用 filemtime 当版本号，所以不会是浏览器缓存的问题。
 * ====================================================================== */

.pbi-fit{
  --ft-ink:#15171A;
  --ft-text:#5B6472;
  --ft-mute:#8A94A3;
  --ft-line:rgba(21,23,25,.08);
  /* 表格线必须是**不透明**色：它是 board 的背景，靠 gap 露出来当线用，
     半透明的话会把 board 下面的底色透上来，白底和浅灰底上粗细看着不一样 */
  --ft-grid:#E8ECF1;
  --ft-blue:#007BFF;
  --ft-soft:#F5F7FA;
}

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

/* 不通栏时底色只铺在内容区，四角收圆 */
.pbi-fit:not(.is-bleed) .pbi-wrap{
  padding-top:70px; padding-bottom:70px; border-radius:24px;
}
.pbi-fit.is-bg-soft:not(.is-bleed) .pbi-wrap{ background:var(--ft-soft); }
.pbi-fit.is-bg-white:not(.is-bleed) .pbi-wrap{ background:#fff; }

/* ---------------------------------------------------------------- 标题区 */
/* 居中 —— 首屏是左对齐的两栏，这里换个重心 */
/* 居中排版撑不住长段落，宽度收窄一点，逼着正文写短 */
.pbi-fit-head{
  max-width:680px; margin-left:auto; margin-right:auto;
  text-align:center; margin-bottom:38px;
}
.pbi-fit .pbi-fit-h2{
  margin:20px 0 0; font-size:42px; line-height:1.34; font-weight:700;
  letter-spacing:-.3px; color:var(--ft-ink);
}
.pbi-fit-desc{ margin-top:18px; }
.pbi-fit-desc p{
  margin:0; font-size:16px; line-height:1.85; color:var(--ft-text);
}
.pbi-fit-desc p + p{ margin-top:14px; }

.pbi-fit-label{
  margin:0 0 18px; text-align:center;
  font-size:13px; line-height:1.7; color:var(--ft-mute);
}

/* ---------------------------------------------------------------- 自查表 */
/* board 的背景色就是表格线。格子之间 1px 的 gap 把它露出来。 */
.pbi-fit-board{
  background:var(--ft-grid);
  border-radius:26px; overflow:hidden;
  box-shadow:0 26px 64px rgba(21,23,25,.07);
}
/* 白底页面上光靠阴影浮不起来，补一圈描边 */
.pbi-fit.is-bg-white .pbi-fit-board{
  box-shadow:0 26px 64px rgba(21,23,25,.10);
}

.pbi-fit-list{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
}
/* 条目数不足四条时列数跟着收，别在右边留一格空白 */
.pbi-fit.is-3 .pbi-fit-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pbi-fit.is-2 .pbi-fit-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pbi-fit.is-1 .pbi-fit-list{ grid-template-columns:minmax(0,1fr); }

.pbi-fit-item{
  position:relative; overflow:hidden;
  padding:32px 26px;
  background:#fff;
  transition:background-color .35s ease;
}
.pbi-fit-item:hover{ background:#F7FAFF; }

/* 顶上那条渐变线：hover 时从左往右拉开。
   格子之间没有间距，所以这条线贴着 top:0 也不会在半空中断开。 */
.pbi-fit-item::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background-image:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.pbi-fit-item:hover::after{ transform:scaleX(1); }

/* 图标水印挪到右下角：右上角被序号占了。
   也比第一版小了一圈、并且**收进格子里不再出血** —— 出血的大图标会被
   格子的 overflow 切掉半个，看着像一块没洗干净的灰印子，不像纹理。

   ★ 颜色和浓度改过一次 ★
   最早是墨色 .035。客户看完的第一反应是**「小图标是不是没有出来」** ——
   淡到让人以为坏了，那就不是低调，是缺失。
   改成品牌蓝 .09：蓝色在浅底上本来就比墨色显眼，同样的浓度看得见，
   而且一眼能认出是这套设计里的东西，不像一块灰印子。
   再深就和勾选框、序号抢这一格的焦点了。 */
.pbi-fit-wm{
  position:absolute; right:14px; bottom:12px;
  font-size:56px; line-height:1; color:var(--ft-blue);
  opacity:.09; pointer-events:none;
}

/* 每格顶上一行：左勾选框，右序号 */
.pbi-fit-hd{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}

/* 勾选框 —— 这一块的视觉锚点。进视口后由内联 JS 逐个加 .is-on */
.pbi-fit-box{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:10px;
  border:2px solid #CBD5E1; background:#fff;
  color:#fff; font-size:13px;
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pbi-fit-box i{
  transform:scale(.4); opacity:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.pbi-fit-item.is-on .pbi-fit-box{
  border-color:transparent;
  background-image:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
  box-shadow:0 6px 16px rgba(0,123,255,.30);
}
.pbi-fit-item.is-on .pbi-fit-box i{ transform:scale(1); opacity:1; }

/* 序号跟着打勾一起变蓝：一个动作两处响应，节奏才看得出来 */
.pbi-fit-no{
  font-size:32px; font-weight:700; line-height:1; letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  color:rgba(21,23,25,.09);
  transition:color .45s ease;
}
.pbi-fit-item.is-on .pbi-fit-no{ color:rgba(0,123,255,.20); }

/* 这里**故意不写 min-height 兜两行**。
   上一版兜了，本意是让四格说明的起始高度对齐；可四条标题按字段说明
   都控制在 13 字以内、实际都是一行，兜出来的就是标题和说明之间一块
   28px 的空洞，四格全有 —— 为一个几乎不发生的情况，付了一个一直都在的代价。
   标题真折两行的话那一格的说明往下掉一行，比空洞好看。 */
.pbi-fit .pbi-fit-t{
  position:relative; z-index:1;
  margin:20px 0 0; font-size:18px; line-height:1.55; font-weight:700; color:var(--ft-ink);
}
.pbi-fit-d{
  position:relative; z-index:1;
  margin:10px 0 0; font-size:14px; line-height:1.8; color:var(--ft-text);
}

/* ------------------------------------------------------- 底部「不太适合」 */
/* 老版是一条整宽虚线框，和上面的表抢重量 —— 两个框叠在一起，
   「不适合」的那条反而更显眼。改成表下面一行居中脚注，语义上就该是次要的。 */
.pbi-fit-note{
  display:flex; align-items:flex-start; gap:12px;
  max-width:780px; margin:26px auto 0;
}
.pbi-fit-note-ic{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:rgba(21,23,25,.06); color:var(--ft-mute); font-size:11px;
  margin-top:1px;
}
.pbi-fit-note p{
  margin:0; font-size:13.5px; line-height:1.85; color:var(--ft-mute);
}

@media (prefers-reduced-motion: reduce){
  .pbi-fit-item,.pbi-fit-item::after,.pbi-fit-box,.pbi-fit-box i,.pbi-fit-no{ transition:none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:1399px){
  .pbi-fit .pbi-fit-h2{ font-size:38px; }
  .pbi-fit-item{ padding:28px 22px; }
  .pbi-fit .pbi-fit-t{ font-size:17px; }
  .pbi-fit-no{ font-size:28px; }
}
@media (max-width:1199px){
  /* 四列在这个宽度会挤成一列一个词，改 2×2。
     gap 画的十字线不用另写规则，自己就对上了。 */
  .pbi-fit-list,
  .pbi-fit.is-3 .pbi-fit-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pbi-fit .pbi-fit-h2{ font-size:34px; }
  .pbi-fit-head{ margin-bottom:34px; }
}
@media (max-width:767px){
  .pbi-fit-list,
  .pbi-fit.is-3 .pbi-fit-list,
  .pbi-fit.is-2 .pbi-fit-list{ grid-template-columns:minmax(0,1fr); }
  .pbi-fit .pbi-fit-h2{ font-size:27px; line-height:1.4; }
  .pbi-fit-desc p{ font-size:15px; }
  .pbi-fit-board{ border-radius:20px; box-shadow:0 18px 44px rgba(21,23,25,.07); }
  .pbi-fit-item{ padding:24px 20px; }
  .pbi-fit .pbi-fit-t{ margin-top:18px; }
  .pbi-fit-wm{ font-size:46px; right:12px; bottom:10px; }
  .pbi-fit-no{ font-size:26px; }
  .pbi-fit-note{ margin-top:20px; }
  .pbi-fit:not(.is-bleed) .pbi-wrap{ padding-top:44px; padding-bottom:44px; border-radius:18px; }
}



/* 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_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-1789913835100, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789913835100, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789913835100, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789913835100 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789913835100: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-1789913835103, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789913835103, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789913835103, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789913835103 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789913835103: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-1789913835106, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789913835106, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789913835106, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789913835106 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789913835106: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-1789913835109, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789913835109, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789913835109, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789913835109 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789913835109: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-1789913835112, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789913835112, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789913835112, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789913835112 { padding: 1px 0px 1px 0px;; }@media (min-width: 768px) and (max-width: 991px) {}@media (max-width: 767px) {}.xtpb-row-1789913835112: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);}