/* ============================================================
   产品详情页（站内招商阵地）· 独立样式
   ------------------------------------------------------------
   这一版是「照搬」，不是「借尺度」——

   材质、尺度、卡片、按钮、图表容器、纸面首屏、幕间发丝线，全部取自
   原来的招商落地页（现已退役，原文件在 _retired/coop-merged/coop.css）。
   不再自创第二套手感，理由很实在：那一版就是专门为
   「让代理商一口气看完 —— 正规吗 → 卖什么 → 挣多少 → 谁管我」
   写的，而站内详情页现在的职责与它完全同一件事，
   没有理由长得不一样。

   页面从此固定三段，没有第四种可能：
     01 首屏一屏      后台填字段、模板渲染 —— 全页唯一一块「模板」，
                      也是全页唯一还带编号（01）的地方
     02 详情长图      运营自己排好版出图，后台上传，按顺序往下拼
     12 合作咨询      模板渲染，公司级内容

   底部那块原先挂着「12」的目录号，现在中间十块进了长图，留着 12 就是
   实打实的跳号，所以编号去掉了（容器 id 仍是 pd-s12，只为不动锚点）。

   中间原来那十块（02 资质 … 11 资料）不再展示：长图是位图，切不出板块，
   于是板块开关、跳号的目录编号、页内锚点导航全部一并取消
   （以前 PC 是左栏竖排吸附、手机是顶栏下横滑条，现在两处都不需要了）。
   那十块的样式仍留在本文件里、下面标了「已停用」—— 与 client.js 里的
   渲染函数、server 端的那六组数据一起留着，万一要回退还能用。

   为什么仍然独立一份，不从 app.css 里改：
   朋友圈、案例库、物料库、工具库要的仍是 --page 那个窄柱（看图片不干扰），
   所以 --page 一个像素不动，只把这一页放宽。

   作用域：变量全部挂在 .pd（也就是 #pdBody）上，不外溢到别的 Tab。
   首屏与底部咨询区靠 --pd-edg 做通栏，而 --pd-edg 与 app.css 的
   .page 内边距逐断点对齐 —— 所以不论多宽，首屏内容都与正文严丝合缝地同宽。
   ============================================================ */

