/* Customer Success landing page styles. */
.customer-success{
  --dc-blue:#378ee4;
  --dc-blue-deep:#0078c9;
  --dc-blue-text:#1e7cda;
  --dc-blue-pale:#e8f2fe;
  --dc-blue-bg:#f1faff;
  --dc-red:#ff114a;
  --dc-red-pale:#fff0f3;
  --dc-text:#3a4752;
  --dc-text-sub:#626a72;
  --dc-line:#dfe7ee;
  --dc-footer:#1a1f25;
  --brand:#2e6efe
}
:where(main.customer-success,main.customer-success *){
  box-sizing:border-box;
  margin:0;
  padding:0
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:150px
}
main.customer-success{
  font-family:'Noto Sans JP',Meiryo,Arial,sans-serif;
  color:var(--dc-text);
  line-height:1.85;
  background:#fff;
  -webkit-font-smoothing:antialiased
}
:where(main.customer-success) a{
  color:var(--dc-blue-text);
  text-decoration:none
}
:where(main.customer-success) a:hover{
  text-decoration:none
}
:where(main.customer-success) img{
  max-width:100%;
  height:auto;
  display:block
}
:where(main.customer-success) ul{
  list-style:none
}
:where(main.customer-success) button{
  font:inherit
}
:where(main.customer-success) svg.icon{
  width:1.4em;
  height:1.4em;
  flex:none;
  vertical-align:middle;
  display:inline-block
}
.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 40px
}
main{
  padding-top:80px
}
.hero{
  position:relative;
  background:linear-gradient(110deg,#fff 12%,#f1faff 55%,#e8f2fe 100%);
  overflow:hidden;
  padding-bottom:16px
}
.hero:after{
  content:'';
  position:absolute;
  width:650px;
  height:650px;
  border:1px solid #378ee421;
  border-radius:50%;
  right:-150px;
  top:-90px;
  box-shadow:0 0 0 68px #378ee407,0 0 0 69px #378ee415;
  pointer-events:none
}
.hero__main{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:16px;
  align-items:center;
  position:relative;
  z-index:1;
  padding-top:24px;
  padding-bottom:20px
}
.hero__copy{
  position:relative;
  z-index:2
}
.hero__label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--dc-blue-text);
  font:700 13px Arial,sans-serif;
  letter-spacing:.15em
}
.hero__label:before{
  content:'';
  width:26px;
  height:2px;
  background:var(--dc-blue)
}
.hero__title{
  font-size:clamp(38px,3.35vw,46px);
  font-weight:700;
  line-height:1.53;
  letter-spacing:-.045em;
  color:#242a30;
  margin-top:16px
}
.hero__title .hero__emphasis{
  color:var(--dc-blue-text);
  font-size:1.1em;
  letter-spacing:-.04em
}
.hero__title .hero__ending{
  font-size:.8em;
  color:#242a30
}
.hero__text{
  font-size:15px;
  line-height:2.05;
  margin-top:23px;
  max-width:36em;
  color:#58616a
}
.hero__btns{
  display:flex;
  gap:12px;
  margin-top:28px;
  flex-wrap:wrap
}
.cs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:12px 23px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  transition:background .2s,transform .2s,box-shadow .2s
}
.cs-btn .icon{
  width:21px;
  height:21px
}
.btn--blue{
  background:var(--dc-blue);
  color:#fff;
  border:1px solid var(--dc-blue)
}
.btn--red{
  background:var(--dc-red);
  color:#fff;
  border:1px solid var(--dc-red)
}
.btn--white{
  background:#fff;
  color:var(--dc-blue-text);
  border:1px solid #9cc8f2
}
.cs-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 15px #378ee426
}
.btn--blue:hover{
  background:#227ed7
}
.btn--red:hover{
  background:#e9003d
}
.local-nav{
  position:sticky;
  top:80px;
  z-index:120;
  background:#fff;
  border-bottom:1px solid var(--dc-line)
}
.local-nav__inner{
  display:flex;
  max-width:1200px;
  margin:auto;
  justify-content:center;
  overflow:auto;
  scrollbar-width:none
}
.local-nav__mobile{
  display:none
}
.local-nav a{
  flex:1;
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:18px 24px;
  color:#565f68;
  font-size:14px;
  font-weight:500;
  border-bottom:3px solid transparent
}
.local-nav a .icon{
  width:15px;
  height:15px;
  color:#92a1af
}
.local-nav a:hover,.local-nav a.is-active{
  color:var(--dc-blue-text);
  border-bottom-color:var(--dc-blue)
}
.section{
  padding:96px 0;
  scroll-margin-top:140px
}
.section--pale{
  background:var(--dc-blue-bg)
}
.section__head{
  text-align:center;
  margin:0 auto 48px
}
.eng_title{
  font:700 13px Arial,sans-serif;
  letter-spacing:.17em;
  color:var(--dc-blue-text);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:12px
}
.eng_title:before{
  content:'';
  width:22px;
  height:2px;
  background:#70b3f4
}
.section__title{
  font-size:34px;
  line-height:1.6;
  font-weight:700;
  color:#292f34;
  margin-top:13px;
  letter-spacing:-.03em
}
.section__title .accent{
  color:var(--dc-blue-text)
}
.section__lead{
  font-size:16px;
  line-height:1.95;
  color:#656d74;
  margin:16px auto 0;
  max-width:900px
}
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.compare__col{
  display:flex;
  flex-direction:column;
  border:1px solid #dbe6f0;
  border-radius:12px;
  background:#fff;
  overflow:hidden
}
.compare__head{
  padding:30px 32px 26px;
  display:flex;
  gap:22px;
  align-items:center;
  background:#f3f8ff;
  border-top:4px solid var(--dc-blue)
}
.compare__head>.icon{
  width:54px;
  height:54px;
  color:var(--dc-blue);
  stroke-width:1.4
}
.compare__head h3{
  font-size:25px;
  font-weight:700;
  color:#303a44;
  line-height:1.4
}
.compare__head small{
  display:block;
  font:400 12px Arial,sans-serif;
  letter-spacing:.06em;
  margin-top:8px;
  color:#788795
}
.compare--cs .compare__head{
  background:#f0f7ff;
  border-top-color:var(--brand)
}
.compare--cs .compare__head>.icon{
  color:var(--brand)
}
.compare__list{
  padding:12px 30px;
  flex:1
}
.compare__list li{
  display:flex;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid #e6edf4;
  font-size:15px;
  color:#454f58;
  line-height:1.75
}
.compare__list li:last-child{
  border-bottom:0
}
.compare__list .icon{
  width:20px;
  height:20px;
  color:var(--dc-blue);
  margin-top:4px
}
.compare__list small{
  display:block;
  font-size:13px;
  color:#7b8289;
  margin-top:3px
}
.compare__foot{
  margin:12px 30px 28px;
  padding:20px 0 0;
  border-top:1px solid #dce8f5;
  font-size:14px;
  color:#747b82
}
.compare__foot strong{
  display:block;
  font-size:18px;
  color:var(--dc-blue-text);
  line-height:1.75;
  margin-top:5px
}
.decision{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:25px
}
.decision a{
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--dc-blue-text)
}
.decision a:hover{
  text-decoration:underline
}
.decision .icon{
  width:19px;
  height:19px
}
.cx-note{
  margin:32px auto 0;
  padding:20px 24px;
  border-left:3px solid #9dc6ee;
  background:#f6f9fc;
  color:#69737d;
  font-size:13px;
  line-height:1.9
}
.cx-note strong{
  color:#495561
}
.cx-note a{
  font-weight:500
}
#support{
  background:linear-gradient(180deg,#f1faff,#f5f9fe)
}
#support .section__head{
  margin-bottom:36px
}
.support{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  counter-reset:service
}
.support__card{
  counter-increment:service;
  position:relative;
  background:#fff;
  border:1px solid #e0eaf5;
  border-radius:12px;
  padding:32px 32px 30px;
  overflow:hidden
}
.support__card:before{
  content:'0' counter(service);
  position:absolute;
  right:26px;
  top:18px;
  font:400 66px Arial;
  color:#e8f2fd;
  line-height:1
}
.support__head{
  display:flex;
  align-items:center;
  gap:20px;
  position:relative;
  padding-right:38px
}
.support__head .num{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dc-blue);
  width:66px;
  height:66px;
  flex:none
}
.support__head .icon{
  width:56px;
  height:56px;
  stroke-width:1.3
}
.support__head h3{
  font-size:23px;
  font-weight:700;
  color:#343d46;
  line-height:1.6
}
.support__body{
  padding-top:22px
}
.support__outcome{
  display:inline-block;
  color:var(--dc-blue-text);
  font:700 11px Arial;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px
}
.support__body p{
  font-size:15px;
  color:#6c747c;
  line-height:1.95;
  margin-bottom:22px;
  min-height:3.9em
}
.support__body ul{
  padding-top:18px;
  border-top:1px solid #e4edf6
}
.support__body li{
  position:relative;
  padding-left:29px;
  font-size:15px;
  line-height:1.9;
  margin:10px 0;
  color:#454f59
}
.support__body li:before{
  content:'✓';
  position:absolute;
  left:0;
  top:.48em;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#2e6efe;
  color:#fff;
  font:700 12px/1 Arial,sans-serif;
  box-shadow:0 2px 5px #165bca24
}
.support__body li small{
  display:block;
  color:#858b92;
  font-size:12px
}
.support__tag{
  font-size:13px;
  display:inline-block;
  margin-top:6px
}
.support__tag:after{
  content:' →'
}
.community{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center
}
.community__text h3{
  font-size:27px;
  line-height:1.8;
  color:#323c45;
  font-weight:700
}
.community__text h3 span{
  color:var(--dc-blue-text)
}
.community__text p{
  font-size:15px;
  line-height:2;
  margin-top:20px;
  color:#67717a
}
.community__points{
  display:grid;
  gap:13px;
  margin-top:24px
}
.community__points li{
  display:flex;
  gap:12px;
  font-size:15px;
  color:#4b5762
}
.community__points .icon{
  width:20px;
  height:20px;
  color:var(--dc-blue);
  margin-top:4px
}
.community__text .cs-btn{
  margin-top:28px
}
.community__visual{
  background:#f1f8ff;
  border:1px solid #deebf9;
  border-radius:18px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative
}
.community__example{
  font-size:11px;
  color:#7c91a3;
  text-align:right
}
#contact{
  background:#edf6ff;
  position:relative;
  overflow:hidden
}
#contact:before{
  content:'';
  position:absolute;
  width:800px;
  height:800px;
  border:1px solid #378ee416;
  border-radius:50%;
  left:calc(50% - 400px);
  top:-310px;
  box-shadow:0 0 0 65px #378ee406,0 0 0 66px #378ee40c;
  pointer-events:none
}
#contact .container{
  position:relative;
  background:transparent
}
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  max-width:1060px;
  margin:40px auto 0
}
.contact__item{
  display:block;
  background:#fff;
  border:1px solid #d7e6f5;
  border-radius:12px;
  padding:30px;
  text-align:left;
  position:relative;
  transition:box-shadow .2s,transform .2s
}
.contact__item:hover{
  box-shadow:0 8px 30px #378ee420;
  transform:translateY(-3px)
}
.contact__purpose{
  display:block;
  color:var(--dc-blue-text);
  font-size:13px;
  font-weight:500;
  margin-bottom:15px
}
.contact__item>.icon{
  width:46px;
  height:46px;
  position:absolute;
  right:30px;
  top:25px;
  color:var(--dc-blue);
  stroke-width:1.4
}
.contact__item h4{
  font-size:15px;
  color:#626e79;
  font-weight:500
}
.contact__item p{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:22px;
  font-weight:700;
  color:#353f49;
  margin-top:12px;
  line-height:1.6
}
.contact__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:38px;
  height:38px;
  background:var(--dc-blue);
  border-radius:50%;
  color:#fff;
  font-size:24px;
  font-family:Arial
}
.contact__item:first-child .contact__arrow{
  background:var(--dc-red)
}
.contact__item small{
  display:block;
  color:#7b858e;
  font-size:12px;
  margin-top:16px;
  line-height:1.85
}
#faq .container{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:60px
}
#faq .section__head{
  text-align:left;
  position:sticky;
  top:174px;
  align-self:start
}
#faq .section__title{
  font-size:29px
}
#faq .section__lead{
  font-size:14px
}
.faq{
  width:100%;
  max-width:900px
}
.faq__group{
  margin-bottom:40px
}
.faq__group:last-child{
  margin-bottom:0
}
.faq__group-title{
  font-size:18px;
  font-weight:700;
  color:#45515d;
  padding-bottom:15px;
  border-bottom:2px solid #9bc9f5;
  margin-bottom:0
}
.faq__item{
  border-bottom:1px solid #dde6ef
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:22px 0;
  font-size:15px;
  font-weight:500;
  color:#48535d;
  line-height:1.85
}
.faq__item summary::-webkit-details-marker{
  display:none
}
.faq__q{
  font:400 22px Arial;
  color:var(--dc-blue);
  width:26px;
  flex:none;
  padding-top:3px
}
.faq__toggle{
  width:24px;
  height:24px;
  margin-left:auto;
  flex:none;
  position:relative;
  margin-top:3px
}
.faq__toggle:before,.faq__toggle:after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.5px;
  background:var(--dc-blue);
  transform:translate(-50%,-50%)
}
.faq__toggle:after{
  transform:translate(-50%,-50%) rotate(90deg)
}
.faq__item[open] .faq__toggle:after{
  display:none
}
.faq__item[open] summary{
  color:var(--dc-blue-text)
}
.faq__a{
  display:flex;
  gap:12px;
  padding:0 0 24px;
  font-size:14px;
  color:#69737c;
  line-height:1.95
}
.faq__a-mark{
  font:400 21px Arial;
  color:#8cb4d9;
  width:26px;
  flex:none;
  padding-top:5px
}
.faq__a-body{
  min-width:0;
  flex:1
}
.faq__a ol{
  padding-left:1.4em;
  margin:10px 0
}
.faq__a ol li{
  margin:6px 0
}
.faq__notes{
  background:#f5f9fd;
  padding:14px 16px;
  margin-top:14px;
  font-size:12px;
  line-height:1.85
}
.faq__notes li{
  padding-left:1.2em;
  position:relative
}
.faq__notes li:before{
  content:'※';
  position:absolute;
  left:0
}
.faq__tel{
  font-size:19px;
  font-weight:700;
  color:#495968
}
main.customer-success :focus-visible{
  outline:3px solid #378ee4;
  outline-offset:4px
}

