@charset "utf-8";
/* =============================================================================
 * 春笋官网 - 内页公共样式
 * 文件：assets/css/pages.css
 * 适用：features/*.html、solutions/*.html、product.html、pricing.html、
 *       about.html、contact.html、docs/*.html、news/*.html、legal/*.html
 * 说明：只放首页没有、内页共用的组件；能复用 components.css 的一律复用。
 * 最后修改：2026-08-10
 * ========================================================================== */

/* ===== 面包屑 ============================================================= */
.breadcrumb{
  padding:calc(var(--nav-h) + 20px) 0 0;
  font-size:13px;color:var(--ink-500);
}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.breadcrumb a:hover{color:var(--green-600);}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--ink-300);}
.breadcrumb li:last-child{color:var(--ink-900);font-weight:600;}

/* ===== 内页页头 =========================================================== */
.pagehead{
  position:relative;overflow:hidden;
  padding:36px 0 64px;
  background:var(--grad-soft);
}
.pagehead::after{
  content:"";position:absolute;right:-120px;top:-120px;
  width:420px;height:420px;border-radius:50%;
  background:var(--green-400);opacity:.10;filter:blur(70px);
}
.pagehead__inner{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;}
.pagehead__ico{
  width:60px;height:60px;border-radius:16px;margin-bottom:20px;
  background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.pagehead__ico svg{width:28px;height:28px;}
.pagehead__t{font-size:42px;line-height:1.25;letter-spacing:-1px;}
.pagehead__d{margin-top:18px;font-size:17px;line-height:1.9;color:var(--ink-500);}
.pagehead__d b{color:var(--ink-900);}
.pagehead__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.pagehead__facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.pagehead__fact{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--r-f);
  background:#fff;box-shadow:var(--sh-1);
  font-size:13px;color:var(--ink-700);
}
.pagehead__fact b{color:var(--green-600);font-weight:700;}

/* 页头右侧：核心数字卡 */
.pagehead__card{
  background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-2);padding:28px;
}
.pagehead__card-t{font-size:14px;color:var(--ink-500);margin-bottom:18px;}
.pagehead__metrics{display:grid;gap:16px;}
.pagehead__metric{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px dashed var(--line);}
.pagehead__metric:last-child{padding-bottom:0;border-bottom:0;}
.pagehead__metric b{
  font-size:30px;font-weight:800;color:var(--green-600);line-height:1;
  font-variant-numeric:tabular-nums;min-width:96px;
}
.pagehead__metric span{font-size:13.5px;color:var(--ink-500);line-height:1.6;}

/* ===== 痛点条（内页简版，3 条横排） ====================================== */
.painline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.painline__item{
  padding:26px;border-radius:var(--r-m);
  background:#fff;border:1px solid var(--line);
  position:relative;
}
.painline__q{
  position:relative;padding-left:30px;
  font-size:15.5px;font-weight:600;color:var(--ink-900);line-height:1.7;
}
.painline__q::before{
  content:"“";position:absolute;left:0;top:-12px;
  font-size:44px;color:var(--line);font-family:Georgia,serif;line-height:1;
}
.painline__cost{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--ink-500);
}
.painline__cost b{color:var(--danger);font-weight:700;}

/* ===== 左右交错图文（"春笋怎么做"） ===================================== */
.alt__row{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:44px 0;
}
.alt__row+.alt__row{border-top:1px dashed var(--line);}
.alt__row:nth-child(even) .alt__media{order:-1;}
.alt__step{
  display:inline-flex;align-items:center;gap:8px;
  height:28px;padding:0 14px;margin-bottom:16px;border-radius:var(--r-f);
  background:var(--green-100);color:var(--green-700);font-size:13px;font-weight:700;
}
.alt__t{font-size:26px;line-height:1.4;}
.alt__d{margin:14px 0 18px;font-size:15.5px;line-height:1.9;color:var(--ink-500);}
.alt__d b{color:var(--ink-900);}
.alt__list li{
  position:relative;padding-left:24px;margin-bottom:10px;
  font-size:14.5px;color:var(--ink-700);line-height:1.7;
}
.alt__list li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322A85C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* 交错块的示意图容器 */
.alt__media{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px;box-shadow:var(--sh-1);
}
.alt__media-t{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink-500);margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.alt__media-t i{width:8px;height:8px;border-radius:50%;background:var(--green-500);flex-shrink:0;}