.pd{
  /* ---------- 令牌：照搬落地页那一套 ---------- */
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#f5f8fd;

  --line:rgba(15,23,42,.08);
  --line-2:rgba(15,23,42,.13);

  --txt:#0f172a;
  --txt-2:#475569;
  --txt-3:#8b9aac;

  --brand:#2563eb;
  --brand-2:#60a5fa;
  --brand-d:#1d4ed8;
  --brand-soft:rgba(37,99,235,.08);
  --brand-line:rgba(37,99,235,.16);
  --brand-grad:linear-gradient(120deg,#2563eb 0%,#60a5fa 100%);

  --ok:#16a34a;
  --warn:#d97706;

  --r-xl:22px;
  --r-lg:16px;
  --r-md:11px;

  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 1px 2px rgba(15,23,42,.04),0 6px 18px -10px rgba(15,23,42,.12);
  --sh-3:0 10px 34px -14px rgba(23,48,90,.20);

  --dur:.26s;
  --dur-fast:.16s;
  --ease:cubic-bezier(.22,.68,.24,1);

  --pd-w:1180px;   /* 正文与首屏内容的对齐宽度 */
  --pd-edg:14px;   /* 与 .page 内边距逐断点对齐，用来把首屏撑成通栏 */
  --sech:76px;     /* 板块上下留白 —— 幕间呼吸 */

  display:flex;flex-direction:column;
  color:var(--txt);
  background:var(--bg);
}

/* ============================================================
   通栏的前提：打开详情页时，唯一容器 .page 不再限宽
   ------------------------------------------------------------
   站内每个视图都住在 <main class="page"> 里，而它有
   .page{max-width:var(--page)} 并且居中（1024 档 1200px、1440 档 1480px、
   1800 档 1660px）。首屏 / 锚点导航 / 底部咨询靠负边距抵消 .page 的
   *内边距*，能顶到 .page 的边缘 —— 但再往外那段「居中留白」撑不出去。
   于是只要视口比 --page 宽，浅蓝纸面两侧就各留一条灰边：
   1280 下 35px、1366 下 78px、1920 下 125px。看着就是「没铺满」。

   落地页没有这个问题，因为它压根没有这一层：
   .cp-shell{width:100%;max-width:1180px} 直接铺满视口，纸面自然到边。

   所以照搬它这件事要补上这最后一步：详情页打开时（client.js 给 body
   打上 pd-open）放开 .page 的限宽。之后 .page 铺满视口，负边距正好把
   纸面推到两侧，而每一段的**内容**各自靠自己的内层容器收在 1180 居中：
   .pd-hero-in / .pd-detail-in / .pd-coop > .pd-form。

   这是全站唯一一处放开 --page 的地方 —— 列表页与其它 Tab 仍是窄柱，
   一个像素不动。 */
body.pd-open .page{max-width:none}

/* ============================================================
   01 首屏
   ------------------------------------------------------------
   通栏纸面：三层渐变 + 32px 技术图纸网格（径向遮罩只让它在左上显影）
   + 右上角一片极淡点阵。左侧是文，右侧是自家后台界面示意。
   通栏靠 --pd-edg 的负边距做，与 .page 的内边距正好抵消，
   所以它顶到视口两侧，而内容仍与正文同宽。
   ============================================================ */
.pd-hero{
  position:relative;overflow:hidden;
  margin:0 calc(var(--pd-edg) * -1);
  padding:52px var(--pd-edg) 0;
  background:
    radial-gradient(900px 420px at 78% -6%,rgba(96,165,250,.22),transparent 62%),
    radial-gradient(700px 380px at 6% 8%,rgba(37,99,235,.10),transparent 60%),
    linear-gradient(178deg,#eaf2fe 0%,#f5faff 46%,var(--bg) 100%);
}
/* 科技感来源之一：32px 技术图纸网格。径向遮罩让它只在左上显影，不铺满 */
.pd-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(circle at 22% 0%,#000 0%,transparent 68%);
  mask-image:radial-gradient(circle at 22% 0%,#000 0%,transparent 68%);
}
/* 右上角那片点阵：给留白一点「刻度过」的质感，比同心圆环含蓄，
   也不会和右边的长句撞在一起。落地页没有这一片，是详情页原有的，
   收在同一个色系里，留着不碍事 */
.pd-hero::after{
  content:'';position:absolute;right:0;top:0;width:46%;height:72%;pointer-events:none;
  background-image:radial-gradient(rgba(37,99,235,.30) 1.2px,transparent 1.3px);
  background-size:15px 15px;background-position:right top;
  -webkit-mask-image:radial-gradient(100% 100% at 100% 0%,#000 0%,rgba(0,0,0,.30) 40%,rgba(0,0,0,0) 72%);
  mask-image:radial-gradient(100% 100% at 100% 0%,#000 0%,rgba(0,0,0,.30) 40%,rgba(0,0,0,0) 72%);
}
.pd-hero-in{position:relative;z-index:1;max-width:var(--pd-w);margin:0 auto}
.pd-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* 返回：浅底上的低调胶囊，不抢主按钮 */
.pd-back{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(255,255,255,.85);border:1px solid var(--line-2);color:var(--txt-2);
  padding:7px 14px 7px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.pd-back svg{width:15px;height:15px;flex:0 0 auto}
.pd-back:hover{background:#fff;border-color:var(--brand-line);color:var(--brand-d)}
/* 首屏里这枚 01 是个小徽章。放到 .pd-head 里就变成板块编号水印（见下），
   同一个类两种用法，所以两处的规则都带上下文，不写裸 .pd-num */
.pd-hero-top .pd-num{
  flex:0 0 auto;display:grid;place-items:center;
  width:30px;height:30px;border-radius:10px;
  background:rgba(255,255,255,.85);border:1px solid var(--brand-line);color:var(--brand-d);
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.2px;
}

/* 左文右屏。手机单列，PC 才分栏 —— 分栏之后首屏才有「产品页」的样子，
   而不是一段被拉宽的自述 */
.pd-hero-grid{display:grid;gap:34px;margin-top:22px}
.pd-hero-l{min-width:0}
.pd-hero-r{min-width:0}

/* 眉标：白底 + 蓝边胶囊，前面一枚带光圈的蓝点 */
.pd-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;
  color:var(--brand-d);background:rgba(255,255,255,.85);
  border:1px solid var(--brand-line);
  padding:6px 13px;border-radius:999px;
}
.pd-eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.16);
}
.pd-name{
  font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-1.1px;
  margin-top:18px;color:var(--txt);
}
.pd-slogan{font-size:15px;font-weight:700;color:var(--brand-d);margin-top:11px}
.pd-desc{font-size:15.5px;color:var(--txt-2);line-height:1.72;margin-top:14px;max-width:560px}
.pd-hero .pd-tags{margin-top:16px}
.pd-acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}

/* 右侧那块后台界面。纯形状 + 纯 SVG，不标任何数值 ——
   它要传达的是「这是个真在跑的后台」，不是「效果有多好」 */
.pd-screen{
  position:relative;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;
  color:var(--brand);
}
/* 顶部一条渐变发丝线，替掉厚重的标题栏 */
.pd-screen::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
}
.pd-screen-svg{display:block;width:100%;height:auto}
.pd-screen-ln{stroke:var(--brand)}

/* 首屏右栏主视觉卡：有封面展示封面，无封面用品牌渐变 + 首字占位。
   替代被排除的 pdScreen（右侧后台示意 SVG）—— 代理商反感「运营自己排的图」，
   这里用产品自身的主视觉或品牌占位，干净且不会误带后台截图 */
.pd-cover{
  position:relative;width:100%;aspect-ratio:4/3;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--sh-3);background:var(--brand-grad);
}
.pd-cover img{display:block;width:100%;height:100%;object-fit:cover}
.pd-cover-brand{display:grid;place-items:center;align-content:center;gap:14px}
.pd-cover-brand::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.5px);
  background-size:18px 18px;opacity:.5;
}
.pd-cover-ch{
  position:relative;font-size:120px;line-height:1;font-weight:800;color:#fff;
  text-shadow:0 8px 30px rgba(15,30,80,.28);
}
.pd-cover-cap{
  position:relative;font-size:15px;font-weight:700;color:rgba(255,255,255,.92);
  letter-spacing:.4px;padding:0 18px;text-align:center;line-height:1.5;
}

/* 首屏底部那条横滚标签墙【已停用】：把流量四维的词拼起来，一屏塞进十几个能力词。
   词来自「05 覆盖流量与平台生态」，那个字段随结构化板块一起退役了 —— 后台没地方
   再维护它，墙上就会有时有词、有时空着（老产品有、新产品没有），这种不一致比少一条
   墙更糟，所以整条从 DOM 里去掉了，样式留着。
   通栏同样靠 --pd-edg 的负边距，和首屏内边距用同一个变量，
   改一处两边跟着变，不会各走各的 */
