/* page title band: restyles the grey title section at the top of the inner pages to match the contact page hero
   (sass/contact.css .ct-hero). Only the look changes; the page / CMS markup and text stay as they are.
   Loaded from header.php; "body main" keeps these rules ahead of each page's own stylesheet, which loads later. */
body main .about-us-sec > .about-content-sec,
body main .help-center-sec > .content-bg,
body main .blog-title-bg > .content-bg,
body main .career-sec > .content-bg,
body main .disclaimer-sec > .content-bg,
body main .faq-main-section > .content-bg,
body main .what-is-new-sec > .content-bg,
body main .ourteam-content-sec > .content-bg,
body main .privacy-policy-sec > .content-bg,
body main .sitemap-sec > .content-bg,
body main .pricing-sec > .title-bg,
body main .enterprise-sec > .title-bg,
body main .demo-head > .title-bg,
body main .process-timeline > .process-timeline > .sectiontitle{
    --pt-ink: #14213d; --pt-slate: #5b6477; --pt-blue: #0b75d6; --pt-violet: #7b61ff;
    position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 72px; text-align: center;
    background: linear-gradient(180deg, #fbfcff 0%, #ffffff 60%, #f7faff 100%);}
body main .about-us-sec > .about-content-sec::before,
body main .help-center-sec > .content-bg::before,
body main .blog-title-bg > .content-bg::before,
body main .career-sec > .content-bg::before,
body main .disclaimer-sec > .content-bg::before,
body main .faq-main-section > .content-bg::before,
body main .what-is-new-sec > .content-bg::before,
body main .ourteam-content-sec > .content-bg::before,
body main .privacy-policy-sec > .content-bg::before,
body main .sitemap-sec > .content-bg::before,
body main .pricing-sec > .title-bg::before,
body main .enterprise-sec > .title-bg::before,
body main .demo-head > .title-bg::before,
body main .process-timeline > .process-timeline > .sectiontitle::before{content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(560px 380px at 50% 30%, rgba(11,117,214,.10), transparent 70%), radial-gradient(460px 340px at 92% 0%, rgba(123,97,255,.10), transparent 70%), radial-gradient(420px 320px at 4% 100%, rgba(11,117,214,.06), transparent 70%);}
body main .about-us-sec > .about-content-sec::after,
body main .help-center-sec > .content-bg::after,
body main .blog-title-bg > .content-bg::after,
body main .career-sec > .content-bg::after,
body main .disclaimer-sec > .content-bg::after,
body main .faq-main-section > .content-bg::after,
body main .what-is-new-sec > .content-bg::after,
body main .ourteam-content-sec > .content-bg::after,
body main .privacy-policy-sec > .content-bg::after,
body main .sitemap-sec > .content-bg::after,
body main .pricing-sec > .title-bg::after,
body main .enterprise-sec > .title-bg::after,
body main .demo-head > .title-bg::after,
body main .process-timeline > .process-timeline > .sectiontitle::after{content: ''; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(20,33,61,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.045) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(700px 420px at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(700px 420px at 50% 40%, #000 20%, transparent 75%);}

/* title */
body main .about-us-sec > .about-content-sec .title:not(#pt),
body main .help-center-sec > .content-bg .title:not(#pt),
body main .blog-title-bg > .content-bg .title:not(#pt),
body main .career-sec > .content-bg .title:not(#pt),
body main .disclaimer-sec > .content-bg .title:not(#pt),
body main .faq-main-section > .content-bg .faq-title:not(#pt),
body main .what-is-new-sec > .content-bg .title:not(#pt),
body main .ourteam-content-sec > .content-bg .title:not(#pt),
body main .privacy-policy-sec > .content-bg .title:not(#pt),
body main .sitemap-sec > .content-bg .title:not(#pt),
body main .pricing-sec > .title-bg .pricing-title:not(#pt),
body main .enterprise-sec > .title-bg .enterprise-title:not(#pt),
body main .demo-head > .title-bg .pricing-title:not(#pt),
body main .process-timeline > .process-timeline > .sectiontitle h2:not(#pt){
    max-width: 860px !important; margin: 0 auto 20px !important; font-size: 52px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-wrap: balance !important;
    background: linear-gradient(100deg, var(--pt-ink) 0%, var(--pt-ink) 40%, var(--pt-blue) 72%, var(--pt-violet) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;}
/* long statement titles (career, our team) keep their highlighted words; a little smaller so they stay readable */
body main .career-sec > .content-bg .title:not(#pt),
body main .ourteam-content-sec > .content-bg .title:not(#pt){font-size: 40px !important; line-height: 1.2 !important;}

/* intro text */
body main .about-us-sec > .about-content-sec .text:not(#pt),
body main .help-center-sec > .content-bg .text:not(#pt),
body main .blog-title-bg > .content-bg .text:not(#pt),
body main .career-sec > .content-bg .text:not(#pt),
body main .what-is-new-sec > .content-bg .text:not(#pt),
body main .ourteam-content-sec > .content-bg .text:not(#pt),
body main .faq-main-section > .content-bg .faq-intro:not(#pt), body main .faq-main-section > .content-bg .text:not(#pt),
body main .pricing-sec > .title-bg .container > p:not(#pt),
body main .enterprise-sec > .title-bg .container > p:not(#pt),
body main .demo-head > .title-bg .container > p:not(#pt),
body main .process-timeline > .process-timeline > .sectiontitle .desc:not(#pt){
    max-width: 680px !important; margin: 0 auto !important; color: var(--pt-slate) !important; font-size: 19px !important; line-height: 31px !important; font-weight: 400 !important;}

/* the old underline decoration under the grey band titles */
body main .about-us-sec > .about-content-sec .headerLine,
body main .help-center-sec > .content-bg .headerLine,
body main .blog-title-bg > .content-bg .headerLine,
body main .career-sec > .content-bg .headerLine,
body main .disclaimer-sec > .content-bg .headerLine,
body main .faq-main-section > .content-bg .headerLine,
body main .what-is-new-sec > .content-bg .headerLine,
body main .ourteam-content-sec > .content-bg .headerLine,
body main .privacy-policy-sec > .content-bg .headerLine,
body main .sitemap-sec > .content-bg .headerLine,
body main .process-timeline > .process-timeline > .sectiontitle .headerLine{display: none;}

@media (max-width: 1199px){
    body main .about-us-sec > .about-content-sec .title:not(#pt), body main .help-center-sec > .content-bg .title:not(#pt), body main .blog-title-bg > .content-bg .title:not(#pt),
    body main .disclaimer-sec > .content-bg .title:not(#pt), body main .faq-main-section > .content-bg .faq-title:not(#pt), body main .what-is-new-sec > .content-bg .title:not(#pt),
    body main .privacy-policy-sec > .content-bg .title:not(#pt), body main .sitemap-sec > .content-bg .title:not(#pt), body main .pricing-sec > .title-bg .pricing-title:not(#pt),
    body main .enterprise-sec > .title-bg .enterprise-title:not(#pt), body main .demo-head > .title-bg .pricing-title:not(#pt), body main .process-timeline > .process-timeline > .sectiontitle h2:not(#pt){font-size: 44px !important;}
    body main .career-sec > .content-bg .title:not(#pt), body main .ourteam-content-sec > .content-bg .title:not(#pt){font-size: 36px !important;}
}
@media (max-width: 991px){
    body main .about-us-sec > .about-content-sec, body main .help-center-sec > .content-bg, body main .blog-title-bg > .content-bg, body main .career-sec > .content-bg,
    body main .disclaimer-sec > .content-bg, body main .faq-main-section > .content-bg, body main .what-is-new-sec > .content-bg, body main .ourteam-content-sec > .content-bg,
    body main .privacy-policy-sec > .content-bg, body main .sitemap-sec > .content-bg, body main .pricing-sec > .title-bg, body main .enterprise-sec > .title-bg,
    body main .demo-head > .title-bg, body main .process-timeline > .process-timeline > .sectiontitle{padding: 48px 0 56px;}
    body main .about-us-sec > .about-content-sec .title:not(#pt), body main .help-center-sec > .content-bg .title:not(#pt), body main .blog-title-bg > .content-bg .title:not(#pt),
    body main .disclaimer-sec > .content-bg .title:not(#pt), body main .faq-main-section > .content-bg .faq-title:not(#pt), body main .what-is-new-sec > .content-bg .title:not(#pt),
    body main .privacy-policy-sec > .content-bg .title:not(#pt), body main .sitemap-sec > .content-bg .title:not(#pt), body main .pricing-sec > .title-bg .pricing-title:not(#pt),
    body main .enterprise-sec > .title-bg .enterprise-title:not(#pt), body main .demo-head > .title-bg .pricing-title:not(#pt), body main .process-timeline > .process-timeline > .sectiontitle h2:not(#pt){font-size: 38px !important;}
    body main .career-sec > .content-bg .title:not(#pt), body main .ourteam-content-sec > .content-bg .title:not(#pt){font-size: 32px !important;}
}
@media (max-width: 575px){
    body main .about-us-sec > .about-content-sec, body main .help-center-sec > .content-bg, body main .blog-title-bg > .content-bg, body main .career-sec > .content-bg,
    body main .disclaimer-sec > .content-bg, body main .faq-main-section > .content-bg, body main .what-is-new-sec > .content-bg, body main .ourteam-content-sec > .content-bg,
    body main .privacy-policy-sec > .content-bg, body main .sitemap-sec > .content-bg, body main .pricing-sec > .title-bg, body main .enterprise-sec > .title-bg,
    body main .demo-head > .title-bg, body main .process-timeline > .process-timeline > .sectiontitle{padding: 36px 0 44px;}
    body main .about-us-sec > .about-content-sec .title:not(#pt), body main .help-center-sec > .content-bg .title:not(#pt), body main .blog-title-bg > .content-bg .title:not(#pt),
    body main .disclaimer-sec > .content-bg .title:not(#pt), body main .faq-main-section > .content-bg .faq-title:not(#pt), body main .what-is-new-sec > .content-bg .title:not(#pt),
    body main .privacy-policy-sec > .content-bg .title:not(#pt), body main .sitemap-sec > .content-bg .title:not(#pt), body main .pricing-sec > .title-bg .pricing-title:not(#pt),
    body main .enterprise-sec > .title-bg .enterprise-title:not(#pt), body main .demo-head > .title-bg .pricing-title:not(#pt), body main .process-timeline > .process-timeline > .sectiontitle h2:not(#pt){font-size: 32px !important; margin-bottom: 14px !important;}
    body main .career-sec > .content-bg .title:not(#pt), body main .ourteam-content-sec > .content-bg .title:not(#pt){font-size: 26px !important;}
    body main .about-us-sec > .about-content-sec .text:not(#pt), body main .help-center-sec > .content-bg .text:not(#pt), body main .blog-title-bg > .content-bg .text:not(#pt),
    body main .career-sec > .content-bg .text:not(#pt), body main .what-is-new-sec > .content-bg .text:not(#pt), body main .ourteam-content-sec > .content-bg .text:not(#pt),
    body main .faq-main-section > .content-bg .faq-intro:not(#pt), body main .faq-main-section > .content-bg .text:not(#pt), body main .pricing-sec > .title-bg .container > p:not(#pt), body main .enterprise-sec > .title-bg .container > p:not(#pt),
    body main .demo-head > .title-bg .container > p:not(#pt), body main .process-timeline > .process-timeline > .sectiontitle .desc:not(#pt){font-size: 16px !important; line-height: 27px !important;}
}

/* capability pages (CEO, Finance, CRM ... Survey): the hero banner is the CMS block main > .finance-slide-video.
   Same light grid + glow look as the homepage / contact heroes; the CMS text, image and button stay as they are. */
body main > .finance-slide-video{--pt-ink: #14213d; --pt-slate: #5b6477; --pt-blue: #0b75d6; --pt-violet: #7b61ff;
    position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 88px; background: linear-gradient(180deg, #fbfcff 0%, #ffffff 55%, #f7faff 100%);}
body main > .finance-slide-video::before{content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(560px 460px at 76% 48%, rgba(11,117,214,.11), transparent 70%), radial-gradient(520px 380px at 96% 4%, rgba(123,97,255,.11), transparent 70%), radial-gradient(420px 320px at 2% 98%, rgba(11,117,214,.05), transparent 70%);}
/* replaces the old blue diagonal shape (images/project-management/shape.png) with the grid */
body main > .finance-slide-video::after{content: ''; display: block; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; pointer-events: none;
    background: linear-gradient(rgba(20,33,61,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.045) 1px, transparent 1px) !important; background-size: 44px 44px !important;
    -webkit-mask-image: radial-gradient(760px 520px at 70% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(760px 520px at 70% 50%, #000 20%, transparent 75%);}
body main > .finance-slide-video .row{align-items: center; row-gap: 40px;}
body main > .finance-slide-video .slide-left-content{position: relative; z-index: 1;}
body main > .finance-slide-video .slide-left-content::before{content: ''; display: block; width: 56px; height: 4px; margin-bottom: 22px; border-radius: 4px;
    background: linear-gradient(90deg, var(--pt-blue), var(--pt-violet)); box-shadow: 0 4px 12px -4px rgba(11,117,214,.6);}
body main > .finance-slide-video .slide-left-content h1:not(#pt){margin: 0 0 18px !important; font-size: 48px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -0.02em; text-wrap: balance;
    background: linear-gradient(100deg, var(--pt-ink) 0%, var(--pt-ink) 42%, var(--pt-blue) 75%, var(--pt-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important;}
body main > .finance-slide-video .slide-left-content p:not(#pt){margin-bottom: 26px !important; color: var(--pt-slate) !important; font-size: 17px !important; line-height: 29px !important; font-weight: 400 !important;}
body main > .finance-slide-video .slide-left-content .right-btn{margin: 0; padding: 0;}
body main > .finance-slide-video .slide-left-content .right-btn .btn-5:not(.btn-bg){display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 0; outline: 0; border-radius: 14px;
    background: linear-gradient(100deg, #0b75d6, #3d6cf0 60%, #7b61ff); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 18px 36px -18px rgba(38,60,220,.8); transition: transform .2s ease, box-shadow .2s ease;}
body main > .finance-slide-video .slide-left-content .right-btn .btn-5:not(.btn-bg)::after{content: '\2192'; font-size: 17px;}
body main > .finance-slide-video .slide-left-content .right-btn .btn-5:not(.btn-bg):hover{transform: translateY(-2px); color: #fff; box-shadow: 0 22px 40px -18px rgba(38,60,220,.9);}
/* product screenshot as a floating glass card */
body main > .finance-slide-video .slide-video{position: relative; z-index: 1; padding: 10px; border: 1px solid #fff; border-radius: 22px; background: rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(20,33,61,.06), 0 40px 80px -44px rgba(38,60,160,.55);}
body main > .finance-slide-video .slide-video img{display: block; width: 100%; height: auto; border-radius: 14px;}

@media (max-width: 1199px){
    body main > .finance-slide-video .slide-left-content h1:not(#pt){font-size: 42px !important;}
}
@media (max-width: 991px){
    body main > .finance-slide-video{padding: 52px 0 64px;}
    body main > .finance-slide-video .slide-left-content h1:not(#pt){font-size: 36px !important;}
}
@media (max-width: 767px){
    body main > .finance-slide-video .slide-left-content{margin-bottom: 8px;}
}
@media (max-width: 575px){
    body main > .finance-slide-video{padding: 36px 0 48px;}
    body main > .finance-slide-video .slide-left-content h1:not(#pt){font-size: 30px !important; margin-bottom: 14px !important;}
    body main > .finance-slide-video .slide-left-content p:not(#pt){font-size: 16px !important; line-height: 27px !important;}
    body main > .finance-slide-video .slide-video{padding: 6px; border-radius: 16px;}
    body main > .finance-slide-video .slide-video img{border-radius: 11px;}
}