/* 示意用的"消息卡片" */
.mockmsg{display:flex;gap:10px;margin-bottom:14px;}
.mockmsg:last-child{margin-bottom:0;}
.mockmsg__avt{
  width:32px;height:32px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;background:#8FA0B4;
}
.mockmsg--bot .mockmsg__avt{background:var(--grad-brand);}
.mockmsg__b{
  flex:1;min-width:0;padding:10px 14px;border-radius:10px;
  background:var(--bg-soft);font-size:13.5px;line-height:1.7;color:var(--ink-700);
}
.mockmsg--bot .mockmsg__b{background:var(--green-50);color:var(--ink-900);}
.mockmsg__b b{color:var(--green-700);}
.mockmsg__meta{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--ink-500);line-height:1.8;
}
.mockmsg__tag{
  display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;
  background:rgba(34,168,92,.14);color:var(--green-700);font-size:11.5px;font-weight:600;
}

/* ===== 配置项表格 ========================================================= */
.cfg{background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-1);}
.cfg table{min-width:600px;}
.cfg th,.cfg td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;}
.cfg thead th{background:var(--bg-soft);font-weight:700;color:var(--ink-900);font-size:14px;}
.cfg td:first-child{font-weight:600;color:var(--ink-900);width:32%;}
.cfg td{color:var(--ink-500);}
.cfg tbody tr:last-child td{border-bottom:0;}
.cfg tbody tr:hover td{background:var(--green-50);}
.cfg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ===== 相关能力推荐 ======================================================= */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.related__card{
  display:flex;align-items:center;gap:14px;padding:22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  transition:all var(--t-base);
}
.related__card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--green-100);}
.related__ico{
  width:42px;height:42px;flex-shrink:0;border-radius:11px;
  background:var(--green-50);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;
}
.related__t{font-size:16px;font-weight:700;color:var(--ink-900);}
.related__d{margin-top:3px;font-size:13px;color:var(--ink-500);line-height:1.6;}

/* ===== 文档页：左侧锚点导航 + 右侧正文 =================================== */
.doc{display:grid;grid-template-columns:230px 1fr;gap:48px;align-items:start;}
.doc__nav{position:sticky;top:calc(var(--nav-h) + 24px);}
.doc__nav-t{font-size:13px;font-weight:700;color:var(--ink-900);margin-bottom:12px;}
.doc__nav a{
  display:block;padding:8px 12px;border-radius:var(--r-s);
  font-size:13.5px;color:var(--ink-500);line-height:1.5;
  border-left:2px solid transparent;
}
.doc__nav a:hover{background:var(--green-50);color:var(--green-700);}
.doc__nav a.is-on{background:var(--green-50);color:var(--green-700);border-left-color:var(--green-500);font-weight:600;}

.doc__body h2{
  font-size:24px;margin:44px 0 16px;padding-top:12px;
  scroll-margin-top:calc(var(--nav-h) + 20px);
}
.doc__body h2:first-child{margin-top:0;}
.doc__body h3{font-size:18px;margin:28px 0 12px;scroll-margin-top:calc(var(--nav-h) + 20px);}
.doc__body p{margin-bottom:14px;line-height:1.9;color:var(--ink-700);}
.doc__body ul,.doc__body ol{margin:0 0 16px;padding-left:0;}
.doc__body li{
  position:relative;padding-left:20px;margin-bottom:9px;line-height:1.8;color:var(--ink-700);
}
.doc__body ul>li::before{
  content:"";position:absolute;left:5px;top:11px;width:5px;height:5px;border-radius:50%;
  background:var(--green-400);
}
.doc__body ol{counter-reset:doc;}
.doc__body ol>li{counter-increment:doc;}
.doc__body ol>li::before{
  content:counter(doc) ".";position:absolute;left:0;top:0;
  color:var(--green-600);font-weight:700;font-size:13px;
}
.doc__body code{
  padding:2px 7px;border-radius:5px;
  background:var(--bg-soft);border:1px solid var(--line);
  font-family:Consolas,Monaco,"Courier New",monospace;font-size:13px;color:var(--blue-700);
}
.doc__body strong{color:var(--ink-900);}
.doc__note{
  margin:20px 0;padding:16px 20px;border-radius:var(--r-m);
  background:var(--green-50);border-left:4px solid var(--green-500);
  font-size:14px;line-height:1.8;color:var(--ink-700);
}
.doc__note--warn{background:var(--accent-50);border-left-color:var(--accent);}