.pd-wall{
  position:relative;z-index:1;
  margin:34px calc(var(--pd-edg) * -1) 0;
  padding:18px 0 30px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
}
.pd-wall-in{
  display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;
  padding:0 var(--pd-edg);
  max-width:var(--pd-w);margin:0 auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.pd-wall-in::-webkit-scrollbar{display:none}
.pd-wall-in .ptag{
  flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--txt-2);
  padding:8px 15px;border-radius:999px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.pd-wall-in .ptag:hover{color:var(--brand-d);border-color:var(--brand-line);transform:translateY(-2px)}

/* 首屏的数字。一个都没填就整块不渲染 */
.pd-hero .pd-mets{margin-top:30px}
.pd-mets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pd-met{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;
}
.pd-met b{
  display:block;font-size:19px;font-weight:800;letter-spacing:-.6px;
  color:var(--brand-d);font-variant-numeric:tabular-nums;
}
.pd-met span{display:block;font-size:11.5px;font-weight:700;color:var(--txt-3);margin-top:3px}

/* ============================================================
   板块骨架：编号水印 + 标题 + 幕间发丝线
   ------------------------------------------------------------
   板块不是白卡，是「开放的一段」——卡里再套卡，两层边距叠起来
   能吃掉一半宽度；拆掉外壳之后，卡才真正有地方摊开。
   ============================================================ */
/* width:100% 和 min-width:0 都是必需的，不是保险：
   .pd 是纵向 flex，.pd-wrap 是它的 flex 项。交叉轴上的 auto 外边距（margin:0 auto）
   会让这项「不被拉伸」，宽度退回内容的 min-content —— 那条横滑导航
   会把 min-content 顶到 1180，结果手机上整页被撑到 1180、横向溢出。
   补一个确定的 width:100% 之后，超宽屏仍由 max-width + auto 外边距居中，
   窄屏则老实等于可用宽度。左栏拆掉之后这条更要紧：导航现在横在正文上方，
   它一句话就能把 min-content 顶起来。

   【已停用】页面改成固定三段之后，正文不再有 .pd-wrap 这一层：
   三块各自带内层容器（.pd-hero-in / .pd-detail-in / .pd-coop > .pd-form），
   规则本身留着，回退到结构化排版时把它加回 DOM 即可。 */
.pd-wrap{display:block;width:100%;min-width:0;max-width:var(--pd-w);margin:0 auto}

.pd-sec{position:relative;padding:var(--sech) 0}
/* 幕间分界：一条两端淡出的发丝线，比一条实线轻、比没有强 */
.pd-sec + .pd-sec::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-line) 22%,var(--brand-line) 78%,transparent);
}
/* 锚点落点要躲开吸附导航，否则跳过去标题被压在导航条下面 */
.pd-sec,.pd-coop{scroll-margin-top:calc(var(--barh) + 60px)}

.pd-head{position:relative;margin-bottom:34px}
/* 编号水印：压在标题右上方，不抢内容但让页面有刻度。
   页面固定三段之后，唯一还在用编号的是首屏那枚小徽章（.pd-hero-top .pd-num）；
   底部合作咨询原来是「12」，中间十块搬进长图之后就变成了跳号，已去掉。
   这条规则与下面断点里的字号仍留着 —— 十块的样式都还在，回退时会一起回来。 */
.pd-head .pd-num{
  position:absolute;right:0;top:-26px;
  font-size:104px;line-height:1;font-weight:800;letter-spacing:-6px;
  color:rgba(37,99,235,.055);
  pointer-events:none;user-select:none;
  background:none;border:0;width:auto;height:auto;
}
.pd-head-txt{min-width:0}
.pd-h2{font-size:24px;line-height:1.3;font-weight:800;letter-spacing:-.7px;max-width:720px}
.pd-sub{font-size:15px;color:var(--txt-2);max-width:680px;margin-top:11px}
/* 幕内小标题（「怎么开始合作」这类） */
.pd-sub3{
  font-size:15px;font-weight:800;color:var(--brand-d);letter-spacing:-.2px;
  margin:34px 0 16px;display:flex;align-items:center;gap:8px;
}
.pd-sub3::before{content:'';width:3px;height:14px;border-radius:99px;background:var(--brand-grad)}

/* ============================================================
   页内导航（顶部横滑锚点）【已停用】
   ------------------------------------------------------------
   PC 不再把它掰成一栏侧边目录 —— 那一栏要吃掉 200px 宽度，
   正文被迫在 924px 里排版，十个板块的长页反而更挤。
   现在 PC 与手机同一套：顶栏下面一条横滑胶囊条。

   页面改成固定三段之后整块撤掉了：它列的十二个板块名在长图里
   没有对应落点，点了也不知道该滚到哪。规则留着（含下面那条
   「通栏 + 无内层容器」才需要的 padding 算式），回退时把 DOM
   加回来即可 —— 这也是全站唯一一个需要手算容器留白的元素。 */