@media(max-width:1050px){
  .container{
    padding:0 28px
  }
  .hero__main{
    grid-template-columns:1fr 1fr;
    gap:0
  }
  .hero__title{
    font-size:36px
  }
  .hero__text{
    font-size:14px
  }
  .hero__btns{
    flex-direction:column;
    align-items:flex-start
  }
  .hero__btns .cs-btn{
    min-width:240px
  }
  .compare__head{
    padding:25px 22px;
    gap:16px
  }
  .compare__head h3{
    font-size:21px
  }
  .compare__head>.icon{
    width:44px;
    height:44px
  }
  .compare__list{
    padding:10px 22px
  }
  .compare__foot{
    margin:10px 22px 24px
  }
  .support__card{
    padding:26px
  }
  .support__head{
    gap:14px
  }
  .support__head h3{
    font-size:20px
  }
  .support__head .num{
    width:48px;
    height:56px
  }
  .support__head .icon{
    width:46px;
    height:46px
  }
  .community{
    gap:36px
  }
  .community__text h3{
    font-size:24px
  }
  #faq .container{
    grid-template-columns:220px minmax(0,1fr);
    gap:36px
  }
  .contact__item p{
    font-size:19px
  }
  .local-nav a{
    padding:18px 16px;
    gap:12px
  }
}
@media(max-width:760px){
  .hero__main{
    grid-template-columns:1fr;
    padding-top:24px;
    padding-bottom:20px
  }
  .hero__title{
    font-size:42px
  }
  .hero__text{
    font-size:15px;
    max-width:100%
  }
  .hero__btns{
    flex-direction:row
  }
  .hero__btns .cs-btn{
    min-width:0
  }
  .local-nav__inner{
    display:none
  }
  .local-nav__mobile{
    display:block;
    position:relative;
    padding:10px 20px
  }
  .local-nav__mobile label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
  }
  .local-nav__select{
    display:block;
    width:100%;
    min-height:48px;
    padding:10px 44px 10px 16px;
    border:1px solid var(--dc-line);
    border-radius:8px;
    appearance:none;
    background:#fff;
    color:var(--dc-blue-text);
    font:700 15px 'Noto Sans JP',Meiryo,Arial,sans-serif;
    cursor:pointer
  }
  .local-nav__select:focus-visible{
    outline:3px solid var(--dc-blue);
    outline-offset:2px
  }
  .local-nav__mobile:after{
    content:'';
    position:absolute;
    top:50%;
    right:38px;
    width:9px;
    height:9px;
    border-right:2px solid var(--dc-blue-text);
    border-bottom:2px solid var(--dc-blue-text);
    transform:translateY(-75%) rotate(45deg);
    pointer-events:none
  }
  .section{
    padding:64px 0
  }
  .section__head{
    margin-bottom:32px
  }
  .section__title{
    font-size:28px
  }
  .section__lead{
    font-size:15px
  }
  .compare{
    grid-template-columns:1fr;
    gap:24px
  }
  .compare__head h3{
    font-size:24px
  }
  .compare__head>.icon{
    width:48px;
    height:48px
  }
  .support{
    grid-template-columns:1fr 1fr;
    gap:18px
  }
  .support__card{
    padding:24px 20px
  }
  .support__head{
    display:block;
    padding-right:0
  }
  .support__head h3{
    font-size:19px;
    margin-top:16px
  }
  .support__head .num{
    width:50px;
    height:50px
  }
  .support__card:before{
    font-size:54px;
    right:18px
  }
  .support__body p{
    min-height:0;
    font-size:14px
  }
  .support__body li{
    font-size:14px
  }
  .community{
    grid-template-columns:1fr;
    gap:30px
  }
  .community__visual{
    max-width:580px
  }
  .contact__grid{
    grid-template-columns:1fr
  }
  .contact__item p{
    font-size:22px
  }
  #faq .container{
    display:block
  }
  #faq .section__head{
    position:static;
    text-align:center
  }
  #faq .section__lead{
    max-width:500px
  }
}
@media(max-width:480px){
  main{
    padding-top:68px
  }
  .container{
    padding:0 20px
  }
  .hero__title{
    font-size:clamp(30px,8.2vw,39px);
    line-height:1.55;
    margin-top:16px;
    letter-spacing:-.04em
  }
  .hero__ending{
    display:block;
    font-size:.68em!important;
    margin-top:5px;
    letter-spacing:0
  }
  .hero__label{
    font-size:11px
  }
  .hero__text{
    font-size:14px;
    margin-top:20px
  }
  .hero__btns{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:24px
  }
  .cs-btn{
    font-size:14px;
    min-height:48px;
    padding:12px 18px
  }
  .local-nav{
    top:68px;
    border-bottom:0ch solid var(--dc-line)
  }
  .section{
    padding:52px 0;
    scroll-margin-top:124px
  }
  .section__title{
    font-size:25px
  }
  .section__lead{
    font-size:14px
  }
  .eng_title{
    font-size:11px
  }
  .compare__head{
    padding:23px 22px
  }
  .compare__head h3{
    font-size:21px
  }
  .compare__list li{
    font-size:14px
  }
  .compare__foot strong{
    font-size:17px
  }
  .decision{
    justify-content:flex-start;
    gap:14px
  }
  .decision a{
    font-size:12px
  }
  .cx-note{
    font-size:12px;
    padding:16px
  }
  .support{
    grid-template-columns:1fr;
    gap:20px
  }
  .support__head{
    display:flex;
    gap:18px;
    padding-right:36px
  }
  .support__head h3{
    font-size:21px;
    margin-top:0
  }
  .support__head .num{
    width:52px;
    height:58px
  }
  .support__head .icon{
    width:50px;
    height:50px
  }
  .support__card{
    padding:26px 24px
  }
  .support__card:before{
    font-size:58px;
    right:20px;
    top:22px
  }
  .support__body p{
    font-size:15px
  }
  .support__body li{
    font-size:14px
  }
  .community__text h3{
    font-size:23px
  }
  .community__text p,.community__points li{
    font-size: 14px;
    line-height: 1.7;
  }
  .community__visual{
    padding:22px 18px
  }
  .community__text .cs-btn{
    width:100%
  }
  .contact__item{
    padding:26px 22px
  }
  .contact__item>.icon{
    right:22px;
    top:25px;
    width:36px;
    height:36px
  }
  .contact__item p{
    font-size:19px
  }
  .contact__item small{
    font-size:12px
  }
  .contact__purpose{
    font-size:12px
  }
  .contact__arrow{
    width:32px;
    height:32px
  }
  .faq__group-title{
    font-size:16px
  }
  .faq__item summary{
    font-size:14px
  }
  .faq__a{
    font-size:13px
  }
  .faq__notes{
    font-size:12px
  }
  html{
    scroll-padding-top:124px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .cs-btn:hover,.contact__item:hover{
    transform:none
  }
}
.community__visual.chat-demo{
  display:block;
  padding:0;
  gap:0;
  border:1px solid #dbe8f5;
  border-radius:16px;
  background:#f5f9fe;
  overflow:hidden;
  box-shadow:0 12px 32px #378ee410
}
.chat-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:21px 22px;
  background:#fff;
  border-bottom:1px solid #e0eaf5
}
.chat-header strong{
  display:block;
  font:700 16px Arial,sans-serif;
  color:#3c4955
}
.chat-header div>span{
  font-size:11px;
  color:#8b949e;
  display:block;
  margin-top:5px
}
.chat-room{
  padding:18px 22px 14px
}
.chat-topic{
  font-size:12px;
  color:#7192b0;
  letter-spacing:.02em;
  border-bottom:1px solid #e2ecf6;
  padding-bottom:13px
}
.chat-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:18px
}
.chat-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:#dfedfd;
  color:#4d8dcd;
  font:700 12px Arial;
  flex:none;
  margin-top:2px
}
.chat-content{
  max-width:85%;
  min-width:0
}
.chat-name{
  font-size:10px;
  color:#8a99a7;
  margin:0 0 5px 2px
}
.chat-slot{
  display:grid;
  align-items:start;
  justify-items:start
}
.chat-message,.chat-typing{
  grid-area:1/1
}
.chat-message{
  padding:12px 15px;
  background:#fff;
  border:1px solid #e0eaf5;
  border-radius:0 12px 12px 12px;
  color:#536372;
  font-size:13px;
  line-height:1.85
}
.chat-time{
  font:10px Arial;
  color:#a0afbc;
  margin:5px 2px 0
}
.chat-row--reply{
  flex-direction:row-reverse
}
.chat-row--reply .chat-avatar{
  background:#378ee4;
  color:#fff
}
.chat-row--reply .chat-name,.chat-row--reply .chat-time{
  text-align:right
}
.chat-row--reply .chat-slot{
  justify-items:end
}
.chat-row--reply .chat-message{
  background:#378ee4;
  color:#fff;
  border-color:#378ee4;
  border-radius:12px 0 12px 12px
}
.chat-typing{
  display:none;
  gap:4px;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  min-height:43px;
  border:1px solid #e0eaf5;
  background:#fff;
  border-radius:0 12px 12px 12px
}
.chat-typing span{
  width:5px;
  height:5px;
  background:#94b6d4;
  border-radius:50%
}
.chat-row--reply .chat-typing{
  border-radius:12px 0 12px 12px
}
.chat-demo .community__example{
  padding:0 22px 16px;
  font-size:10px;
  text-align:right;
  color:#9aa9b7;
  margin:0
}
.chat-demo.is-animated .chat-typing{
  display:flex;
  opacity:0
}
.chat-demo.is-animated .chat-row{
  animation:chat-row-one 20s linear infinite both
}
.chat-demo.is-animated .chat-row--2{
  animation-name:chat-row-two
}
.chat-demo.is-animated .chat-row--3{
  animation-name:chat-row-three
}
.chat-demo.is-animated .chat-message,.chat-demo.is-animated .chat-time{
  animation:chat-message-one 20s linear infinite both
}
.chat-demo.is-animated .chat-row--2 .chat-message,.chat-demo.is-animated .chat-row--2 .chat-time{
  animation-name:chat-message-two
}
.chat-demo.is-animated .chat-row--3 .chat-message,.chat-demo.is-animated .chat-row--3 .chat-time{
  animation-name:chat-message-three
}
.chat-demo.is-animated .chat-typing{
  animation:chat-typing-one 20s linear infinite both
}
.chat-demo.is-animated .chat-row--2 .chat-typing{
  animation-name:chat-typing-two
}
.chat-demo.is-animated .chat-row--3 .chat-typing{
  animation-name:chat-typing-three
}
.chat-demo.is-animated .chat-typing span{
  animation:chat-dot 1.2s ease-in-out infinite
}
.chat-demo.is-animated .chat-typing span:nth-child(2){
  animation-delay:.15s
}
.chat-demo.is-animated .chat-typing span:nth-child(3){
  animation-delay:.3s
}
.chat-demo.is-animated:not(.is-playing) *{
  animation-play-state:paused!important
}
@keyframes chat-dot{
  0%,60%,100%{
    transform:translateY(0);
    opacity:.45
  }
  30%{
    transform:translateY(-4px);
    opacity:1
  }
}
@media(max-width:480px){
  .chat-header{
    padding:18px 16px;
    gap:10px
  }
  .chat-header strong{
    font-size:14px
  }
  .chat-header div>span{
    font-size:10px
  }
  .chat-room{
    padding:16px 14px 10px
  }
  .chat-content{
    max-width:84%
  }
  .chat-message{
    padding:11px 12px;
    font-size:12px
  }
  .chat-row{
    gap:7px
  }
  .chat-avatar{
    width:27px;
    height:27px
  }
}
@media(prefers-reduced-motion:reduce){
  .chat-demo .chat-row,.chat-demo .chat-message,.chat-demo .chat-time{
    animation:none!important;
    opacity:1!important;
    transform:none!important
  }
  .chat-demo .chat-typing{
    display:none!important
  }
}
.community{
  grid-template-columns:.95fr 1.05fr;
  gap:48px
}
.community__visual.chat-demo{
  border:1px solid #a9cef4;
  box-shadow:0 18px 42px #2378c824;
  border-radius:16px;
  background:#eaf3fd
}
.chat-header{
  background:#2785df;
  border-bottom:0;
  padding:22px
}
.chat-header strong{
  color:white;
  font-size:18px
}
.chat-header div>span{
  color:#eaf5ff;
  font-size:12px
}
.chat-room{
  padding-top:16px
}
.chat-topic{
  color:#32699c;
  font-size:13px;
  font-weight:500;
  border-color:#ccdfef
}
.chat-row{
  margin-bottom:20px
}
.chat-name{
  color:#5e768c;
  font-size:12px
}
.chat-time{
  color:#6d8497;
  font-size:11px
}
.chat-message{
  color:#354a5c;
  font-size:14px;
  border-color:#cadff0;
  box-shadow:0 3px 8px #397fc209
}
.chat-row--reply .chat-message{
  background:#247fd5;
  border-color:#247fd5;
  color:#fff
}
.chat-avatar{
  background:#d3e7fc;
  color:#246fbd
}
.chat-row--reply .chat-avatar{
  background:#247fd5
}
.chat-demo .community__example{
  color:#70869b
}
.chat-demo.is-animated .chat-row,.chat-demo.is-animated .chat-message,.chat-demo.is-animated .chat-time,.chat-demo.is-animated .chat-typing{
  animation-duration:9s
}
@keyframes chat-row-one{
  0%{
    opacity:0;
    transform:translateY(5px)
  }
  2%,100%{
    opacity:1;
    transform:none
  }
}
@keyframes chat-row-two{
  0%,15%{
    opacity:0;
    transform:translateY(5px)
  }
  17%,100%{
    opacity:1;
    transform:none
  }
}
@keyframes chat-row-three{
  0%,32%{
    opacity:0;
    transform:translateY(5px)
  }
  34%,100%{
    opacity:1;
    transform:none
  }
}
@keyframes chat-message-one{
  0%,5%{
    opacity:0;
    transform:translateY(3px)
  }
  7%,100%{
    opacity:1;
    transform:none
  }
}
@keyframes chat-message-two{
  0%,22%{
    opacity:0;
    transform:translateY(3px)
  }
  24%,100%{
    opacity:1;
    transform:none
  }
}
@keyframes chat-message-three{
  0%,39%{
    opacity:0;
    transform:translateY(3px)
  }
  41%,100%{
    opacity:1;
    transform:none
  }
}
@keyframes chat-typing-one{
  0%,4%{
    opacity:1
  }
  5%,100%{
    opacity:0
  }
}
@keyframes chat-typing-two{
  0%,15%{
    opacity:0
  }
  16%,21%{
    opacity:1
  }
  22%,100%{
    opacity:0
  }
}
@keyframes chat-typing-three{
  0%,32%{
    opacity:0
  }
  33%,38%{
    opacity:1
  }
  39%,100%{
    opacity:0
  }
}
.chat-demo.is-animated:not(.is-playing) .chat-row,.chat-demo.is-animated:not(.is-playing) .chat-message,.chat-demo.is-animated:not(.is-playing) .chat-time{
  opacity:1!important;
  transform:none!important
}
.chat-demo.is-animated:not(.is-playing) .chat-typing{
  visibility:hidden
}
#contact{
  isolation:isolate;
  background:#e9f2f9
}
#contact:before{
  inset:-12px;
  left:-12px;
  top:-12px;
  width:auto;
  height:auto;
  box-shadow:none;
  border:0;
  border-radius:0;
  background-image:var(--support-office);
  background-size:cover;
  background-position:center 38%;
  filter:blur(3px) brightness(1.08) saturate(.78);
  z-index:-2
}
#contact:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(245,250,255,.54),rgba(231,243,255,.65));
  z-index:-1;
  pointer-events:none
}
#contact .section__title{
  color:#25333f;
  text-shadow:0 1px 6px #ffffffb0
}
#contact .section__lead{
  color:#435564;
  font-weight:500;
  max-width:900px
}
#contact .eng_title{
  color:#1474cd
}
.contact__item{
  background:#fff;
  border:1px solid #bdd5ec;
  box-shadow:0 10px 26px #28597a17;
  padding:34px;
  border-top:4px solid #378ee4
}
.contact__item:first-child{
  border-top-color:#ff114a
}
.contact__item p{
  color:#273b4c;
  font-size:23px
}
.contact__item small{
  color:#607485;
  font-size:13px
}
.contact__purpose{
  font-weight:700
}
.contact__item:hover{
  box-shadow:0 15px 32px #2367a62e
}
.contact__item:first-child .contact__purpose{
  color:#df1647
}
.faq__group{
  margin-bottom:62px
}
.faq__group-title{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:18px;
  line-height:1.6;
  color:#0871c6;
  background:#edf6ff;
  border:1px solid #c8e2fa;
  border-left:4px solid #378ee4;
  border-radius:0 8px 8px 0;
  padding:20px 22px;
  margin-bottom:20px
}
.faq__group-title .icon{
  width:28px;
  height:28px;
  flex:none;
  color:#2786db
}
.faq__item summary{
  padding:25px 4px
}
.faq__a{
  padding-bottom:28px
}
.faq__group--cs .faq__group-title{
  background:#e9f3ff;
  color:#1968ba
}
@media(max-width:1050px){
  .community{
    gap:30px
  }
  .chat-header strong{
    font-size:16px
  }
  .contact__item p{
    font-size:20px
  }
}
@media(max-width:760px){
  .community{
    grid-template-columns:1fr
  }
  .community__visual.chat-demo{
    max-width:none;
    width:100%
  }
  .faq__group{
    margin-bottom:50px
  }
}
@media(max-width:480px){
  .chat-header{
    padding:20px 16px
  }
  .chat-header strong{
    font-size:15px
  }
  .chat-header div>span{
    font-size:11px
  }
  .chat-message{
    font-size:13px
  }
  .chat-name{
    font-size:11px
  }
  .contact__item{
    padding:28px 22px
  }
  .contact__item p{
    font-size:19px
  }
  .contact__item small{
    font-size:12px
  }
  #contact:before{
    background-position:42% center
  }
  .faq__group-title{
    padding:18px 15px;
    font-size:16px;
    gap:10px;
    margin-bottom:18px
  }
  .faq__group-title .icon{
    width:24px;
    height:24px
  }
  .faq__item summary{
    padding:23px 0
  }
  .faq__group{
    margin-bottom:46px
  }
}
@media(prefers-reduced-motion:reduce){
  .chat-demo.is-animated .chat-row,.chat-demo.is-animated .chat-message,.chat-demo.is-animated .chat-time{
    animation:none!important;
    opacity:1!important;
    transform:none!important
  }
}
#contact{
  --support-office:url("/images/support/customer_success_office.webp")
}
.compare{
  gap:28px
}
.compare__col{
  border:1px solid #dfe5eb;
  border-radius:12px;
  box-shadow:0 12px 30px #2434480b;
  overflow:hidden
}
.compare__head{
  background:#0878c7!important;
  border:0!important;
  padding:27px 31px;
  color:#fff;
  gap:17px
}
.compare--cs .compare__head{
  background:#ff114a!important
}
.compare__head>.icon{
  color:#fff!important;
  width:58px;
  height:58px;
  padding:12px;
  background:#ffffff2b;
  border-radius:50%;
  stroke-width:2.3
}
.compare__head h3{
  color:#fff;
  font-size:24px
}
.compare__head small{
  color:#fff;
  opacity:.95;
  font-size:12px;
  font-weight:500;
  margin-top:4px
}
.compare__list{
  padding:12px 30px
}
.compare__list li{
  font-weight:700;
  color:#252b31;
  font-size:16px;
  padding:18px 0;
  border-color:#dfe5eb
}
.compare__list .icon{
  color:#378ee4;
  width:20px;
  height:20px;
  stroke-width:3;
  fill:#378ee4;
  stroke:#fff;
  border-radius:50%
}
.compare--cs .compare__list .icon{
  fill:#ff114a
}
.compare__list small{
  font-weight:400;
  color:#666;
  font-size:13px
}
.compare__foot{
  margin:0;
  padding:25px 30px 28px;
  border:0;
  background:#edf5ff!important;
  color:#526371;
  font-size:15px
}
.compare--cs .compare__foot{
  background:#fff0f4!important
}
.compare__foot strong{
  color:#096fc2!important;
  font-size:19px
}
.compare--cs .compare__foot strong{
  color:#f20c44!important
}
.decision a{
  padding:11px 17px;
  border:1px solid #d5e0ec;
  border-radius:999px;
  background:#fff;
  color:#0878c7;
  font-size:14px;
  font-weight:700
}
.decision .decision--cs{
  color:#ec1348
}
.decision a:hover{
  background:#f5faff;
  border-color:#81b9ef
}
.community{
  align-items:start;
  gap:48px
}
.community__text{
  padding-top:2px
}
.community__text h3{
  margin:0
}
.community__text p{
  margin-top:21px
}
@media(max-width:1050px){
  .compare__head{
    padding:24px 21px
  }
  .compare__head h3{
    font-size:21px
  }
  .compare__list{
    padding:10px 22px
  }
  .compare__foot{
    padding:22px
  }
  .community{
    gap:30px
  }
}
@media(max-width:760px){
  .community{
    grid-template-columns:1fr
  }
  .compare__head h3{
    font-size:23px
  }
}
@media(max-width:480px){
  .compare__head{
    padding:21px 20px
  }
  .compare__head h3{
    font-size:20px
  }
  .compare__head>.icon{
    width:52px;
    height:52px
  }
  .compare__list li{
    font-size:14px
  }
  .compare__foot{
    padding:22px 20px
  }
  .decision a{
    font-size:12px;
    padding:10px 13px
  }
  .community__text{
    padding-top:0
  }
}
.customer-success{
  --dc-blue:#1265e9;
  --dc-blue-deep:#084eb6;
  --dc-blue-text:#2862df;
  --dc-blue-pale:#edf4ff;
  --dc-blue-bg:#f7faff;
  --dc-text:#0a1830;
  --dc-text-sub:#738096;
  --dc-line:#c5d6f3;
  --dc-footer:#09194c
}
.hero{
  background:linear-gradient(115deg,#fff 10%,#f8fbff 65%,#edf4ff)
}
.hero__title,.section__title,.support__head h3,.community__text h3{
  color:#07152d
}
.eng_title{
  border:1px solid #87adf6;
  border-radius:999px;
  padding:5px 18px;
  letter-spacing:.07em;
  background:#fff;
  color:#1265e9
}
.eng_title:before{
  display:none
}
#support{
  background:linear-gradient(180deg,#f8fbff,#eff5ff)
}
.support__card,.compare__col{
  border-color:#a8c3f6;
  box-shadow:0 4px 12px #09244909
}
.support__head .num{
  border-radius:50%;
  background:#edf4ff;
  width:74px;
  height:74px
}
.support__head .icon{
  width:46px;
  height:46px;
  stroke-width:1.7
}
.support__outcome{
  color:#2862df
}
.support__card:before{
  color:#ecf3fd
}
.compare__head{
  background:#1265e9!important
}
.compare--cs .compare__head{
  background:#084eb6!important
}
.compare__foot,.compare--cs .compare__foot{
  background:#edf4ff!important
}
.compare__foot strong,.compare--cs .compare__foot strong{
  color:#165cce!important
}
.compare__list .icon,.compare--cs .compare__list .icon{
  fill:#1265e9;
  color:#1265e9
}
.decision a,.decision .decision--cs{
  color:#165cce;
  border-color:#b8cef5
}
.contact__item,.contact__item:first-child{
  border-color:#b4cbf4;
  border-top-color:#1265e9
}
.contact__item:first-child .contact__purpose{
  color:#2862df
}
.contact__item:first-child .contact__arrow{
  background:#084eb6
}
.faq__group-title,.faq__group--cs .faq__group-title{
  background:#edf4ff;
  border-color:#adc8fa;
  border-left-color:#1265e9;
  color:#165cce
}
.faq__group-title .icon{
  color:#1265e9
}
.community{
  gap:64px;
  align-items:start
}
.community__visual.chat-demo{
  margin-top:0;
  overflow:visible;
  border:2px solid #648aff;
  background:#fff;
  box-shadow:0 16px 40px #10378d14;
  border-radius:22px
}
.community-ai-badge{
  position:absolute;
  left:-30px;
  top:-27px;
  z-index:3;
  width:92px;
  height:92px;
  border-radius:50%;
  background:linear-gradient(150deg,#429cf5 0%,#1977e7 52%,#0756bf 100%);
  box-shadow:0 6px 12px #0b4d9b30;
  display:flex;
  align-items:center;
  justify-content:center
}
.community-ai-badge svg{
  width:76%;
  height:76%
}
.chat-header{
  padding:25px 22px 24px 78px;
  border-radius:20px 20px 0 0;
  background:#fff;
  border-bottom:1px solid #e1e9f8;
  gap:10px
}
.chat-header strong{
  color:#102550;
  font-size:18px
}
.chat-header div>span{
  color:#70809a
}
.chat-room{
  background:#f9fbff;
  padding-top:20px
}
.chat-topic{
  color:#2862df;
  border-color:#dce7fa
}
.chat-message{
  color:#36465e;
  border-color:#dce5f6;
  box-shadow:none
}
.chat-row--reply .chat-message{
  background:#1265e9;
  border-color:#1265e9
}
.chat-avatar{
  background:#e5eeff;
  color:#2862df
}
.chat-row--reply .chat-avatar{
  background:#1265e9
}
@media(max-width:1050px){
  .community{
    gap:42px
  }
  .community-ai-badge{
    width:76px;
    height:76px;
    left:-20px;
    top:-22px
  }
  .chat-header{
    padding-left:65px
  }
  .chat-header strong{
    font-size:16px
  }
}
@media(max-width:760px){
  .community{
    gap:50px
  }
  .community__visual.chat-demo{
    width:calc(100% - 12px);
    margin-left:12px
  }
  .community-ai-badge{
    left:-14px
  }
  .chat-header{
    padding-left:76px
  }
}
@media(max-width:480px){
  .chat-header{
    padding:25px 12px 22px 65px
  }
  .chat-header strong{
    font-size:14px
  }
  .chat-header div>span{
    font-size:10px
  }
  .community-ai-badge{
    width:70px;
    height:70px;
    top:-20px
  }
  .support__head .num{
    width:62px;
    height:62px
  }
}
.decision{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1030px;
  margin:30px auto 0;
  gap:18px
}
.decision a,.decision .decision--cs{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:70px;
  padding:15px 22px;
  border-radius:12px;
  border:1px solid #125dc6;
  background:#0b63ca;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  box-shadow:0 7px 18px #0c5ec32a;
  transition:transform .2s,box-shadow .2s,background .2s;
  text-decoration:none;
  cursor:pointer
}
.decision .decision--cs{
  background:#2e6efe;
  border-color:#2e6efe;
  box-shadow:0 7px 18px #2e6efe2a;
  color:#fff
}
.decision a .icon{
  width:25px;
  height:25px;
  flex:none;
  stroke-width:2
}
.decision a:after{
  content:'›';
  display:flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  margin-left:auto;
  border-radius:50%;
  background:#ffffff2e;
  color:#fff;
  font:700 24px Arial;
  flex:none
}
.decision a:hover,.decision .decision--cs:hover{
  transform:translateY(-3px);
  background:#084ca8;
  box-shadow:0 12px 24px #0c5ec33d;
  color:#fff;
  text-decoration:none
}
.decision .decision--cs:hover{
  background:#1554ce
}
.decision a:focus-visible{
  outline:3px solid #95c5ff;
  outline-offset:4px
}
.community-ai-badge svg{
  width:72%;
  height:72%;
  display:block;
  overflow:visible
}
@media(max-width:1050px){
  .decision a,.decision .decision--cs{
    font-size:14px;
    padding:14px 16px
  }
}
@media(max-width:760px){
  .decision{
    grid-template-columns:1fr;
    gap:12px
  }
  .decision a,.decision .decision--cs{
    min-height:62px
  }
}
@media(max-width:480px){
  .decision a,.decision .decision--cs{
    font-size:13px;
    gap:9px;
    padding:12px 13px
  }
  .decision a .icon{
    width:22px;
    height:22px
  }
  .decision a:after{
    width:24px;
    height:24px;
    font-size:19px
  }
}
.hero__title{
  font-size:clamp(40px,3.55vw,50px);
  line-height:1.48
}
.section__title{
  font-size:38px
}
#faq .section__title{
  font-size:33px
}
.compare__head h3{
  font-size:27px
}
.support__head h3{
  font-size:25px
}
.community__text h3{
  font-size:30px;
  line-height:1.7
}
.faq__group-title{
  font-size:20px
}
.chat-header strong{
  font-size:19px
}
.contact__item p{
  font-size:24px
}
@media(max-width:1050px){
  .hero__title{
    font-size:39px
  }
  .section__title{
    font-size:34px
  }
  .compare__head h3{
    font-size:24px
  }
  .support__head h3{
    font-size:23px
  }
  .community__text h3{
    font-size:27px
  }
  .contact__item p{
    font-size:21px
  }
}
@media(max-width:760px){
  .hero__title{
    font-size:44px
  }
  .section__title{
    font-size:31px
  }
  #faq .section__title{
    font-size:31px
  }
  .compare__head h3{
    font-size:26px
  }
  .support__head h3{
    font-size:22px
  }
  .community__text h3{
    font-size:27px
  }
  .chat-header strong{
    font-size:17px
  }
  .contact__item p{
    font-size:23px
  }
}
@media(max-width:480px){
  .hero__title{
    font-size:clamp(31px,8.5vw,40px)
  }
  .section__title{
    font-size:27px
  }
  #faq .section__title{
    font-size:27px
  }
  .compare__head h3{
    font-size:23px
  }
  .support__head h3{
    font-size:22px
  }
  .community__text h3{
    font-size:25px
  }
  .faq__group-title{
    font-size:18px
  }
  .chat-header strong{
    font-size:15px
  }
  .contact__item p{
    font-size:20px
  }
}