/* 指令卡片（群指令大全用） */
.cmd{
  display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start;
  padding:14px 0;border-bottom:1px dashed var(--line);
}
.cmd:last-child{border-bottom:0;}
.cmd__code{
  padding:6px 12px;border-radius:var(--r-s);
  background:var(--ink-900);color:#7EE2A8;
  font-family:Consolas,Monaco,"Courier New",monospace;font-size:13px;
  word-break:break-all;
}
.cmd__d{font-size:14px;color:var(--ink-500);line-height:1.75;}

/* 搜索框（帮助中心） */
.docsearch{position:relative;max-width:520px;margin:0 auto 40px;}
.docsearch input{
  width:100%;height:50px;padding:0 18px 0 46px;
  border:1px solid var(--line);border-radius:var(--r-f);background:#fff;
  font-size:15px;box-shadow:var(--sh-1);
}
.docsearch input:focus{outline:0;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(34,168,92,.14);}
.docsearch svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-300);}
.docsearch__empty{display:none;padding:32px;text-align:center;color:var(--ink-300);font-size:14px;}

/* ===== 通用长文内容（法务页、资讯页） =================================== */
.prose{max-width:820px;margin:0 auto;}
.prose h2{font-size:22px;margin:36px 0 14px;}
.prose h3{font-size:17px;margin:24px 0 10px;}
.prose p{margin-bottom:14px;line-height:1.95;color:var(--ink-700);}
.prose li{position:relative;padding-left:20px;margin-bottom:8px;line-height:1.85;color:var(--ink-700);}
.prose ul>li::before{
  content:"";position:absolute;left:5px;top:12px;width:5px;height:5px;border-radius:50%;
  background:var(--green-400);
}
.prose__meta{
  padding-bottom:22px;margin-bottom:32px;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--ink-300);
}

/* ===== 资讯列表 =========================================================== */
.newslist{display:grid;gap:18px;}
.newsitem{
  display:block;padding:26px 28px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  transition:all var(--t-base);
}
.newsitem:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--green-100);}
.newsitem__tag{
  display:inline-block;padding:3px 11px;border-radius:var(--r-f);
  background:var(--blue-50);color:var(--blue-600);font-size:12px;font-weight:600;
}
.newsitem__t{margin:12px 0 8px;font-size:19px;font-weight:700;color:var(--ink-900);line-height:1.5;}
.newsitem__d{font-size:14px;color:var(--ink-500);line-height:1.8;}
.newsitem__date{margin-top:12px;font-size:12.5px;color:var(--ink-300);}