.pd-nav{
  position:sticky;top:var(--barh);z-index:12;
  margin:0 calc(var(--pd-edg) * -1);
  /* 通栏之后，第一个按钮不能停在窗口边上 —— 它得和正文左侧那条线对齐。
     居中容器（.pd-wrap）才能用 auto 外边距对齐，而这一条已经跳出了容器、
     自己撑满了窗口（负边距），所以只能把「容器居中本该留的边」算进 padding。
     两笔要一起加：
       --pd-edg              抵消自己那圈负边距（负边距是从 .pd 的边缘往外让的）
       (100% - --pd-w) / 2   容器居中本该留的边；窄屏算出来是负的，max() 兜回 0 */
  padding:0 calc(var(--pd-edg) + max(0px, (100% - var(--pd-w)) / 2));
  background:rgba(248,250,252,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.pd-nav::-webkit-scrollbar{display:none}
.pd-nav-in{display:flex;gap:4px;padding:9px 0;min-width:max-content}
.pd-nav-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;
  border:0;background:transparent;color:var(--txt-2);
  border-radius:9px;padding:7px 11px;font-size:13.5px;font-weight:600;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.pd-nav-btn i{font-style:normal;font-size:11px;font-weight:800;color:var(--txt-3);font-variant-numeric:tabular-nums}
.pd-nav-btn:hover{color:var(--brand-d);background:var(--brand-soft)}
.pd-nav-btn.on{color:var(--brand-d);background:var(--brand-soft)}
.pd-nav-btn.on i{color:var(--brand-d)}
.pd-main{min-width:0}

/* ============================================================
   【已停用】以下六节 —— 02 资质 / 03 总览 / 04 能力 / 09 政策 /
   10 扶持 + 11 资料
   ------------------------------------------------------------
   详情页正文已经改成「运营出图、后台上传长图」，这十块不再渲染。
   样式留在这里是为了能回退（与 client.js 里保留的那批渲染函数、
   server 端的那六组数据配套）。
   要改详情页版式，看上面三节就够：01 首屏 / 02 详情长图 / 12 合作咨询。
   ============================================================ */

/* ============================================================
   02 资质与授权（公司级）
   ------------------------------------------------------------
   发证机构与编号留空就不出那两行；没有证书图就没有「查看证书」
   这个点不开的键 —— 所以卡与卡之间的高度允许不一样。
   ============================================================ */
.pd-quals{display:grid;grid-template-columns:1fr;gap:14px}
.pd-qual{
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.pd-qual-ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-d);margin-bottom:14px;
}
.pd-qual-ic svg{width:20px;height:20px}
.pd-qual > b{font-size:16px;font-weight:800;letter-spacing:-.3px}
.pd-qual-d{font-size:14px;color:var(--txt-2);line-height:1.72;margin-top:8px}
.pd-qual-meta{
  width:100%;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-2);
  display:grid;gap:5px;font-size:12.5px;
}
.pd-qual-meta span{color:var(--txt-2)}
.pd-qual-meta em{font-style:normal;color:var(--txt-3);word-break:break-all}
.pd-qual-go{
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--brand-d);
}
.pd-qual-go::after{content:'→';transition:transform var(--dur-fast) var(--ease)}
.pd-qual-go:hover::after{transform:translateX(3px)}

/* ============================================================
   03 产品总览
   ============================================================ */
.pd-position{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-md);padding:20px 22px;
  font-size:15.5px;color:var(--txt-2);line-height:1.72;box-shadow:var(--sh-1);
}
.pd-pains{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px}
/* 痛点卡恒为上下两段：灰底=痛点，白底=解法。
   不写「≥700px 左右各半」—— 三列并排之后每张卡只剩 ~340px，
   再切两半两边的字都挤成两行 */
.pd-pain{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--sh-1);
}
.pd-pain-q{
  background:var(--surface-2);padding:16px 20px;
  font-size:14.5px;font-weight:700;color:var(--txt-2);
  display:flex;align-items:flex-start;gap:9px;
}
.pd-pain-q i{
  flex:0 0 auto;font-style:normal;font-weight:800;font-size:12px;color:#fff;
  background:#94a3b8;border-radius:6px;padding:2px 7px;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.pd-pain-a{
  padding:16px 20px;font-size:14.5px;color:var(--txt-2);
  border-top:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:5px;
}
.pd-pain-a em{font-style:normal;font-size:12px;font-weight:800;color:var(--brand-d);letter-spacing:.3px}
.pd-pain-a span{line-height:1.72}
.pd-profit{
  margin-top:22px;
  background:linear-gradient(122deg,#eef4ff,#f7fbff);
  border:1px solid var(--brand-line);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--sh-1);
}
.pd-profit-k{
  display:inline-flex;font-size:11.5px;font-weight:800;color:var(--brand-d);
  letter-spacing:.6px;margin-bottom:9px;
}
.pd-profit-t{font-size:15px;color:var(--txt-2);line-height:1.72}

/* ============================================================
   04 核心能力
   ------------------------------------------------------------
   一功能一卡。卡面 = 图表 + 标题 + 说明 + 三要点，卡脚钉「拿货成本」。
   图表 / 要点 / 成本三项都可留空，留空即不渲染，不留空壳。
   ============================================================ */
.pd-feats{display:grid;grid-template-columns:1fr;gap:16px}
.pd-feat{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
/* 图表：一条满宽的浅底带，图形本身按 viewBox 比例居中。
   四种形态（折线 / 柱 / 环 / 宫格）刻意不标数值、不画坐标轴 ——
   装饰性图形一旦带上数字，就会被读成效果宣称 */
.pd-feat-ch{
  display:grid;place-items:center;height:96px;border-radius:12px;
  margin-bottom:16px;overflow:hidden;color:var(--brand);
  background:linear-gradient(180deg,var(--surface-2),#fff);
  border:1px solid var(--line);
}
.pd-feat-ch .pd-chart{display:block;height:70px;width:auto}
.pd-feat-t{font-size:17px;font-weight:800;letter-spacing:-.35px}
.pd-feat-d{display:block;font-size:14.5px;color:var(--txt-2);line-height:1.72;margin-top:9px}
.pd-points{display:grid;gap:8px;margin-top:16px;padding-top:15px;border-top:1px dashed var(--line-2)}
.pd-points li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--txt-2)}
.pd-points li i{flex:0 0 auto;display:grid;place-items:center;width:16px;height:16px;margin-top:3px;color:var(--brand)}
.pd-points li i svg{width:16px;height:16px}
/* 成本行钉在卡底：一排扫过去，「拿货成本」落在同一条水平线上 */
.pd-cost{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);
}
.pd-cost i{font-style:normal;font-size:12px;font-weight:800;color:var(--txt-3);letter-spacing:.4px}
.pd-cost em{
  font-style:normal;font-size:14.5px;font-weight:800;color:var(--brand-d);
  font-variant-numeric:tabular-nums;text-align:right;
}