@media(min-width:761px){
  .hero__main{
    max-width:1440px;
    grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);
    gap:20px
  }
}
@media(min-width:1100px){
  .hero__title .hero__line{
    white-space:nowrap
  }
}
@media(max-width:760px){
  .hero__title .hero__line{
    white-space:normal
  }
}
.has-scroll-reveal [data-scroll-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms)
}
.has-scroll-reveal [data-scroll-reveal].is-revealed{
  opacity:1;
  transform:translate3d(0,0,0)
}
@media(prefers-reduced-motion:reduce){
  .has-scroll-reveal [data-scroll-reveal]{
    opacity:1;
    transform:none;
    transition:none
  }
}
.section__title{
  font-size:42px;
  line-height:1.5
}
#faq .section__title{
  font-size:36px
}
.compare__head h3{
  font-size:29px
}
.support__head h3{
  font-size:27px
}
.community__text h3{
  font-size:33px
}
.faq__group-title{
  font-size:22px
}
.support__body li{
  font-size:17px;
  line-height:1.8;
  margin:13px 0;
  padding-left:31px
}
.support__body li small{
  font-size:14px;
  line-height:1.7
}
.community__visual.chat-demo{
  border-color:#c4d9f5;
  background:#fff;
  box-shadow:0 14px 34px #164a8b10
}
.chat-room{
  background:#fcfdff
}
.chat-row--reply .chat-message{
  background:#3175c7;
  border-color:#3175c7
}
.chat-row--reply .chat-avatar{
  background:#3175c7
}
@media(max-width:1050px){
  .section__title{
    font-size:36px
  }
  #faq .section__title{
    font-size:33px
  }
  .compare__head h3{
    font-size:26px
  }
  .support__head h3{
    font-size:25px
  }
  .community__text h3{
    font-size:29px
  }
  .support__body li{
    font-size:16px
  }
}
@media(max-width:760px){
  .section__title{
    font-size:33px
  }
  #faq .section__title{
    font-size:32px
  }
  .compare__head h3{
    font-size:27px
  }
  .support__head h3{
    font-size:24px
  }
  .community__text h3{
    font-size:29px
  }
  .support__body li{
    font-size:16px
  }
}
@media(max-width:480px){
  .section__title{
    font-size:29px
  }
  #faq .section__title{
    font-size:29px
  }
  .compare__head h3{
    font-size:24px
  }
  .support__head h3{
    font-size:23px
  }
  .community__text h3{
    font-size:25px;
    line-height: 36px;
  }
  .faq__group-title{
    font-size:19px
  }
  .support__body li{
    font-size:15px
  }
}
.compare__list li:before,.support__body li:before,.community__points li:before{
  content:"";
  position:static;
  left:auto;
  top:auto;
  display:block;
  flex:none;
  width:24px;
  height:24px;
  margin-top:3px;
  border-radius:50%;
  background-color:transparent;
  background-image:
  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4.5 12.5 9.5 17.5 19.5 6'/></svg>"),
  linear-gradient(135deg,#3578e3,#3578e3);
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:14px 14px,100% 100%;
  box-shadow:none;
  font:inherit;
  color:transparent;
}
.support__body li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-left:0
}
.support__item-text{
  min-width:0;
  flex:1
}
.hero__hub{
  margin:0;
  min-width:0;
  align-self:center
}
.hub-map{
  position:relative;
  aspect-ratio:600/580;
  width:100%;
  isolation:isolate
}
.hub-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.hub-link{
  stroke:#c2d8f7;
  stroke-width:1.5;
  stroke-dasharray:4 6;
  fill:none
}
.hub-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:37%;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(150deg,#357de8,#1754c5);
  border:5px solid white;
  box-shadow:0 12px 28px #1c58ad20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:white
}
.hub-core img{
  width:40%;
  height:auto;
  margin-bottom:10px
}
.hub-core strong{
  font-size:clamp(19px,2vw,30px);
  letter-spacing:-.7px;
  line-height:1.2
}
.hub-core>span{
  font-size:clamp(8px,.78vw,11px);
  letter-spacing:2px;
  margin-top:8px
}
.hub-node{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  width:29%;
  text-align:center;
  color:#2058a5
}
.hub-node>span{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  background:white;
  border:1px solid #e0ebf9;
  border-radius:50%;
  margin:0 auto 10px;
  box-shadow:0 5px 14px #234c8110;
  animation:hubHighlight 6s ease-in-out infinite;
  animation-delay:calc(var(--i)*1s)
}
.hub-node svg{
  width:33px;
  height:33px
}
.hub-node strong{
  font-size:clamp(11px,1vw,15px);
  font-weight:700;
  white-space:nowrap;
  display:block
}
.hero__hub figcaption{
  text-align:center;
  color:#61748d;
  font-size:16px;
  margin-top:10px
}
.hero__hub figcaption strong{
  margin-left:14px;
  color:#205ec5;
  font-size:21px
}
.hero__hub.is-paused *{
  animation-play-state:paused!important
}
@keyframes hubHighlight{
  0%,22%,100%{
    border-color:#e0ebf9;
    border-width:1px;
    box-shadow:0 5px 14px #234c8110
  }
  8%,16%{
    border-color:#3578e3;
    border-width:1.5px;
    box-shadow:0 0 0 5px #e6f0ff
  }
}
@media(max-width:1050px) and (min-width:761px){
  .hub-node>span{
    width:52px;
    height:52px
  }
  .hub-node svg{
    width:26px;
    height:26px
  }
  .hero__hub figcaption strong{
    display:block;
    margin:5px 0 0
  }
  .hub-core{
    border-width:3px
  }
}
@media(max-width:760px){
  .hero__hub{
    width:min(100%,580px);
    margin:28px auto 0
  }
  .hub-node strong{
    font-size:13px
  }
  .hub-core strong{
    font-size:27px
  }
  .hub-core>span{
    font-size:10px
  }
}
@media(max-width:400px){
  .hub-node>span{
    width:48px;
    height:48px
  }
  .hub-node svg{
    width:25px;
    height:25px
  }
  .hub-node strong{
    font-size:10px
  }
  .hub-core strong{
    font-size:21px
  }
  .hub-core>span{
    font-size:7px;
    letter-spacing:1px
  }
  .hero__hub figcaption{
    font-size:13px
  }
  .hero__hub figcaption strong{
    font-size:17px
  }
}
@media(prefers-reduced-motion:reduce){
  .hub-node>span{
    animation:none
  }
  .hub-signal{
    display:none
  }
}
.hub-orbit{
  animation:hubOrbit 35s linear infinite;
  transform-origin:300px 290px
}
.hub-ripple{
  animation:hubRipple 4s ease-out infinite;
  transform-origin:300px 290px
}
@keyframes hubOrbit{
  to{
    transform:rotate(360deg)
  }
}
@keyframes hubRipple{
  0%{
    transform:scale(.9);
    opacity:0
  }
  20%{
    opacity:.55
  }
  100%{
    transform:scale(1.6);
    opacity:0
  }
}
@media(prefers-reduced-motion:reduce){
  .hub-orbit,.hub-ripple{
    animation:none
  }
  .hub-ripple{
    opacity:0
  }
}
.hero:after{
  display:none
}
.hub-node>span{
  color:#2e6efe
}
.contact__item .contact__arrow{
  border-radius:5px;
  background:#2e6efe;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.contact__arrow svg{
  width:25px;
  height:25px;
  display:block
}
#contact .contact__item .contact__arrow{
  width:40px;
  height:40px;
  background:transparent;
  border:0;
  border-radius:0;
  color:#2e58bd
}
#contact .contact__arrow svg{
  width:34px;
  height:34px;
  stroke-width:1.8
}
.hero__btns{
  gap:14px
}
.hero__btns .cs-btn{
  min-height:62px;
  padding:16px 28px;
  font-size:17px;
  gap:12px
}
.hero__btns .cs-btn .icon{
  width:1.45em;
  height:1.45em
}
@media(max-width:760px){
  .hero__btns .cs-btn{
    min-height:56px;
    padding:14px 22px;
    font-size:16px
  }
}
.hub-core img{
  width:78%;
  height:auto;
  margin:0;
  max-height:72%;
  object-fit:contain
}
.hero__label:before{
  display:none
}
.hub-core .hub-brand-logo{
  display:block;
  width:64%;
  height:auto;
  max-height:60%;
  margin-bottom:8px;
  overflow:visible
}
.hub-core>span{
  display:block;
  margin-top:0;
  font-size:clamp(8px,.75vw,10px);
  line-height:1.2;
  letter-spacing:1.6px;
  font-weight:700;
  color:#fff
}
@media(max-width:400px){
  .hub-core .hub-brand-logo{
    width:65%;
    margin-bottom:5px
  }
  .hub-core>span{
    font-size:7px;
    letter-spacing:1px
  }
}
.cs-btn,.decision a,.decision .decision--cs{
  border-radius:999px
}
.contact__item--link{
  border-radius:22px
}
.support__tag::after{
  content:' →';
  font:500 19px Arial,sans-serif;
  vertical-align:-1px
}
.decision .decision--cs::after{
  content:'→';
  width:auto;
  height:auto;
  margin-left:auto;
  background:none;
  border-radius:0;
  font:500 25px Arial,sans-serif
}
.decision .decision--ts::after{
  display:none
}
.link-external-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  margin-left:7px;
  line-height:1
}
.link-external{
  width:20px;
  height:20px;
  flex:none;
  display:block
}
.decision .link-external-wrap{
  margin-left:auto
}
.decision .link-external{
  width:24px;
  height:24px
}
#contact .contact__arrow svg{
  width:34px;
  height:34px;
  stroke-width:2.1
}
#contact .contact__grid{
  max-width:1120px;
  gap:24px;
  margin-top:44px
}
#contact .contact__item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:420px;
  padding:39px 42px 34px;
  border:1px solid #d5e3f4;
  border-top:1px solid #d5e3f4;
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:0 12px 32px #28597a12;
  text-decoration:none
}
#contact .contact__item:hover,#contact .contact__item:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 38px #2367a627;
  border-color:#8eb8ef
}
#contact .contact__item:focus-visible{
  outline:3px solid #3578e3;
  outline-offset:3px
}
#contact .contact__purpose,#contact .contact__item:first-child .contact__purpose{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 26px;
  padding:8px 12px;
  background:#f1f6fb;
  border-radius:5px;
  color:#315b8d;
  font-size:13px;
  font-weight:700;
  line-height:1.2
}
#contact .contact__purpose:before{
  content:'';
  flex:none;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#4baedc
}
#contact .contact__service{
  display:block;
  margin:0 0 8px;
  color:#52708c;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em
}
#contact .contact__headline{
  margin:0;
  color:#1d2d40;
  font-size:clamp(26px,2.1vw,32px);
  line-height:1.42;
  font-weight:800;
  letter-spacing:-.035em
}
#contact .contact__item small{
  margin-top:12px;
  color:#718294;
  font-size:12px;
  line-height:1.65
}
#contact .contact__action{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:27px;
  color:#1762cb;
  font-size:17px;
  font-weight:700;
  line-height:1.4
}
#contact .contact__arrow,#contact .contact__item:first-child .contact__arrow{
  width:24px;
  height:24px;
  background:transparent;
  color:currentColor
}
#contact .contact__arrow svg{
  width:21px;
  height:21px;
  stroke-width:2
}
#contact .contact__item:hover .contact__action,#contact .contact__item:focus-visible .contact__action{
  color:#074aa6;
  text-decoration:underline;
  text-underline-offset:4px
}
@media(max-width:760px){
  #contact .contact__grid{
    gap:18px
  }
  #contact .contact__item{
    min-height:0;
    padding:32px
  }
  #contact .contact__action{
    margin-top:22px;
    padding-top:0
  }
}
@media(max-width:480px){
  #contact .contact__item{
    padding:27px 25px
  }
  #contact .contact__headline{
    font-size:27px
  }
}
.community__points{
  gap:19px;
  margin-top:30px
}
.community__points li{
  align-items:flex-start;
  gap:14px;
  font-size:18px;
  font-weight:700;
  line-height:1.65;
  color:#33465a
}
.community__points li:before{
  margin-top:4px
}
@media(max-width:760px){
  .community__desktop-break{
    display:none
  }
  .community__points li{
    font-size:17px
  }
}
@media(max-width:480px){
  .community__points{
    gap:16px
  }
  .community__points li{
    font-size:16px;
    line-height:1.6
  }
}
@media(prefers-reduced-motion:reduce){
  .hub-signal{
    display:none
  }
}
.local-nav a{
  font-size:17px;
  font-weight:700
}
#community .section__head{
  margin-bottom:24px
}
#community .community__text .cs-btn{
  min-height:70px;
  padding:18px 34px;
  font-size:20px;
  gap:14px
}
#community .community__text .cs-btn .icon{
  width:1.35em;
  height:1.35em
}
#community .chat-row:not(.chat-row--reply) .chat-message{
  border:1.5px solid #aebfdf
}
@media(max-width:1050px){
  .local-nav a{
    font-size:16px
  }
}
@media(max-width:760px){
  #community .section__head{
    margin-bottom:28px
  }
  #community .community__text .cs-btn{
    min-height:62px;
    padding:15px 25px;
    font-size:18px
  }
}
@media(max-width:480px){
  #community .community__text .cs-btn{
    font-size:17px
  }
}
.hub-core>span{
  font-size:clamp(9px,.9vw,12px);
  letter-spacing:1.1px;
  white-space:nowrap
}
@media(max-width:400px){
  .hub-core>span{
    font-size:8px;
    letter-spacing:.7px
  }
}
#contact{
  background:#f3f8ff
}
#contact:before{
  filter:grayscale(1) blur(3px) brightness(1.16)
}
#contact:after{
  background:linear-gradient(180deg,rgba(247,250,255,.86),rgba(235,244,255,.88))
}
#contact .contact__item{
  border-color:#cadcf6;
  box-shadow:0 12px 32px #174c9712
}
#contact .contact__purpose,#contact .contact__item:first-child .contact__purpose{
  background:#edf4ff;
  color:#2862df
}
#contact .contact__purpose:before{
  background:#3578e3
}
#contact .contact__service{
  color:#4b6590
}
#contact .contact__headline{
  font-size:clamp(22px,2.25vw,32px);
  color:#10284d;
  white-space:nowrap
}
#contact .contact__item small{
  color:#71839a
}
#contact .contact__action{
  color:#165cce
}
#contact .contact__item:hover .contact__action,#contact .contact__item:focus-visible .contact__action{
  color:#084eb6
}
@media(max-width:980px){
  #contact .contact__grid{
    grid-template-columns:1fr;
    max-width:620px
  }
  #contact .contact__item{
    min-height:0
  }
}
@media(max-width:480px){
  #contact .contact__headline{
    font-size:clamp(22px,5.8vw,27px);
    white-space:normal
  }
}
#community .section__head{
  margin-bottom:82px
}
#community .community__visual.chat-demo{
  border-color:#c7ced8
}
#community .chat-row:not(.chat-row--reply) .chat-message{
  border-color:#c4cbd5
}
#community .chat-header{
  border-bottom-color:#d8dee7
}
@media(max-width:760px){
  #community .section__head{
    margin-bottom:64px
  }
}
@media(max-width:480px){
  #community .section__head{
    margin-bottom:56px
  }
}
#contact .contact__item{
  min-height:320px
}
#contact .contact__action{
  padding-top:20px
}
@media(max-width:980px){
  #contact .contact__item{
    min-height:0
  }
  #contact .contact__action{
    margin-top:26px;
    padding-top:0
  }
}
#community .community__visual.chat-demo{
  overflow:hidden;
  border:1px solid #c7ced8;
  border-radius:22px;
  background:#f0f6ff;
  box-shadow:0 14px 34px #164a8b12
}
#community .chat-header{
  min-height:108px;
  padding:24px 24px 24px 105px;
  border:0;
  border-radius:20px 20px 0 0;
  background:#287bd0
}
#community .chat-header strong{
  color:#fff;
  font-size:20px;
  line-height:1.35
}
#community .chat-header div>span{
  color:#eff6ff;
  font-size:13px;
  margin-top:5px
}
#community .community-ai-badge{
  left:23px;
  top:23px;
  width:62px;
  height:62px;
  border-radius:18px;
  background:#ffffff30;
  box-shadow:none
}
#community .community-ai-badge svg{
  width:70%;
  height:70%
}
#community .chat-room{
  background:#f0f6ff;
  padding:23px 24px 16px
}
#community .chat-topic{
  border-bottom-color:#d1e0f1;
  color:#315f91;
  font-weight:700
}
#community .chat-message{
  font-size:15px;
  line-height:1.75;
  padding:13px 16px
}
#community .chat-row:not(.chat-row--reply) .chat-message{
  background:#fff;
  border-color:#c4cbd5
}
#community .chat-row--reply .chat-message{
  background:#287bd0;
  border-color:#287bd0;
  color:#fff
}
#community .community__example{
  background:#f0f6ff;
  color:#7c8da3;
  padding:0 24px 18px
}
@media(max-width:760px){
  #community .community__visual.chat-demo{
    width:100%;
    margin-left:0
  }
}
@media(max-width:480px){
  #community .chat-header{
    min-height:88px;
    padding:17px 14px 17px 78px
  }
  #community .chat-header strong{
    font-size:16px
  }
  #community .chat-header div>span{
    font-size:10px
  }
  #community .community-ai-badge{
    left:15px;
    top:17px;
    width:50px;
    height:50px;
    border-radius:14px
  }
  #community .chat-room{
    padding:17px 14px 12px
  }
  #community .chat-message{
    font-size:13px;
    padding:11px 12px
  }
  #community .community__example{
    padding:0 14px 15px
  }
}
#community .chat-row:not(.chat-row--reply) .chat-message{
  background:#fff;
  border-color:#d8e0e9;
  box-shadow:0 3px 12px #173e7210
}
#community .chat-row:not(.chat-row--reply) .chat-avatar{
  background:#d4e7ff;
  color:#155fc1
}
#faq .faq__group-title{
  font-size:24px
}
#faq .faq__item summary{
  font-size:17px;
  line-height:1.75
}
#faq .faq__a{
  font-size:16px;
  line-height:1.85
}
@media(max-width:760px){
  #faq .faq__group-title{
    font-size:22px
  }
  #faq .faq__item summary{
    font-size:16px
  }
  #faq .faq__a{
    font-size:15px
  }
}
@media(max-width:480px){
  #faq .faq__group-title{
    font-size:20px
  }
}
.hub-node>span{
  width:78px;
  height:78px
}
.hub-node svg{
  width:39px;
  height:39px
}
@media(max-width:1050px) and (min-width:761px){
  .hub-node>span{
    width:58px;
    height:58px
  }
  .hub-node svg{
    width:30px;
    height:30px
  }
}
@media(max-width:760px){
  .hub-node>span{
    width:72px;
    height:72px
  }
  .hub-node svg{
    width:36px;
    height:36px
  }
}
@media(max-width:400px){
  .hub-node>span{
    width:52px;
    height:52px
  }
  .hub-node svg{
    width:28px;
    height:28px
  }
}
#faq .faq__item summary{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 24px;
  column-gap:14px;
  align-items:start
}
#faq .faq__a{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  column-gap:14px;
  align-items:start;
  color:#425166
}
#faq .faq__q,#faq .faq__a-mark{
  display:block;
  width:30px;
  padding:0;
  font:500 22px/1.75 Arial,sans-serif;
  text-align:left
}
#faq .faq__a-mark{
  color:#5d82b1
}
#faq .faq__notes{
  color:#4b5d70
}
#faq .faq__toggle{
  margin-left:0;
  justify-self:end
}
@media(max-width:480px){
  #faq .faq__item summary{
    grid-template-columns:26px minmax(0,1fr) 22px;
    column-gap:10px
  }
  #faq .faq__a{
    grid-template-columns:26px minmax(0,1fr);
    column-gap:10px
  }
  #faq .faq__q,#faq .faq__a-mark{
    width:26px;
    font-size:20px
  }
}
#community .chat-row--reply .chat-message{
  background:#dcecff;
  border:1px solid #b8d4f4;
  color:#244363
}
#community .chat-row--reply .chat-avatar{
  background:#4e87cc;
  color:#fff
}
#faq .faq__item summary::marker{
  content:''
}
#faq .faq__a{
  padding-left:10px
}
@media(max-width:480px){
  #faq .faq__a{
    padding-left:10px
  }
}
#community .chat-header{
  background:var(--brand)
}
#community .chat-header strong{
  font-size:23px
}
#community .chat-header div>span{
  font-size:15px
}
@media(max-width:480px){
  #community .chat-header strong{
    font-size:18px
  }
  #community .chat-header div>span{
    font-size:12px
  }
}
#contact{
  background:#edf6ff
}
#contact:before{
  filter:blur(2.5px) brightness(1.22) saturate(.7)
}
#contact:after{
  background:linear-gradient(180deg,rgba(249,253,255,.52) 0%,rgba(237,246,255,.47) 55%,rgba(227,240,255,.51) 100%)
}
.cx-note>strong{
  font-size:18px;
  font-weight:800;
  line-height:1.5;
  color:#26374b
}
@media(max-width:480px){
  .cx-note>strong{
    font-size:16px
  }
}
#community .chat-topic{
  border-bottom:0;
  padding-bottom:7px
}
@media(min-width:761px){
  #community .community{
    grid-template-columns:1.05fr .95fr
  }
}
#faq .faq__group > .faq__item:last-of-type{
  border-bottom:0
}
.hero__btns .btn--white{
  border-color:#d7dce1
}
.hub-node strong{
  animation:hubTextHighlight 6s ease-in-out infinite;
  animation-delay:calc(var(--i)*1s)
}
@keyframes hubTextHighlight{
  0%,22%,100%{
    color:#2058a5
  }
  8%,16%{
    color:#2e6efe
  }
}
@media(prefers-reduced-motion:reduce){
  .hub-node strong{
    animation:none
  }
}
.local-nav{
  border-bottom-color:#e6e9ed
}
.decision .decision--ts{
  background:#2e6efe;
  border-color:#2e6efe;
  box-shadow:0 7px 18px #2e6efe2a
}
.decision .decision--cs{
  background:#0b63ca;
  border-color:#125dc6;
  box-shadow:0 7px 18px #0c5ec32a
}
.decision .decision--ts:hover{
  background:#1554ce;
  box-shadow:0 12px 24px #2e6efe3d
}
.decision .decision--cs:hover{
  background:#084ca8;
  box-shadow:0 12px 24px #0c5ec33d
}
.decision .decision--cs::after{
  display:none
}
.decision .decision--cs .decision__chevron{
  display:block;
  flex:none;
  width:26px;
  height:26px;
  margin-left:auto
}
.decision .decision--ts .decision__chevron{
  display:block;
  flex:none;
  width:26px;
  height:26px;
  margin-left:auto
}
#community .community__text .cs-btn .icon{
  width:1.6em;
  height:1.6em;
  flex:none
}
#community .community__text .cs-btn .decision__chevron{
  display:block;
  width:26px;
  height:26px;
  flex:none;
  margin-left:8px
}
.customer-success .btn--blue,.customer-success .btn--red{
  color:#fff
}
.customer-success .btn--white{
  color:var(--dc-blue-text)
}