/* ===== 联系页 ============================================================= */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.contactcard{
  display:flex;gap:16px;padding:24px;margin-bottom:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
}
.contactcard__ico{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;
  background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.contactcard__t{font-size:14px;color:var(--ink-500);}
.contactcard__v{margin-top:4px;font-size:22px;font-weight:800;color:var(--ink-900);line-height:1.4;
  font-variant-numeric:tabular-nums;}
.contactcard__v--sm{font-size:16px;font-weight:600;line-height:1.7;}
.contactcard__d{margin-top:6px;font-size:13px;color:var(--ink-500);line-height:1.7;}

/* ===== 报价页：三档服务模式 ============================================== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.plan{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:32px 28px;position:relative;transition:all var(--t-base);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.plan--hot{border-color:var(--green-500);box-shadow:var(--sh-2);}
.plan__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:5px 18px;border-radius:var(--r-f);
  background:var(--grad-brand);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;
}
.plan__t{font-size:22px;font-weight:700;color:var(--ink-900);}
.plan__for{margin:8px 0 18px;font-size:13.5px;color:var(--ink-500);line-height:1.7;min-height:44px;}
.plan__price{
  padding:16px 0;margin-bottom:18px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
  font-size:19px;font-weight:700;color:var(--green-600);
}
.plan__price small{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--ink-300);}
.plan__list{flex:1;margin-bottom:22px;}
.plan__list li{
  position:relative;padding-left:24px;margin-bottom:11px;
  font-size:14px;color:var(--ink-700);line-height:1.7;
}
.plan__list li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322A85C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}
.plan__list li.is-off{color:var(--ink-300);}
.plan__list li.is-off::before{
  background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B4' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* 报价流程 */
.pflow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.pflow__step{position:relative;padding:0 14px;text-align:center;}
.pflow__step+.pflow__step::before{
  content:"";position:absolute;left:0;top:26px;width:1px;height:36px;background:var(--line);
}
.pflow__n{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:#fff;border:2px solid var(--green-100);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;color:var(--green-600);box-shadow:var(--sh-1);
}
.pflow__t{font-size:15px;font-weight:700;color:var(--ink-900);}
.pflow__d{margin-top:6px;font-size:12.5px;color:var(--ink-500);line-height:1.65;}

/* ===== 关于我们：数据条 ================================================== */
.aboutstats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.aboutstat{
  padding:28px 20px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
}
.aboutstat b{
  display:block;font-size:38px;font-weight:800;line-height:1.1;color:var(--green-600);
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
}
.aboutstat span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-500);}

/* ===== 响应式 ============================================================= */
@media (max-width:1199px){
  .pagehead__t{font-size:36px;}
  .alt__row{gap:36px;}
  .doc{grid-template-columns:200px 1fr;gap:32px;}
}

@media (max-width:991px){
  .pagehead__inner{grid-template-columns:1fr;gap:32px;}
  .pagehead__card{max-width:520px;}
  .painline{grid-template-columns:1fr;gap:14px;}
  .alt__row{grid-template-columns:1fr;gap:28px;padding:32px 0;}
  .alt__row:nth-child(even) .alt__media{order:0;}
  .related{grid-template-columns:1fr;}
  .doc{grid-template-columns:1fr;gap:24px;}
  .doc__nav{position:static;display:flex;flex-wrap:wrap;gap:8px;
    padding-bottom:20px;border-bottom:1px solid var(--line);}
  .doc__nav-t{width:100%;}
  .doc__nav a{border-left:0;background:var(--bg-soft);padding:7px 14px;border-radius:var(--r-f);}
  .contact{grid-template-columns:1fr;gap:32px;}
  .plans{grid-template-columns:1fr;}
  .plan--hot{order:-1;}
  .pflow{grid-template-columns:1fr 1fr;row-gap:28px;}
  .pflow__step+.pflow__step::before{display:none;}
  .aboutstats{grid-template-columns:1fr 1fr;}
}

@media (max-width:767px){
  .breadcrumb{padding-top:calc(var(--nav-h) + 14px);font-size:12px;}
  .pagehead{padding:24px 0 44px;}
  .pagehead__t{font-size:27px;letter-spacing:-.5px;}
  .pagehead__d{font-size:15px;margin-top:14px;}
  .pagehead__ico{width:50px;height:50px;margin-bottom:16px;}
  .pagehead__btns .btn{flex:1;min-width:140px;}
  .pagehead__card{padding:22px;}
  .pagehead__metric b{font-size:26px;min-width:78px;}
  .painline__item{padding:20px;}
  .alt__t{font-size:20px;}
  .alt__d{font-size:14.5px;}
  .alt__media{padding:18px;}
  .cmd{grid-template-columns:1fr;gap:8px;}
  .doc__body h2{font-size:20px;margin:32px 0 12px;}
  .doc__body h3{font-size:16.5px;}
  .contactcard{padding:18px;gap:12px;}
  .contactcard__v{font-size:19px;}
  .plan{padding:26px 22px;}
  .pflow{grid-template-columns:1fr;row-gap:22px;}
  .aboutstat{padding:20px 12px;}
  .aboutstat b{font-size:28px;}
  .prose h2{font-size:19px;}
}