/* 05 覆盖流量与平台生态：四组标签墙，空组自动不出现 */
.pd-flows{display:grid;grid-template-columns:1fr;gap:16px}
.pd-flow{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--sh-1);
}
.pd-fh{
  font-size:14px;font-weight:800;color:var(--brand-d);
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.pd-fh::before{content:'';width:3px;height:12px;border-radius:99px;background:var(--brand-grad)}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px}
/* 基础标签（首屏标签墙、05 流量四维都走这个）。.pd-ind-tags .ptag 是更醒目的
   行业标签变体，写在后面、同特异性，靠来源顺序覆盖这一条 */
.pd-tags .ptag{
  font-size:13.5px;font-weight:700;color:var(--txt-2);
  padding:7px 15px;border-radius:999px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);
}

/* 06 可落地客户行业：标签墙 + 客户画像 */
.pd-ind-tags .ptag{
  font-size:14px;font-weight:700;color:var(--brand-d);
  padding:7px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--brand-line);box-shadow:var(--sh-1);
}
.pd-profiles{display:grid;grid-template-columns:1fr;gap:13px;margin-top:24px}
.pd-profile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.pd-profile b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.pd-profile span{display:block;font-size:13.5px;color:var(--txt-2);line-height:1.72;margin-top:9px}

/* 07 差异化优势：一张对比表。首列是本产品，高亮 ——
   视线先落在自己身上。手机端由外层横向滚动兜底，别让表格把页面撑宽 */
.pd-cmp-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.pd-cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.pd-cmp th,.pd-cmp td{
  text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.7;
}
.pd-cmp thead th{
  font-size:12px;font-weight:800;color:var(--txt-3);letter-spacing:.4px;
  background:var(--surface-2);white-space:nowrap;
}
.pd-cmp tbody th{font-weight:800;color:var(--txt-2);white-space:nowrap}
.pd-cmp tbody tr:last-child th,.pd-cmp tbody tr:last-child td{border-bottom:0}
.pd-cmp .hl{background:var(--brand-soft);color:var(--brand-d);font-weight:700}
.pd-cmp thead .hl{font-weight:800}
.pd-cmp-corner span{font-size:12px;font-weight:800;color:var(--txt-3)}

/* 08 客户案例：行业 Tab + 案例切换。数据全部来自案例库，
   只摘挂在本产品下的那几条 —— 案例库加一个新行业，这里自动多一个 Tab */
