/* 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;}
}

/* page heading added in the page file itself (value-matrix.php, career.php): same look as the title bands above */
body main > .pt-band{--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 > .pt-band::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 > .pt-band::after{content: ''; 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%);}
body main > .pt-band .pt-title{max-width: 860px; margin: 0 auto 20px; font-size: 52px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance;
    background: linear-gradient(100deg, var(--pt-ink) 0%, var(--pt-ink) 40%, var(--pt-blue) 72%, var(--pt-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
body main > .pt-band .pt-text{max-width: 680px; margin: 0 auto; color: var(--pt-slate); font-size: 19px; line-height: 31px;}

/* career: the CMS statement now sits under the page heading, as a plain section instead of a second band */
body main .career-sec > .content-bg{padding: 56px 0 24px !important; background: #fff !important;}
body main .career-sec > .content-bg::before, body main .career-sec > .content-bg::after{display: none;}

@media (max-width: 1199px){ body main > .pt-band .pt-title{font-size: 44px;} }
@media (max-width: 991px){ body main > .pt-band{padding: 48px 0 56px;} body main > .pt-band .pt-title{font-size: 38px;} }
@media (max-width: 575px){
    body main > .pt-band{padding: 36px 0 44px;}
    body main > .pt-band .pt-title{font-size: 32px; margin-bottom: 14px;}
    body main > .pt-band .pt-text{font-size: 16px; line-height: 27px;}
    body main .career-sec > .content-bg{padding: 36px 0 16px !important;}
}

/* footer brochure download buttons (footer.php): HTML version of the old images/small-brochure.png / main-brochure.png */
footer .pdf-dl{display: inline-flex; align-items: center; gap: 8px; width: 170px; height: 43px; padding: 0 12px 0 9px; border: 1px solid #c9c9c9; border-radius: 7px; background: #fff;
    color: #333; text-decoration: none; vertical-align: middle; transition: border-color .2s ease, box-shadow .2s ease;}
footer .pdf-dl:hover{border-color: #0b75d6; color: #333; box-shadow: 0 6px 16px -10px rgba(11,117,214,.6);}
footer .pdf-dl svg{flex: 0 0 27px; width: 27px; height: 27px; fill: none; stroke: #333; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
footer .pdf-dl span{display: flex; flex-direction: column; font-size: 17px; line-height: 1.05; font-weight: 700; white-space: nowrap;}
footer .pdf-dl small{margin-bottom: 1px; font-size: 10.5px; line-height: 1.2; font-weight: 500;}