body {
  color: #1d2129;
}
.nav-bar {
  margin-bottom: -64px;
  background-color: transparent;
}
.nav-bar nav,
.nav-bar .nav-item,
.nav-bar .logo,
.nav-bar .action {
  background-color: transparent;
}
.nav-bar.fixed {
  background-color: #252d40;
}
.nav-bar.fixed nav,
.nav-bar.fixed .nav-item,
.nav-bar.fixed .logo,
.nav-bar.fixed .action {
  background-color: #252d40;
}
.sub-nav {
  opacity: 0;
}
.nav-item.active .sub-nav {
  opacity: 1;
}
.hear-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f5f6fb;
}
.hear-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 460px;
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}
.hear-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 48px);
  max-width: 1158px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hear-banner-content .t0 {
  margin-bottom: 18px;
  line-height: 50px;
  font-weight: 600;
  font-size: 50px;
  color: #252D40;
}
.hear-banner-content .t1 {
  margin-bottom: 24px;
  color: #f19240;
  line-height: 40px;
  font-size: 40px;
  font-weight: 600;
}
.hear-banner-content .t2 {
  max-width: 380px;
  margin-bottom: 28px;
  color: #777;
  line-height: 23px;
  font-size: 16px;
  font-weight: 400;
}
.hear-banner-content .banner-actions {
  display: flex;
  align-items: center;
}
.hear-banner-content .banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 214px;
  height: 66px;
  padding: 0 34px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 18px 36px rgba(241, 146, 64, 0.2);
  background-image: linear-gradient(
    90deg,
    #ff8605 0%,
    #ff9f39 100%
  );
  color: #fff;
  line-height: 24px;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.hear-banner-content .banner-btn ~ .banner-btn {
  margin-left: 15px;
}
.hear-banner-content .banner-btn:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 22px 36px rgba(241, 146, 64, 0.26);
}
.hear-banner-content .banner-btn:active {
  background: #eb8228;
  filter: none;
  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(235, 130, 40, 0.26);
}
/* @media (max-width: 1199px) {
  .hear-banner img {
    min-height: 400px;
  }
  .hear-banner-content .t0 {
    margin-bottom: 14px;
    font-size: 48px;
    line-height: 52px;
  }
  .hear-banner-content .t1 {
    margin-bottom: 18px;
    font-size: 42px;
    line-height: 48px;
  }
  .hear-banner-content .t2 {
    max-width: 500px;
    line-height: 28px;
  }
  .hear-banner-content .banner-btn {
    min-width: 196px;
    height: 58px;
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .hear-banner img {
    min-height: 320px;
    max-height: none;
  }
  .hear-banner-content {
    width: calc(100% - 32px);
  }
  .hear-banner-content .t0 {
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 40px;
  }
  .hear-banner-content .t1 {
    margin-bottom: 12px;
    font-size: 28px;
    line-height: 34px;
  }
  .hear-banner-content .t2 {
    max-width: 100%;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 24px;
  }
  .hear-banner-content .banner-btn {
    min-width: 168px;
    height: 48px;
    padding: 0 24px;
    font-size: 18px;
    line-height: 18px;
  }
} */
/* ===== Copy START: product-mes.html .r-body ===== */
/* Preferred standalone handoff: ./product-mes-r-body.css */
.r-body {
  background: #fff;
  overflow: hidden;
}
.mes-pain *,
.mes-why * {
  box-sizing: border-box;
}
.mes-pain .inner,
.mes-why .inner {
  padding-left: 24px;
  padding-right: 24px;
}
.mes-section-heading {
  position: relative;
  z-index: 1;
  --mes-design-width: min(100vw, 1440px);
  --mes-en-title-width: calc(var(--mes-design-width) * 267 / 1440);
  --mes-en-title-height: calc(var(--mes-design-width) * 59 / 1440);
  --mes-en-title-font-size: calc(var(--mes-design-width) * 42 / 1440);
  padding-top: calc(var(--mes-design-width) * 24 / 1440);
}
.mes-section-heading-center {
  text-align: center;
}
.mes-section-heading .en-title {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  display: block;
  height: var(--mes-en-title-height);
  transform: translateX(-50%);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  font-size: var(--mes-en-title-font-size);
  line-height: var(--mes-en-title-height);
  text-align: center;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
  background: linear-gradient(
    180deg,
    #e1e8f2 0%,
    rgba(234, 236, 239, 0) 82%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
.mes-section-heading h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #303133;
  font-size: 32px;
  line-height: 45px;
  font-weight: 600;
}
.mes-section-heading p {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-weight: 400;
  font-size: 18px;
  color: #A8ABB2;
}
.mes-why .mes-section-heading {
  --mes-en-title-width: calc(var(--mes-design-width) * 368 / 1440);
}
.mes-pain {
  padding: 58px 0 108px;
  background: linear-gradient(180deg, #f7f8fb 0%, #fff 26%, #fff 100%);
}
.mes-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 86px;
  align-items: start;
}
.mes-pain-item {
  position: relative;
  min-height: 230px;
  padding: 20px;
  /* 2. 开启 Flexbox 布局，确保在任何高度下内容都能完美居中 */
  display: flex;
  
  /* 注意：根据你的设计图，如果图标在文字上方，用 column；如果图标在文字左侧，用 row */
  flex-direction: column; 
  
  /* 3. 居中对齐 */
  justify-content: center; /* 主轴居中（垂直居中） */
  align-items: center;     /* 交叉轴居中（水平居中） */
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.mes-pain-item:focus {
  outline: none;
}
.mes-pain-item .mes-pain-copy strong {
  display: block;
  color: #303133;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;

  max-width: 65%;             /* 限制最大宽度为父元素的 65% */
  white-space: nowrap;        /* 强制文本在一行内显示，不允许换行 */
  overflow: hidden;           /* 隐藏超出最大宽度的部分 */
  text-overflow: ellipsis;    /* 超出的部分用省略号“...”显示 */
}
.mes-pain-item .mes-pain-copy small {
  /* 原有样式（去掉 display: block） */
  margin-top: 20px;
  color: #A8ABB2;
  font-size: 18px;
  font-weight: 400;

  /* 新增：多行文本截断样式 */
  display: -webkit-box;           /* 将元素作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;   /* 设置伸缩盒对象的子元素的排列方式为垂直 */
  -webkit-line-clamp: 3;          /* 限制文本最多显示的行数（3行） */
  overflow: hidden;               /* 隐藏超出3行范围的文本 */
  text-overflow: ellipsis;        /* 用省略号“...”隐藏超出范围的文本 */
  
  /* 优化排版（建议加上） */
  word-break: break-word;         /* 确保长英文单词或网址能在末尾正确换行，避免提前被截断 */
}
.mes-pain-item.is-active {
  /* 1. 设置基础内边距：保证左右为 20px，上下最少也是 20px */
  padding: 20px; 
  
  /* 2. 开启 Flexbox 布局，确保在任何高度下内容都能完美居中 */
  display: flex;
  
  /* 注意：根据你的设计图，如果图标在文字上方，用 column；如果图标在文字左侧，用 row */
  flex-direction: column; 
  
  /* 3. 居中对齐 */
  justify-content: center; /* 主轴居中（垂直居中） */
  align-items: center;     /* 交叉轴居中（水平居中） */
  
  /* 4. 你的原有样式（保持不变） */
  background-image: linear-gradient(
    180deg,
    #69738b 0%,
    #535b72 58%,
    #5d6479 100%
  );
  box-shadow: 0 18px 34px rgba(88, 96, 117, 0.28);
}
.mes-pain-item.is-active .mes-pain-copy strong {
  color: #fff;
}
.mes-pain-item.is-active .mes-pain-copy small {
  color: rgba(255, 255, 255, 0.76);
}
.mes-pain-icon {
  position: absolute;
  top: -40px;
  right: 0px;
  width: 156px;
  height: 156px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 58px 58px;
}
.mes-pain-icon:before,
.mes-pain-icon:after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 999px;
  transform: translateX(-50%);
}
.mes-pain-icon:before {
  bottom: 8px;
  width: 72px;
  height: 24px;
  background: linear-gradient(180deg, #ffb36a 0%, #ff7e34 100%);
  box-shadow: 0 8px 20px rgba(245, 146, 62, 0.34);
}
.mes-pain-icon:after {
  bottom: 18px;
  width: 58px;
  height: 18px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(31, 37, 53, 0.16);
}
.mes-pain-item.is-active .mes-pain-icon {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mes-pain-icon-chaos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Crect x='12' y='4' width='34' height='38' rx='7' transform='rotate(10 12 4)' fill='white'/%3E%3Crect x='19' y='15' width='7' height='7' rx='1.5' fill='%23FF9A4D'/%3E%3Crect x='29' y='15' width='7' height='7' rx='1.5' fill='%23FFD3B1'/%3E%3Crect x='19' y='25' width='7' height='7' rx='1.5' fill='%23FFE5D1'/%3E%3Crect x='29' y='25' width='7' height='7' rx='1.5' fill='%23FF9A4D'/%3E%3Cpath d='M20 8C20 5.791 21.791 4 24 4' stroke='%23FF7E34' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M35 11C35 8.791 36.791 7 39 7' stroke='%23FF7E34' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='0.047' y='0.717' width='57.492' height='56.654' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.934 0 0 0 0 0.52 0 0 0 0 0.231 0 0 0 0.35 0'/%3E%3CfeBlend in2='hardAlpha' result='effect1_dropShadow_2_49'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2_49' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.mes-pain-icon-island {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Crect x='13' y='5' width='32' height='39' rx='6' transform='rotate(12 13 5)' fill='white'/%3E%3Cpath d='M21 16H36' stroke='%23FFC397' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M21 23H36' stroke='%23FFC397' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M21 30H32' stroke='%23FF8D44' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='34' y='29' width='4' height='8' rx='2' fill='%23FF8D44'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='1.26' y='0.905' width='54.692' height='56.19' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.934 0 0 0 0 0.52 0 0 0 0 0.231 0 0 0 0.35 0'/%3E%3CfeBlend in2='hardAlpha' result='effect1_dropShadow_2_50'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2_50' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.mes-pain-icon-efficiency {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Crect x='13' y='6' width='32' height='38' rx='6' transform='rotate(12 13 6)' fill='white'/%3E%3Cpath d='M22 31L28 24L33 28L39 18' stroke='%23FF8D44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 18H40V24' stroke='%23FF8D44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 16H36' stroke='%23FFD4B1' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='1.26' y='1.905' width='54.692' height='55.19' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.934 0 0 0 0 0.52 0 0 0 0 0.231 0 0 0 0.35 0'/%3E%3CfeBlend in2='hardAlpha' result='effect1_dropShadow_2_51'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2_51' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.mes-why {
  padding: 96px 0 116px;
  background: #fff;
}
.mes-why-content {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 58px;
}
.mes-why-tabs {
  width: 335px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 10px;
}
.mes-why-tab-item {
  width: 100%;
}
.mes-why-tab-item + .mes-why-tab-item {
  margin-top: 28px;
}
.mes-why-tabs .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 24px 26px 24px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: #303133;
  text-decoration: none;
  box-shadow: none;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
/* .mes-why-tabs .nav-link:before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: transparent;
} */
.mes-why-tabs .nav-link:hover {
  box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.1);
}
.mes-why-tabs .nav-link.active,
.mes-why-tabs .nav-link.active:hover {
  background: #fff;
  box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.1);
  transform: translateX(2px);
}
.mes-why-tabs .nav-link.active {
  border-left: 6px solid #f19240;  
}
.mes-why-tab-icon-wrap {
  flex-shrink: 0;
}
.mes-why-tab-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #fff2e6;
  flex-shrink: 0;
}
.mes-why-tab-icon:before {
  content: "";
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mes-why-tab-icon-collab:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Crect x='4' y='6' width='26' height='18' rx='2.5' stroke='%23F5923E' stroke-width='2.8'/%3E%3Cpath d='M13 29H21M17 24V29' stroke='%23F5923E' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mes-why-tab-icon-transparent:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M6 24L14 16L19 20L28 10' stroke='%23F5923E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 10H28V17' stroke='%23F5923E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mes-why-tab-icon-standard:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Ccircle cx='17' cy='17' r='6' stroke='%23F5923E' stroke-width='2.5'/%3E%3Cpath d='M17 5V9M17 25V29M5 17H9M25 17H29M8.5 8.5L11.5 11.5M22.5 22.5L25.5 25.5M25.5 8.5L22.5 11.5M11.5 22.5L8.5 25.5' stroke='%23F5923E' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mes-why-tab-copy {
  width: 100%;
}
.mes-why-tab-copy strong {
  display: block;
  color: #303133;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  width: 80%;             /* 确保占据容器宽度 */
  white-space: nowrap;     /* 强制文字不换行 */
  overflow: hidden;        /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号显示 */
}
.mes-why-tab-copy small {
  display: block;
  margin-top: 6px;
  color: #606266;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  width: 100%;             /* 确保占据容器宽度 */
  white-space: nowrap;     /* 强制文字不换行 */
  overflow: hidden;        /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号显示 */
}
.mes-why-panels {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mes-why-panels > .tab-pane {
  display: none;
  width: 100%;
  will-change: transform, opacity;
}
.mes-why-panels > .tab-pane.active {
  display: block;
}
.mes-why-panels > .tab-pane.is-entering {
  animation: mesWhyPanelEnter 1s ease both;
}
@keyframes mesWhyPanelEnter {
  from {
    opacity: 0;
    transform: translate3d(80px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.mes-why-panels > .tab-pane img {
  width: 100%;
  object-fit: cover;
}
.mes-scene-dots {
  position: absolute;
  top: 68px;
  right: 10px;
  width: 96px;
  height: 72px;
  background-image: radial-gradient(
    circle,
    rgba(245, 146, 62, 0.5) 1.3px,
    transparent 1.4px
  );
  background-size: 10px 10px;
  opacity: 0.55;
}
.mes-browser-frame,
.mes-phone-frame,
.mes-phone-stack {
  position: absolute;
  background: #fff;
  box-shadow: 0 24px 50px rgba(28, 38, 58, 0.14);
}
.mes-browser-frame {
  right: 58px;
  top: 78px;
  width: 530px;
  height: 302px;
  border-radius: 18px;
  overflow: hidden;
}
.mes-browser-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 10px 16px 0;
  background: #ececec;
}
.mes-browser-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b5f;
}
.mes-browser-top span:nth-child(2) {
  background: #ffbe3b;
}
.mes-browser-top span:nth-child(3) {
  background: #29ca42;
}
.mes-browser-bar {
  height: 14px;
  margin: 12px 16px 0;
  border-radius: 999px;
  background: #1c2535;
}
.mes-browser-body {
  padding: 20px 18px 18px;
}
.mes-browser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mes-chart,
.mes-browser-table,
.mes-summary-strip,
.mes-table-head,
.mes-table-row {
  border-radius: 12px;
  background: #fff;
}
.mes-chart {
  height: 116px;
  border: 1px solid #eff1f5;
  background-color: #fafbfc;
  background-repeat: no-repeat;
}
.mes-chart-bars {
  background-image:
    linear-gradient(180deg, rgba(91, 200, 86, 0.95), rgba(91, 200, 86, 0.95)),
    linear-gradient(180deg, rgba(91, 200, 86, 0.8), rgba(91, 200, 86, 0.8)),
    linear-gradient(180deg, rgba(91, 200, 86, 0.72), rgba(91, 200, 86, 0.72)),
    linear-gradient(180deg, rgba(91, 200, 86, 0.88), rgba(91, 200, 86, 0.88)),
    linear-gradient(180deg, rgba(91, 200, 86, 0.72), rgba(91, 200, 86, 0.72)),
    linear-gradient(180deg, #eef1f6, #eef1f6);
  background-size:
    18px 60px,
    18px 36px,
    18px 74px,
    18px 54px,
    18px 28px,
    calc(100% - 36px) 1px;
  background-position:
    34px calc(100% - 18px),
    70px calc(100% - 18px),
    106px calc(100% - 18px),
    142px calc(100% - 18px),
    178px calc(100% - 18px),
    18px calc(100% - 18px);
}
.mes-chart-line {
  background-image:
    linear-gradient(180deg, #eef1f6, #eef1f6),
    linear-gradient(180deg, #eef1f6, #eef1f6),
    linear-gradient(180deg, #eef1f6, #eef1f6),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120' viewBox='0 0 260 120' fill='none'%3E%3Cpath d='M12 88C42 72 56 74 84 58C103 47 122 60 146 50C169 40 192 59 214 44C227 36 239 30 248 38' stroke='%23FF8D44' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:
    calc(100% - 28px) 1px,
    calc(100% - 28px) 1px,
    calc(100% - 28px) 1px,
    calc(100% - 16px) calc(100% - 16px);
  background-position:
    14px 28px,
    14px 56px,
    14px 84px,
    center;
}
.mes-browser-table {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #eff1f5;
}
.mes-browser-table span,
.mes-summary-strip span,
.mes-table-head span,
.mes-table-row span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #edf1f6;
}
.mes-browser-table span + span,
.mes-summary-strip span + span,
.mes-table-head span + span,
.mes-table-row span + span {
  margin-top: 12px;
}
.mes-browser-table span:nth-child(2) {
  width: 88%;
}
.mes-browser-table span:nth-child(3) {
  width: 92%;
}
.mes-browser-table span:nth-child(4) {
  width: 76%;
}
.mes-phone-frame {
  width: 114px;
  height: 236px;
  border-radius: 16px;
  overflow: hidden;
}
.mes-phone-frame:before,
.mes-phone-frame:after,
.mes-phone-stack:before,
.mes-phone-stack:after {
  content: "";
  position: absolute;
}
.mes-phone-frame:before {
  top: 12px;
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #dce4ef;
  transform: translateX(-50%);
}
.mes-phone-frame:after {
  inset: 28px 12px 12px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    #4096f7 0,
    #4096f7 18px,
    #f7f9fc 18px,
    #f7f9fc 100%
  );
  box-shadow: inset 0 0 0 1px rgba(226, 232, 241, 0.9);
}
.mes-phone-frame-collab {
  right: 28px;
  top: 138px;
}
.mes-phone-frame-standard {
  left: 14px;
  top: 134px;
  width: 118px;
  height: 246px;
}
.mes-floating-card {
  position: absolute;
  padding: 14px 16px 12px;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 16px 32px rgba(38, 55, 93, 0.18);
}
.mes-floating-card b {
  display: block;
  font-size: 26px;
  line-height: 28px;
  font-weight: 600;
}
.mes-floating-card span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.mes-floating-card-blue {
  background: linear-gradient(180deg, #4ca9ff 0%, #2388ee 100%);
}
.mes-floating-card-orange {
  background: #fff;
  color: #f5923e;
  box-shadow: 0 14px 28px rgba(45, 53, 74, 0.12);
}
.mes-floating-card-top {
  top: 96px;
  left: 200px;
  min-width: 108px;
  text-align: center;
}
.mes-floating-card-left {
  top: 168px;
  left: 62px;
  min-width: 104px;
}
.mes-floating-card-bottom-left {
  bottom: 54px;
  left: 52px;
  min-width: 110px;
}
.mes-floating-card-bottom-right {
  right: 168px;
  bottom: 28px;
  min-width: 104px;
}
.mes-phone-stack {
  top: 122px;
  width: 162px;
  height: 290px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #4a9af6 0%,
    #4a9af6 18px,
    #ffffff 18px,
    #ffffff 100%
  );
}
.mes-phone-stack:before {
  top: 32px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffe9d6 0 38%, transparent 38%),
    linear-gradient(180deg, #f7f9fc 0%, #f7f9fc 100%);
  box-shadow: inset 0 0 0 1px #edf1f6;
}
.mes-phone-stack:after {
  top: 52px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(237, 241, 246, 0.95) 0 1px,
      transparent 1px 34px
    ),
    linear-gradient(180deg, rgba(237, 241, 246, 0.9), rgba(237, 241, 246, 0.9));
}
.mes-phone-stack-left {
  left: 72px;
}
.mes-phone-stack-right {
  right: 82px;
}
.mes-scene-arrow {
  position: absolute;
  top: 226px;
  left: 318px;
  width: 150px;
  height: 90px;
}
.mes-scene-arrow:before,
.mes-scene-arrow:after {
  content: "";
  position: absolute;
}
.mes-scene-arrow:before {
  left: 0;
  top: 28px;
  width: 94px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 220, 192, 0),
    rgba(246, 146, 62, 0.95)
  );
}
.mes-scene-arrow:after {
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  border-left: 52px solid #f5923e;
}
.mes-browser-frame-standard {
  right: 44px;
  top: 88px;
  width: 560px;
  height: 294px;
}
.mes-browser-body-table {
  padding: 16px 18px 18px;
}
.mes-table-head,
.mes-table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mes-table-head {
  padding-bottom: 16px;
}
.mes-table-row {
  padding: 18px 0 0;
}
.mes-action-chip {
  position: absolute;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 144px;
  padding: 16px 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(35, 43, 62, 0.12);
  color: #303133;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.mes-action-chip-green {
  top: 266px;
}
.mes-action-chip-orange {
  top: 344px;
}
.mes-action-chip-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ebfff2;
}
.mes-action-chip-green .mes-action-chip-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23F1FFF6'/%3E%3Cpath d='M21 10V26M14 18H28M15 31H27' stroke='%2334B35B' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: cover;
}
.mes-action-chip-orange .mes-action-chip-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23FFF5EA'/%3E%3Crect x='13' y='10' width='16' height='22' rx='3' stroke='%23F5923E' stroke-width='2.4'/%3E%3Cpath d='M17 16H25M17 21H25M17 26H22' stroke='%23F5923E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: cover;
}
.mes-browser-frame-automation {
  right: 56px;
  top: 84px;
  width: 540px;
  height: 316px;
}
.mes-browser-body-automation {
  padding: 14px 18px 18px;
}
.mes-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 3px solid #88caf9;
  box-shadow: 0 18px 30px rgba(66, 160, 234, 0.18);
}
.mes-browser-body-automation .mes-table-head,
.mes-browser-body-automation .mes-table-row {
  grid-template-columns: repeat(6, 1fr);
}
.mes-floating-card-summary {
  top: 106px;
  left: 206px;
  min-width: 110px;
  text-align: center;
}
.mes-floating-card-mini {
  top: 186px;
  left: 72px;
  min-width: 104px;
}
.mes-floating-card-mini-bottom {
  bottom: 54px;
  left: 62px;
  min-width: 114px;
}
.mes-floating-card-mini-right {
  right: 176px;
  bottom: 28px;
  min-width: 104px;
}
.mes-money-icon {
  color: #f5923e;
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
}