.pd-ctabs{
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding-bottom:4px;margin-bottom:20px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pd-ctabs::-webkit-scrollbar{display:none}
.pd-ctab{
  flex:0 0 auto;cursor:pointer;border:1px solid var(--line);
  background:#fff;color:var(--txt-2);
  font-size:13.5px;font-weight:700;border-radius:999px;padding:8px 16px;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.pd-ctab:hover{border-color:var(--brand-line);color:var(--brand-d)}
.pd-ctab.on{
  background:var(--brand-grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -8px rgba(37,99,235,.75);
}
/* 行业筛选那一排是主筛选，选中态用实色；
   案例切换那排留给同一族里的次级样式（浅蓝底） */
.pd-ctabs-ind{margin-bottom:20px}
.pd-case-empty{
  background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:34px 24px;text-align:center;color:var(--txt-3);font-size:14px;
}
.pd-case{
  display:flex;gap:14px;align-items:stretch;cursor:pointer;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-xl);padding:12px;
  background:#fff;box-shadow:var(--sh-2);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pd-case:hover{border-color:var(--brand-line);box-shadow:var(--sh-3)}
.pdc-shot{
  position:relative;flex:0 0 auto;width:112px;height:80px;border-radius:10px;
  overflow:hidden;background:var(--surface-2);border:1px solid var(--line);
}
.pdc-shot img{width:100%;height:100%;object-fit:cover}
.pdc-no{display:grid;place-items:center;height:100%;font-size:11px;color:var(--txt-3);font-weight:700}
.pdc-n{
  position:absolute;right:5px;bottom:5px;font-style:normal;
  font-size:10px;font-weight:800;color:#fff;background:rgba(15,23,42,.6);
  padding:1px 7px;border-radius:99px;
}
.pdc-body{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.pdc-name{font-size:15px;font-weight:800;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdc-ind{font-size:12.5px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdc-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:3px}
.pdc-stats span{font-size:12.5px;color:var(--txt-3);font-weight:600}
.pdc-stats b{
  font-size:15.5px;color:var(--brand-d);font-weight:800;
  font-variant-numeric:tabular-nums;margin-right:2px;
}
.pd-more{
  display:inline-flex;align-items:center;gap:5px;margin-top:18px;
  border:0;background:transparent;color:var(--brand-d);cursor:pointer;
  font-size:13.5px;font-weight:800;padding:0;
  transition:gap var(--dur-fast) var(--ease);
}
.pd-more:hover{gap:9px}

/* ============================================================
   09 代理政策与收益测算（公司级）
   ------------------------------------------------------------
   政策是多档 × 多维度。某一档的某个维度留空就整行不渲染 ——
   所以「续费分润还没定」不会在前台留一个空格子，而是那行干脆不出现。
   ============================================================ */
.pd-plans{display:grid;grid-template-columns:1fr;gap:14px}
.pd-plan{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
/* 推荐档：1.5px 蓝边 + 顶部一条渐变。不加外发光 —— 浅色体系里会糊 */
.pd-plan.hot{
  border:1.5px solid var(--brand);
  box-shadow:0 10px 30px -16px rgba(37,99,235,.55);
}
.pd-plan.hot::before{
  content:'';position:absolute;top:-1.5px;left:24px;right:24px;height:3px;
  border-radius:0 0 3px 3px;background:var(--brand-grad);
}
.pd-plan-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pd-plan h3{font-size:19px;font-weight:800;letter-spacing:-.4px}
.pd-plan-tag{
  font-size:11.5px;font-weight:800;letter-spacing:.3px;
  color:var(--brand-d);background:var(--brand-soft);
  border-radius:999px;padding:3px 10px;
}
.pd-plan.hot .pd-plan-tag{color:#fff;background:var(--brand-grad)}
.pd-plan-dl{display:grid;gap:0;margin-top:14px}
.pd-plan-dl > div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px dashed var(--line-2);font-size:14px;
}
.pd-plan-dl > div:last-child{border-bottom:0;padding-bottom:0}
.pd-plan-dl dt{color:var(--txt-3);font-weight:600;flex:0 0 auto}
.pd-plan-dl dd{margin:0;font-weight:700;color:var(--txt);text-align:right;font-variant-numeric:tabular-nums}

/* ----- 收益测算 ----- */
.pd-calc{
  margin-top:16px;
  background:linear-gradient(122deg,#eef4ff,#f8fbff);
  border:1px solid var(--brand-line);border-radius:var(--r-xl);
  padding:26px;box-shadow:var(--sh-1);
}
.pd-calc-grid{display:grid;gap:22px}
.pd-calc-t{font-size:20px;font-weight:800;letter-spacing:-.45px}
.pd-calc-sub{font-size:14px;color:var(--txt-2);margin-top:8px}
.pd-fields{display:grid;gap:16px;margin-top:22px}
.pd-field label{display:block;font-size:13.5px;font-weight:700;color:var(--txt-2);margin-bottom:8px}
.pd-field-row{display:flex;align-items:center;gap:10px}
.pd-field-row input{
  flex:1 1 auto;min-width:0;
  border:1px solid var(--line-2);background:#fff;border-radius:11px;
  padding:11px 14px;font-size:16px;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.pd-field-row input:focus,.pd-field-row input:focus-visible{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.16);
}
.pd-field-row input::placeholder{font-weight:600;color:var(--txt-3)}
.pd-field-row em{font-style:normal;font-size:13.5px;font-weight:700;color:var(--txt-3);flex:0 0 auto}
/* 数字框的原生上下箭头：这套设计里没有它的位置，而且它会随悬停忽隐忽现，
   同一个输入框一会儿宽一会儿窄 */
.pd-field-row input[type=number]{-moz-appearance:textfield;appearance:textfield}
.pd-field-row input[type=number]::-webkit-outer-spin-button,
.pd-field-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-field input[type=range]{
  width:100%;margin-top:12px;height:5px;border-radius:999px;
  background:rgba(37,99,235,.16);-webkit-appearance:none;appearance:none;cursor:pointer;
}
.pd-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;background:#fff;
  border:3px solid var(--brand);box-shadow:0 2px 8px -2px rgba(37,99,235,.6);cursor:pointer;
}
.pd-field input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;
  border:3px solid var(--brand);box-shadow:0 2px 8px -2px rgba(37,99,235,.6);cursor:pointer;
}
/* 结果区。三项都填了才算 —— 结果永远写着「按你填的数字推算」 */
.pd-result{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;justify-content:center;
}
.pd-result-k{font-size:13px;font-weight:700;color:var(--txt-3);margin-bottom:9px}
.pd-result-v{
  font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1.1;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  word-break:break-all;font-variant-numeric:tabular-nums;
}
.pd-result-v.idle{
  background:none;-webkit-text-fill-color:var(--txt-3);color:var(--txt-3);
  font-size:17px;letter-spacing:-.3px;font-weight:700;
}
.pd-result-b{
  margin-top:15px;padding-top:14px;border-top:1px dashed var(--line-2);
  display:grid;gap:7px;font-size:13px;color:var(--txt-2);
}
.pd-result-b:empty{margin-top:0;padding-top:0;border-top:0}
.pd-result-b > div{display:flex;justify-content:space-between;gap:10px}
.pd-result-b span{color:var(--txt-3)}
.pd-result-b b{font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums}
.pd-result-hint{font-size:12.5px;color:var(--txt-3);margin-top:11px;line-height:1.7}
.pd-calc-note{font-size:12.5px;color:var(--txt-3);margin-top:18px;line-height:1.75}

/* ============================================================
   10 交付扶持与合作流程（公司级）+ 11 资料下载
   ============================================================ */
.pd-sups{display:grid;grid-template-columns:1fr;gap:13px}
.pd-sup{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.pd-sup > span.pd-sup-n{
  display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--brand-soft);color:var(--brand-d);
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  margin-bottom:13px;
}
.pd-sup > b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.pd-sup > span:not(.pd-sup-n){display:block;font-size:13.5px;color:var(--txt-2);line-height:1.72;margin-top:8px}

.pd-steps{display:grid;grid-template-columns:1fr;gap:13px}
.pd-step{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 22px 70px;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pd-step > span.pd-step-n{
  position:absolute;left:20px;top:20px;
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  font-size:14px;font-weight:800;color:#fff;background:var(--brand-grad);
  box-shadow:0 5px 14px -7px rgba(37,99,235,.8);
  font-variant-numeric:tabular-nums;
}
.pd-step-txt{min-width:0}
.pd-step-txt > b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.pd-step-txt > span{display:block;font-size:13.5px;color:var(--txt-2);line-height:1.72;margin-top:7px}

.pd-dls{display:grid;grid-template-columns:1fr;gap:11px}
.pd-dl{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pd-dl:hover{border-color:var(--brand-line);box-shadow:var(--sh-2)}
.pd-dl-ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-d);
}
.pd-dl-ic svg{width:18px;height:18px}
.pd-dl-b{flex:1 1 auto;min-width:0}
.pd-dl-b b{display:block;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-dl-b span{display:block;font-size:12px;color:var(--txt-3);margin-top:3px}
.pd-dl-go{
  flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--brand-d);
  border:1px solid var(--brand-line);border-radius:999px;padding:5px 13px;
}
.pd-dl-off{opacity:.55}
.pd-dl-off .pd-dl-go{color:var(--txt-3);border-color:var(--line)}

/* ============================================================
   02 详情长图（运营自己出图，后台上传）
   ------------------------------------------------------------
   整段是一块通栏白纸面：图按上传顺序一路拼下来，两张之间不留缝、
   不加圆角 —— 它们是同一页被切成的几段，接缝必须看不出来。
   通栏与首屏同一套做法（--pd-edg 负边距往外顶、内容收回 --pd-w），
   所以宽屏上图的两侧是白纸面而不是页面底色，不会切出一道边。

   图用 width:auto + max-width:100%，而不是 width:100%：
   出图规范是 1180 宽，但万一有人传了一张 750 宽的手机图，
   width:100% 会把它拉伸到 1180 变糊；这样写则是原样居中，
   宁可两侧留白，也不要一张糊图。
   ============================================================ */
.pd-detail{
  margin:0 calc(var(--pd-edg) * -1);
  padding:0 var(--pd-edg);
  background:var(--surface);
}
.pd-detail-in{max-width:var(--pd-w);margin:0 auto}
/* display:block 是必需的，不是保险：inline 的 img 底下会多出一条
   基线缝隙，长图拼接处就会露出一道细白线 —— 「不留缝」最常踩的就是这个坑 */
.pd-shot{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border:0}
/* 点开看原图：鼠标移上去给个手型与轻微压暗，让人知道它是能点的 */
.pd-shot{cursor:zoom-in;transition:filter var(--dur-fast) var(--ease)}
.pd-shot:hover{filter:brightness(.97)}

/* ============================================================
   12 合作咨询
   ------------------------------------------------------------
   落地页最后那一屏是纸面：浅蓝 radial + 32px 网格（遮罩从右上显影），
   上面压一张白表单卡。这里照搬同一套 —— 它是页面最后一个动作，
   越像一张普通表单，越容易被顺手填掉。
   通栏和首屏一样靠 --pd-edg，里面的正文再收回到 1180。
   ============================================================ */
.pd-coop{
  position:relative;overflow:hidden;
  margin:0 calc(var(--pd-edg) * -1);
  padding:var(--sech) var(--pd-edg);
  background:
    radial-gradient(760px 340px at 82% 0%,rgba(96,165,250,.24),transparent 64%),
    linear-gradient(150deg,#eaf2fe,#f6faff 58%,var(--bg));
  border-top:1px solid var(--line);
}
.pd-coop::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(circle at 80% 0%,#000 0%,transparent 66%);
  mask-image:radial-gradient(circle at 80% 0%,#000 0%,transparent 66%);
}
/* 里面的正文收回到正文宽度，与上面的板块对齐 */
.pd-coop > .pd-head{position:relative;z-index:1;max-width:var(--pd-w);margin:0 auto 30px}
.pd-coop > .pd-form{position:relative;z-index:1;max-width:var(--pd-w);margin:0 auto}
/* 这一块自己有底色与上边界，幕间那条发丝线落在它上沿是多余的 */
.pd-sec.pd-coop::before{display:none}

.pd-form{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:26px;box-shadow:var(--sh-2);
}
.pf-row{display:grid;grid-template-columns:1fr;gap:14px}
.pf-row + .pf-row{margin-top:14px}
.pf{display:block;min-width:0;margin-bottom:14px}
.pf-row .pf{margin-bottom:0}
.pf > span{
  display:block;font-size:13.5px;font-weight:700;color:var(--txt-2);
  margin-bottom:7px;
}
.pf input,.pf select,.pf textarea{
  width:100%;font:inherit;font-size:15px;color:var(--txt);
  background:#fff;border:1px solid var(--line-2);border-radius:11px;
  padding:12px 14px;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.pf textarea{resize:vertical;min-height:78px;line-height:1.6}
.pf input:focus,.pf select:focus,.pf textarea:focus,
.pf input:focus-visible,.pf select:focus-visible,.pf textarea:focus-visible{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
/* 下拉箭头自己画一个：原生的那枚在浅色框里偏黑、且各浏览器不一样 */
.pf select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
  padding-right:40px;
}

/* ============================================================
   按钮：照搬落地页那一对（实心渐变 / 描边幽灵）
   ------------------------------------------------------------
   站内其它地方仍然用 app.css 的 .btn —— 这里加 .pd 前缀限定，
   只接管详情页里的按钮，别的地方一个像素不动。
   ============================================================ */
.pd .btn{
  gap:8px;border-radius:12px;font-size:15px;font-weight:700;
  padding:14px 26px;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.pd .btn svg{display:block;width:17px;height:17px;margin-right:0}
.pd .btn.primary{
  color:#fff;background:var(--brand-grad);border-color:transparent;
  box-shadow:0 8px 22px -10px rgba(37,99,235,.75);
}
.pd .btn.primary:hover{
  color:#fff;filter:none;
  transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(37,99,235,.8);
}
.pd .btn.ghost{
  color:var(--brand-d);background:rgba(255,255,255,.9);border-color:var(--brand-line);
}
.pd .btn.ghost:hover{
  color:var(--brand-d);background:#fff;border-color:var(--brand);
  transform:translateY(-2px);box-shadow:none;
}
.pd .btn.lg{padding:14px 26px;font-size:15px;border-radius:12px}
.pf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.pf-hint{font-size:13px;color:var(--txt-3);line-height:1.6;flex:1 1 160px;min-height:20px}
.pf-hint.ok{color:var(--ok);font-weight:700}
.pf-hint.bad{color:#dc2626;font-weight:700}

/* ============================================================
   手机：--pd-edg 与 .page 这一档的内边距对齐到像素
   ------------------------------------------------------------
   .page 在 ≤640 时 padding 是 13px（app.css 的小屏微调），
   而 --pd-edg 的基础值是 14px。差这 1px，通栏的首屏与底部咨询
   就会往视口外多伸 1px —— 被 body 的 overflow-x:clip 裁掉，
   看不见滚动条，但它确实是不对齐的。 */
@media (max-width:640px){
  .pd{--pd-edg:13px}
  /* 手机单列：封面收到更扁的比例，别在首屏占半屏 */
  .pd-cover{aspect-ratio:16/10}
  .pd-cover-ch{font-size:84px}
}

/* 平板（单列首屏）：封面同样收扁，避免一整张竖图把首屏顶长 */
@media (max-width:1023px){
  .pd-cover{aspect-ratio:16/10}
}

/* ============================================================
   平板：两列起步
   ============================================================ */
@media (min-width:700px){
  .pd{--pd-edg:20px}
  .pd-h2{font-size:28px}
  .pd-quals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-pains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-flows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-profiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pd-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-sups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-mets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pf-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   桌面：这一页真正被放宽的那一档
   ============================================================ */
@media (min-width:1024px){
  .pd{--pd-edg:28px;--sech:88px}
  .pd-h2{font-size:30px;letter-spacing:-.9px}
  .pd-sub{font-size:15.5px}
  .pd-head{margin-bottom:40px}
  .pd-head .pd-num{font-size:150px;letter-spacing:-9px;top:-40px}

  .pd-hero{padding:64px var(--pd-edg) 0}
  .pd-hero-grid{grid-template-columns:minmax(0,1fr) 520px;gap:52px;margin-top:26px;align-items:center}
  .pd-eyebrow{margin-bottom:2px}
  .pd-name{font-size:52px;letter-spacing:-1.9px;margin-top:22px}
  .pd-slogan{font-size:16.5px;margin-top:12px}
  .pd-desc{font-size:16.5px;margin-top:15px}
  .pd-acts{margin-top:28px;gap:12px}
  .pd .btn.lg{padding:15px 30px;font-size:15.5px}
  .pd-hero .pd-mets{margin-top:32px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:760px}
  .pd-met b{font-size:24px}
  .pd-wall{margin-top:44px;padding:18px 0 30px}

  .pd-quals{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .pd-qual{padding:22px}
  .pd-pains{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pd-position{padding:20px 22px;font-size:15.5px}
  .pd-profit{padding:28px}
  .pd-profit-t{font-size:15.5px}

  .pd-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  /* 错落：中间一列下沉，破掉「一排一样高」的呆板。
     用 margin-top 不用 transform —— transform 会被自身的悬停上浮占用，
     两者写在同一元素上会互相覆盖 */
  .pd-feats > .pd-feat:nth-child(3n+2){margin-top:26px}
  .pd-feat{padding:26px}
  .pd-flows{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .pd-profiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}

  .pd-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .pd-calc{padding:34px}
  .pd-calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:32px;align-items:center}
  .pd-calc-t{font-size:23px}
  .pd-result-v{font-size:40px}

  .pd-sups{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  .pd-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .pd-steps > .pd-step{padding:22px}
  .pd-steps > .pd-step > .pd-step-n{position:static;margin-bottom:12px}
  .pd-dls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pd-case{padding:14px;gap:18px}
  .pdc-shot{width:200px;height:136px}
  .pdc-name{font-size:15.5px}
  .pdc-stats b{font-size:16px}
  .pd-cmp{min-width:0}
  .pd-cmp thead th{font-size:12.5px}

  .pd-coop > .pd-head{margin-bottom:34px}
  .pd-form{padding:30px}
  .pf input,.pf select,.pf textarea{font-size:15px}
}

/* ============================================================
   悬停上浮：只在真鼠标上生效
   ------------------------------------------------------------
   触屏点一下会「残留」hover 态，手指离开卡片还悬着 —— 看着像卡住了。
   落地页那份没管这件事，这里补上。
   ============================================================ */
@media (hover:hover){
  .pd-qual:hover{box-shadow:var(--sh-2);border-color:var(--brand-line);transform:translateY(-2px)}
  .pd-feat:hover{box-shadow:var(--sh-3);border-color:var(--brand-line);transform:translateY(-3px)}
  .pd-plan:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand-line)}
  .pd-sup:hover{border-color:var(--brand-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
  .pd-profile:hover{border-color:var(--brand-line);transform:translateY(-2px)}
}

/* 超宽屏：内容居中不拉散。1180 是上限，再宽也不会摊开 ——
   这是和列表页（--page 会一路放到 1660）最大的区别 */
@media (min-width:1440px){
  .pd{--pd-edg:32px}
}

/* ============================================================
   减少动效偏好：把位移与入场全关掉
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pd *,.pd *::before,.pd *::after{
    transition-duration:.001ms !important;animation-duration:.001ms !important;
  }
  .pd-feats > .pd-feat:nth-child(3n+2){margin-top:0}
  .pd-qual:hover,.pd-feat:hover,.pd-plan:hover,.pd-sup:hover,.pd-profile:hover{transform:none}
}