* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{scroll-behavior: smooth;}
body {font-family: 'Roboto', sans-serif;}
img{max-width: 100%;}
header{padding:0 16px; width: 100%; height: 76px; }
header .headerContainer{max-width: 1256px; margin: 0 auto; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
header .headerContainer ul{display: flex; flex-direction: row; gap: 32px; list-style: none; align-items: center; }
header .headerContainer ul li {display: flex;}
header .headerContainer ul li a{color: #212121; display: flex; padding: 28px 0; text-decoration: none; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; }


header .headerContainer ul li a.active{color: #014FC5; background:   url('//ws.oneassist.in/static/portal_v2/images/testBuddy/bgActive.png') repeat-x bottom left;}







.headerTopText{border-radius: 999px; display: flex; margin-bottom: -24px;
padding: 6px 12px;
align-items: center;
gap:  6px;
background: #E1F1EC;
color: #00875A;
font-size: 12px;
font-style: normal;
font-weight:  600;
line-height: 18.6px;
letter-spacing: 0.96px;
text-transform: uppercase;



}

header .headerContainer ul .bookADemoBtn{color:  #FFF; padding: 10px 16px; border-radius: 4px; background: #014FC5; text-decoration: none; cursor: pointer;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */}
.heroBanner{ padding: 72px 16px 64px 16px; background: radial-gradient(84.57% 38.7% at 66.28% 50.07%, rgba(1, 79, 197, 0.15) 0%, rgba(1, 79, 197, 0.00) 70%);}
.postMasterHeroBanner{background: radial-gradient(172.86% 76.56% at 70% 30%, rgba(1, 79, 197, 0.06) 0%, rgba(1, 79, 197, 0.00) 60%); padding: 72px 16px 64px 16px;}
.heroBannerContainer{max-width: 1240px; margin: 0 auto; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.heroBannerContainer .leftSecBox{max-width: 700px; width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start;}
.heroBannerContainer .leftSecBox .agenticTopText{ align-items: center;    display: flex;
    flex-direction: row;
    margin: 0 0 -14px 0;
    gap: 16px;}
.heroBannerContainer .leftSecBox .agenticTopText h5{color: #003264;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.48px;}
.heroBannerContainer .leftSecBox .agenticTopText img{width: 94px;}

.heroBannerContainer .leftSecBox h1{color: #003264;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 68px; /* 106.25% */
  letter-spacing: -1px;}
.heroBannerContainer .leftSecBox h1 span{color: #014FC5;}
.heroBannerContainer .leftSecBox p{color: #212121; max-width: 672px; font-size: 20px; font-style: normal; font-weight: 500; line-height: 28px;}
.heroBannerContainer .leftSecBox h6{color: #717171;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;}
.postmasterLogo{    margin: 0 0 -18px 0;}

.homePageBannerTag{max-width: 672px; justify-content: center;}

.postMasterFeaturesList{display: flex; flex-wrap: wrap; list-style: none; gap: 16px; margin: -4px 0 16px 0;}
.postMasterFeaturesList li{display: flex;  gap: 8px; flex-direction: row; padding: 8px 12px; color: #003264; background: #E1F1EC;
  font-size: 12px; border-radius: 16px; white-space: nowrap;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.24px;
  text-transform: uppercase;}
  .postMasterFeaturesList li + li + li{ background: #FFF2E2;}
  .postMasterFeaturesList li + li{ background: #DEF1FB;}
  .postMasterFeaturesList li + li + li + li{ background: #F6F6F6;}
.mostEnterprises{background: linear-gradient(181deg, #FFF 60.38%, #E1F1EC 95%); padding: 72px 16px 64px 16px;}
.mostEnterprises .mostEnterprisesContainer{max-width: 1240px; margin: 0 auto; width: 100%; display: flex; gap: 48px; flex-direction: column;}
.mostEnterprises .mostEnterprisesContainer h1{color: #212121; max-width: 580px;
  text-align: center; margin: 0 auto;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */} 

  .probAndSolvSec{ display: flex; flex-direction: row; flex: 1; justify-content: space-between; gap: 64px;  }
.sectionforList{border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; flex: 1; }
.tagBox{display: flex; border-radius: 70px;
padding: 12px 20px;
justify-content: center;
align-items: center;
gap: 8px; color: #212121;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;}

.listofPoints {display: flex; flex-direction: column; gap: 32px;}
.listofPoints li {display: flex; flex-direction: row; gap: 16px; align-items: center;}
.listofPoints li .iconSec{display: flex;width: 48px;height: 48px;justify-content: center;align-items: center; border-radius: 10px;}


.listofPoints li p{ width: calc(100% - 64px);
  color: #212121;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */} 


.problem{border: 1px solid  #FBE5DF; background: #FFF;}
.solution{border: 1px solid  #E1F1EC; background: #FFF;}
.problem .tagBox, .problem .listofPoints li .iconSec{background:#FBE5DF;}
.solution .tagBox,.solution .listofPoints li .iconSec{background: #E1F1EC;}



.architectureAndPerformance{  padding: 72px 16px 64px 16px; background: 
  linear-gradient(75deg, #003264 72.69%, #013D86 99.09%),
  url('//ws.oneassist.in/static/portal_v2/images/testBuddy/maskgroup.png') no-repeat top center;

background-size: cover;
background-position: center;
background-repeat: no-repeat;}
.architectureAndPerformance .architectureAndPerformanceContainer{max-width: 1240px; align-items: center; margin: 0 auto; width: 100%; display: flex; flex-direction: column;}
.architectureAndPerformance .architectureAndPerformanceContainer h6{border-radius: 24px;
  background:  #DEF1FB; border-radius: 24px; display: flex;
  padding: 10px 24px;
  justify-content: center; color:#003264;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.24px;
  text-transform: uppercase;
  align-items: center;
}
.architectureAndPerformance .architectureAndPerformanceContainer h1{color: #FFF; margin: 16px 0 20px 0;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */}

.architectureAndPerformance .architectureAndPerformanceContainer h3{color: #fff; max-width: 820px;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 140% */}


ol.whyNotJustUseCPaaS{    flex-wrap: wrap;
    gap: 32px 64px;
    max-width:934px;
    list-style: none;
    display: flex;
    margin: 50px 0 0 0;
    align-items: center;
    justify-content: center;}
ol.whyNotJustUseCPaaS li{border-radius: 44px; 
    border: 1px solid #DEF1FB; max-width: 268px;
    background: #DEF1FB;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex;
    padding: 15.5px 24px 16.5px 24px;
    align-items: center;
    gap: 16px; color: #003264;
    font-size: 16px;
    font-style: normal; width: 33.3%;
    font-weight: 400;
    line-height: 24px; }

.fullWidthPils{max-width: 100% !important; gap: 32px !important;}
.fullWidthPils li{max-width: 390px !important;}
.prossImg{margin: 48px 0 0 0;}

.bottomTextSec{color:  #FFF; max-width: 768px;
text-align: center;
margin: -32px 0 0 0;

font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}



.whyNotJustUseCPaaSContainer{ display: flex; flex-direction: column; align-items: center; margin:58px 0 0 0 ;}
.whyNotJustUseCPaaSContainer span.line{ width: 40px; height: 2px; background: #fff; border-radius: 4px;}
.whyNotJustUseCPaaSContainer h4{ color: #FFF; margin: 48px 0;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */}

.whyNotJustUseCPaaSList{display: flex; flex-direction: row; gap: 32px;}
.whyNotJustUseCPaaSList-scroll{display: flex; flex-direction: row; gap: 32px;}
.whyNotJustUseCPaaSList aside{display: flex; width: 390px; background: #fff;
  padding: 32px 24px 48px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch; border-radius: 14px;
  
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}


  .borderRed{border-left: 5px solid  #DE350B;}
  .borderGreen{border-left: 5px solid  #00875A;}

.whyNotJustUseCPaaSList aside h5{color: #003264;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */}

.whyNotJustUseCPaaSList aside p{color: #717171;
display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */}
  .whyNotJustUseCPaaSList aside p img{width: 16px; margin: 4px 0 0 0;}


.governedCommunication{background: #fff; padding: 74px 16px 64px 16px;}
.governedCommunication .governedCommunicationContainer{max-width: 1240px; align-items: center; margin: 0 auto; width: 100%; display: flex; flex-direction: column;}
.governedCommunication .governedCommunicationContainer h6{border-radius: 24px;
  background:  #DEF1FB; border-radius: 24px; display: flex;
  padding: 10px 24px; text-transform: uppercase;
  justify-content: center; color:#003264;
  font-size: 12px;
  font-style: normal;}

  .governedCommunication .governedCommunicationContainer h1{margin: 16px 0 0 0; color:  #212121;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px; /* 125% */}

    .governedCommunication .governedCommunicationContainer ul.governedCommunicationList{display: flex;  gap:48px 32px; margin: 64px 0 0 0; flex-wrap: wrap; width: 100%;}

    .governedCommunication .governedCommunicationContainer ul.governedCommunicationList li{display: flex;
      width: calc(33.3% - 22px);
      padding: 24px 24px 48px 24px;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px; border-radius: 12px;
      border: 1px solid  #E0E0E0;
      background: #fff;
 }
.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li h3{color: #212121;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 150% */}
.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li p{color: #717171;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px; /* 150% */}
.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li dl {display: flex; flex-direction: column; gap: 12px; width: 100%;}
.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li dl dt{color:#717171; padding: 0 0 0 26px;  background: url('//ws.oneassist.in/static/portal_v2/images/testBuddy/tick.svg') no-repeat left center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}        


.implimentSecBox{border-radius: 16px; padding: 48px 80px 72px 80px; display: flex; flex-direction: column; gap: 48px; align-items: flex-start; flex: 1;
border: 1px solid  #00875A;
background:  #E1F1EC;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14);}

.implimentSecBox .implimentTextSec{color: #003264; width: 100%; text-align: center;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px; /* 125% */}

/* Implement image zoom overlay and fullscreen modal */
.implimentImgWrap {
  position: relative;
  display: inline-block;
  width: 100%; margin: 48px 0 0 0;
}
.nonMargin{margin: 0 !important;}
.implimentImgWrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.implimentZoomIcon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  padding: 0;
}
.implimentZoomIcon:hover {
  background: rgba(0, 0, 0, 0.8);
}
.implimentZoomIcon svg {
  flex-shrink: 0;
}

.impliment-image-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:#fff;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.impliment-image-modal.is-open {
  display: flex;
  flex-direction: column;
}
.impliment-modal-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  gap: 12px;
}
.impliment-modal-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0,  0.70);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  padding: 0;
}

.impliment-modal-image-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: auto;
}
.impliment-modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.impliment-modal-image.landscape {
  transform: rotate(90deg);
  max-height: 100vw;
  max-width: 100vh;
}


.callToActionSec{ display: flex; flex-direction: row; gap: 16px;}
.callToActionSec .primaryBtn{border-radius: 4px; cursor: pointer; justify-content: center; 
  background:  #014FC5; color: #fff; text-decoration: none; padding: 10px 16px; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; display: flex;
    align-items: center;
    gap: 8px;}
.callToActionSec .secondaryBtn{ border-radius: 4px; cursor: pointer;
  background:  #fff; color: #014FC5; text-decoration: none; padding: 10px 16px; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; border: 1px solid #014FC5;} 
.platformsSec{display: flex; background: #F8FAFC; padding: 24px 16px;
  flex-direction: row;
  align-items: center; justify-content: center;
  color: #82A9E2;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.24px;
  text-transform: uppercase; gap: 12px;

}
.platformsSec span{ width: 4px; height: 4px; border-radius: 50%; background: #82A9E2; color: transparent;}
.enterpriseRealitySec{background: linear-gradient(178deg, #FFF 64.75%, #FEF2F2 101.99%); padding: 72px 16px 64px 16px;}
.enterpriseRealitySec .enterpriseRealitySecContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column;}  .enterpriseRealitySec .enterpriseRealitySecContainer h1{color: #212121; max-width: 768px; margin: 0 auto;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */}

   .enterpriseRealitySec .enterpriseRealitySecContainer h5{    border-radius: 24px;
    background: #DEF1FB; width: fit-content;
    margin: 0 auto 16px auto;
    display: flex;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    color: #003264;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.24px;
    text-transform: uppercase;}


  .enterpriseRealitySec .enterpriseRealitySecContainer span{color: #014FC5;}
  .enterpriseRealitySec .enterpriseRealitySecContainer span + span{color: #DE350B;}
.enterpriseRealitySec .enterpriseRealitySecContainer h6{color: #1E293B; width: 100%; text-align: center; margin: 48px 0 0 0;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 140% */}
.enterpriseRealitySec .enterpriseRealitySecContainer h6 span{color: #014FC5;}
.sharedInfrastructure {background: #003264; width: 100%; padding: 72px 16px 64px 16px; }
.sharedInfrastructure .sharedInfrastructureContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column;} 

.sharedInfrastructure .sharedInfrastructureContainer h6{border-radius: 24px;
    background: #DEF1FB;
    display: flex;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    color: #003264;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.24px; width: fit-content; margin-bottom: 16px;
    text-transform: uppercase;}



.sharedInfrastructure .sharedInfrastructureContainer h1{color: #fff;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px;}

.sharedInfrastructure .sharedInfrastructureContainer h5{color: #fff; margin: 16px 0 0 0; max-width: 755px;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */}

.sharedInfrastructure .sharedInfrastructureContainer ul{ margin: 48px 0 0 0; display: flex; flex-wrap: wrap; gap: 24px;}
.sharedInfrastructure .sharedInfrastructureContainer ul li{padding: 32px;
  border-radius: 12px;
  border: 1px solid #DEF1FB;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14);
  width: calc(50% - 16px);}



  .sharedInfrastructure .sharedInfrastructureContainer ul li h3{color:  #212121; 
margin: 0;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */}

.sharedInfrastructure .sharedInfrastructureContainer ul li .topLogoSec {
    display: flex; min-height: 32px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color:  #003264;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
}

.minHeightText{min-height: 124px;}

.sharedInfrastructure .sharedInfrastructureContainer ul li .topLogoSec .imgMatrixLogo{
width: 160px;
}
.sassLogoBox{width:112px;}

.sharedInfrastructure .sharedInfrastructureContainer ul li .topLogoSec .saasLogo{width: 140px;}
.sharedInfrastructure .sharedInfrastructureContainer ul li  dl {display: flex; flex-direction: column; gap: 12px; width: 100%;}
.sharedInfrastructure .sharedInfrastructureContainer ul li  dl dt{color:#717171; padding: 0 0 0 26px;  background: url('//ws.oneassist.in/static/portal_v2/images/testBuddy/tick.svg') no-repeat left center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}


.sharedInfrastructure .sharedInfrastructureContainer ul li a{color: #fff;
text-align: center; text-decoration: none; align-self: flex-end;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; border-radius: 4px; padding:10px 24px; margin-top: 20px;
background:  #014FC5; }




.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText{display: flex;
  flex-direction: column;
  width: 100%;
  margin: 98px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;}
.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText span{width: 100%; height: 1px; width:40px ; background: #fff;}


.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText h2{color:  #FFF;
  text-align: center; margin: 28px 0 16px 0;
  font-size: 20px;
  font-style: normal;
  font-weight: 500; line-height: 28px;}

.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText p{color: #fff;
font-size: 16px;  max-width: 740px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}


.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText ol, .howItWorkNew .howItWorkContainer ol{    flex-direction: row;
  gap: 16px;
  width: 100%;
  list-style: none;
  display: flex;
  margin: 48px 0 0 0;
  align-items: center;
  justify-content: center;}


.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText ol li, .howItWorkNew .howItWorkContainer ol li{border-radius: 30px; white-space: nowrap;
  border: 1px solid #DEF1FB;
  background: #DEF1FB;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex;
  padding: 15.5px 36px 16.5px 24px;
  align-items: center;
  gap: 8px; color: #003264;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; }







.operatingModel { background-color: #003264; background-image: radial-gradient(circle at 85% 40%, rgba(1, 79, 197, 0.45) 0%, rgba(1, 79, 197, 0) 55%); width: 100%; padding: 72px 16px 68px; }
.operatingModel .operatingModelContainer { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 76px; justify-content: space-between; }
.operatingModel .operatingModelLeft { display: flex; flex-direction: column; gap: 16px; max-width: 600px; width: 100%; }
.operatingModel .operatingModelLabel { display: inline-flex; align-items: center; justify-content: center; background: #DEF1FB; color: #003264; padding: 7px 24px; border-radius: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.24px; text-transform: uppercase; line-height: 16px; width: fit-content; }
.operatingModel .operatingModelContent { display: flex; flex-direction: column; gap: 16px; }
.operatingModel .operatingModelContent h2 { color: #ffffff; font-size: 32px; font-weight: 500; line-height: 40px; }
.operatingModel .operatingModelContent p { color: #ffffff; font-size: 20px; font-weight: 500; line-height: 28px; }
.operatingModel .operatingModelRight { display: flex; flex-direction: column; max-width: 556px; width: 100%; }
.operatingModel .workflowCard { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.operatingModel .workflowTitle { color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding-bottom: 6px; }
.operatingModel .workflowRow { background: rgba(255, 255, 255, 0.05); border-radius: 8px; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 11px 14px; }
.operatingModel .workflowDot { width: 7px; height: 7px; border-radius: 3.5px; flex-shrink: 0; }
.operatingModel .workflowDot.dot-blue { background: #60a5fa; }
.operatingModel .workflowDot.dot-yellow { background: #fbbf24; }
.operatingModel .workflowDot.dot-green { background: #10b981; }
.operatingModel .workflowText { color: #cbd5e1; font-size: 12px; font-weight: 500; flex: 1; min-width: 0; }
.operatingModel .workflowBadge { padding: 3px 9px; border-radius: 12px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.operatingModel .workflowBadge.badge-blue { background: rgba(96, 165, 250, 0.17); color: #93c5fd; }
.operatingModel .workflowBadge.badge-yellow { background: rgba(251, 191, 36, 0.17); color: #fde68a; }
.operatingModel .workflowBadge.badge-green { background: rgba(16, 185, 129, 0.17); color: #6ee7b7; }

.pointSolutions { width: 100%; padding: 72px 16px 0; }
.pointSolutions .pointSolutionsContainer { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pointSolutions .pointSolutionsLabel { display: inline-flex; align-items: center; justify-content: center; background: #DEF1FB; color: #003264; padding: 7px 24px; border-radius: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.24px; text-transform: uppercase; line-height: 16px; }
.pointSolutions .pointSolutionsContainer h2 { color: #212121; font-size: 32px; font-weight: 500; line-height: 40px; text-align: center; max-width: 1232px; width: 100%; }
.pointSolutions .pointSolutionsContainer p { color: #717171; font-size: 20px; font-weight: 500; line-height: 28px; text-align: center; max-width: 768px; width: 100%; }

.pssSection { width: 100%; padding: 48px 16px 64px; background: linear-gradient(to bottom, #feffff 44%, #f8fafc 100%); }
.pssSection .pssSectionContainer { max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 48px; }
.pssCards { display: flex; flex-direction: row; gap: 32px; width: 100%; }
.pssCard { min-height: 628px; flex: 1; background: linear-gradient(to bottom, #ffffff, #f6f6f6); border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.14); padding: 24px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.pssCard h3 { color: #003264; font-size: 24px; font-weight: 500; line-height: 32px; }
.pssCard > p { color: #212121; font-size: 16px; font-weight: 400; line-height: 24px; }
.pssCardList { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0 0; }
.pssCardList li { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #212121; font-size: 16px; font-weight: 400; line-height: 24px; }
.pssCardList li img { width: 16px; flex-shrink: 0; }
.pssCardFull { width: 100%; background: linear-gradient(to bottom, #ffffff, #f6f6f6); border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.14); padding: 24px; display: flex; flex-direction: row; gap: 8px; justify-content: space-between; overflow: hidden; }
.pssCardFull h3 { margin-bottom: 8px; color: #003264; font-size: 24px; font-weight: 500; line-height: 32px; }
.pssCardFull > p { color: #212121; font-size: 16px; font-weight: 400; line-height: 24px; }
.pssCardListSingle { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0 0; }
.pssCardListSingle li { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #212121; font-size: 16px; font-weight: 400; line-height: 24px; }
.pssCardListSingle li img { width: 16px; flex-shrink: 0; }

.buildForEnterprise {background: #F8FAFC; width: 100%; padding: 72px 16px 64px 16px; }
.buildForEnterprise .buildForEnterpriseContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column;} 
.buildForEnterprise .buildForEnterpriseContainer h1{color: #212121;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px;}
.buildForEnterprise .buildForEnterpriseContainer h5{color: #717171; margin: 16px 0 0 0; max-width: 755px;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */}


ul.buildForEnterpriseList, ul.enterpriseRealityList{display: flex; flex-direction: row; gap: 24px; margin: 48px 0 0 0;}
ul.buildForEnterpriseList li, ul.enterpriseRealityList li{display: flex; flex-direction: column; gap: 16px; border-radius: 8px;
border: 1px solid  #DEF1FB;  flex :1; padding: 24px; align-items: flex-start;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}
ul.buildForEnterpriseList li h3, ul.enterpriseRealityList li h3{color:#212121;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */}
ul.buildForEnterpriseList li p, ul.enterpriseRealityList li p{color:#717171;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */} 

.requestDemo{ background: url('//ws.oneassist.in/static/portal_v2/images/testBuddy/yellowBg.png') no-repeat center; background-size: cover;  padding: 72px 16px; }
.requestDemo .requestDemoContainer{max-width: 768px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 48px; align-items: center;}
.requestDemo .requestDemoContainer h1{color: #003264;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px; }

.requestDemo .requestDemoContainer a{ display: flex; border-radius: 4px; cursor: pointer;
background: #014FC5; text-decoration: none; color: #fff; width: fit-content;
padding: 16px 40px;
justify-content: center;
align-items: center; }

footer{background:#092A4F; padding: 16px; color:  #F6F6F6; display: flex; justify-content: center; align-items: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */}

/* MODAL STYLES */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  max-width: 450px;
  border-radius: 24px;
  padding: 56px 36px 40px 36px;
  position: relative;
}

.modal-content h1 {
  color: #212121;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.modal-content .subTextHeading {
  color: #00875a;
  margin: 8px 0 0 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.modal-content label {
  color: #212121;
  margin: 24px 0 4px 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  display: block;
}

.modal-content label i {
  color: #DE350B;
  font-style: normal;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
  border-radius: 4px;
  border: 1px solid #959595;
  padding: 14px 16px;
  width: 100%;
  outline: none;
  font-family: 'Roboto', sans-serif;
}

.modal-content textarea {
  resize: vertical;
  min-height: 88px;
}

.modal-content select {
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 0.65rem auto;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border: 1px solid #014fc5;
  box-shadow: 0 0 4px 0 rgba(1, 79, 197, 0.9);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.error {
  color: #de350b;
  margin: 4px 0 0 0;
  font-size: 12px;
  font-style: normal;
  display: none;
  font-weight: 400;
  line-height: 16px;
}

button.submitBtnPostData {
  margin: 32px 0 0 0;
  padding: 10px 24px;
  background: #014fc5;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  width: 100%;
}

button.submitBtnPostData:hover {
  background: #013a94;
}

/* Request Demo modal on the Unite page reuses the footerCTA form's visual
   design (see .footerCTAForm* below) — scoped to .requestDemoCard so the
   shared .modal-content styles used by other testbuddy-family pages' popups
   are untouched. */
.modal-content.requestDemoCard {
  max-width: 480px;
  border-radius: 16px;
  padding: 56px 24px 24px 24px;
}

.modal-content.requestDemoCard label {
  margin: 0;
}

.modal-content.requestDemoCard #myForm.footerCTAForm {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0; gap: 12px; display: flex;
}

.close {
  color: #fff;
  float: right;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  right: 20px;
  top: 20px;
  background: rgba(0, 0, 0, 0.7);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close:hover,
.close:focus {
  background: rgba(0, 0, 0, 0.9);
}

.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 32px;
  padding: 8px 0;
}

.successBadge{width: 80px; height: 80px; flex-shrink: 0; border-radius: 999px; background: #E1F1EC; display: flex; align-items: center; justify-content: center;}
.successBadge img{width: 24px; height: 24px; display: block;}

.successMessageGroup{display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 100%;}
.success-container .successMessageGroup h1{margin: 0; color: #212121; font-size: 32px; font-weight: 500; line-height: 40px;}

.success-container .thankYouMessage {
  margin: 0;
  color: #717171;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.successActionsGroup{display: flex; flex-direction: column; gap: 16px; width: 100%;}

.successSecondaryBtn{width: 100%; height: 48px; background: #fff; border: 1px solid #014FC5; border-radius: 4px; color: #014FC5; font-size: 16px; font-weight: 700; line-height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.successSecondaryBtn:hover{background: #EAF1FC;}

/* VIDEO MODAL STYLES */
#video-modal-testbuddy {
width: 100%;
    background : rgba(0, 0, 0, 0.5);
    height: 100vh;
    top: 0 !important;
    bottom: 0;
}

.videoContainerBox{max-width: 500px; margin: 0 auto; padding: 16px; border-radius: 8px; background: #fff; position: relative;}

.videoContainerBox img {
  position: absolute;
  top: -11px;
  right: -11px;
  cursor: pointer;
}


.heroBannerLogoSec{display: flex; flex-direction: row; align-items: center; gap: 16px;}



.drag-container{
  overflow: hidden;
  width: 100%;
  cursor: grab; margin:48px 0 0 0;
}

.drag-wrapper{
  display: flex;
  gap: 32px;
  user-select: none;
}

.card{
  min-width: 340px;
  background: #fff;
  padding: 24px 24px 48px 24px;
  border-radius: 12px; display: flex; flex-direction: column; gap: 16px;
}
.card i{border-radius: 8px; display: flex;
  color: #003264;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px; /* 125% */
width: 48px;
height: 48px;
justify-content: center;
align-items: center;
flex-shrink: 0;
background:  #F6F6F6;}

.card p{color:  #212121;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */}

.card span{color: #717171;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}


.buidForWecurity{background: #F8FAFC; padding: 72px 16px 64px 16px;}
.buidForWecurity .buidForWecurityContainer{max-width: 1240px; align-items: flex-start; margin: 0 auto; width: 100%; display: flex; flex-direction: column;}
.buidForWecurity .buidForWecurityContainer h6{border-radius: 24px;
  background:  #DEF1FB; border-radius: 24px; display: flex;
  padding: 10px 24px; 
  justify-content: center; color:#003264;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.24px;
  text-transform: uppercase;
  align-items: center;
}
.buidForWecurity .buidForWecurityContainer h1{color: #212121; margin: 16px 0 ;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;}

  .buidForWecurity .buidForWecurityContainer h3{color: #717171; max-width: 768px;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */}

.buidForWecurity .buidForWecurityContainer ul{display: flex; list-style: none; flex-direction: row; gap: 32px; margin: 48px 0 0 0; width: 100%;}
.buidForWecurity .buidForWecurityContainer ul li{flex: 1; border-radius: 14px;
border: 1px solid  #DEF1FB;
background:  #FFF;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 32px 24px; display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.buidForWecurity .buidForWecurityContainer ul li .textAreaBox{display: flex; flex-direction: column; max-width: 326px; gap: 24px;}
.buidForWecurity .buidForWecurityContainer ul li .textAreaBox h5{color:  #212121;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */}


.buidForWecurity .buidForWecurityContainer ul li .textAreaBox dl {display: flex; flex-direction: column; gap: 12px; width: 100%;}
.buidForWecurity .buidForWecurityContainer ul li .textAreaBox dl dt{color:#717171; padding: 0 0 0 26px;  background: url('//ws.oneassist.in/static/portal_v2/images/testBuddy/tick.svg') no-repeat left center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */} 


.bottomTextAndPilsSec{margin: 56px 0 0 0; display: flex; flex-direction: column; width: 100%; align-items: center;}
.bottomTextAndPilsSec span.line{background:  #717171; height: 2px; width: 40px; border-radius: 2px;}
.bottomTextAndPilsSec h2{color:  #212121;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; margin: 48px 0 0 0;}

.bottomTextAndPilsSec i{color:  #717171; font-style: normal; margin: 16px 0 0 0;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}

.bottomTextAndPilsSec ol{    flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  list-style: none;
  display: flex;
  margin: 50px 0 0 0;
  align-items: center;
  justify-content: center;}
.bottomTextAndPilsSec ol li{border-radius: 30px; white-space: nowrap;
  border: 1px solid #DEF1FB;
  background: #DEF1FB;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex;
  padding: 15.5px 24px 16.5px 24px;
  align-items: center;
  gap: 8px; color: #003264;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  flex-shrink: 0; }

/* Desktop: horizontal pill row for "Fits seamlessly" section - single line per pill */
.bottomTextAndPilsSec ol.bottomTextPillsRow {
  flex-wrap: nowrap;
  justify-content: center;
}
.bottomTextAndPilsSec ol.bottomTextPillsRow li {
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

.mobileViewMenu {
    display: none;}

.demoBtn{display: none;
height: 30px;
min-width: 80px;
min-height: 30px;
max-height: 30px;
padding: 10px 16px;
justify-content: center;
align-items: center;
gap: 4px; color: #FFF;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; border-radius: 4px;
background: #014FC5; }

#myLinks{display: none;
position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1;
    overflow-y: auto;

}

#myLinks dl{display: flex; flex-direction: column; gap: 24px; padding: 80px 24px 0 24px;}
#myLinks dl dt a{color: #1E293B;
    border-bottom: solid 1px #F3F4F6;
    width: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    display: flex;
    text-decoration: none;}

#myLinks dl dt.uniteMobileSubLink{margin-top: -12px;}
#myLinks dl dt.uniteMobileSubLink a{padding-left: 16px; font-size: 15px; color: #64748B; border-bottom: none;}


#myLinks .bookADemoBtn{margin: 16px 16px 0 16px; border-radius: 4px;
background: #014FC5; display: flex;
padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;color:  #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */}

#myLinks .closeMenu{position: absolute; top: 16px; right: 24px;}

/* Unite mobile nav drawer accordion (Figma: Unite V2 — Mobile 360 · Nav Drawer) */
.uniteMobileNav{display: flex; flex-direction: column; padding: 56px 0 0 0;}

.uniteMobileNavRow{width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; margin: 0; border: none; border-top: 1px solid #E0E0E0; background: none; color: #212121; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none;}

.uniteMobileNavChevron{width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s ease;}
.uniteMobileNavGroup--open .uniteMobileNavChevron{transform: rotate(180deg);}

.uniteMobileNavPanel{display: none; flex-direction: column; gap: 4px; padding: 0 16px 16px 16px;}
.uniteMobileNavGroup--open .uniteMobileNavPanel{display: flex;}

.uniteMobileNavItem{display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none;}
.uniteMobileNavItemIcon{width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #F6F6F6; display: flex; align-items: center; justify-content: center;}
.uniteMobileNavItemIcon img{width: 20px; height: 20px; display: block;}
.uniteMobileNavItemText{display: flex; flex-direction: column; gap: 1px; min-width: 0;}
.uniteMobileNavItemTitle{color: #212121; font-size: 13.5px; font-weight: 700; line-height: 18px;}
.uniteMobileNavItemSub{color: #717171; font-size: 12px; font-weight: 400; line-height: 16px;}
.cstTag{color: #003264; border-radius: 9999px; padding: 6px 12px; 
background: #E1F1EC; margin: 0 0 -12px 0;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 16px; /* 133.333% */
letter-spacing: 0.24px;
text-transform: uppercase;}


.howItWorkNew{width: 100%; padding: 72px 16px; background: #F8FAFC; }


.bottomGridSec{background: linear-gradient(181deg, #FFF 60.38%, #E1F1EC 95%) !important;}

.howItWork{width: 100%; padding: 72px 16px; background: #fff; }
.howItWorkContainer{ max-width:1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;}
.howItWorkContainer h6, .howItWorkNew h6{ border-radius: 24px; background: #DEF1FB; display: flex;
padding: 10px 24px;
justify-content: center;
align-items: center;
color: #003264;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 16px; /* 133.333% */
letter-spacing: 0.24px;
text-transform: uppercase;
}

.howItWorkContainer h1, .howItWorkNew h1{ color: #212121; width: 100%; margin: 16px 0; text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px; }

.howItWorkContainer h5, .howItWorkNew h5{ color: #717171; max-width: 666px; margin: 0 0 44px 0;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; }

.issuanceCompareSection{width:100%;}
.issuanceCompareTrack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;width:100%;}
.issuanceCompareCard{border-radius:14px;background:#fff;padding:22px 22px 22px 22px;border:1px solid #E0E0E0;}
.issuanceCompareCard--manual{border-color:#FBE5DF;}
.issuanceCompareCard--auto{border-color:#E1F1EC;}
.issuanceCompareBadge{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;padding:8px 16px;color:#212121;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0.24px;text-transform:uppercase;}
.issuanceCompareBadge--manual{background:#FBE5DF;}
.issuanceCompareBadge--auto{background:#E1F1EC;}
.issuanceCompareBadgeIcon{font-size:14px;line-height:1;font-weight:700;}
.issuanceCompareMetric{margin:18px 0 20px 0;border-radius:10px;padding:12px 16px;display:flex;align-items:flex-end;gap:8px;}
.issuanceCompareMetric strong{font-size:46px;line-height:36px;font-weight:700;font-family:Inter,Roboto,sans-serif;}
.issuanceCompareMetric span{font-size:16px;line-height:19px;font-weight:700;margin:0 4px 2px 0;}
.issuanceCompareMetric small{font-size:13px;line-height:15px;color:#717171;margin:0 0 2px 0;}
.issuanceCompareMetric--manual{background:#FBE5DF;}
.issuanceCompareMetric--manual strong,.issuanceCompareMetric--manual span{color:#DE350B;}
.issuanceCompareMetric--auto{background:#E1F1EC;}
.issuanceCompareMetric--auto strong,.issuanceCompareMetric--auto span{color:#00875A;}
.issuanceManualFlow dl{display:flex;flex-direction:column;gap:10px;margin:0;}
.issuanceManualFlow dt{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-radius:8px;border:1px solid rgba(222,53,11,0.12);background:rgba(222,53,11,0.05);gap:16px;}
.issuanceManualFlow dt h4{margin:0;color:#212121;font-size:13px;font-weight:700;line-height:15px;}
.issuanceManualFlow dt h4 em{color:#DE350B;font-style:normal;font-weight:400;font-size:11px;}
.issuanceManualFlow dt p{margin:4px 0 0 0;color:#717171;font-size:12px;line-height:14px;}
.issuanceManualFlow dt span{color:#DE350B;font-size:12px;font-weight:700;line-height:14px;white-space:nowrap;}
.issuanceManualFlow dl i{display:flex;justify-content:center;align-items:center;color:rgba(222, 53, 11, 0.50);font-style:normal;font-size:20px;height:1px;}
.issuanceAutoArrival{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;border:1px solid rgba(1,79,197,0.15);background:rgba(1,79,197,0.06);margin:0 0 10px 0;gap:8px;}
.issuanceAutoArrival p{margin:0;color:#014FC5;font-size:13px;font-weight:700;line-height:16px;}
.issuanceAutoArrival span{margin:0;color:#717171;font-size:11px;line-height:13px;text-align:right;}
.issuanceAutoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0;}
.issuanceAutoGrid li{border-radius:8px;border:1px solid rgba(0,135,90,0.2);background:#E1F1EC;padding:11px 16px;}
.issuanceAutoGrid li h4{margin:0;color:#212121;font-size:12px;font-weight:700;line-height:14px;}
.issuanceAutoGrid li p{margin:4px 0 0 0;color:#717171;font-size:11px;line-height:13px;}
.issuanceAutoFooter{border-radius:10px;background:#E1F1EC;padding:12px 16px;margin:8px 0 0 0;border: 1px solid rgba(0,135,90,0.2);}
.issuanceAutoFooter h4{margin:0;color:#212121;font-size:12px;font-weight:700;line-height:14px;}
.issuanceAutoFooter + .issuanceAutoFooter h4{color:#00875A;}
.issuanceAutoFooter p{margin:4px 0 0 0;color:#717171;font-size:12px;line-height:14px;}

.issuanceStepTimelineWrap {
  width: 100%;
  position: relative;
}

.issuanceStepTimeline {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
}

.issuanceStepRail {
  position: absolute;
  left: 116px;
  right: 116px;
  top: 24px;
  height: 1px;
  background: #E0E0E0;
  z-index: 0;
}

.issuanceStepCard {
  width: calc((100% - 64px) / 5);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.issuanceStepNumber {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #003264;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.1);
}

.issuanceStepNumber--done {
  background: #00875A;
}

.issuanceStepCard h4 {
  color: #212121;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin: 0;
}

.issuanceStepCard p {
  color: #717171;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}





.tab-panel h2{color: var(--Neutral-Colors-color-primary-content, #212121);
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 133.333% */}


.tab-panel h4{color:#717171;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */}



.tab-panel.active{
display:flex;
}

.leftSecBoxHomePage {
    max-width: 900px !important;
    align-items: center !important;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

.smartRauting{ display: flex; flex-direction: row; gap: 32px; align-items: center; margin: 4px 0 0 0;}
.smartRauting dt{padding: 24px; border-radius: 14px; background: #fff; border-left-width: 5px; border-left-style: solid; border-left-color: #00875A; gap: 16px; display: flex; flex-direction: column;}
.smartRauting dt h3{color:  #212121;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 140% */}
.smartRauting dt h3 span{color: #00875A;}
.smartRauting dt + dt h3 span{color: #014FC5;}
.smartRauting dt + dt  + dt h3 span{color: #FF991F;}

.smartRauting dt .tagsBox{display: flex; flex-direction: row; gap: 8px; }

.smartRauting dt .tagsBox span{color:  #003264; background-color: #E1F1EC; border-radius: 24px; padding: 3px 16px;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */}

.smartRauting dt + dt .tagsBox span{ background-color: #DEF1FB; }
.smartRauting dt + dt + dt .tagsBox span{ background-color: #FFF2E2; }


.smartRauting dt p{color: #717171;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; }

.smartRauting dt + dt{border-left-color: #003264;}
.smartRauting dt + dt + dt{ border-left-color: #FF991F;}

.marginTop12{margin-top: 12px !important;}
.marginTopBottom48{margin: 48px 0;}

.agenticPipeline{display: flex; flex-wrap: wrap; gap: 32px; align-items: center;}
.agenticPipeline dt{    display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #DEF1FB;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14);
  width: calc(50% - 16px);}
.agenticPipeline dt h4{color: #212121;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; }

.agenticPipeline dt p{color: #717171;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; }





  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --primary: #014FC5;
    --dark-blue: #003264;
    --content-primary: #212121;
    --content-secondary: #717171;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F6F6F6;
    --positive: #00875A;
    --bg-positive: #E1F1EC;
    --bg-info: #DEF1FB;
    --warning: #FF991F;
    --bg-warning: #FFF2E2;
    --negative: #DE350B;
    --bg-negative: #FBE5DF;
    --green: #4ade80;
    --yellow: #fbbf24;
  }
  html { scroll-behavior: smooth; }

  /* HERO */
  .hero {
    margin-top: 80px;
    padding: 72px 104px 64px;
    background: radial-gradient(ellipse 1100px 1100px at 1008px 189px, rgba(1,79,197,0.06) 0%, rgba(1,79,197,0) 60%), #fff;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 48px;
    align-items: center;
    min-height: 632px;
  }
  

  /* LIVE PIPELINE CARD */
  .pipeline-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);     max-width: 478px;
    width: 100%;
  }
  .pipeline-top {
    background: var(--dark-blue);
    padding: 20px;
    min-height: 270px;
  }
  .pipeline-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
  }
  .pipeline-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.15px; text-transform: uppercase; }
  .processing-badge { font-size: 10px; font-weight: 600; color: var(--green); }
  .pipeline-stats { display: flex; gap: 8px; margin-bottom: 16px; }
  .stat-box {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 10px 12px;
  }
  .stat-value { font-size: 20px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
  .stat-value.green { color: var(--green); }
  .stat-value.yellow { color: var(--yellow); }
  .stat-value.white { color: #fff; }
  .stat-label { font-size: 10px; color: rgba(255,255,255,0.5); }
  .pipeline-rows { display: flex; flex-direction: column; gap: 6px; }
  .pipeline-row {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0 11px; height: 33px;
    display: flex; align-items: center; gap: 8px; font-size: 10px;
  }
  .row-id { color: rgba(255,255,255,0.4); font-weight: 700; min-width: 56px; }
  .row-name { color: rgba(255,255,255,0.85); font-weight: 500; font-size: 11px; flex: 1; }
  .row-badge {
    border-radius: 9999px; padding: 2px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1px;
  }
  .badge-issued { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.3); color: var(--green); }
  .badge-running { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: var(--yellow); }
  .badge-review { background: rgba(130,169,226,0.15); border: 1px solid rgba(130,169,226,0.3); color: #82a9e2; }
  .row-time { color: rgba(255,255,255,0.35); min-width: 36px; text-align: right; }
  .pipeline-bottom {
    background: var(--bg-info); display: flex; gap: 8px; padding: 15px 20px;
  }
  .bottom-stat { flex: 1; background: var(--bg-info); border-radius: 8px; padding: 10px 12px; text-align: center; }
  .bottom-val { font-size: 18px; font-weight: 700; color: var(--dark-blue); }
  .bottom-lbl { font-size: 11px; font-weight: 500; color: var(--content-secondary); margin-top: 2px; }

  /* TICKER */
  .ticker {
    background: #f8fafc; height: 64px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; white-space: nowrap;
  }
  .ticker-inner {
    display: flex; gap: 32px; align-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; color: #82a9e2;
    animation: ticker 20s linear infinite;
  }
  .ticker-dot { font-weight: 400; }
  @keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  
  /* PULSE ANIMATION for Processing badge */
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
  .processing-badge { animation: pulse 2s ease-in-out infinite; }

  /* Animated rows scroll */
  @keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .pipeline-row { animation: slideIn 0.4s ease forwards; }
  .pipeline-row:nth-child(1) { animation-delay: 0s; }
  .pipeline-row:nth-child(2) { animation-delay: 0.15s; }
  .pipeline-row:nth-child(3) { animation-delay: 0.3s; }

  @media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; }
    .problem-grid, .features-grid, .pathways-grid { grid-template-columns: 1fr; }
    .pipeline-card { max-width: 480px; margin: 24px auto 0; }
  }







   .doc-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
      padding: 32px;
      width: 100%;
      max-width: 680px;
      transition: opacity 0.4s ease;
    }

    .doc-wrap.fade { opacity: 0; }

    /* ══════════════════════════════
       DOCUMENT CARD
    ══════════════════════════════ */
    .doc-card {
      width: 236px;
      background: #fff;
      border-radius: 14px;
      box-shadow:
        0 4px 24px rgba(1,79,197,0.1),
        0 1px 4px rgba(0,0,0,0.07);
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }

    /* Header bar */
    .doc-hd {
      background: #003264;
      padding: 11px 14px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .doc-hd-icon {
      width: 22px; height: 22px;
      border-radius: 5px;
      background: rgba(255,255,255,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* SVG icon: document */
    .doc-hd-icon svg { width: 13px; height: 13px; }

    .doc-hd-label {
      font-size: 10px;
      color: rgba(255,255,255,0.78);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Scan line */
    .doc-scan {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(1,79,197,0.35) 15%,
        #014FC5 50%,
        rgba(1,79,197,0.35) 85%,
        transparent 100%
      );
      box-shadow: 0 0 10px rgba(1,79,197,0.4);
      pointer-events: none;
      z-index: 10;
      top: 14%;
      animation: scanMove 1.9s ease-in-out 0.3s infinite alternate;
    }

    @keyframes scanMove {
      from { top: 14%; opacity: 0.5; }
      5%   { opacity: 1; }
      95%  { opacity: 1; }
      to   { top: 93%; opacity: 0.5; }
    }

    /* Body */
    .doc-body { padding: 14px; }

    /* Photo + fields row */
    .doc-photo-row {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }

    .doc-photo {
      width: 54px; height: 66px;
      border-radius: 6px;
      background: #E8EFF8;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Person silhouette */
    .doc-photo svg { width: 28px; height: 28px; opacity: 0.35; }

    .doc-photo-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,135,90,0.11);
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 3px;
      opacity: 0;
      transition: opacity 0.32s ease;
    }

    .doc-photo-overlay.show { opacity: 1; }

    .doc-photo-overlay svg { width: 15px; height: 15px; }

    /* Fields */
    .doc-fields { flex: 1; }

    .doc-field { margin-bottom: 9px; }

    .doc-field-lbl {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: #9595A0;
    }

    .doc-field-val {
      font-size: 12px;
      color: #212121;
      font-weight: 500;
      margin-top: 2px;
    }

    .doc-check {
      font-size: 10px;
      font-weight: 700;
      color: #00875A;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .doc-check.show { opacity: 1; }

    .doc-divider { height: 1px; background: #F0F2F4; margin: 10px 0; }

    .doc-row { display: flex; gap: 12px; }
    .doc-row .doc-field { flex: 1; }

    /* ══════════════════════════════
       CHECKLIST PANEL
    ══════════════════════════════ */
    .dai-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .dai-ttl {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #717171;
      margin-bottom: 3px;
    }

    .dai-item {
      background: #fff;
      border: 1px solid #E0E0E0;
      border-radius: 9px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      opacity: 0;
      transform: translateX(12px);
      transition: opacity 0.32s ease, transform 0.32s ease;
    }

    .dai-item.show { opacity: 1; transform: none; }

    .dai-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: #E1F1EC;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dai-icon svg { width: 15px; height: 15px; }

    .dai-body { flex: 1; min-width: 0; }

    .dai-name {
      font-size: 12px;
      font-weight: 600;
      color: #212121;
      line-height: 1.3;
    }

    .dai-sub {
      font-size: 11px;
      color: #717171;
      margin-top: 1px;
    }

    .dai-status {
      font-size: 10px;
      font-weight: 700;
      color: #00875A;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    /* Verdict */
    .dai-verdict {
      background: #E1F1EC;
      border: 1px solid rgba(0,135,90,0.2);
      border-radius: 9px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .dai-verdict.show { opacity: 1; }

    .dai-verdict-icon svg { width: 22px; height: 22px; }

    .dai-verdict-main {
      font-size: 13px;
      font-weight: 700;
      color: #00875A;
    }

    .dai-verdict-sub {
      font-size: 11px;
      color: #717171;
      margin-top: 1px;
    }






    /* ── Wrapper ── */
    .hawk-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 48px;
      width: 100%;
      max-width: 720px; margin: 40px 0 0 0;
    }

    /* ══════════════════════════════
       PHONE
    ══════════════════════════════ */
    .hw-phone {
      --base: clamp(110px, 16vw, 150px);
      width: var(--base);
      height: calc(var(--base) * 2);
      font-size: calc(var(--base) / 11);
      position: relative;
      flex-shrink: 0;
    }

    .hw-body {
      width: 100%; height: 100%;
      border-radius: 2.2em;
      background: linear-gradient(160deg, #EDECEA 0%, #DEDAD5 100%);
      border: 0.05em solid rgba(0,0,0,0.09);
      position: relative;
      overflow: hidden;
      box-shadow:
        0 0.5em 2em rgba(0,0,0,0.18),
        0 2em 5em rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.55);
    }

    /* Side buttons */
    .hw-body::before {
      content: '';
      position: absolute;
      left: 0; top: 28%;
      width: 0.2em; height: 0.72em;
      background: linear-gradient(to right, #B4B0AA, #C8C4BE);
      border-radius: 0.1em 0 0 0.1em;
      z-index: 5;
      box-shadow: 0 1.1em 0 #C0BCB6;
    }

    .hw-body::after {
      content: '';
      position: absolute;
      right: 0; top: 37%;
      width: 0.2em; height: 1.1em;
      background: linear-gradient(to left, #B4B0AA, #C8C4BE);
      border-radius: 0 0.1em 0.1em 0;
      z-index: 5;
    }

    /* Top bezel */
    .hw-bezel {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.38em;
      z-index: 3;
    }

    .hw-speaker {
      width: 1.6em; height: 0.22em;
      border-radius: 99px;
      background: #B8B4AE;
    }

    .hw-cam {
      width: 0.28em; height: 0.28em;
      border-radius: 50%;
      background: #AEAAA4;
    }

    /* Screen */
    .hw-screen {
      position: absolute;
      top: 1.5em; left: 0.55em; right: 0.55em; bottom: 1.7em;
      border-radius: 0.35em;
      background: #fff;
      overflow: hidden;
    }

    .hw-home {
      position: absolute;
      bottom: 0.38em; left: 50%;
      transform: translateX(-50%);
      width: 1.1em; height: 1.1em;
      border-radius: 50%;
      background: #D8D4CE;
      border: 0.07em solid #C4C0BA;
      box-shadow: inset 0 0.06em 0.1em rgba(255,255,255,0.4);
      z-index: 3;
    }

    /* Scan line */
    .hw-scan {
      position: absolute;
      left: 0; right: 0; height: 2px;
      z-index: 30; pointer-events: none;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(37,99,235,0.25) 10%,
        rgba(37,99,235,0.9) 30%,
        #2563EB 50%,
        rgba(37,99,235,0.9) 70%,
        rgba(37,99,235,0.25) 90%,
        transparent 100%
      );
      box-shadow: 0 0 8px 2px rgba(37,99,235,0.45);
      animation: hwScan 2.6s ease-in-out infinite alternate;
    }

    @keyframes hwScan {
      from { top: 3%; opacity: 0.4; }
      4% { opacity: 1; }
      96% { opacity: 1; }
      to { top: 93%; opacity: 0.4; }
    }

    /* ── State 1: Home screen ── */
    .hw-s1 {
      width: 100%; height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0.42em 0.45em 0.32em;
      transition: opacity 0.3s ease;
    }

    .hw-s1.hide { opacity: 0; }

    .hw-status {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3em;
    }

    .hw-time { width: 1.8em; height: 0.16em; border-radius: 99px; background: rgba(0,0,0,0.14); }

    .hw-sys { display: flex; align-items: center; gap: 0.18em; }

    .hw-sys-dot { width: 0.16em; height: 0.16em; border-radius: 50%; background: rgba(0,0,0,0.14); }

    .hw-sys-batt { width: 0.42em; height: 0.16em; border-radius: 0.05em; background: rgba(0,0,0,0.14); }

    .hw-grid {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.42em;
    }

    .hw-row { display: flex; justify-content: center; gap: 0.42em; }

    .hw-app {
      width: 1.05em; height: 1.05em;
      border-radius: 0.22em;
      background: #E2DDD8;
      animation: appPulse 5.2s ease-in-out infinite;
    }

    .hw-row:nth-child(2) .hw-app { animation-delay: 0.3s; }

    @keyframes appPulse {
      0%, 25% { background: #E2DDD8; }
      35%, 65% { background: #C6DDEF; }
      75%, 100% { background: #E2DDD8; }
    }

    /* ── State 2: IMEI ── */
    .hw-s2 {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.9em;
      pointer-events: none;
    }

    .hw-imei-frame {
      position: relative;
      border: 0.055em solid rgba(37,99,235,0.2);
      border-radius: 0.28em;
      padding: 0.5em 0.75em 0.55em;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25em;
      background: rgba(37,99,235,0.03);
      width: 100%;
      opacity: 0;
    }

    .hw-imei-frame.in { animation: frameIn 0.4s cubic-bezier(0.4,0,0.15,1) forwards; }

    @keyframes frameIn {
      from { opacity: 0; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Corner brackets */
    .hw-c {
      position: absolute;
      width: 0.55em; height: 0.55em;
      border-style: solid;
      border-color: rgba(37,99,235,0.55);
      animation: cornerPulse 1.8s ease-in-out infinite;
    }

    .hw-c-tl { top: -0.07em; left: -0.07em;   border-width: 0.1em 0 0 0.1em; border-radius: 0.1em 0 0 0; }
    .hw-c-tr { top: -0.07em; right: -0.07em;  border-width: 0.1em 0.1em 0 0; border-radius: 0 0.1em 0 0; }
    .hw-c-bl { bottom: -0.07em; left: -0.07em;  border-width: 0 0 0.1em 0.1em; border-radius: 0 0 0 0.1em; }
    .hw-c-br { bottom: -0.07em; right: -0.07em; border-width: 0 0.1em 0.1em 0; border-radius: 0 0 0.1em 0; }

    @keyframes cornerPulse {
      0%, 100% { border-color: rgba(37,99,235,0.28); }
      50%      { border-color: rgba(37,99,235,0.85); }
    }

    .hw-imei-tag {
      font-family: 'Courier New', monospace;
      font-size: 0.28em;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: rgba(37,99,235,0.4);
      text-transform: uppercase;
      opacity: 0;
    }

    .hw-imei-tag.in { animation: frameIn 0.3s ease 0.2s forwards; }

    .hw-imei-line { display: flex; align-items: center; line-height: 1; opacity: 0; }

    .hw-imei-line.in { animation: lineIn 0.3s ease forwards; }

    @keyframes lineIn {
      from { opacity: 0; transform: translateY(0.2em); }
      to   { opacity: 1; transform: none; }
    }

    .hw-d {
      font-family: 'Courier New', monospace;
      font-size: 0.65em;
      font-weight: 700;
      width: 0.82em;
      text-align: center;
      color: rgba(37,99,235,0.14);
      transition: color 0.22s ease, text-shadow 0.22s ease;
    }

    .hw-d.lit {
      color: #2563EB;
      text-shadow: 0 0 5px rgba(37,99,235,0.4);
    }

    .hw-gap { width: 0.35em; display: inline-block; }

    .hw-bc {
      width: 100%; height: 0.58em;
      display: block; flex-shrink: 0;
      opacity: 0;
    }

    .hw-bc.in { animation: frameIn 0.4s ease forwards; }

    /* ══════════════════════════════
       RESULTS PANEL
    ══════════════════════════════ */
    .hawk-results {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 220px;
      flex: 1;
    }

    .hawk-ttl {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #717171;
      margin-bottom: 2px;
    }

    .hawk-card {
      background: #FFFFFF;
      border: 1px solid #E0E0E0;
      border-radius: 10px;
      padding: 11px 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
      opacity: 0;
      transform: translateX(14px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .hawk-card.show { opacity: 1; transform: none; }

    .hawk-card-lbl {
      font-size: 10px;
      color: #959595;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 4px;
    }

    .hawk-card-val {
      font-size: 12px;
      color: #212121;
      font-weight: 500;
      font-family: 'Courier New', monospace;
    }

    .hawk-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 5px;
      font-size: 10px;
      font-weight: 600;
      color: #00875A;
      background: rgba(0,135,90,0.08);
      border-radius: 4px;
      padding: 2px 8px;
    }

    /* Risk card */
    .hawk-risk {
      background: #E1F1EC;
      border: 1px solid rgba(0,135,90,0.2);
      border-radius: 10px;
      padding: 13px 14px;
      opacity: 0;
      transform: translateX(14px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .hawk-risk.show { opacity: 1; transform: none; }

    .hawk-risk-lbl {
      font-size: 10px;
      color: #717171;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 5px;
    }

    .hawk-risk-num {
      font-size: 32px;
      font-weight: 700;
      color: #00875A;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .hawk-risk-num span {
      font-size: 14px;
      font-weight: 400;
      color: #959595;
    }

    .hawk-risk-verdict {
      font-size: 12px;
      color: #00875A;
      font-weight: 500;
      margin-top: 4px;
    }

    .hawk-risk-bar {
      height: 4px;
      background: rgba(0,135,90,0.15);
      border-radius: 2px;
      margin-top: 10px;
      overflow: hidden;
    }

    .hawk-risk-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #00875A, #34D399);
      border-radius: 2px;
      transition: width 1.2s ease 0.3s;
    }

    .hawk-risk.show .hawk-risk-fill { width: 8%; }

    /* Fade wrapper for loop reset */
    .hawk-wrap { transition: opacity 0.4s ease; }
    .hawk-wrap.fade { opacity: 0; }









    .chat-card {
      width:100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 24px 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .message-row {
      display: flex;
      gap: 12px;
      animation: messageIn 0.5s ease both;
    }
    .message-row.user { flex-direction: row-reverse; }
    .message-row.system { justify-content: center; }
    .avatar {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 13px;
    }
    .avatar.user { background: #3b82f6; }
    .avatar.agent { 
background: var(--Gradient, linear-gradient(180deg, #0098FF -8%, #9A6CFF 17.92%, #DF58D1 43.3%, #FB6252 71.38%, #FEA40A 100%));}



    .message-stack { max-width: 70%; display: flex; flex-direction: column; align-items: flex-start; }
    .message-row.user .message-stack { align-items: flex-end; }
    .message-row.system .message-stack { align-items: center; max-width: 80%; }
    .bubble {
      padding: 10px 16px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.45;
      margin: 0;
    }
    .bubble.user { background: #3b82f6; color: #fff; border-top-right-radius: 4px; }
    .bubble.agent { background: #fff; color: #111827; border: 1px solid #e5e7eb; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
    .bubble.system { background: #f3f4f6; color: #4b5563; font-size: 13px; padding: 6px 12px; }
    .time { color: #9ca3af; font-size: 12px; margin-top: 4px; padding: 0 4px; }
    .typing-row { display: flex; gap: 12px; align-items: flex-end; animation: messageIn 0.3s ease both; }
    .typing-bubble {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      border-top-left-radius: 4px;
      padding: 12px 16px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }
    .typing-dots { display: flex; gap: 4px; }
    .typing-dots span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #9ca3af;
      animation: bounce 0.6s infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
    .send-btn svg { width: 20px; height: 20px; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes messageIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }












  @media only screen and (max-width: 600px) {

    .imgzoomBox{position: relative;}


.smartRauting { gap: 16px; align-items: normal;
  overflow-x: scroll; margin: 0 0 0 -16px; width: calc(100% + 32px);
}
.smartRauting dt {min-width: 312px;} 
.smartRauting dt:first-child{ margin-left: 21px; }
.smartRauting dt:last-child{ margin-right: 16px; }



    .howItWork, .howItWorkNew {
    padding: 48px 16px;
}

.howItWorkContainer h1{
    margin: 24px 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.howItWorkContainer h5 {
    margin: 0 0 24px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}




    .cstTag{margin: 0;}
    .demoBtn{display: flex;}
    .tabSection ul li {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

.tabSection ul li .textSec span{display: none;}
header {
    position: fixed; background: #fff;
    height: 64px;
    border-bottom: 1px solid #F3F4F6; top: 0;
    z-index: 99; display: flex;
}

header img[alt="OneAssistTech"] {
    width: 134px;
}
.mobileViewMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}



.modal-content {width: 95%;padding: 40px 24px 32px 24px;}
.modal {padding-top: 50px;}

/* Request Demo modal → bottom sheet on mobile, slides up from the bottom
   edge instead of the generic centered popup used by other modals. */
#myModal { padding-top: 0; }
#myModal .modal-content.requestDemoCard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  margin: 0;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 48px 16px 24px 16px;
  animation: requestDemoSheetUp 0.25s ease-out;
}
@keyframes requestDemoSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.heroBanner{padding: 32px 16px; margin: 64px 0 0 0; }
.heroBannerContainer {flex-direction: column;}
.heroBannerContainer .leftSecBox h1 {
    color: #003264;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.heroBannerContainer .leftSecBox {
    gap: 16px;
}
.heroBannerContainer .leftSecBox p {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}


.platformsSec {
    justify-content: flex-start;
    white-space: nowrap;
    overflow-x: scroll;
}

.agenticPipeline {
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: scroll;
  flex-direction: row;
  justify-content: flex-start;
  scroll-behavior: smooth;
  align-items: normal;
  width: calc(100% + 32px);
  margin: 0 -16px 0 -16px;
}

.agenticPipeline dt {
    padding: 24px 16px;
    min-width: 284px;
}

.agenticPipeline dt:first-child{margin-left: 16px;} 
.agenticPipeline dt:last-child{margin-right: 16px;} 




.heroBannerContainer .leftSecBox h6 {margin: 8px 0 0 0;}
.callToActionSec {flex-direction: column; text-align: center; gap: 16px;margin: 16px 0 0 0;width: 100%;}
.buildForEnterprise {padding: 48px 16px; overflow: hidden;}
.buildForEnterprise .buildForEnterpriseContainer h1 {font-size: 20px;font-style: normal;font-weight: 500;line-height: 28px; }
.buildForEnterprise .buildForEnterpriseContainer h5{font-size: 16px;font-style: normal; font-weight: 400;line-height: 24px; }
ul.buildForEnterpriseList, ul.enterpriseRealityList {overflow-x: scroll ; width: calc(100% + 32px); padding-right: 16px;}
ul.buildForEnterpriseList li:last-child, ul.enterpriseRealityList li:last-child{margin-right: 16px;}

.issuanceCompareTrack{display:flex; gap: 24px; flex-direction: column;}
.issuanceCompareMetric strong{font-size:38px;line-height:30px;}


.issuanceStepTimelineWrap {
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
}

.issuanceStepTimeline {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  justify-content: flex-start;
  gap: 0;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.issuanceStepRail {
left: 132px;
right: 0px;
width: 1154px;
}

.issuanceStepCard {
  min-width: 284px;
  padding-right: 16px;
  flex-shrink: 0;
}

.issuanceStepCard p {
  font-size: 16px;
}

ul.buildForEnterpriseList li, ul.enterpriseRealityList li{min-width: 284px;}
.sharedInfrastructure {padding:74px 16px 48px;}
.sharedInfrastructure .sharedInfrastructureContainer h1 {color: #fff;font-size: 20px;font-style: normal;font-weight: 500;line-height: 28px;}
.sharedInfrastructure .sharedInfrastructureContainer h5{font-size: 16px;font-weight: 400;line-height: 24px;}
.sharedInfrastructure .sharedInfrastructureContainer ul {margin: 24px 0 0 0;}
.sharedInfrastructure .sharedInfrastructureContainer ul li{width: 100%; padding: 24px 16px;}
.sharedInfrastructure .sharedInfrastructureContainer ul li .topLogoSec{justify-content: flex-start; gap: 16px;}
.sharedInfrastructure .sharedInfrastructureContainer ul li .topLogoSec img{width: 123px;}
.sharedInfrastructure .sharedInfrastructureContainer ul li .topLogoSec img + img{width: 111px;}
.sharedInfrastructure .sharedInfrastructureContainer ul li h3 {
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */}

.sharedInfrastructure .sharedInfrastructureContainer ul li dl dt {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.sharedInfrastructure .sharedInfrastructureContainer ul li a {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 10px 16px;
}

.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText {
    margin: 48px auto 0 auto;
}
.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText h2 {
    margin: 24px 0 16px 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.sharedInfrastructure .sharedInfrastructureContainer .bottomSecWithText ol , .howItWorkNew .howItWorkContainer ol{
    margin: 36px 0 0 0;
    align-items: center;
    justify-content: flex-start;
    overflow: scroll;

            width: calc(100% + 32px);
        position: relative;
        z-index: 1;
}
.enterpriseRealitySec{padding: 48px 16px; overflow: hidden;}
.enterpriseRealitySec .enterpriseRealitySecContainer h1 {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.howItWorkNew .howItWorkContainer ol li:first-child {margin-left: 16px;}
.howItWorkNew .howItWorkContainer ol li:last-child {margin-right: 16px;}

.enterpriseRealitySec .enterpriseRealitySecContainer h6
 {
    margin: 32px 0 0 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}


/* width */
::-webkit-scrollbar {
background: transparent;
width: 0px; height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background:transparent;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:transparent; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:transparent;
}
.requestDemo {background: url(//ws.oneassist.in/static/portal_v2/images/testBuddy/yellowBgMob.png) no-repeat center; background-size: cover; padding: 48px 16px 40px 16px;}
.requestDemo .requestDemoContainer {gap: 32px;}
.requestDemo .requestDemoContainer h1 {font-size: 20px;font-weight: 500;line-height: 28px;}

.postMasterHeroBanner { margin: 64px 0 0 0;padding: 32px 16px ;}
.postmasterLogo {
    margin: 0;
    width: 111px;
}

.postMasterFeaturesList {
    margin: 8px 0 0 0;
}

.mostEnterprises {
    padding:74px 16px 24px 16px;
}

.mostEnterprises .mostEnterprisesContainer h1 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}
.mostEnterprises .mostEnterprisesContainer {
    gap: 24px;
}
.probAndSolvSec {
    flex-direction: column;
    gap: 24px;
}

.sectionforList {
    padding: 32px 16px;
}
.listofPoints li p {

    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}
.listofPoints li .iconSec {
    width: 36px;
    height: 36px;

}

.tagBox {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.architectureAndPerformance {
    padding: 48px 16px;
}

.architectureAndPerformance .architectureAndPerformanceContainer h1 {
    margin: 16px 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; text-align: center;
}

.architectureAndPerformance .architectureAndPerformanceContainer h3 {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

ol.whyNotJustUseCPaaS {
flex-wrap: nowrap;
        gap: 16px;
        margin: 36px 0 0 -16px;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        width: calc(100% + 47px);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
}

/* fullWidthPils: horizontal scroll on mobile, end-to-end width */
ol.whyNotJustUseCPaaS.fullWidthPils {
    flex-direction: row;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    -webkit-overflow-scrolling: touch;
    overflow-x: auto; max-width: none !important;
}

ol.whyNotJustUseCPaaS.fullWidthPils li {
    max-width: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}

ol.whyNotJustUseCPaaS li:first-child {
    margin-left: 32px;
}
ol.whyNotJustUseCPaaS.fullWidthPils li:first-child {
    margin-left: 16px;
}
ol.whyNotJustUseCPaaS li:last-child {
    margin-right: 16px;
}
ol.whyNotJustUseCPaaS.fullWidthPils li:last-child {
    margin-right: 16px;
}

ol.whyNotJustUseCPaaS li {
    border-radius: 44px;
    border: 1px solid #DEF1FB;
    max-width: none;
    padding: 15.5px 24px 16.5px 24px;
    font-size: 16px;
    font-style: normal;
    width: auto;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
    flex-shrink: 0;
}

.whyNotJustUseCPaaSContainer h4 {
    margin: 24px 0;
}

/* Mobile: only first two asides scroll; last aside (Post Master) always visible */
.whyNotJustUseCPaaSList {
    flex-direction: column;
    overflow: visible;
    width: 100%;
    margin: 0;
    gap: 16px;
}

.whyNotJustUseCPaaSList-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: 0 0 0 -16px;
    width: calc(100% + 32px);
}

.whyNotJustUseCPaaSList-scroll aside {
    flex-shrink: 0;
}

.whyNotJustUseCPaaSList-scroll aside:first-child {
    margin-left: 16px;
}

.whyNotJustUseCPaaSList-scroll aside:last-child {
    margin-right: 16px;
}

.whyNotJustUseCPaaSList > aside {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.governedCommunication .governedCommunicationContainer h1 {

    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.governedCommunication .governedCommunicationContainer ul.governedCommunicationList {
    gap: 16px;
    margin: 24px 0 0 -16px;
    flex-wrap: nowrap;
    width: calc(100% + 45px);
    overflow: scroll;
    flex-direction: row;
}

.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li:first-child {
    margin-left: 32px;
}

.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li:last-child {
    margin-right: 16px;
}


.governedCommunication .governedCommunicationContainer ul.governedCommunicationList li {
  
    min-width: 284px;
    padding: 24px 16px 48px 16px;
   
}
.governedCommunication {
    background: #fff;
    padding: 48px 16px;
}

.whyNotJustUseCPaaSContainer {width: 100%;}
.whyNotJustUseCPaaSList aside {
    max-width: 284px;
}

.whyNotJustUseCPaaSList > aside {
    max-width: 100% !important;
}


.implimentSecBox {
    padding: 16px;
    gap: 12px;
}

.implimentSecBox .implimentTextSec {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.drag-container {
    overflow: scroll;
    margin: 24px 0 0 -16px;
    width: calc(100% + 45px);
}

.drag-wrapper .card:first-child {
    margin-left: 32px;
}

.drag-wrapper
 {
    gap: 24px;
}

.drag-wrapper .card:last-child {
    margin-right: 32px;
}

.card {
    min-width: 284px;
}

.buidForWecurity {
    padding: 48px 16px;
}

.buidForWecurity .buidForWecurityContainer ul {
        margin: 24px 0 0 -16px;
        gap: 16px;
        overflow: scroll;
        width: calc(100% + 32px);
}

.buidForWecurity .buidForWecurityContainer ul li {
min-width: 284px; gap: 12px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; justify-content: flex-start;
}

.buidForWecurity .buidForWecurityContainer ul li:last-child{margin-right: 16px;}
.buidForWecurity .buidForWecurityContainer ul li:first-child{margin-left: 16px;}

.buidForWecurity .buidForWecurityContainer ul li img{order: 1; width: 86px;}
.buidForWecurity .buidForWecurityContainer ul li .textAreaBox {
    order: 2; max-width: none;
}   

.bottomTextAndPilsSec {
    margin: 32px 0 0 0;
} 

.bottomTextAndPilsSec h2 {
    margin: 24px 0 0 0;
}


.bottomTextAndPilsSec ol {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.bottomTextAndPilsSec ol.bottomTextPillsRow {
    flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 32px);
}

.bottomTextAndPilsSec ol.bottomTextPillsRow li:first-child{
  margin-left: 16px;
}

.bottomTextAndPilsSec ol.bottomTextPillsRow li:last-child{
  margin-left: 16px;
}

.tabSection ul li .textSec p {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}


.tab-panel {
    flex-direction: column;
}

/* Mobile: hide right-side image; show image just below the active accordion item */
.tab-panel .rightSectionPart {
    display: none !important;
}
.accordion-item-image-mobile {
    display: none;
    margin-top: 24px;
}
.accordion-item.active .accordion-item-image-mobile {
    display: block !important;
}
.accordion-item-image-mobile img {
    max-width: 100%;
    height: auto;
    display: block;
}

.listofPoints li {
    align-items: flex-start;
}

.leftSectionPart dl dt p {
  font-size: 14px;
  padding: 0 0 0 38px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  background-size: 20px;
}

.leftSectionPart dl dt span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.leftSectionPart dl dt section.topSubHeading {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.operatingModel .operatingModelContainer{flex-direction: column; gap: 32px;}
.operatingModel{padding: 48px 16px;}
.pointSolutions {padding: 0;}
.pssCards {flex-direction: column;}
.pssCardFull {flex-direction: column;}


.pssCardList li {font-size: 14px;
    line-height: 20px;}
.pssCardList {
    grid-template-columns: 1fr;
    gap: 12px;
   margin: 0;
}

.message-stack {
    max-width: 84%;
}

.bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.pointSolutions .pointSolutionsContainer h2, .operatingModel .operatingModelContent h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.pointSolutions .pointSolutionsContainer p, .operatingModel .operatingModelContent p  {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.hawk-wrap {
    gap: 24px;
}

.hw-phone {
    --base: clamp(72px, 16vw, 150px);
}

.hawk-results {
    gap: 8px; min-width: auto;
}

.hawk-card {border-radius: 6px; padding: 8px;}
.hawk-risk-verdict {
    font-size: 10px;
    margin-top: 0px;
}

.doc-wrap {
    gap: 16px;
    padding: 32px 0 0 0;
    flex-direction: column;
}
.doc-card, .dai-panel {
    width: 100%;
}



.bottomTextSec {margin:0 ;}
.implimentZoomIcon {display: flex;}

.displayNone{display: none !important;}

.agenticWorkflow{padding: 48px 16px 40px 16px;}
.agenticWorkflowContainer{gap: 24px;}
.agenticWorkflowHead{gap: 12px;}
.agenticWorkflowHead h1{font-size: 22px; line-height: 30px;}
.agenticWorkflowHead p{font-size: 16px; line-height: 24px;}
.decisionStrip{padding: 20px; gap: 20px;}
.decisionStripTop{flex-direction: column; align-items: flex-start; gap: 10px;}
.workflowSteps{overflow-x: scroll; margin: 0 -20px; padding: 0 20px; width: calc(100% + 40px);}
.workflowStep{flex: 0 0 150px; min-width: 150px;}
.workflowStepDesc{width: 150px;}
.workflowLaneConnector{display: none;}
.uniteAiCore{padding: 20px 20px 28px 20px;}
.opsCards{overflow-x: scroll; margin: 0 -20px; padding: 0 20px; width: calc(100% + 40px);}
.opsCard{flex: 0 0 220px; min-width: 220px;}

}

/* MENTIS CORE BANNER */
.mentisCoreBar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #003264 0%, #014FC5 100%);
  box-shadow: 0px 8px 24px -12px rgba(1, 79, 197, 0.45);
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

.mentisCoreBar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% -40%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

.mentisCoreBar__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mentisCoreBar__group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.mentisCoreBar__text {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 14px;
}

.mentisCoreBar__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.24px;
  text-transform: uppercase;
  line-height: 16px;
  white-space: nowrap;
}

.mentisCoreBar__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 24px;
  white-space: nowrap;
}

.mentisCoreBar__pills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.mentisCoreBar__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.24px;
  line-height: 16px;
  white-space: nowrap;
}

.mentisCoreBar__pill strong {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 24px;
}

@media (max-width: 768px) {
  .mentisCoreBar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 12px;
  }
  .mentisCoreBar__title {
    white-space: normal;
  }
}



/* MENTIS FLOW CONNECTOR */
.mentisFlow {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* MENTIS MODULE CARDS */
.mentisModules {
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 4px;
}

.mentisModule {
  background: #fff;
  border: 1px solid #E5E8EE;
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0px 1px 2px 0px rgba(15, 23, 42, 0.04), 0px 4px 16px -4px rgba(15, 23, 42, 0.08);
}

.mentisModule__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mentisModule__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mentisModule__icon--blue  { background: #DEF1FB; }
.mentisModule__icon--red   { background: #EEF1F5; }
.mentisModule__icon--green { background: #DEF1FB; }

.mentisModule__tag {
  font-size: 12px;
  font-weight: 700;
  color: #5B6472;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  line-height: 16px;
  white-space: nowrap;
}

.mentisModule__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
}

.mentisModule__body h3 {
  font-size: 24px;
  font-weight: 500;
  color: #212121;
  line-height: 32px;
}

.mentisModule__body p {
  font-size: 16px;
  font-weight: 400;
  color: #717171;
  line-height: 24px;
}

.mentisModule__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  flex: 1;
}

.mentisModule__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 24px;
}

.mentisModule__link {
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  margin-top: 4px;
  display: inline-block;
  color: #014FC5;
}





/* CORTEX HUB CARD */
.cortexHub {
  width: 100%;
  margin-top: 48px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 45px 37px 37px;
  overflow: hidden;
  position: relative;
}

.cortexHub__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cortexHub__sectionLabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.24px;
  text-transform: uppercase;
  line-height: 16px;
  margin-bottom: 6px;
}

.cortexHub__title {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  line-height: 28px;
  margin: 0;
}

.cortexHub__live {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 4px;
}

.cortexHub__liveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
  flex-shrink: 0;
}

.cortexHub__liveText {
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  line-height: 16px;
  white-space: nowrap;
}

.cortexHub__body {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Left / Right input-output columns */
.cortexHub__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Dashed arrow connector */
.cortexHub__connector {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual source/output card */
.cortexHub__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Icon placeholder box */
.cortexHub__cardIcon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

.cortexHub__cardIcon--blue   { background: rgba(130, 169, 226, 0.15); }
.cortexHub__cardIcon--orange { background: rgba(251, 146, 60, 0.15); }
.cortexHub__cardIcon--green  { background: rgba(74, 222, 128, 0.15); }

.cortexHub__cardContent {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cortexHub__cardContent strong {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 24px;
  white-space: nowrap;
}

.cortexHub__cardContent span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  line-height: 16px;
  white-space: nowrap;
}

/* Center Cortex engine box */
.cortexHub__engine {
  flex-shrink: 0;
  width: 270px;
  border-radius: 14px;
  border: 1px dashed rgba(130, 169, 226, 0.55);
  background: linear-gradient(to bottom, rgba(130, 169, 226, 0.1), rgba(1, 79, 197, 0.06));
  box-shadow: 0px 8px 28px -12px rgba(1, 79, 197, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  padding: 23px 19px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cortexHub__engineTop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

/* Cortex icon placeholder */
.cortexHub__engineIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #82a9e2 0%, #014FC5 60%, #003264 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

.cortexHub__engineMeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cortexHub__engineMeta strong {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 24px;
  text-align: center;
}

.cortexHub__engineMeta span {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-align: center;
  line-height: 15.5px;
}

/* Metrics / progress bars */
.cortexHub__metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cortexHub__metric {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cortexHub__metricLabel {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 16px;
  min-width: 90px;
  white-space: nowrap;
}

.cortexHub__metricBar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  min-width: 1px;
}

.cortexHub__metricFill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, #82a9e2, #4ade80);
}

.cortexHub__metricVal {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 16px;
  min-width: 28px;
  text-align: right;
}

@media (max-width: 1024px) {
  .cortexHub__body {
    flex-direction: column;
    gap: 16px;
  }
  .cortexHub__col {
    width: 100%;
  }
  .cortexHub__engine {
    width: 100%;
  }
  .cortexHub__connector {
    transform: rotate(90deg);
  }
}

/* CORTEX FEATURE GRID */
.cortexFeatureGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  margin: 48px 0 0 0;
}

.cortexFeatureCard {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 23px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cortexFeatureCard__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(130, 169, 226, 0.15);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

.cortexFeatureCard__title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.cortexFeatureCard__desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

@media (max-width: 900px) {
  .cortexFeatureGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cortexFeatureGrid {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    margin: 24px -16px 0;
    width: calc(100% + 32px);
    gap: 16px;
  }
  .cortexFeatureGrid .cortexFeatureCard {
    max-width: 334px;
    flex-shrink: 0;
  }
  .cortexFeatureGrid .cortexFeatureCard:first-child { margin-left: 16px; }
  .cortexFeatureGrid .cortexFeatureCard:last-child  { margin-right: 16px; }
}

/* ROAD AHEAD SECTION */
.roadAhead {
  width: 100%;
  padding: 72px 16px 64px;
  background: #fff;
}

.roadAheadContainer {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.roadAheadHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  width: 100%;
  text-align: center;
}

.roadAheadLabel {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #def1fb;
  color: #003264;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.roadAheadHeader h2 {
  color: #212121;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
}

.roadAheadHeader > p {
  color: #717171;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

.roadAheadGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.roadAheadCard {
  position: relative;
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 14px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0px 1px 2px 0px rgba(15, 23, 42, 0.04), 0px 4px 16px -4px rgba(15, 23, 42, 0.08);
}

.roadAheadCard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.roadAheadCard__top h3 {
  color: #212121;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
  flex: 1;
}

.roadAheadStatus {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 4px;
}

.roadAheadStatus--soon {
  background: #fef3c7;
  border: 1px solid #fef3c7;
  color: #92400e;
}

.roadAheadStatus--design {
  background: #fef3c7;
  border: 1px solid #fef3c7;
  color: #92400e;
}

.roadAheadCard > p {
  color: #717171;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  flex: 1;
}

.roadAheadCard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.roadAheadTag {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0.13px;
  white-space: nowrap;
}

.roadAheadTag--blue {
  background: #def1fb;
  color: #014fc5;
}

.roadAheadTag--purple {
  background: #eef1f5;
  color: #6d28d9;
}

@media (max-width: 960px) {
  .roadAheadGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .roadAheadGrid {
    grid-template-columns: 1fr;
  }
  .roadAheadHeader h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

/* ARGUS SECTION */
.argusSection {
  width: 100%;
  padding: 72px 16px;
  background: linear-gradient(to bottom, #f4f6fa 0%, #f8fafc 35%, #ffffff 100%);
}

.argusSectionContainer {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.argusSectionHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 894px;
  width: 100%;
  text-align: center;
}

.argusSectionTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #def1fb;
}

.argusSectionTag__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.argusSectionTag span:last-child {
  color: #003264;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  white-space: nowrap;
}

.argusSectionHeader h2 {
  color: #212121;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  max-width: 760px;
}

.argusSectionHeader > p {
  color: #717171;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  max-width: 765px;
}

.argusContentGrid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  width: 100%;
  align-items: start;
}

.argusFeatureList {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.argusFeature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.argusFeature__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #e1f1ec; display: flex; align-items: center; justify-content: center;
}

.argusFeature__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.argusFeature__content h3 {
  color: #212121;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.argusFeature__content p {
  color: #717171;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.argusImagePlaceholder img {
  width: 100%;
  height: auto;
  display: block;
}

.argusContentGrid .implimentImgWrap .implimentZoomIcon {
  display: flex;
}

.architectureAndPerformance .implimentImgWrap {
  display: none;
}

@media (max-width: 900px) {
  .argusContentGrid {
    grid-template-columns: 1fr;
  }

  .argusImagePlaceholder {
    min-height: 340px;
  }
}

@media (max-width: 600px) {
  .argusSectionHeader h2 {
    font-size: 26px;
    line-height: 34px;
  }

  .argusSectionHeader > p {
    font-size: 16px;
    line-height: 24px;
  }

  .argusFeature__content h3 {
    font-size: 18px;
    line-height: 26px;
  }
}

/* AI CO-PILOT SECTION */
.aiCopilot {
  background: #fff;
  padding: 72px 16px;
}

.aiCopilotContainer {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.aiCopilotHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 760px;
  width: 100%;
  text-align: center;
}

.aiCopilotLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #DEF1FB;
  color: #003264;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.aiCopilotHeader h2 {
  color: #212121;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
}

.aiCopilotHeader > p {
  color: #717171;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  max-width: 640px;
}

.aiCopilotGrid {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  width: 100%;
  justify-content: center;
}

/* Left column */
.aiCopilotRoles {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  width: 515px;
}

.aiCopilotRole {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid transparent;
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.aiCopilotRole--active {
  background: #fff;
  border-color: #E5E8EE;
  box-shadow: 0px 1px 2px 0px rgba(15, 23, 42, 0.04), 0px 4px 16px -4px rgba(15, 23, 42, 0.08);
  padding: 16px 0;
  gap: 17px;
}

.aiCopilotRole:not(.aiCopilotRole--active) {
  padding: 16px 20px;
  gap: 16px;
}

.aiCopilotRole__accentBar {
  width: 3px;
  background: #014FC5;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.aiCopilotRole__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.aiCopilotRole--active .aiCopilotRole__inner {
  padding-right: 19px;
}

.aiCopilotRole__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #DEF1FB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiCopilotRole__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.aiCopilotRole__content h3 {
  color: #212121;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

.aiCopilotRole__content p {
  color: #717171;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}

/* Bottom note card */
.aiCopilotNote {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid #EEF1F5;
  background: linear-gradient(119deg, rgba(255, 138, 61, 0.1) 0%, rgba(255, 90, 110, 0.1) 35%, rgba(255, 61, 154, 0.1) 70%, rgba(192, 38, 211, 0.1) 100%);
}

.aiCopilotNote__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 4px;
  background: rgba(190, 24, 93, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiCopilotNote > p {
  color: #212121;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
}

.aiCopilotNote > p strong {
  font-weight: 700;
}

/* Right column: image placeholder */
.aiCopilotPreview {
  flex: 1;
  min-width: 0;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.aiCopilotPreview__panel {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 480px;
}

.aiCopilotPreview__panel--active {
  display: block;
}

.aiCopilotPreview__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* UNITE HEADER */
.uniteHeader{background: #fff; position: sticky; top: 0; z-index: 100; padding: 0; display: flex; align-items: center; }


@media (min-width: 601px) {
  .uniteHeader{height: 80px;}
}
.uniteHeader .headerContainer ul.uniteNavList{gap: 36px;}
.uniteHeader .headerContainer ul.uniteNavList li a{ padding: 28px 0; display: flex; align-items: center; gap: 6px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 16px; line-height: 24px; color: #212121;}
.uniteHeader .navChevron{width: 12px; height: 12px; flex-shrink: 0;}
.uniteHeader .uniteHeaderCta{display: flex; align-items: center; gap: 8px;}
.uniteHeader .uniteHeaderCta img{width: 13px; height: 13px; flex-shrink: 0;}

/* UNITE HEADER — Solutions mega menu (desktop only, shown on hover/focus;
   Figma node 2967:2826). The nav item stays a positioning anchor; the panel
   itself fades/slides in rather than just display:none/block, and stays
   reachable via keyboard through :focus-within, not just :hover. */
.uniteNavItem--hasMega{position: relative;}
.uniteNavItem--hasMega .navChevron{transition: transform 0.2s ease;}
.uniteNavItem--hasMega:hover .navChevron,
.uniteNavItem--hasMega:focus-within .navChevron{transform: rotate(180deg);}

.uniteMegaMenu{
  position: absolute;
  top: 85%; 
  left: -72px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: #fff;
  border: 1px solid #E5E8EE;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0px 16px 40px -8px rgba(15,23,41,0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
}

.uniteNavItem--hasMega:hover .uniteMegaMenu,
.uniteNavItem--hasMega:focus-within .uniteMegaMenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.uniteMegaMenuRail{display: flex; flex-direction: column; gap: 12px; width: 210px; flex-shrink: 0;}
.uniteMegaMenuEyebrow{margin: 0; color: #014FC5; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;}
.uniteMegaMenuTitle{margin: 0; color: #003264; font-size: 18px; font-weight: 700; line-height: 24px;}
.uniteMegaMenuDesc{margin: 0; color: #717171; font-size: 13px; font-weight: 400; line-height: 19px;}
.uniteMegaMenuCta{margin: 0; color: #014FC5 !important; font-size: 13px; font-weight: 700; line-height: 18px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer;  white-space: nowrap; padding: 0 !important;}

/* Platform nav dropdown (Figma node 2967:2899) — a compact single-column
   list, reusing .uniteMegaMenu for positioning/hover-reveal and
   .uniteMegaMenuItem* for each row; only the panel's own box shape differs
   from the Solutions rail+grid layout. */
.uniteMegaMenu--platform{flex-direction: column; align-items: stretch; gap: 4px; width: 340px; padding: 10px; border-radius: 14px; box-shadow: 0px 14px 34px -8px rgba(15,23,41,0.12);}

.uniteMegaMenuGrid{display: grid; grid-template-columns: repeat(2, 310px); gap: 8px;}
.uniteMegaMenuGrid a{padding: 12px 0 !important;}
.uniteMegaMenu--platform a{padding-top: 12px !important; padding-bottom: 12px !important;}
.uniteMegaMenuItem{display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 10px; text-decoration: none; transition: background 0.15s ease;}
.uniteMegaMenuItem:hover,
.uniteMegaMenuItem:focus-visible{background: #F6F6F6;}
.uniteMegaMenuItemIcon{width: 38px; height: 38px; border-radius: 10px; background: #F6F6F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.uniteMegaMenuItemIcon img{width: 20px; height: 20px; display: block;}
.uniteMegaMenuItemText{display: flex; flex-direction: column; gap: 1px; min-width: 0;}
.uniteMegaMenuItemTitle{color: #212121; font-size: 13.5px; font-weight: 700; line-height: 18px;}
.uniteMegaMenuItemSub{color: #717171; font-size: 12px; font-weight: 400; line-height: 16px;}

@media (max-width: 600px) {
  header .headerContainer ul.uniteNavList{display: none;}
}

/* SERVICE JOURNEY SHOWCASE */
.serviceJourneyShowcase{
  background:
    radial-gradient(45% 45% at 36% 30%, rgba(255,153,31,0.1) 0%, rgba(255,153,31,0) 60%),
    radial-gradient(45% 55% at 70% 48%, rgba(1,79,197,0.15) 0%, rgba(1,79,197,0) 70%),
    linear-gradient(90deg, #FFFFFF 0%, #F8FAFC 50%, #FFF7ED 100%);
}
.serviceJourneyShowcaseContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 48px; position: relative;}
.serviceJourneyShowcaseContent{flex: 1; min-width: 0; max-width: 580px; display: flex; flex-direction: column; gap: 24px; padding: 72px 0 64px 0;}
.serviceJourneyShowcaseContent h1{margin: 0; color: #003264; font-size: 56px; font-style: normal; font-weight: 700; line-height: 68px;}
.serviceJourneyShowcaseContent p{margin: 0; color: #717171; font-size: 20px; font-style: normal; font-weight: 500; line-height: 28px;}

.serviceJourneyRtbList{list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;}
.serviceJourneyRtbList li{display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E5E8EE; border-radius: 999px; padding: 9px 15px 9px 13px; color: #212121; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; white-space: nowrap;}
.serviceJourneyRtbList li img{width: 16px; height: 16px; flex-shrink: 0; display: block;}

.serviceJourneyCta.callToActionSec{padding-top: 24px; flex-wrap: wrap;}
.serviceJourneyCta .primaryBtn{display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 12px 24px;}
.serviceJourneyCta .primaryBtn img{width: 20px; height: 20px; display: block;}
.serviceJourneyCta .secondaryBtn{font-weight: 700; padding: 12px 24px;}

.filmStrip{display: flex; gap: 20px; width: 600px; flex-shrink: 1; position: absolute;
    right: 0;
    top: 0;
    bottom: 0;}
.filmColumn{flex: 1; min-width: 0; height: 100%; overflow: hidden; position: relative;}
.filmTrack{display: flex; flex-direction: column; gap: 16px; will-change: transform;}
.filmPhoto{position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; flex-shrink: 0;}
.filmPhoto img{ inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;}
.filmColumnUp .filmTrack{animation: filmScrollUp 36s linear infinite;}
.filmColumnDown .filmTrack{animation: filmScrollDown 36s linear infinite;}

.filmPhotoBadge{position: absolute; left: 16px; bottom: 4%; display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 11px; background: rgba(255,255,255,0.93); backdrop-filter: blur(5px); box-shadow: 0px 6px 16px -4px rgba(15,23,41,0.22); white-space: nowrap;}
.filmPhotoBadgeIcon{width: 26px; height: 26px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;}
.filmPhotoBadgeIcon img{width: 15px; height: 15px; display: block;}
.filmPhotoBadgeIcon--green{background: rgba(18,183,106,0.16);}
.filmPhotoBadgeIcon--amber{background: rgba(245,166,35,0.16);}
.filmPhotoBadgeIcon--blue{background: rgba(47,123,246,0.16);}
.filmPhotoBadgeText{display: flex; flex-direction: column; gap: 1px;}
.filmPhotoBadgeTitle{color: #1A2B45; font-size: 13px; font-weight: 700; line-height: 17px;}
.filmPhotoBadgeSub{color: rgba(26,43,69,0.55); font-size: 11px; font-weight: 500; line-height: 15px;}

@keyframes filmScrollUp {
  from{ transform: translateY(0); }
  to{ transform: translateY(-50%); }
}
@keyframes filmScrollDown {
  from{ transform: translateY(-50%); }
  to{ transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .filmColumnUp .filmTrack, .filmColumnDown .filmTrack{ animation: none; }
}

@media (max-width: 900px) {
  .serviceJourneyShowcaseContainer{flex-direction: column; align-items: flex-start; gap: 32px;}
  .serviceJourneyShowcaseContent{max-width: 100%; padding: 0;}
  .serviceJourneyShowcaseContent h1{font-size: 32px; line-height: 40px;}
  .serviceJourneyShowcaseContent p{font-size: 16px; line-height: 24px;}

  /* Below the stacking breakpoint the film strip drops its desktop
     absolute-right positioning and becomes a normal-flow, full-width,
     badge-less two-column strip beneath the content — matching the
     mobile hero in Figma (node 2841:6265). Same photos/markup, just
     re-laid-out. */
  .filmStrip{position: static; width: 100%; height: 320px; gap: 16px;}
  .filmColumn{height: 320px;}
}

@media (max-width: 600px) {
  .serviceJourneyShowcase{padding: 32px 16px;}
  .serviceJourneyCta.callToActionSec{flex-direction: column; align-items: stretch; padding: 0;}
  .serviceJourneyCta .primaryBtn, .serviceJourneyCta .secondaryBtn{justify-content: center;}
  .serviceJourneyRtbList{gap: 8px;}
  .serviceJourneyRtbList li{gap: 6px; padding: 7px 12px 7px 10px; font-size: 12px; line-height: 16px;}
  .serviceJourneyRtbList li img{width: 14px; height: 14px;}
}

/* Placeholder shown until real images are provided */
.aiCopilotPreview__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile panel inside each role (accordion) */
.aiCopilotRole__panel {
  display: none;
  width: 100%;
}


/* KEY STATS */
.keyStats{background: #fff; padding: 48px 16px;}
.keyStatsContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px;}
.keyStatsContainer h1{margin: 0; color: #003264; font-size: 20px; font-weight: 500; line-height: 28px; text-align: center;}

.keyStatsTitleMobile{display: none; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 100%;}
.keyStatsTitleMobile h1{margin: 0; color: #003264; font-size: 18px; font-weight: 500; line-height: 26px;}
.keyStatsTitleMobile p{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px;}

.statsGrid{width: 100%; display: flex; gap: 16px;}
.statCard{flex: 1 1 0; min-width: 0; min-height: 164px; background: #fff; border: 1px solid #E5E8EE; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 6px; margin: 0; font: inherit; text-align: left; cursor: default; appearance: none; -webkit-appearance: none;}
.statCard h2{margin: 0; color: #003264; font-size: 40px; font-weight: 700; line-height: 46px;}
.statCard h2 span{font-size: 20px; font-weight: 500; line-height: 28px;}
.statCard p{margin: 0; color: #212121; font-size: 15px; font-weight: 500; line-height: normal;}
.statCard .statCardHint{font-size: 13px; font-weight: 400; line-height: 18px; color: #717171; display: none;}

.statsGrid .statCard:hover .statCardHint{display: block;}

.statsGrid .statCard:hover {
border: 1.5px solid #014FC5;
background:#DEF1FB;
box-shadow: 0 10px 28px -6px rgba(1, 79, 197, 0.22);}

.statsGrid .statCard:hover h2{color: #014FC5;}

.statsGrid .statCard + .statCard:hover {
border: 1.5px solid #FF991F;
background:#FFF2E2;
box-shadow: 0 10px 28px -6px rgba(255, 153, 31, 0.22);}

.statsGrid .statCard + .statCard:hover h2{color: #FF991F;}


.statsGrid .statCard + .statCard + .statCard:hover {
border: 1.5px solid #00875A;
background:#E1F1EC;
box-shadow: 0 10px 28px -6px rgba(0, 135, 90, 0.22);}

.statsGrid .statCard + .statCard + .statCard:hover h2{color: #00875A;}


.statsGrid .statCard + .statCard + .statCard + .statCard:hover {
border: 1.5px solid #E87254;
background:#FBE5DF;
box-shadow: 0 10px 28px -6px rgba(222, 53, 11, 0.22);}

.statsGrid .statCard + .statCard + .statCard + .statCard:hover h2{color:#E87254;}


@media (max-width: 900px) {
  .statsGrid{flex-wrap: wrap;}
  .statCard{flex: 1 1 calc(50% - 8px);}
}

/* AGENTIC SERVICE WORKFLOW */
.agenticWorkflow{border-top: 4px solid transparent; border-image: linear-gradient(90deg, #0098FF 0%, #9A6CFF 24%, #DF58D1 47%, #FB6252 74%, #FEA40A 100%) 1; background: linear-gradient(90deg, #F7F5FF 0%, #FCFDFF 50%, #EEF9F6 100%); padding: 72px 16px 64px 16px;}
.agenticWorkflowContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 36px;}

.agenticWorkflowHead{display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 900px;}
.agenticWorkflowHead h1{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px;}
.agenticWorkflowHead p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}

.agenticWorkflowHeadMobile{display: none;}

.workflowCanvas{width: 100%; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 20px; box-shadow: 0px 12px 32px 0px rgba(15,23,41,0.06);}

.decisionStrip{width: 100%; padding: 36px; display: flex; flex-direction: column; gap: 28px;}
.decisionStripTop{width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;}
.decisionStripTop h4{margin: 0; color: #212121; font-size: 16px; font-weight: 700; line-height: 24px;}
.decisionBadge{display: inline-flex; align-items: center; gap: 7px; background: #E1F1EC; border-radius: 999px; padding: 5px 12px 5px 11px; color: #00875A; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.24px; text-transform: uppercase; white-space: nowrap;}
.decisionBadgeDot{width: 7px; height: 7px; flex-shrink: 0;}

.workflowSteps{margin: 0; padding: 0; list-style: none; width: 100%; display: flex; align-items: flex-start;}
.workflowStep{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
.workflowStepIcon{width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid;}
.workflowStepIcon img{width: 22px; height: 22px; display: block;}
.workflowStepTime{margin: 0; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.24px; text-transform: uppercase;}
.workflowStepTitle{margin: 0; color: #212121; font-size: 14px; font-weight: 500; line-height: 20px;}
.workflowStepDesc{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px; width: 170px;}

.workflowStep--raised .workflowStepIcon{background: rgba(0,152,255,0.1); border-color: rgba(0,152,255,0.5);}
.workflowStep--raised .workflowStepTime{color: #7C5CFF;}
.workflowStep--diagnosed .workflowStepIcon{background: rgba(154,108,255,0.1); border-color: rgba(154,108,255,0.5);}
.workflowStep--diagnosed .workflowStepTime{color: #5566F0;}
.workflowStep--matched .workflowStepIcon{background: rgba(223,88,209,0.1); border-color: rgba(223,88,209,0.5);}
.workflowStep--matched .workflowStepTime{color: #2F7BF6;}
.workflowStep--confirmed .workflowStepIcon{background: rgba(251,98,82,0.1); border-color: rgba(251,98,82,0.5);}
.workflowStep--confirmed .workflowStepTime{color: #0EA5E9;}
.workflowStep--fixed .workflowStepIcon{background: rgba(254,164,10,0.1); border-color: rgba(254,164,10,0.5);}
.workflowStep--fixed .workflowStepTime{color: #10B981;}

.workflowConnector{flex: 0 0 56px; width: 56px; height: 52px; display: flex; align-items: center; justify-content: center;}
.workflowConnector img{width: 100%; height: 100%; display: block;}

/* Sequential reveal, matching the Figma prototype: steps + connectors fade/rise
   in one after another (initWorkflowStepsReveal in testbuddy-script.js), with
   each step's icon pulsing in its own accent color as it lands. */
.workflowStep{opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease;}
.workflowStep--visible{opacity: 1; transform: translateY(0);}
.workflowStep--visible .workflowStepIcon{animation: workflowStepPulse 0.7s ease;}

.workflowStep--raised{--workflow-pulse-color: 0,152,255;}
.workflowStep--diagnosed{--workflow-pulse-color: 154,108,255;}
.workflowStep--matched{--workflow-pulse-color: 223,88,209;}
.workflowStep--confirmed{--workflow-pulse-color: 251,98,82;}
.workflowStep--fixed{--workflow-pulse-color: 254,164,10;}

@keyframes workflowStepPulse {
  0%{box-shadow: 0 0 0 0 rgba(var(--workflow-pulse-color), 0.45);}
  70%{box-shadow: 0 0 0 12px rgba(var(--workflow-pulse-color), 0);}
  100%{box-shadow: 0 0 0 0 rgba(var(--workflow-pulse-color), 0);}
}

.workflowConnector{opacity: 0; transition: opacity 0.3s ease;}
.workflowConnector--visible{opacity: 1;}

@media (prefers-reduced-motion: reduce) {
  .workflowStep{opacity: 1; transform: none; transition: none;}
  .workflowStep--visible .workflowStepIcon{animation: none;}
  .workflowConnector{opacity: 1; transition: none;}
}

.workflowLaneConnector{width: 100%; display: flex; justify-content: center; padding: 0 36px;}
.workflowLaneConnector img{width: 100%; max-width: 1022px; height: auto; display: block;}
.workflowLaneConnectorMobile{display: none;}

.uniteAiCore{width: 100%; padding: 0 24px 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px;}

.aiCoreBadge{display: inline-flex; align-items: center; gap: 14px;}
.aiOrb{width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(90deg, #0098FF 0%, #9A6CFF 24%, #DF58D1 47%, #FB6252 74%, #FEA40A 100%); box-shadow: 0px 0px 10px 0px rgba(124,92,255,0.45);}
.aiOrb img{width: 24px; height: 24px; display: block;}
.aiCoreLabel{font-size: 16px; font-weight: 700; line-height: 24px; background: linear-gradient(90deg, #0098FF 0%, #9A6CFF 24%, #DF58D1 47%, #FB6252 74%, #FEA40A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}

.opsCards{margin: 0; padding: 16px; list-style: none; width: 100%; max-width: 1184px; display: flex; gap: 16px; background: #fff; border-radius: 18px;}
.opsCard{flex: 1 1 0; min-width: 0; background: #fff;  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);
background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 11px, transparent 11px) 0% 0% / 12px 12px no-repeat, radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 11px, transparent 11px) 100% 0% / 12px 12px no-repeat, radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 11px, transparent 11px) 0% 100% / 12px 12px no-repeat, radial-gradient(circle at 0 0, #ffffff 0, #ffffff 11px, transparent 11px) 100% 100% / 12px 12px no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50% / calc(100% - 2px) calc(100% - 24px) no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50% / calc(100% - 24px) calc(100% - 2px) no-repeat, radial-gradient(at 100% 100%, #f48200 0%, transparent 70%), radial-gradient(at 100% 0%, #7e00ff 0%, rgba(0, 0, 0, 0) 70%), radial-gradient(at 0% 0%, #ec00ff 0%, rgba(0, 0, 0, 0) 70%), #ff0000;


}
.opsCard h4{margin: 0; color: #212121; font-size: 14px; font-weight: 500; line-height: 20px;}
.opsCard p{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px;}

.uniteAiCoreNote{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center;}

@media (max-width: 1024px) {
  .agenticWorkflowContainer{max-width: 100%;}
  .workflowLaneConnector{display: none;}
  .opsCards{flex-wrap: wrap;}
  .opsCard{flex: 1 1 220px;}
}

.platformModules{background: #fff; padding: 72px 16px;}
.platformModules .platformModulesContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px;}

.platformModulesHead{display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 920px;}
.platformModulesHead h1{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px;}
.platformModulesHead p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}

.platformModulesBody{width: 100%; display: flex; align-items: flex-start; gap: 28px;}

.moduleRail{flex: 0 0 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px;}
.moduleTab{width: 100%; background: #fff; border: 1px solid #E5E8EE; border-radius: 10px; padding:12px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; font-family: inherit;}
.moduleTab--active{background: #F7F9FC; box-shadow: 0px 1px 5px 0px rgba(15,23,41,0.05);}
.moduleTabDot{width: 9px; height: 9px; flex-shrink: 0; display: flex;}
.moduleTabDot img{width: 100%; height: 100%; display: block;}
.moduleTabLabel{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.moduleTabTitle{color: #212121; font-size: 16px; font-weight: 400; line-height: 24px;}
.moduleTab--active .moduleTabTitle{font-weight: 700;}
.moduleTabSub{color: #717171; font-size: 12px; font-weight: 400; line-height: 16px;}
.moduleTabChevron{width: 14px; height: 14px; flex-shrink: 0; display: flex;}
.moduleTabChevron img{width: 100%; height: 100%; display: block;}

.modulePanel{display: none; flex: 1; min-width: 0; background: #F7F9FC; border: 1px solid #E5E8EE; border-radius: 16px; padding: 28px; box-shadow: 0px 2px 10px 0px rgba(15,23,41,0.05); flex-direction: column; gap: 24px;}
.modulePanel.modulePanel--active{display: flex;}
.modulePanelHead{display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px;}
.modulePanelHeadText{flex: 1 1 320px; min-width: 0;}
.modulePanelHeadText h3{margin: 0; color: #212121; font-size: 24px; font-weight: 500; line-height: 32px;}
.modulePanelHeadText p{margin: 4px 0 0 0; color: #717171; font-size: 16px; font-weight: 400; line-height: 24px;}
.modulePanelLearnMore{flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; color: #014FC5; font-size: 16px; font-weight: 700; line-height: 24px; text-decoration: none; white-space: nowrap;}
.modulePanelLearnMore img{width: 16px; height: 16px; display: block;}

.modulePanelGrid{display: flex; flex-direction: column; gap: 14px;}
.modulePanelRow{display: flex; gap: 12px;}

.moduleCard{flex: 1; min-width: 0; background: #fff; border: 1px solid #E5E8EE; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;}
.moduleCardIcon{width: 34px; height: 34px; border-radius: 9px; background: rgba(0,152,255,0.13); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.moduleCardIcon img{width: 20px; height: 20px;}
.moduleCard h4{margin: 0; color: #212121; font-size: 16px; font-weight: 700; line-height: 24px;}
.moduleCard p{margin: 0; color: #717171; font-size: 13px; font-weight: 400; line-height: 18px;}

.modulePanel[data-module-panel="warranty"] .moduleCardIcon{background: rgba(92,126,255,0.13);}
.modulePanel[data-module-panel="service-ops"] .moduleCardIcon{background: rgba(168,104,246,0.13);}
.modulePanel[data-module-panel="field-force"] .moduleCardIcon{background: rgba(211,92,217,0.13);}
.modulePanel[data-module-panel="returns"] .moduleCardIcon{background: rgba(234,92,161,0.13);}
.modulePanel[data-module-panel="escalation"] .moduleCardIcon{background: rgba(248,97,94,0.13);}
.modulePanel[data-module-panel="buyback"] .moduleCardIcon{background: rgba(252,128,50,0.13);}
.modulePanel[data-module-panel="payments"] .moduleCardIcon{background: rgba(254,164,10,0.13);}

@media (max-width: 1024px) {
  .moduleRail{flex: 1 1 auto; width: 100%;}
  .modulePanel{width: 100%;}
}

@media (max-width: 900px) {
  .platformModulesBody{flex-direction: column;}
  .platformModulesHead h1{font-size: 26px; line-height: 34px;}
  .platformModulesHead p{font-size: 16px; line-height: 24px;}
  .modulePanelRow{flex-direction: column;}
}

@media (max-width: 600px) {
  .platformModules{padding: 48px 16px; display: none;}
  .moduleTab{padding: 12px; gap: 10px;}
  .modulePanel{padding: 20px;}
}


.platformLayer{background: linear-gradient(180deg, #FCFDFF 0%, #EEF9F6 100%); padding: 72px 16px 64px;}
.platformLayer .platformLayerContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px;}

.platformLayerHead{display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 920px;}
.platformLayerHead h1{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px;}
.platformLayerHead p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}

.platformLayerGrid{list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.platformLayerCard{background: #fff; border: 1px solid #E0E0E0; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px;}

.platformLayerIcon{width: 38px; height: 38px; border-radius: 10px; background: #F6F6F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.platformLayerIcon img{width: 20px; height: 20px;}

.platformLayerCardHead{display: flex; flex-direction: column; gap: 8px;}
.platformLayerCardHead h3{margin: 0; color: #212121; font-size: 16px; font-weight: 700; line-height: 24px;}
.platformLayerCardHead p{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px;}

.platformLayerItems{list-style: none; margin: 0; padding-top: 4px; display: flex; flex-direction: column; gap: 8px;}
.platformLayerItems li{display: flex; align-items: flex-start; gap: 8px;}
.platformLayerItemIcon{display: flex; flex-direction: column; align-items: center; padding-top: 4px; flex-shrink: 0;}
.platformLayerItemIcon img{width: 12.25px; height: 14px; display: block;}
.platformLayerItems li p{margin: 0; color: #212121; font-size: 14px; font-weight: 400; line-height: 20px;}

.platformLayerLogos{width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 24px;}
.platformLayerLogosText{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center;}

.platformLogoMarquee{width: 100%; height: 36px; overflow: hidden; position: relative;}
.platformLogoTrack{display: flex; align-items: center; gap: 48px; width: max-content; position: absolute; left: 0; top: 0; animation: platformLogoScroll 28s linear infinite;}
.platformLogoSet{display: flex; align-items: center; gap: 48px; flex-shrink: 0;}
.platformLogoItem{display: flex; align-items: center; justify-content: center; height: 36px;}
.platformLogoItem img{height: 100%; width: auto; object-fit: contain; display: block;}

@keyframes platformLogoScroll {
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .platformLogoTrack{animation: none;}
}

@media (max-width: 900px) {
  .platformLayerGrid{grid-template-columns: repeat(2, 1fr);}
  .platformLayerHead h1{font-size: 26px; line-height: 34px;}
  .platformLayerHead p{font-size: 16px; line-height: 24px;}
}

@media (max-width: 600px) {
  .platformLayer{padding: 48px 16px;}
  .platformLayer .platformLayerContainer{gap: 32px;}

  .platformLayerHead{gap: 12px;}
  .platformLayerHead h1{font-size: 24px; line-height: 32px;}
  .platformLayerHead p{font-size: 14px; line-height: 20px; font-weight: 400;}

  /* Mobile swaps the card grid for a horizontally scrollable carousel
     (Figma node 2841:6465) — the section's own 16px side padding is
     cancelled and reapplied on the scroller itself so cards can be
     dragged edge-to-edge while still resting with a 16px gutter. */
  .platformLayerGrid{
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 0 -16px;
    padding: 0 16px 4px; width: calc(100% + 32px);
    scrollbar-width: none;
  }
  .platformLayerGrid::-webkit-scrollbar{display: none;}

  .platformLayerCard{
    flex: 0 0 272px;
    width: 272px;
    padding: 16px;
    gap: 12px;
  }

  .platformLayerLogos{gap: 16px; padding-top: 16px;}
}


.enterpriseTrust{background: #fff; padding: 72px 16px;}
.enterpriseTrust .enterpriseTrustContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px;}

.enterpriseTrustHead{display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 920px;}
.enterpriseTrustHead h1{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px;}
.enterpriseTrustHead p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}

.enterpriseTrustGrid{list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 16px;}
.enterpriseTrustGrid li{background: #fff; border: 1px solid #E0E0E0; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px;}

.enterpriseTrustIcon{width: 38px; height: 38px; border-radius: 10px; background: #F6F6F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.enterpriseTrustIcon img{width: 20px; height: 20px;}

.enterpriseTrustGrid li h3{margin: 0; color: #212121; font-size: 16px; font-weight: 700; line-height: 24px;}
.enterpriseTrustGrid li p{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px;}

@media (max-width: 900px) {
  .enterpriseTrustGrid{grid-template-columns: repeat(2, 1fr);}
  .enterpriseTrustHead h1{font-size: 26px; line-height: 34px;}
  .enterpriseTrustHead p{font-size: 16px; line-height: 24px;}
}

@media (max-width: 600px) {
  .enterpriseTrust{padding: 48px 16px;}
  .enterpriseTrust .enterpriseTrustContainer{gap: 24px;}
  .enterpriseTrustHead{gap: 12px;}
  .enterpriseTrustHead h1{font-size: 24px; line-height: 32px;}
  .enterpriseTrustHead p{font-size: 14px; line-height: 20px;}

  .enterpriseTrustGrid{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 12px;
    scrollbar-width: none;
    width: calc(100% + 32px);
  }
.enterpriseTrustGrid li:first-child{margin-left: 16px;}


  .enterpriseTrustGrid::-webkit-scrollbar{display: none;}
  .enterpriseTrustGrid li{
    flex: 0 0 272px;
    width: 272px;
    padding: 16px;
    gap: 12px;
  }
  .enterpriseTrustGrid li:first-child{margin-left: 16px;}
  .enterpriseTrustGrid li:last-child{margin-right: 16px;}
}




.footerCTA{background: linear-gradient(127deg, #06182F 0%, #0A2E57 71.43%); padding: 72px 0; position: relative; overflow: hidden;}
.footerCTA::before{content: ''; position: absolute; top: -260px; left: -160px; width: 760px; height: 760px; background: radial-gradient(circle, rgba(124,92,255,0.35) 0%, rgba(124,92,255,0) 70%); filter: blur(60px); pointer-events: none;}
.footerCTAContainer{padding: 0 16px; margin: 0 auto; max-width: 1232px; position: relative; z-index: 1;}

.footerCTAGrid{display: flex; align-items: center; justify-content: space-between; gap: 56px;}

.footerCTACopy{ max-width: 660px; display: flex; flex-direction: column; gap: 16px;}
.footerCTATitle{margin: 0; color: #fff; font-family: 'Roboto', sans-serif; font-size: 56px; font-weight: 700; line-height: 64px;}
.footerCTATitleGradient{background-image: linear-gradient(90deg, #0098FF 0%, #9A6CFF 24%, #DF58D1 47%, #FB6252 74%, #FEA40A 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.footerCTASubtext{margin: 0; color: #BFBFBF; font-size: 20px; font-weight: 500; line-height: 28px;}

.footerCTAMobileCta{display: none; width: 100%;}
.footerCTAMobileBtn{display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #014FC5; color: #fff; text-decoration: none; border-radius: 4px; padding: 12px 24px; font-size: 16px; font-weight: 700; line-height: 24px; cursor: pointer;}
.footerCTAMobileBtn img{width: 20px; height: 20px; display: block;}
.footerCTAMobileBtn:hover{background: #013a92;}

.footerCTAWhatsapp{display: flex; flex-direction: column; gap: 10px; padding-top: 24px;}
.footerCTAWhatsappLabel{margin: 0; color: #BFBFBF; font-size: 14px; font-weight: 400; line-height: 20px;}
.footerCTAWhatsappBtn{display: inline-flex; align-items: center; gap: 10px; width: fit-content; background: #fff; border: 1.5px solid #1E964A; border-radius: 8px; padding: 12px 20px 12px 18px; color: #1E964A; font-size: 15px; font-weight: 700; line-height: 20px; text-decoration: none; cursor: pointer;}
.footerCTAWhatsappIcon{display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex-shrink: 0;}
.footerCTAWhatsappIcon img{width: 100%; height: 100%; object-fit: cover;}

.footerCTAFormCard{flex: 0 0 480px; max-width: 500px; width: 100%;}
.footerCTAForm{display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #E5E8EE; border-radius: 16px; padding: 24px; box-shadow: 0px 8px 24px -6px rgba(15,23,41,0.1);}
.footerCTAFormCard .success-container{background: #fff; border: 1px solid #E5E8EE; border-radius: 16px; box-shadow: 0px 8px 24px -6px rgba(15,23,41,0.1); padding: 48px;}
.footerCTAFormTitle{margin: 0; color: #212121; font-size: 20px; font-weight: 700; line-height: 28px;}

.footerCTAFormField{display: flex; flex-direction: column; gap: 4px; width: 100%;}
.footerCTAFormField label{color: #212121; font-size: 14px; font-weight: 400; line-height: 20px;}
.footerCTAFormField input,
.footerCTAFormField textarea{border-radius: 4px; border: 1px solid #959595; padding: 14px 16px; width: 100%; outline: none; font-family: 'Roboto', sans-serif; font-size: 14px; color: #212121; resize: vertical;}
.footerCTAFormField input::placeholder,
.footerCTAFormField textarea::placeholder{color: #959595;}
.footerCTAFormField input{height: 48px;}
.footerCTAFormField textarea{min-height: 92px;}
.footerCTAFormField input:focus,
.footerCTAFormField textarea:focus{border: 1px solid #014FC5; box-shadow: 0 0 4px 0 rgba(1, 79, 197, 0.9);}

.footerCTAFormRow{display: flex; gap: 12px; width: 100%;}
.footerCTAFormRow .footerCTAFormField{flex: 1 1 0; min-width: 0;}

.footerCTASubmitWrap{padding-top: 20px; width: 100%;}
.footerCTASubmitBtn{width: 100%; height: 48px; background: #014FC5; border: none; border-radius: 4px; color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box;}
.footerCTASubmitBtn:hover{background: #013a92;}

.footerCTAFormNote{margin: 0; color: #717171; font-size: 12px; font-weight: 400; line-height: 16px;}











@media (max-width: 1100px) {
  .aiCopilotGrid {
    flex-direction: column;
  }
  .aiCopilotRoles {
    width: 100%;
  }
  /* Hide right-side preview on mobile — accordion takes over */
  .aiCopilotPreview {
    display: none;
  }
  /* Show the sibling panel immediately after an active role */
  .aiCopilotRole--active + .aiCopilotRole__panel {
    display: block;
    border-radius: 10px;
    overflow: hidden;
  }
  .aiCopilotRole--active + .aiCopilotRole__panel .aiCopilotPreview__placeholder {
    min-height: 240px;
  }
  .footerCTAGrid {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .footerCTACopy {
    max-width: 100%;
  }
  .footerCTAFormCard {
    flex: none;
    max-width: 100%;
  }
}

@media (max-width: 600px) {

  .pssCard{min-height: 692px;}
  .aiCopilotHeader h2 {
    font-size: 26px;
    line-height: 34px;
  }
  .aiCopilotHeader > p {
    font-size: 16px;
    line-height: 24px;
  }
  .aiCopilotRole__content h3 {
    font-size: 18px;
    line-height: 26px;
  }

.roadAheadGrid {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    margin: 0 -16px;
    width: calc(100% + 32px);
    gap: 16px;
  }
  .roadAheadGrid .roadAheadCard {
    max-width: 334px; padding: 24px;
    flex-shrink: 0;
  }
  .roadAheadGrid .roadAheadCard:first-child { margin-left: 16px; }
  .roadAheadGrid .roadAheadCard:last-child  { margin-right: 16px; }
  .roadAheadHeader h2 {
    font-size: 28px;
    line-height: 36px;
  }
  .headerTopText{margin-bottom: 0;}

.mentisCoreBar__group {
  align-items: flex-start; gap:12px;
}

  .mentisModules {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    margin: 4px -16px 0;
    width: calc(100% + 32px);
    gap: 16px;
    padding-top: 0;
  }
  .mentisModules > .mentisModule {
    max-width: 334px;
    flex-shrink: 0;
  }
  .mentisModules > .mentisModule:first-child { margin-left: 16px; }
  .mentisModules > .mentisModule:last-child  { margin-right: 16px; }
.mentisCoreBar__pills{display: none;}

.cortexHub{display: none;}
.architectureAndPerformance .implimentImgWrap { display: block; }
.architectureAndPerformance .implimentImgWrap .implimentZoomIcon { display: flex; }

.footerCTA { padding: 48px 0; }
.footerCTA::before { top: -140px; left: -120px; width: 440px; height: 440px; }
.footerCTATitle { font-size: 28px; line-height: 36px; }
.footerCTASubtext { font-size: 14px; line-height: 20px; }
.footerCTAMobileCta { display: flex; }
.footerCTAFormCard { display: none; }
.footerCTAWhatsappBtn{width: 100%;}

/* Request Demo modal reuses .footerCTAFormRow — on mobile, stack Work Email
   and Phone Number full-width instead of splitting the row 50/50. */
.footerCTAFormRow { flex-direction: column; }
.footerCTAFormRow .footerCTAFormField { flex: 1 1 auto; width: 100%; }

}



  /* ---- tokens (from the OA Tech Microsite local variables) ---- */
  :root{
    --c-navy:        #003264;   /* Shades_of_Blue/color-background-dark */
    --c-blue:        #014FC5;   /* Primary_Color/color-primary · text/link */
    --c-ink:         #212121;   /* Neutral/color-primary-content */
    --c-sub:         #717171;   /* Neutral/color-secondary-content */
    --c-bg:          #FFFFFF;   /* Neutral/color-primary-background */
    --c-border:      #E5E8EE;   /* color/grey/92 */
    --c-panel:       #F7F9FC;
    --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px;
    --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-48:48px;
    --r-sm:4px; --r-chip:9px; --r-tab:10px; --r-card:12px;
    --bar-h:59px;               /* 10 rail pad + 48 tab + 1 divider; measured at runtime too */
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  /* review harness: fluid on phones, centred 390px column on desktop */
  .device{width:100%;max-width:100%;margin:0 auto;background:var(--c-bg)}
  @media (min-width:520px){    .device{
      max-width:100;border-radius:20px;overflow:clip;
    }
  }

  /* ---- page chrome around the section, so sticky pin/unpin is observable ---- */
  .appbar{
    display:flex;align-items:center;justify-content:space-between;
    height:56px;padding:0 var(--sp-16);
    border-bottom:1px solid var(--c-border);background:var(--c-bg);
  }
  .appbar .wordmark{font-size:16px;font-weight:700;color:var(--c-navy);letter-spacing:-.2px}
  .appbar .burger{display:grid;gap:4px}
  .appbar .burger i{display:block;width:18px;height:2px;background:var(--c-ink);border-radius:2px}
  .lead,.tail{padding:var(--sp-32) var(--sp-16);color:var(--c-sub);font-size:13px;line-height:1.6}
  .tail{border-top:1px solid var(--c-border);background:var(--c-panel)}

  /* ---- section header ---- */
  .modules{position:relative; display: none;}
  .sect-head{padding:var(--sp-48) var(--sp-16) var(--sp-20);text-align:center;background:var(--c-bg)}
  .sect-head h2{
    margin:0 0 var(--sp-12);
    font-size:24px;line-height:32px;font-weight:500;color:var(--c-navy);
  }
  .sect-head p{margin:0;font-size:14px;line-height:20px;color:var(--c-sub)}

  /* ---- 1 · sticky tab bar ---- */
  .tabbar{
    position:sticky;top:64px;z-index:20;
    background:var(--c-bg);
    border-bottom:1px solid var(--c-border);
  }
  /* tabs butt together with no gap and no bottom padding, so the 3px tracks sit
     flush on the divider as one segmented progress rail. Rail = 10 + 48 = 58px. */
  .rail{
    display:flex;gap:0;
    padding:var(--sp-10) var(--sp-16) 0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .rail::-webkit-scrollbar{display:none}

  .tab{
    flex:0 0 auto;
    height:48px;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:var(--sp-12) 14px 0;
    border:0;border-radius:var(--r-tab);
    background:transparent;
    font:400 14px/20px Roboto,sans-serif;color:var(--c-ink);
    text-align:left;text-decoration:none;white-space:nowrap;
    cursor:pointer;
    transition:color 200ms var(--ease);
  }
  .tab:hover{background:var(--c-panel)}
  .tab[aria-current]{font-weight:700}
  .tab:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}

  /* 2 · progress bar under the active tab */
  .tab .track{height:3px;border-radius:2px;background:var(--c-border);overflow:hidden}
  .tab .fill{
    display:block;height:3px;width:0;border-radius:2px;
    background:var(--c-blue);
  }

  /* ---- module sections ---- */
  .stack{padding:var(--sp-24) var(--sp-16) var(--sp-48)}
  .module + .module{margin-top:var(--sp-32);padding-top:var(--sp-32);border-top:1px solid var(--c-border)}
  .module h3{margin:0 0 var(--sp-6);font-size:18px;line-height:24px;font-weight:500;color:var(--c-ink)}
  .module .desc{margin:0;font-size:14px;line-height:20px;color:var(--c-sub)}
  .learn{
    display:inline-flex;align-items:center;gap:var(--sp-4);
    margin:var(--sp-12) 0 var(--sp-16);
    font-size:16px;line-height:24px;font-weight:700;color:var(--c-blue);
    text-decoration:none;border-radius:var(--r-sm);
    transition:opacity 200ms var(--ease);
  }
  .learn:hover{opacity:.72}
  .learn svg{transition:transform 200ms var(--ease)}
  .learn:hover svg{transform:translateX(3px)}
  .learn:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px}

  .grid{display:grid;gap:var(--sp-10)}
  .card{
    padding:var(--sp-12);
    border:1px solid var(--c-border);border-radius:var(--r-card);
    background:var(--c-bg);
    display:grid;gap:var(--sp-6);
    transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease);
  }
  .card:hover{border-color:#D5DBE6;box-shadow:0 2px 10px #00000014}
  .chip{
    width:34px;height:34px;border-radius:var(--r-chip);
    display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 13%,transparent);
    color:var(--accent);
  }
  .card h4{margin:0;font-size:14px;line-height:20px;font-weight:700;color:var(--c-ink)}
  .card p{margin:0;font-size:12px;line-height:16px;color:var(--c-sub)}

  /* ---- readout, so the mechanism is inspectable during review ---- */
  .hud{
    position:fixed;left:12px;bottom:12px;z-index:50;
    display:flex;align-items:center;gap:8px;
    padding:7px 10px;border-radius:999px;
    background:#0F172ACC;backdrop-filter:blur(6px);
    color:#fff;font:500 11px/1 Roboto,sans-serif;letter-spacing:.2px;
    border:0;cursor:pointer;
  }
  .hud b{font-weight:700}
  .hud .meter{width:44px;height:3px;border-radius:2px;background:#FFFFFF3D;overflow:hidden}
  .hud .meter i{display:block;height:3px;width:0;background:#4DA3FF;border-radius:2px}
  .hud[data-off]{opacity:.35}
  @media (min-width:520px){.hud{left:50%;transform:translateX(-50%);bottom:20px}}

  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.01ms !important}
  }





  @media (max-width: 600px) {
  .keyStats{padding: 40px 16px;}
  .keyStatsContainer{gap: 20px;}
  .keyStatsTitleDesktop{display: none;}
  .keyStatsTitleMobile{display: flex;}
  .statsGrid{flex-wrap: wrap; gap: 8px;}
  .statCard{flex: 1 1 calc(50% - 4px); min-height: auto; padding: 16px 14px 24px 14px; gap: 4px; cursor: pointer;}
  .statCard h2{font-size: 28px; line-height: 36px;}
  .statCard h2 span{font-size: 16px; line-height: 24px;}
  .statCard p{font-size: 14px; line-height: 20px; min-height: 40px; }
.uniteHeader {padding: 0 16px;}

  /* No hover effect on mobile — a tap can leave :hover "stuck" on touch
     browsers, so explicitly cancel the desktop hover state here rather
     than relying on :hover never matching. */
  .statsGrid .statCard:hover,
  .statsGrid .statCard + .statCard:hover,
  .statsGrid .statCard + .statCard + .statCard:hover,
  .statsGrid .statCard + .statCard + .statCard + .statCard:hover{
    border: 1px solid #E5E8EE;
    background: #fff;
    box-shadow: none;
  }
  .statsGrid .statCard:hover h2,
  .statsGrid .statCard + .statCard:hover h2,
  .statsGrid .statCard + .statCard + .statCard:hover h2,
  .statsGrid .statCard + .statCard + .statCard + .statCard:hover h2{
    color: #003264;
  }
  .statsGrid .statCard:hover .statCardHint{display: none;}

  /* Figma mobile order: 1M+, 2x, 30%, 70 NPS */
  .statCard:nth-child(1){order: 1;}
  .statCard:nth-child(2){order: 4;}
  .statCard:nth-child(3){order: 2;}
  .statCard:nth-child(4){order: 3;}
  .modules {display: block;}
}

/* AGENTIC SERVICE WORKFLOW — mobile view (Figma node 2841:6305). Placed last
   so it wins over the older, overlapping mobile rules above for the same
   selectors; only touches mobile — nothing here is reachable above 600px,
   so the desktop layout/animation is untouched. */
@media (max-width: 600px) {
  .agenticWorkflowHead{display: none;}
  .agenticWorkflowHeadMobile{display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 100%;}
  .agenticWorkflowHeadMobile h1{margin: 0; color: #003264; font-size: 24px; font-weight: 500; line-height: 32px;}
  .agenticWorkflowHeadMobile p{margin: 0; color: #717171; font-size: 14px; font-weight: 400; line-height: 20px;}

  .decisionStrip{padding: 16px 12px; gap: 12px;}
  .decisionStripTop{flex-direction: column; align-items: center; text-align: center; gap: 8px;}

  /* Steps stay the real .workflowSteps list (not a duplicate marquee) so the
     existing one-time, staggered fade/rise-in reveal — triggered by
     IntersectionObserver in initWorkflowStepsReveal, same as desktop — plays
     on mobile too. The horizontal-scroll sizing further up this file
     (.workflowSteps/.workflowStep/.workflowStepDesc, inside the 600px block
     near the top) still applies since it isn't overridden here. */

  /* Smoother reveal + scroll on mobile only: native scroll-snap so each
     auto-scroll (item.scrollIntoView in initWorkflowStepsReveal) settles
     exactly on a slide boundary instead of an approximate offset, a gentler
     easing curve than the shared "ease", and a compositor hint so the
     browser doesn't jank on the fade/rise transform. */
  .workflowSteps{scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; margin-top: 24px;}
  /* Drop the translateY part of the reveal on mobile: .workflowSteps has
     overflow-x set (for the horizontal scroll), which forces overflow-y to
     compute as auto too — while a step is mid-transition at its
     translateY(14px) starting offset, that offset briefly falls outside the
     scrollable vertical bounds and clips the icon until the transform
     settles back to translateY(0). Opacity alone doesn't have this problem. */
  .workflowStep, .workflowStep--visible{transform: none;}
  .workflowStep{scroll-snap-align: start; transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1); will-change: opacity;}
  .workflowConnector{transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1);}

  /* Lane connector becomes 2 animated dashed lines with a travelling spark
     each, instead of the desktop's 6-line SVG (which stays display:none
     below 900px, unchanged). */
  .workflowLaneConnectorMobile{display: flex; width: 100%; justify-content: space-evenly; align-items: stretch; height: 40px; padding: 0 40px; display: none;}
  .workflowLaneConnectorMobileLine{position: relative; width: 0; border-left: 2px dashed rgba(1,79,197,0.35);}
  .workflowLaneConnectorMobileSpark{position: absolute; left: -4px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #0098FF 0%, #9A6CFF 100%); box-shadow: 0 0 6px 2px rgba(154,108,255,0.55); opacity: 0; animation: workflowLaneSparkFlowMobile 2.2s cubic-bezier(0.45,0,0.55,1) infinite;}
  .workflowLaneConnectorMobileLine:nth-child(2) .workflowLaneConnectorMobileSpark{animation-delay: 0.8s;}

  .uniteAiCore{padding: 8px 12px 24px 12px; gap: 12px;}
  .opsCards{display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; overflow: visible; margin: 0; padding: 0; width: 100%; max-width: 100%; background: transparent; border-radius: 0;}
  .opsCard{flex: initial; min-width: 0; width: auto;  box-shadow: none; padding: 12px; }
  .opsCard p{font-size: 12px; line-height: 16px;}

.workflowStep {flex: none;width: 180px;}
.filmPhotoBadge{left:8px;padding: 4px; border-radius: 8px; gap:6px}
.filmPhotoBadgeSub {font-size: 10px;}
.filmPhotoBadgeText {gap: 0px ;}
.filmPhotoBadgeTitle {font-size: 10px;}


}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .workflowSteps{scroll-behavior: auto;}
  .workflowStep{transition: none; will-change: auto;}
  .workflowConnector{transition: none;}
}

@keyframes workflowLaneSparkFlowMobile {
  0%{ top: 0%; opacity: 0; }
  10%{ opacity: 1; }
  85%{ opacity: 1; }
  100%{ top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workflowLaneConnectorMobileSpark{animation: none; opacity: 0;}
}

/* ============================================================
   UNITE PRODUCT SUB-PAGES (e.g. /unite/omnichannel)
   Shared "omniEyebrow" pill + per-section styles below.
   ============================================================ */

.omniEyebrow{display: inline-flex; width: fit-content; align-items: center; background: #DEF1FB; color: #003264; border-radius: 999px; padding: 8px 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.24px; text-transform: uppercase;}
.omniEyebrow--onLight{background: #fff;}

/* Hero */
.omniHero{background: url('//ws.oneassist.in/static/portal_v2/images/testBuddy/vector-hero.svg') no-repeat right top / contain, radial-gradient(45% 65% at 78% 40%, rgba(255,153,31,0.1) 0%, rgba(255,153,31,0) 70%), #fff; padding: 56px 16px;}
.omniHeroContainer{max-width: 1232px; margin: 0 auto; width: 100%;}
.omniHeroLeft{max-width: 755px; display: flex; flex-direction: column; gap: 24px;}
.omniHeroLeft h1{margin: 0; color: #003264; font-size: 56px; font-weight: 700; line-height: 68px;}
.omniHeroLeft p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}
.omniHeroCta.callToActionSec{padding-top: 8px;}

/* Problem / Solution */
.omniProblem{background: linear-gradient(180deg, #FFFFFF 60%, #F6F6F6 95%); padding: 56px 16px;}
.omniProblemContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px;}
.omniProblemHead{max-width: 850px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;}
.omniProblemHead h2{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px;}
.omniProblemHead p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}

.omniProblemGrid{width: 100%; display: flex; gap: 24px;}
.omniProblemCard{flex: 1 1 0; min-width: 0; background: #fff; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 24px;}
.omniProblemCard--bad{border: 1px solid #FBE5DF;}
.omniProblemCard--good{border: 1px solid #E1F1EC;}

.omniProblemBadge{display: inline-flex; align-items: center; gap: 8px; border-radius: 70px; padding: 10px 18px; color: #212121; font-size: 15px; font-weight: 700; width: fit-content; text-transform: uppercase;}
.omniProblemBadge img{width: 22px; height: 22px; display: block;}
.omniProblemBadge--bad{background: #FBE5DF;}
.omniProblemBadge--good{background: #E1F1EC;}

.omniProblemCard ul{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px;}
.omniProblemCard li{display: flex; align-items: center; gap: 16px;}
.omniProblemCard li p{margin: 0; color: #212121; font-size: 18px; font-weight: 500; line-height: 26px;}
.omniProblemItemIcon{width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.omniProblemItemIcon img{display: block;}
.omniProblemItemIcon--bad{background: #FBE5DF;}
.omniProblemItemIcon--good{background: #E1F1EC;}

/* How It Works */
.omniHowItWorks{border-top: 4px solid transparent; border-image: linear-gradient(90deg, #0098FF 0%, #9A6CFF 24%, #DF58D1 47%, #FB6252 74%, #FEA40A 100%) 1; background: linear-gradient(90deg, #F7F5FF 0%, #FCFDFF 50%, #EEF9F6 100%); padding: 40px 16px 48px 16px;}
.omniHowItWorksContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px;}
.omniHowItWorksContainer h2{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px; text-align: center;}

.omniStepsCanvas{width: 100%; margin: 16px 0 0 0;}



.omniSteps{margin: 0; padding: 0; list-style: none; width: 100%; display: flex; align-items: flex-start;}
.omniStep{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;}
.omniStepIcon{width: 52px; height: 52px; border-radius: 999px; background: #fff; border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.omniStepIcon img{width: 24px; height: 24px; display: block;}
.omniStep p{margin: 0; color: #212121; font-size: 14px; font-weight: 500; line-height: 20px;}
.omniStepArrow{flex: 0 0 40px; width: 40px; height: 52px; display: flex; align-items: center; justify-content: center;}
.omniStepArrow img{width: 100%; height: 100%; display: block;}

/* Capabilities */
.omniCapabilities{background: #fff; padding: 56px 16px;}
.omniCapabilitiesContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 32px;}
.omniCapabilitiesIntro{width: 100%; display: flex; gap: 32px; align-items: stretch; background: #E1F1EC; border-radius: 16px; overflow: hidden;}
.omniCapabilitiesIntroText{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 40px;}
.omniCapabilitiesIntroText h2{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px; text-align: left;}
.omniCapabilitiesIntroText p{margin: 0; color: #717171; font-size: 20px; font-weight: 500; line-height: 28px;}
.omniCapabilitiesPhoto{flex: 1 1 0; min-width: 0;}
.omniCapabilitiesPhoto img{width: 100%; height: 100%; object-fit: cover; display: block;}

.omniCapGrid{display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;}
.omniCapCard{grid-column: span 2; background: #fff; border: 1px solid #E0E0E0; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px;}

/* When there are exactly 5 cards, the leftover last row would otherwise be two
   1/3-width cards with an empty gap — these compound selectors only match
   when the 4th/5th child is also the 2nd-/last-from-end (i.e. exactly 5
   total), so 3/4/6-card grids are unaffected. */
.omniCapCard:nth-child(4):nth-last-child(2),
.omniCapCard:nth-child(5):nth-last-child(1){grid-column: span 3;}
.omniCapCardIcon{width: 44px; height: 44px; border-radius: 9px; background: #F6F6F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.omniCapCardIcon img{width: 24px; height: 24px; display: block;}
.omniCapCard h3{margin: 0; color: #003264; font-size: 24px; font-weight: 500; line-height: 32px;}
.omniCapCard p{margin: 0; color: #717171; font-size: 16px; font-weight: 400; line-height: 24px;}
.omniCapCard ul{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px;}
.omniCapCard li{display: flex; align-items: center; gap: 8px;}
.omniCapCard li img{width: 20px; height: 20px; flex-shrink: 0; display: block;}
.omniCapCard li span{color: #212121; font-size: 16px; font-weight: 400;}

/* Enterprise reality */
.omniEnterprise{background: #fff; padding: 56px 16px;}
.omniEnterpriseContainer{max-width: 1232px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 40px;}
.omniEnterpriseTop{width: 100%; display: flex; gap: 48px; align-items: flex-start;}
.omniEnterpriseCopy{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px;}
.omniEnterpriseCopy h2{margin: 0; color: #003264; font-size: 32px; font-weight: 500; line-height: 40px;}
.omniEnterpriseCopy p{margin: 0; color: #717171; font-size: 16px; font-weight: 400; line-height: 24px;}

.omniEnterpriseFeatures{flex: 0 0 500px; width: 500px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
.omniEnterpriseFeature{background: radial-gradient(#f6f6f6 1px, transparent 1px) 0 0/8px 8px, #fff; border: 1px solid #E5E8EE; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px;}
.omniEnterpriseFeatureIcon{width: 38px; height: 38px; border-radius: 10px; background: #F6F6F6; display: flex; align-items: center; justify-content: center;}
.omniEnterpriseFeatureIcon img{width: 20px; height: 20px; display: block;}
.omniEnterpriseFeature p{margin: 0; color: #212121; font-size: 16px; font-weight: 700;}

.omniEnterpriseDivider{width: 100%; border-top: 2px dashed #E5E8EE;}

.omniEnterpriseValueHeading{margin: 0; color: #003264; font-size: 24px; font-weight: 500; line-height: 32px; text-align: center;}

.omniValueGrid{width: 100%; display: flex; gap: 24px;}
.omniValueCard{flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid #E5E8EE; border-radius: 14px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.omniValueCardText h4{margin: 0 0 16px 0; color: #212121; font-size: 20px; font-weight: 700;}
.omniValueCardText ul{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;}
.omniValueCardText li{display: flex; align-items: center; gap: 8px;}
.omniValueCardText li img{width: 18px; height: 18px; flex-shrink: 0; display: block;}
.omniValueCardText li span{color: #212121; font-size: 15px; font-weight: 400;}
.omniValueBadge{flex-shrink: 0;  display: flex; align-items: center; justify-content: center; overflow: hidden;}
.omniValueBadge img{ display: block;}

@media (max-width: 1024px) {
  .omniHeroLeft{max-width: 100%;}
  .omniProblemGrid{flex-direction: column;}
  .omniSteps{flex-wrap: wrap; gap: 24px 12px; justify-content: center;}
  .omniStepArrow{display: none;}
  .omniCapabilitiesIntro{flex-direction: column;}
  .omniCapabilitiesPhoto{min-height: 240px;}
  .omniCapGrid{grid-template-columns: 1fr; gap: 20px 0;}
  .omniEnterpriseTop{flex-direction: column;}
  .omniEnterpriseFeatures{flex: 1 1 auto; width: 100%;}
  .omniValueGrid{flex-direction: column;}
}

@media (max-width: 600px) {
  .omniHeroLeft h1{font-size: 32px; line-height: 40px;}
  .omniHeroLeft p{font-size: 16px; line-height: 24px;}
  .omniProblemHead h2{font-size: 24px; line-height: 32px;}
  .omniHowItWorksContainer h2{font-size: 24px; line-height: 32px;}
  .omniCapabilitiesIntroText h2{font-size: 24px; line-height: 32px;}
  .omniEnterpriseFeatures{grid-template-columns: 1fr;}
  .omniValueCard{flex-direction: column; align-items: flex-start;}



.omniProblemCard li p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.omniHero {
background: radial-gradient(45% 45% at 35% 35%, rgba(255, 153, 31, 0.10) 0%, rgba(255, 153, 31, 0.00) 60%), radial-gradient(84.93% 38.72% at 66.28% 50.07%, rgba(1, 79, 197, 0.15) 0%, rgba(1, 79, 197, 0.00) 70%), linear-gradient(90deg, #FFF 0%, #F8FAFC 50%, #FFF7ED 100%);
    padding: 56px 16px;}
.omniProblem {padding: 54px 16px;}

  .omniHeroCta .primaryBtn{width: 100%; padding: 12px 24px; font-weight: 700;}

  .omniProblemCard{padding: 24px 16px;}
  .omniProblemItemIcon{width: 32px; height: 32px; border-radius: 6px;}
  .omniProblemItemIcon img{width: 16px; height: 16px;}

  /* Steps and enterprise-feature rows go back to a horizontally scrolling
     strip on mobile (Figma: node 452:34792) instead of wrapping/stacking —
     matching the same scroll-strip pattern already used elsewhere on mobile. */
  .omniSteps{flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px;}
  .omniStep{flex: 0 0 110px; width: 110px; scroll-snap-align: start;}
  .omniStepArrow{display: flex;}

  .omniEnterpriseFeatures{display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px;}
  .omniEnterpriseFeature{flex: 0 0 240px; width: 240px; scroll-snap-align: start;}

  .omniValueBadge{align-self: center;}

  .omniCapabilitiesIntroText {
    padding: 24px;
}

}