@font-face {
font-family: TondoBold;
src: url('/theme/backend/theme1/assets/fonts/tondo-bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
.page-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-toast);
background: #f9f9f9;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: opacity 0.3s ease;
}
.page-preloader.preloader-hidden {
opacity: 0 !important;
pointer-events: none !important;
display: none !important;
}
body:not(.appWrapper) .container {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 576px) {
body:not(.appWrapper) .container { max-width: 540px !important; }
}
@media (min-width: 768px) {
body:not(.appWrapper) .container { max-width: 720px !important; }
}
@media (min-width: 992px) {
body:not(.appWrapper) .container { max-width: 960px !important; }
}
@media (min-width: 1200px) {
body:not(.appWrapper) .container { max-width: 1140px !important; }
}
@media (min-width: 1400px) {
body:not(.appWrapper) .container { max-width: 1320px !important; }
}
.u-hidden {
display: none;
}
.preloader-content {
text-align: center;
}
.preloader-logo {
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 32px;
font-weight: bold;
color: #6C587B;
margin-bottom: 20px;
letter-spacing: 1px;
}
.spinner-bounce {
display: flex;
justify-content: center;
gap: 6px;
}
.spinner-bounce div {
width: 12px;
height: 12px;
background-color: #6C587B;
border-radius: 100%;
display: inline-block;
animation: bounce-delay 1.4s infinite ease-in-out both;
}
.spinner-bounce .bounce1 { animation-delay: -0.32s; }
.spinner-bounce .bounce2 { animation-delay: -0.16s; }
@keyframes bounce-delay {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
.navbar-brand.logo_name {
font-family: TondoBold, 'Open Sans', sans-serif;
font-weight: bold;
font-size: 22px;
letter-spacing: 0.5px;
}
.brand-logo {
vertical-align: middle;
height: 30px;
width: auto;
max-width: 100%;
object-fit: contain;
margin-top: -5px;
margin-right: 8px;
display: inline-block;
background: transparent;
}
.navbar-right .signin_btn {
color: #fff !important;
background-color: #F05F40;
border-color: #F05F40;
border-radius: 4px;
padding: 8px 20px;
margin-top: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.navbar-right .signin_btn:hover {
background-color: #d94e33;
border-color: #d94e33;
color: #fff !important;
}
.navbar-nav > li.active > a {
color: #F05F40 !important;
font-weight: 600;
}
.site-footer {
margin-top: 0;
}
.footer-main {
background-image: linear-gradient(135deg, #6C587B 0%, #5a4869 100%);
background-color: #6C587B;  
padding: 40px 0 30px;
color: #fff;
}
.footer-info-block {
margin-bottom: 10px;
}
.footer-info-block + .footer-info-block {
margin-top: 15px;
}
.footer-links-row {
margin-top: 25px;
}
.footer-heading {
color: #fff;
font-family: TondoBold, Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16px;
margin-bottom: 10px;
}
.footer-text {
color: #e6e6e6;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.7;
font-size: 13px;
margin-bottom: 0;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 6px;
}
.footer-links a {
color: #e6e6e6;
font-size: 13px;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: #fff;
text-decoration: underline;
}
.public-solution-hero,
.public-solution-cta {
background: linear-gradient(135deg, var(--public-solution-primary, #667eea) 0%, var(--public-solution-secondary, #764ba2) 100%);
color: #fff;
}
.public-solution-hero {
min-height: 400px;
display: flex;
align-items: center;
}
.public-solution-lead {
max-width: 700px;
margin: 0 auto;
}
.public-solution-highlight {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.footer-bottom {
background-color: #0D0D0D;
padding: 12px 0;
color: #fff;
}
.footer-bottom .row {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.footer-brand {
margin: 0;
font-size: 20px;
font-weight: bold;
}
.footer-brand a {
color: #fff;
text-decoration: none;
font-family: TondoBold, 'Open Sans', sans-serif;
}
.footer-brand a:hover {
color: #e6e6e6;
text-decoration: none;
}
.footer-social {
display: flex;
align-items: center;
gap: 12px;
padding-top: 2px;
}
.footer-social a {
color: #fff;
font-size: 18px;
transition: color 0.2s ease;
}
.footer-social a:hover {
color: #F05F40;
}
.footer-copyright {
color: #fff;
font-size: 13px;
}
.footer-copyright a {
color: #fff;
text-decoration: none;
}
.footer-copyright a:hover {
text-decoration: underline;
}
.footer-legal-link {
color: #fff;
font-size: 13px;
text-decoration: none;
margin-left: 12px;
}
.footer-legal-link:hover {
color: #e6e6e6;
text-decoration: underline;
}
.page-content-wrapper {
padding-top: 90px;
min-height: calc(100vh - 300px);
}
.standalone-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
padding: 40px;
max-width: 450px;
margin: 40px auto;
}
.standalone-card-wide {
max-width: 800px;
}
.standalone-card .card-header-area {
text-align: center;
margin-bottom: 25px;
}
.standalone-card .card-header-area .card-logo {
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 28px;
color: var(--public-brand, #6C587B);
font-weight: bold;
margin-bottom: 8px;
}
.standalone-card .card-header-area h1 {
font-size: 22px;
color: #333;
margin-bottom: 6px;
}
.standalone-card .card-header-area .subtitle {
color: #666;
font-size: 14px;
}
.info-page-content {
padding-top: 90px;
padding-bottom: 40px;
min-height: calc(100vh - 300px);
}
.info-page-content .page-hero,
.info-page-content .info-page-hero {
background: linear-gradient(135deg, #6C587B 0%, #5a4868 100%);
color: #fff;
padding: 50px 0;
text-align: center;
margin-bottom: 40px;
}
.info-page-content .page-hero h1,
.info-page-content .info-page-hero h1 {
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 36px;
font-weight: bold;
margin-bottom: 10px;
}
.info-page-content .page-hero p,
.info-page-content .info-page-hero p {
font-size: 16px;
opacity: 0.9;
}
.info-page-body {
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
line-height: 1.8;
color: #333;
}
.info-page-body h2 {
color: #6C587B;
font-weight: 600;
margin-top: 30px;
margin-bottom: 15px;
font-size: 22px;
}
.info-page-body h3 {
color: #5a4868;
font-weight: 600;
margin-top: 20px;
margin-bottom: 10px;
font-size: 18px;
}
.info-page-body p {
margin-bottom: 15px;
}
.info-page-body ul {
padding-left: 20px;
margin-bottom: 15px;
}
.info-page-body li {
margin-bottom: 5px;
}
.about-features-row {
margin: 30px 0;
}
.about-feature {
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
.about-feature .feature-icon {
font-size: 2rem;
color: #6c587b;
margin-bottom: 12px;
display: block;
}
.about-feature h4 {
font-weight: 700;
margin-bottom: 8px;
}
.about-feature p {
font-size: .9rem;
color: #666;
}
.link-brand {
color: #6c587b;
font-weight: 600;
}
.link-brand:hover {
color: #5a4868;
}
.public-story-section {
margin: 50px 0;
}
.public-story-section--muted {
background: linear-gradient(180deg, #fbf8ff 0%, #fff 100%);
border: 1px solid rgb(108 88 123 / 10%);
border-radius: 24px;
padding: 34px 28px;
}
.public-story-section__header {
max-width: 820px;
margin: 0 auto 28px;
}
.public-story-section__eyebrow {
color: #6c587b;
text-transform: uppercase;
letter-spacing: .16em;
font-size: .75rem;
font-weight: 700;
margin-bottom: 10px;
}
.public-story-section__lead {
color: #655f6c;
line-height: 1.8;
font-size: .98rem;
}
.public-capability-grid {
margin-top: 8px;
}
.public-capability-card,
.public-roadmap-step {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 16px 34px rgb(15 23 42 / 6%);
padding: 28px;
height: 100%;
}
.public-capability-card i {
width: 54px;
height: 54px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f6f0fb;
color: #6c587b;
font-size: 1.35rem;
margin-bottom: 16px;
}
.public-capability-card h3,
.public-roadmap-step h3 {
color: #241c2b;
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 12px;
}
.public-capability-card p,
.public-roadmap-step p {
color: #655f6c;
line-height: 1.75;
margin: 0;
}
.public-roadmap-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.public-roadmap-step span {
display: inline-flex;
margin-bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: #f6f0fb;
color: #6c587b;
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.pricing-hero {
background: linear-gradient(135deg, #6C587B 0%, #5a4868 100%);
color: #fff;
padding: 60px 0;
text-align: center;
}
.pricing-hero h1 {
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 36px;
font-weight: bold;
}
.pricing-page-shell {
background: linear-gradient(180deg, #f7f4fb 0%, #fff 24%);
padding: 0 0 30px;
}
.pricing-intro-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: -28px 0 30px;
}
.pricing-intro-card {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 18px;
box-shadow: 0 16px 40px rgb(56 45 67 / 8%);
padding: 24px;
}
.pricing-intro-card strong,
.pricing-intro-card span {
display: block;
}
.pricing-intro-card strong {
color: #241c2b;
font-size: 1rem;
margin-bottom: 8px;
}
.pricing-intro-card span {
color: #625c68;
line-height: 1.6;
font-size: .92rem;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin: 10px 0 50px;
}
.pricing-card {
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 24px;
padding: 28px 22px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #fff;
margin-bottom: 0;
box-shadow: 0 16px 36px rgb(15 23 42 / 6%);
position: relative;
display: flex;
flex-direction: column;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 22px 48px rgb(15 23 42 / 12%);
}
.pricing-card.featured {
border-color: #6C587B;
box-shadow: 0 22px 48px rgb(108 88 123 / 18%);
background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
}
.pricing-card.featured::before {
content: none;
}
.badge-popular {
position: absolute;
top: 20px;
right: 20px;
background: #F05F40;
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 6px 14px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plan-name {
color: #1f1630;
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 1.55rem;
margin-bottom: 10px;
}
.plan-desc {
color: #615b67;
line-height: 1.7;
min-height: 52px;
margin-bottom: 12px;
}
.plan-audience,
.plan-price-summary {
color: #6c587b;
font-size: .88rem;
font-weight: 600;
}
.plan-audience {
margin-bottom: 18px;
}
.plan-price {
display: flex;
align-items: flex-end;
gap: 8px;
margin-bottom: 6px;
}
.plan-price .amount {
font-size: 2.4rem;
line-height: 1;
font-weight: 800;
color: #241c2b;
}
.plan-price .period {
color: #7a7283;
font-size: .92rem;
margin-bottom: 5px;
}
.plan-price-summary {
margin-bottom: 20px;
}
.plan-features {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: grid;
gap: 10px;
flex: 1;
}
.plan-features li {
display: flex;
gap: 10px;
align-items: flex-start;
color: #4e4857;
line-height: 1.6;
}
.plan-features i {
color: #0f9f63;
margin-top: 4px;
}
.plan-meta-row {
display: flex;
justify-content: space-between;
gap: 12px;
border-top: 1px solid rgb(108 88 123 / 12%);
padding-top: 16px;
margin-top: auto;
color: #70697b;
font-size: .86rem;
}
.btn-plan {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 52px;
border-radius: 14px;
font-weight: 700;
margin-top: 20px;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-plan:hover {
transform: translateY(-1px);
text-decoration: none;
}
.btn-plan-primary {
background: #6c587b;
color: #fff;
box-shadow: 0 12px 24px rgb(108 88 123 / 22%);
}
.btn-plan-primary:hover,
.btn-plan-primary:focus {
background: #5a4868;
color: #fff;
}
.btn-plan-outline {
background: #fff;
color: #6c587b;
border: 1px solid rgb(108 88 123 / 25%);
}
.btn-plan-outline:hover,
.btn-plan-outline:focus {
background: #f7f3fb;
color: #5a4868;
}
.btn-plan-dark {
background: #1f1630;
color: #fff;
}
.btn-plan-dark:hover,
.btn-plan-dark:focus {
background: #120d1b;
color: #fff;
}
.pricing-section-heading {
max-width: 780px;
margin: 0 auto 28px;
}
.pricing-section-heading h2 {
color: #241c2b;
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 2rem;
margin: 0 0 12px;
}
.pricing-section-heading p {
color: #655f6c;
line-height: 1.7;
}
.pricing-section-eyebrow {
color: #6c587b;
text-transform: uppercase;
letter-spacing: .16em;
font-size: .75rem;
font-weight: 700;
margin-bottom: 10px;
}
.pricing-compare-section,
.pricing-coverage-section,
.pricing-stack-section,
.pricing-integration-path-section,
.pricing-roadmap-section,
.pricing-enterprise-cta {
margin: 60px 0 0;
}
.pricing-coverage-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.pricing-coverage-card {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 14px 34px rgb(15 23 42 / 6%);
padding: 24px;
}
.pricing-coverage-card h3 {
margin: 0 0 10px;
color: #241c2b;
font-size: 1.08rem;
}
.pricing-coverage-card p {
margin: 0 0 16px;
color: #655f6c;
line-height: 1.65;
}
.pricing-coverage-tiers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pricing-coverage-tier {
display: block;
background: #faf6fd;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 12px;
padding: 10px;
color: #5d5568;
font-size: .84rem;
}
.pricing-coverage-tier strong {
display: block;
color: #241c2b;
margin-bottom: 4px;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.pricing-integration-path-table-wrap {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 16px 40px rgb(15 23 42 / 6%);
overflow-x: auto;
}
.pricing-integration-path-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.pricing-integration-path-table th,
.pricing-integration-path-table td {
padding: 18px 20px;
border-bottom: 1px solid rgb(108 88 123 / 8%);
text-align: left;
vertical-align: top;
}
.pricing-integration-path-table th {
background: #f8f5fb;
color: #241c2b;
font-weight: 700;
}
.pricing-integration-phase {
display: inline-flex;
margin-bottom: 8px;
padding: 4px 10px;
border-radius: 999px;
background: #f6f0fb;
color: #6c587b;
font-size: .74rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.pricing-integration-path-table td strong {
display: block;
color: #241c2b;
}
.pricing-compare-table-wrap {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 16px 40px rgb(15 23 42 / 6%);
overflow-x: auto;
}
.pricing-compare-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.pricing-compare-table th,
.pricing-compare-table td {
padding: 18px 20px;
border-bottom: 1px solid rgb(108 88 123 / 8%);
text-align: left;
}
.pricing-compare-table th {
background: #f8f5fb;
color: #241c2b;
font-weight: 700;
}
.pricing-check {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.pricing-check--yes {
color: #0d8d58;
}
.pricing-check--no {
color: #8b8593;
}
.pricing-stack-card,
.pricing-roadmap-step {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 14px 34px rgb(15 23 42 / 6%);
padding: 28px;
height: 100%;
}
.pricing-stack-card i {
width: 54px;
height: 54px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f6f0fb;
color: #6c587b;
font-size: 1.3rem;
margin-bottom: 16px;
}
.pricing-stack-card h3,
.pricing-roadmap-step h3 {
color: #241c2b;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 12px;
}
.pricing-stack-card p,
.pricing-roadmap-step p {
color: #655f6c;
line-height: 1.7;
margin-bottom: 0;
}
.pricing-roadmap-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.pricing-roadmap-step span {
display: inline-flex;
margin-bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: #f6f0fb;
color: #6c587b;
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.pricing-enterprise-cta__inner {
background: linear-gradient(135deg, #241c2b 0%, #6c587b 100%);
border-radius: 28px;
color: #fff;
padding: 36px;
display: flex;
justify-content: space-between;
gap: 24px;
align-items: center;
}
.pricing-enterprise-cta__inner h2 {
color: #fff;
margin: 0 0 12px;
font-family: TondoBold, 'Open Sans', sans-serif;
}
.pricing-enterprise-cta__inner p:last-child {
margin-bottom: 0;
color: rgb(255 255 255 / 85%);
}
.pricing-enterprise-cta__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.pricing-enterprise-cta__actions .btn-default {
background: rgb(255 255 255 / 12%);
border-color: rgb(255 255 255 / 18%);
color: #fff;
}
.pricing-enterprise-cta__actions .btn-default:hover,
.pricing-enterprise-cta__actions .btn-default:focus {
background: rgb(255 255 255 / 22%);
color: #fff;
}
.pricing-addons-section { padding: 48px 0; }
.pricing-addons-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
}
.pricing-addon-card {
background: rgb(255 255 255 / 96%);
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 16px;
box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pricing-addon-card h3 {
font-size: 1rem;
color: #241c2b;
margin: 0;
}
.pricing-addon-card p {
font-size: 0.88rem;
color: #655f6c;
margin: 0;
flex: 1;
}
.pricing-addon-price {
font-weight: 600;
color: var(--public-accent, #6C587B);
font-size: 0.92rem;
}
@media (width <= 767px) {
.pricing-addons-grid {
grid-template-columns: 1fr;
}
}
@media (width >= 768px) and (width <= 991px) {
.pricing-addons-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.contact-hero {
background: linear-gradient(135deg, #6C587B 0%, #5a4868 100%);
color: #fff;
padding: 60px 0;
text-align: center;
}
.contact-hero h1 {
font-family: TondoBold, 'Open Sans', sans-serif;
font-size: 36px;
font-weight: bold;
}
.contact-container {
max-width: 1000px;
margin: 40px auto 60px;
}
.contact-card {
background: #fff;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 4px 24px rgb(0 0 0 / 6%);
margin-bottom: 24px;
}
.contact-card .contact-icon {
width: 56px;
height: 56px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.3rem;
}
.contact-icon-email { background: linear-gradient(135deg, #6c587b, #5a4868); }
.contact-icon-support { background: linear-gradient(135deg, #22c55e, #16a34a); }
.contact-icon-sales { background: linear-gradient(135deg, #f59e0b, #d97706); }
.contact-card h3 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
}
.contact-card p {
color: #777;
font-size: .9rem;
margin-bottom: 8px;
}
.contact-card a {
color: #6c587b;
font-weight: 600;
}
.contact-form-card {
background: #fff;
border-radius: 16px;
padding: 40px;
box-shadow: 0 4px 24px rgb(0 0 0 / 6%);
}
.contact-form-card h2 {
text-align: center;
font-weight: 700;
margin-bottom: 8px;
}
.contact-form-card .subtitle {
text-align: center;
color: #777;
font-size: .9rem;
margin-bottom: 30px;
}
.contact-methods {
padding: 50px 0;
}
.contact-method-card {
text-align: center;
padding: 30px 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 30px;
transition: box-shadow 0.3s ease;
}
.contact-method-card:hover {
box-shadow: 0 5px 20px rgb(0 0 0 / 10%);
}
.contact-method-card i {
font-size: 36px;
color: #6C587B;
margin-bottom: 15px;
}
.contact-method-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
.contact-method-card p {
color: #666;
font-size: 14px;
}
.contact-method-card a {
color: #6C587B;
font-weight: 600;
}
.contact-form-section {
background: #f8f8f8;
padding: 50px 0;
}
.auth-remember-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.auth-remember-row .checkbox-inline {
display: inline;
font-size: 13px;
color: #666;
cursor: pointer;
}
.auth-remember-row .checkbox-inline input {
margin-right: 6px;
}
.auth-forgot-link {
font-size: 13px;
color: #6c587b;
}
.auth-forgot-link:hover {
color: #5a4868;
}
.auth-or-divider {
display: flex;
align-items: center;
margin: 25px 0;
gap: 10px;
}
.auth-or-divider .line {
flex: 1;
height: 1px;
background: #eee;
}
.auth-or-divider span {
color: #999;
font-size: 13px;
}
.auth-social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.btn-oauth-google {
border: 1px solid #4285f4;
color: #4285f4;
}
.btn-oauth-google:hover {
background: #4285f4;
color: #fff;
}
.btn-oauth-github {
border: 1px solid #333;
color: #333;
}
.btn-oauth-github:hover {
background: #333;
color: #fff;
}
.btn-magic-link {
border: 1px dashed #6c587b;
color: #6c587b;
}
.btn-magic-link:hover {
background: #f8f5fa;
}
.auth-bottom-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
}
.auth-bottom-link + .auth-bottom-link {
margin-top: 10px;
}
.auth-info-box {
background: #f9f9f9;
border-left: 4px solid #6c587b;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 13px;
color: #666;
line-height: 1.6;
}
.btn-brand {
background: var(--public-brand, #6c587b);
border-color: var(--public-brand, #6c587b);
font-weight: 600;
color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
background: var(--public-brand-deep, #5a4868);
border-color: var(--public-brand-deep, #5a4868);
color: #fff;
}
.standalone-card #demoBtn {
margin-top: 10px;
}
@media (width <= 380px) {
.auth-social-grid {
grid-template-columns: 1fr;
}
}
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px 12px;
text-decoration: none;
z-index: var(--z-tooltip);
border-radius: 4px;
}
.skip-link:focus {
top: 6px;
}
@media (width <= 767px) {
.public-story-section--muted {
padding: 24px 18px;
}
.public-roadmap-grid {
grid-template-columns: 1fr;
}
.pricing-intro-grid,
.pricing-cards,
.pricing-roadmap-grid {
grid-template-columns: 1fr;
}
.pricing-card {
padding: 26px 20px;
}
.pricing-compare-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pricing-compare-table {
table-layout: fixed;
min-width: 0;
width: 100%;
font-size: 0.75rem;
}
.pricing-compare-table th,
.pricing-compare-table td {
padding: 8px 6px;
word-break: break-word;
overflow-wrap: break-word;
}
.pricing-compare-table .compare-feature-col,
.pricing-compare-table .compare-feature-label {
width: 26%;
}
.pricing-compare-table th:not(.compare-feature-col),
.pricing-compare-table td:not(.compare-feature-col):not(.compare-feature-label) {
width: 11%;
}
.plan-meta-row,
.pricing-enterprise-cta__inner {
flex-direction: column;
align-items: flex-start;
}
.pricing-enterprise-cta__inner {
padding: 28px 22px;
}
.pricing-enterprise-cta__actions {
width: 100%;
}
.pricing-enterprise-cta__actions .btn {
width: 100%;
}
.footer-bottom .row {
flex-direction: column;
text-align: center;
}
.footer-bottom .col-sm-3 {
margin-bottom: 10px;
text-align: center !important;
}
.footer-social {
justify-content: center;
}
.footer-legal-link {
margin-left: 6px;
margin-right: 6px;
}
.standalone-card {
margin: 20px 15px;
padding: 25px 20px;
}
.info-page-content .page-hero h1,
.info-page-content .info-page-hero h1 {
font-size: 28px;
}
.pricing-hero h1,
.contact-hero h1 {
font-size: 28px;
}
.page-content-wrapper {
padding-top: 70px;
}
.info-page-content {
padding-top: 70px;
}
}
@media (width >= 768px) and (width <= 991px) {
.public-roadmap-grid {
grid-template-columns: 1fr;
}
.pricing-intro-grid,
.pricing-roadmap-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing-enterprise-cta__inner {
flex-direction: column;
align-items: flex-start;
}
.navbar-right .signin_btn {
margin-top: 0;
margin-bottom: 10px;
display: inline-block;
}
.pricing-compare-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pricing-compare-table {
table-layout: fixed;
min-width: 0;
width: 100%;
font-size: 0.85rem;
}
.pricing-compare-table th,
.pricing-compare-table td {
padding: 12px 10px;
word-break: break-word;
overflow-wrap: break-word;
}
.pricing-compare-table .compare-feature-col,
.pricing-compare-table .compare-feature-label {
width: 23%;
}
.pricing-compare-table th:not(.compare-feature-col),
.pricing-compare-table td:not(.compare-feature-col):not(.compare-feature-label) {
width: 11%;
}
}
.auth-page-bg {
background: linear-gradient(135deg, var(--public-brand, #6C587B) 0%, var(--public-brand-deep, #5a4868) 100%);
min-height: 100vh;
}
.auth-page-bg .page-content-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 200px);
}
.auth-page-bg .standalone-card {
margin: 20px auto;
}
.auth-page-bg .site-footer {
position: relative;
}
.auth-page-bg .footer-main {
padding: 25px 0 15px;
}
.auth-page-bg .footer-info-block {
display: none;
}
.pricing-toggle {
text-align: center;
margin: 40px 0 20px;
}
.toggle-label {
font-size: 1rem;
color: #555;
cursor: pointer;
padding: 0 12px;
}
.toggle-label.active {
color: #6c587b;
font-weight: 700;
}
.toggle-switch {
display: inline-block;
width: 50px;
height: 26px;
background: #ccc;
border-radius: 13px;
position: relative;
cursor: pointer;
vertical-align: middle;
transition: background .3s;
}
.toggle-switch.active {
background: #6c587b;
}
.toggle-switch::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
top: 2px;
left: 2px;
transition: transform .3s;
}
.toggle-switch.active::after {
transform: translateX(24px);
}
.save-badge {
display: inline-block;
background: #6c587b;
color: #fff;
padding: 2px 10px;
border-radius: 12px;
font-size: .75rem;
font-weight: 700;
margin-left: 6px;
vertical-align: middle;
}
.faq-section {
max-width: 800px;
margin: 60px auto;
padding: 0 20px;
}
.faq-section h2 {
text-align: center;
margin-bottom: 32px;
font-weight: 700;
}
.faq-item {
margin-bottom: 16px;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}
.faq-item summary {
padding: 16px 20px;
font-weight: 600;
cursor: pointer;
font-size: .95rem;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
float: right;
font-size: 1.2rem;
color: #6c587b;
}
.faq-item[open] summary::after {
content: "\2212";
}
.faq-item p {
padding: 0 20px 16px;
color: #666;
font-size: .9rem;
line-height: 1.6;
}
.pricing-help-cta {
text-align: center;
padding: 40px 20px 20px;
color: #888;
}
.demo-container {
max-width: 900px;
margin: -30px auto 40px;
padding: 0 20px;
}
.demo-roles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.demo-card {
background: #fff;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 4px 24px rgb(0 0 0 / 8%);
transition: transform .2s, box-shadow .2s;
}
.demo-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgb(0 0 0 / 14%);
}
.icon-circle {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.5rem;
color: #fff;
}
.icon-admin {
background: linear-gradient(135deg, #6c587b, #5a4868);
}
.icon-user {
background: linear-gradient(135deg, #22c55e, #16a34a);
}
.icon-manager {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.demo-card h3 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 8px;
color: #333;
}
.demo-card p {
font-size: .88rem;
color: #777;
margin-bottom: 20px;
line-height: 1.5;
}
.demo-user-role-label {
font-size: .82rem !important;
color: #059669 !important;
margin-bottom: 10px !important;
letter-spacing: .02em;
}
.demo-features {
list-style: none;
padding: 0;
margin: 0 0 20px;
text-align: left;
}
.demo-features li {
padding: 4px 0;
font-size: .83rem;
color: #555;
}
.demo-features li i {
color: #16a34a;
margin-right: 6px;
width: 14px;
text-align: center;
}
.btn-demo {
display: inline-block;
width: 100%;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: .95rem;
font-weight: 700;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, #6c587b, #5a4868);
transition: opacity .2s;
text-decoration: none;
}
.btn-demo:hover {
opacity: .9;
color: #fff;
}
.btn-demo:disabled {
opacity: .6;
cursor: not-allowed;
}
.demo-notice {
text-align: center;
max-width: 600px;
margin: 32px auto;
padding: 16px 24px;
background: #fff;
border-radius: 12px;
border-left: 4px solid #6c587b;
box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}
.demo-notice p {
font-size: .88rem;
color: #555;
margin: 0;
line-height: 1.5;
}
.demo-error {
display: none;
text-align: center;
padding: 12px;
color: #dc2626;
font-size: .9rem;
margin-top: 12px;
}
.demo-bottom-cta {
text-align: center;
padding: 20px;
font-size: .9rem;
color: #666;
}
@media (width <= 768px) {
.demo-roles {
grid-template-columns: 1fr;
}
}
.password-requirements {
list-style: none;
padding: 0;
margin: 10px 0 0;
font-size: 12px;
}
.password-requirements li {
padding: 2px 0;
color: #999;
}
.password-requirements li.met {
color: #28a745;
}
.password-requirements li::before {
content: "\2717 ";
}
.password-requirements li.met::before {
content: "\2713 ";
}
.strength-bar {
height: 4px;
border-radius: 2px;
background: #eee;
margin-top: 6px;
}
.strength-bar .fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s, background 0.3s;
}
.match-indicator {
font-size: 12px;
margin-top: 4px;
}
.match-indicator.is-success {
color: #2a8f52;
font-weight: 600;
}
.match-indicator.is-error {
color: #c0392b;
font-weight: 600;
}
.auth-email-hint--error {
color: #c0392b;
font-weight: 600;
}
.signup-wizard-card {
max-width: 540px;
}
.signup-steps {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 30px;
padding: 0;
}
.signup-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.signup-step .step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e9ecef;
color: #999;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
transition: background 0.3s, color 0.3s;
}
.signup-step.active .step-number {
background: #6C587B;
color: #fff;
}
.signup-step.completed .step-number {
background: #28a745;
color: #fff;
}
.signup-step.completed .step-number::after {
content: "\2713";
position: absolute;
}
.signup-step .step-label {
font-size: 12px;
color: #999;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.signup-step.active .step-label,
.signup-step.completed .step-label {
color: #333;
}
.step-connector {
flex: 1;
height: 2px;
background: #e9ecef;
margin: 0 12px;
margin-bottom: 20px;
transition: background 0.3s;
}
.step-connector.active {
background: #28a745;
}
.signup-step-panel {
display: none;
}
.signup-step-panel.active {
display: block;
animation: stepFadeIn 0.3s ease;
}
@keyframes stepFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.signup-step-buttons {
display: flex;
gap: 12px;
margin-top: 10px;
}
.signup-step-buttons .btn:first-child {
flex: 0 0 auto;
}
.signup-step-buttons .btn:last-child {
flex: 1;
}
.signup-no-cc {
text-align: center;
color: #999;
font-size: 12px;
margin-top: 12px;
}
.contact-form-row {
margin-top: 40px;
}
.magic-link-form {
display: none;
margin-top: 20px;
}
.magic-link-form.is-visible {
display: block;
}
.btn-cancel-magic {
margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
.page-preloader {
transition: none !important;
}
.spinner-bounce div {
animation: none !important;
}
.pricing-card:hover,
.demo-card:hover {
transform: none;
}
}
:root {
--z-base: 1;
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-overlay: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-toast: 1080;
--z-tooltip: 1090;
--public-ink: #14213d;
--public-text: #32415d;
--public-muted: #6b7280;
--public-border: rgb(20 33 61 / 10%);
--public-surface: rgb(255 255 255 / 92%);
--public-surface-strong: #fff;
--public-brand: #6c587b;
--public-brand-deep: #4b395d;
--public-accent: #e98a5f;
--public-highlight: #f6efe9;
--public-shadow: 0 18px 50px rgb(20 33 61 / 12%);
--public-shadow-soft: 0 10px 30px rgb(20 33 61 / 8%);
--public-radius: 22px;
}
html {
background:
radial-gradient(circle at top left, rgb(233 138 95 / 20%), transparent 34%),
linear-gradient(180deg, #fffaf6 0%, #f6f7fb 48%, #eef2f8 100%);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid var(--public-brand, #6c587b);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid rgb(255 255 255 / 30%);
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
body {
font-family: Manrope, 'Open Sans', Arial, sans-serif;
color: var(--public-text);
background: transparent;
padding-top: 42px;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
.footer-brand-title,
.pricing-hero h1,
.contact-hero h1,
.info-page-content .page-hero h1,
.info-page-content .info-page-hero h1 {
font-family: Fraunces, Merriweather, serif;
letter-spacing: -0.02em;
}
a {
transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.page-preloader {
background:
radial-gradient(circle at top, rgb(233 138 95 / 18%), transparent 40%),
linear-gradient(135deg, #fff7f2 0%, #eef2f8 100%);
}
.preloader-logo {
color: var(--public-brand-deep);
}
.spinner-bounce div {
background-color: var(--public-accent);
}
.public-utility-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1045;
background: rgb(20 33 61 / 96%);
color: rgb(255 255 255 / 90%);
box-shadow: 0 6px 20px rgb(20 33 61 / 12%);
}
.public-utility-bar__inner {
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: 12px;
line-height: 1.5;
}
.public-utility-bar__message,
.public-utility-bar__actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.public-utility-bar a,
.public-utility-bar span {
color: inherit;
}
.public-pref-switchers {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
}
.public-pref-select {
border: 1px solid rgb(255 255 255 / 22%);
background: rgb(255 255 255 / 10%);
color: #fff;
border-radius: 999px;
height: 30px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
}
.public-pref-select option {
color: #1e2a46;
}
.public-pref-apply {
border: 1px solid rgb(255 255 255 / 24%);
background: rgb(255 255 255 / 14%);
color: #fff;
border-radius: 999px;
padding: 5px 10px;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.public-pref-apply:hover,
.public-pref-apply:focus {
background: rgb(255 255 255 / 24%);
}
.public-utility-bar a:hover,
.public-utility-bar a:focus {
color: #fff;
text-decoration: none;
}
.public-navbar.navbar-default {
top: 42px;
min-height: 76px;
background: rgb(255 255 255 / 92%);
border: 0;
box-shadow: 0 14px 40px rgb(20 33 61 / 10%);
backdrop-filter: blur(14px);
}
.public-navbar .container {
position: relative;
}
.public-navbar .navbar-brand {
height: 76px;
display: flex;
align-items: center;
gap: 10px;
color: var(--public-ink) !important;
}
.navbar-brand.logo_name {
font-size: 24px;
letter-spacing: -0.02em;
}
.brand-wordmark {
display: inline-block;
line-height: 1;
}
.brand-logo {
height: 38px;
width: auto;
max-width: 100%;
object-fit: contain;
margin-top: 0;
margin-right: 0;
background: transparent;
}
.public-nav-links > li > a {
color: var(--public-ink) !important;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
padding-top: 28px;
padding-bottom: 28px;
}
.public-nav-links > li > a:hover,
.public-nav-links > li > a:focus,
.navbar-nav > li.active > a {
color: var(--public-brand) !important;
background: transparent !important;
}
.public-nav-links > li.active > a {
position: relative;
}
.public-nav-links > li.active > a::after {
content: "";
position: absolute;
left: 15px;
right: 15px;
bottom: 18px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--public-brand), var(--public-accent));
}
.public-nav-action {
margin-left: 8px;
}
.public-nav-action > a {
margin: 18px 0 0;
padding: 12px 20px !important;
border-radius: 999px;
font-weight: 800 !important;
line-height: 1 !important;
}
.public-nav-search {
margin-top: 20px;
margin-bottom: 0;
margin-right: 0;
}
.public-nav-search .form-group {
margin-bottom: 0;
}
.public-nav-search .form-control {
border-radius: 999px 0 0 999px;
border: 1px solid rgb(108 88 123 / 18%);
background: #f8f6fa;
font-size: 13px;
width: 160px;
transition: width 0.3s ease, border-color 0.2s ease;
}
.public-nav-search .form-control:focus {
width: 220px;
border-color: var(--public-brand);
box-shadow: 0 0 0 3px rgb(108 88 123 / 8%);
background: #fff;
}
.public-nav-search .input-group-btn .btn {
border-radius: 0 999px 999px 0;
border: 1px solid rgb(108 88 123 / 18%);
border-left: 0;
background: #f8f6fa;
color: #6c587b;
}
.public-nav-search .input-group-btn .btn:hover {
background: var(--public-brand);
color: #fff;
}
.public-nav-links > .dropdown > .dropdown-toggle .caret {
margin-left: 3px;
opacity: 0.6;
}
.public-nav-links > .dropdown > .dropdown-menu {
border: 1px solid rgb(20 33 61 / 8%);
border-radius: 10px;
box-shadow: 0 8px 24px rgb(75 57 93 / 15%);
padding: 6px 0;
min-width: 200px;
margin-top: -2px;
}
.public-nav-links > .dropdown > .dropdown-menu > li > a {
padding: 9px 18px;
color: var(--public-ink);
font-size: 14px;
transition: background 0.15s, color 0.15s;
}
.public-nav-links > .dropdown > .dropdown-menu > li > a:hover,
.public-nav-links > .dropdown > .dropdown-menu > li > a:focus {
background: #f4f1f7;
color: var(--public-brand);
}
.public-nav-action--secondary > a {
border: 1px solid rgb(108 88 123 / 20%);
background: rgb(255 255 255 / 90%);
}
.public-nav-action--secondary > a i {
margin-right: 6px;
}
.public-nav-action--primary > a,
.navbar-right .signin_btn,
.btn-brand {
background-color: var(--public-brand-deep, #4b395d);
background-image: linear-gradient(135deg, var(--public-brand, #6c587b), var(--public-brand-deep, #4b395d));
border-color: transparent;
color: #fff !important;
box-shadow: 0 14px 28px rgb(75 57 93 / 20%);
}
.public-nav-action--primary > a:hover,
.public-nav-action--primary > a:focus,
.navbar-right .signin_btn:hover,
.navbar-right .signin_btn:focus,
.btn-brand:hover,
.btn-brand:focus {
background-color: #3c2c4c;
background-image: linear-gradient(135deg, var(--public-brand-deep, #4b395d), #3c2c4c);
color: #fff !important;
transform: translateY(-1px);
}
.public-nav-links > li.public-nav-action--primary > a,
.public-nav-links > li.public-nav-action--primary.active > a,
.public-nav-links > li.public-nav-action--primary > a:hover,
.public-nav-links > li.public-nav-action--primary > a:focus {
color: #fff !important;
}
.public-account-menu .dropdown-menu {
border: 1px solid rgb(20 33 61 / 8%);
border-radius: 16px;
box-shadow: var(--public-shadow-soft);
overflow: hidden;
}
.public-account-menu .dropdown-menu > li > a {
padding: 10px 16px;
color: var(--public-ink);
}
.page-content-wrapper {
padding-top: 150px;
min-height: calc(100vh - 280px);
}
.info-page-content {
padding-top: 136px;
padding-bottom: 56px;
}
.standalone-card,
.contact-card,
.contact-form-card,
.demo-card,
.pricing-card,
.faq-item,
.demo-notice,
.contact-method-card {
border: 1px solid var(--public-border);
border-radius: var(--public-radius);
box-shadow: var(--public-shadow-soft);
}
.standalone-card {
background: rgb(255 255 255 / 95%);
padding: 42px;
}
.standalone-card .card-header-area .card-logo {
color: var(--public-brand-deep);
}
.standalone-card .card-header-area h1 {
color: var(--public-ink);
}
.standalone-card .subtitle,
.auth-bottom-link,
.auth-info-box,
.contact-card p,
.demo-card p,
.pricing-help-cta,
.demo-bottom-cta {
color: var(--public-muted);
}
.auth-page-bg {
background:
radial-gradient(circle at top left, rgb(233 138 95 / 20%), transparent 30%),
linear-gradient(135deg, #4b395d 0%, #1f3152 100%);
}
.auth-page-bg .standalone-card {
background: rgb(255 255 255 / 96%);
backdrop-filter: blur(12px);
}
.auth-info-box {
background: var(--public-highlight);
border-left-color: var(--public-accent);
border-radius: 14px;
}
.auth-status-card,
.auth-reset-card {
max-width: 520px;
}
.auth-status-panel {
border: 1px solid var(--public-border);
border-radius: 14px;
padding: 18px;
margin-bottom: 18px;
}
.auth-status-panel--loading {
display: flex;
align-items: center;
gap: 14px;
background: rgb(255 255 255 / 75%);
}
.auth-status-title {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--public-ink);
}
.auth-status-copy {
margin: 6px 0 0;
font-size: 14px;
color: var(--public-muted);
}
.auth-inline-loader {
width: 24px;
height: 24px;
border: 2px solid rgb(108 88 123 / 20%);
border-top-color: var(--public-brand);
border-radius: 50%;
animation: auth-spin 0.9s linear infinite;
flex-shrink: 0;
}
.auth-password-wrapper {
position: relative;
}
.auth-password-wrapper .form-control {
padding-right: 44px;
}
.auth-password-toggle {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
border: 0;
background: transparent;
color: var(--public-muted);
line-height: 1;
padding: 4px;
}
.auth-password-toggle:hover,
.auth-password-toggle:focus {
color: var(--public-brand-deep);
}
.auth-strength-meter {
margin-top: 10px;
width: 100%;
height: 5px;
border-radius: 999px;
background: rgb(20 33 61 / 12%);
overflow: hidden;
}
.auth-strength-meter__bar {
width: 0;
height: 100%;
border-radius: inherit;
transition: width 0.25s ease, background-color 0.25s ease;
}
.auth-strength-label {
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-weight: 600;
color: var(--public-muted);
}
.auth-requirements {
margin: 10px 0 0;
padding-left: 18px;
color: var(--public-muted);
font-size: 12px;
line-height: 1.8;
}
.auth-requirements li {
transition: color 0.2s ease;
}
.auth-requirements li.met {
color: #2a8f52;
font-weight: 600;
}
.auth-match-copy {
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
color: var(--public-muted);
}
.auth-match-copy.is-match {
color: #2a8f52;
font-weight: 600;
}
.auth-match-copy.is-mismatch {
color: #c0392b;
font-weight: 600;
}
@keyframes auth-spin {
to {
transform: rotate(360deg);
}
}
.info-page-content .page-hero,
.info-page-content .info-page-hero,
.pricing-hero,
.contact-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgb(233 138 95 / 24%), transparent 28%),
linear-gradient(135deg, #182848 0%, #4b395d 55%, #6c587b 100%);
padding: 84px 0 72px;
margin-bottom: 46px;
}
.info-page-content .page-hero::before,
.info-page-content .info-page-hero::before,
.pricing-hero::before,
.contact-hero::before {
content: "";
position: absolute;
inset: auto -10% -120px auto;
width: 280px;
height: 280px;
border-radius: 50%;
background: rgb(255 255 255 / 8%);
}
.info-page-content .page-hero h1,
.info-page-content .info-page-hero h1,
.pricing-hero h1,
.contact-hero h1 {
font-size: 44px;
margin-bottom: 16px;
}
.info-page-content .page-hero p,
.info-page-content .info-page-hero p {
max-width: 760px;
margin: 0 auto;
font-size: 17px;
opacity: 0.92;
}
.info-page-body {
max-width: 920px;
padding: 40px 44px;
background: rgb(255 255 255 / 90%);
border: 1px solid var(--public-border);
border-radius: 28px;
box-shadow: var(--public-shadow);
line-height: 1.85;
}
.info-page-body h2,
.info-page-body h3,
.contact-form-card h2,
.faq-section h2,
.demo-card h3,
.pricing-card .price {
color: var(--public-ink);
}
.link-brand,
.auth-forgot-link,
.contact-card a,
.contact-method-card a {
color: var(--public-brand-deep);
}
.link-brand:hover,
.auth-forgot-link:hover,
.contact-card a:hover,
.contact-method-card a:hover {
color: var(--public-brand);
}
.pricing-card {
background: linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(248 250 254 / 98%));
padding: 34px 24px;
}
.pricing-card:hover,
.contact-method-card:hover,
.contact-card:hover,
.demo-card:hover {
transform: translateY(-6px);
box-shadow: var(--public-shadow);
}
.pricing-card.featured {
border-color: rgb(108 88 123 / 30%);
background: linear-gradient(180deg, #fff7f2 0%, #fff 100%);
box-shadow: 0 18px 46px rgb(108 88 123 / 16%);
}
.pricing-card.featured::before {
background: linear-gradient(90deg, var(--public-accent), #d46f45);
border-radius: 999px;
padding: 6px 18px;
}
.pricing-card .price {
font-size: 48px;
color: var(--public-brand-deep);
}
.toggle-switch.active,
.save-badge {
background: var(--public-brand-deep);
}
.faq-item summary {
color: var(--public-ink);
}
.faq-item p {
color: var(--public-text);
}
.contact-container {
margin: 50px auto 70px;
}
.contact-card,
.demo-card {
background: linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(248 250 254 / 98%));
}
.contact-form-card,
.demo-notice {
background: rgb(255 255 255 / 94%);
}
.contact-card .contact-icon,
.icon-circle {
box-shadow: 0 12px 24px rgb(20 33 61 / 16%);
}
.btn-demo {
background: linear-gradient(135deg, var(--public-brand), var(--public-brand-deep));
box-shadow: 0 12px 28px rgb(75 57 93 / 18%);
border-radius: 14px;
}
.btn-demo:hover,
.btn-demo:focus {
color: #fff;
opacity: 1;
transform: translateY(-1px);
}
.site-footer {
margin-top: 0;
position: relative;
}
.footer-cta-band {
padding: 0 0 28px;
}
.footer-cta-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background-color: #182848;
background-image:
radial-gradient(circle at top left, rgb(233 138 95 / 20%), transparent 32%),
linear-gradient(135deg, #182848 0%, #4b395d 100%);
color: #fff;
border-radius: 30px 30px 0 0;
padding: 34px 36px;
box-shadow: var(--public-shadow);
}
.footer-eyebrow {
margin: 0 0 8px;
color: rgb(255 255 255 / 72%);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.footer-cta-band h2 {
margin: 0 0 12px;
max-width: 680px;
font-size: 34px;
line-height: 1.15;
}
.footer-cta-copy {
max-width: 680px;
margin: 0;
color: rgb(255 255 255 / 82%);
font-size: 15px;
line-height: 1.7;
}
.footer-cta-band__actions {
display: flex;
gap: 14px;
flex-shrink: 0;
}
.footer-cta-button {
min-width: 150px;
border-radius: 999px;
padding: 14px 24px;
font-weight: 800;
}
.footer-cta-button--ghost {
background: #fff;
color: #182848;
border: 1px solid #fff;
}
.footer-cta-button--ghost:hover,
.footer-cta-button--ghost:focus {
background: rgb(255 255 255 / 90%);
color: #182848;
}
.footer-trust-strip {
padding-bottom: 0;
}
.footer-trust-strip__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: -1px;
}
.footer-trust-item {
padding: 22px 24px;
background: rgb(255 255 255 / 84%);
border: 1px solid rgb(255 255 255 / 80%);
color: var(--public-ink);
box-shadow: var(--public-shadow-soft);
}
.footer-trust-item strong {
display: block;
margin-bottom: 6px;
font-size: 15px;
}
.footer-trust-item span {
display: block;
color: var(--public-muted);
font-size: 13px;
line-height: 1.7;
}
.footer-usecase-strip {
padding: 18px 0 0;
}
.footer-usecase-strip__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.footer-usecase-card {
display: block;
padding: 18px;
border-radius: 16px;
border: 1px solid rgb(20 33 61 / 8%);
background: rgb(255 255 255 / 90%);
box-shadow: var(--public-shadow-soft);
color: var(--public-ink);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.footer-usecase-card strong {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: var(--public-ink);
}
.footer-usecase-card span {
display: block;
color: var(--public-muted);
font-size: 12px;
line-height: 1.6;
}
.footer-usecase-card:hover,
.footer-usecase-card:focus {
color: var(--public-ink);
text-decoration: none;
border-color: rgb(108 88 123 / 35%);
box-shadow: 0 16px 36px rgb(20 33 61 / 14%);
transform: translateY(-2px);
}
.footer-main {
background:
linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(244 246 250 / 98%));
padding: 44px 0 28px;
color: var(--public-text);
border-top: 1px solid rgb(20 33 61 / 6%);
}
.footer-brand-column {
padding-right: 28px;
}
.footer-brand-title {
margin: 0 0 14px;
color: var(--public-ink);
font-size: 34px;
}
.footer-text {
color: var(--public-muted);
font-size: 14px;
}
.footer-text--lead {
max-width: 380px;
margin-bottom: 22px;
}
.footer-contact-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
color: var(--public-text);
}
.footer-contact-list i {
color: var(--public-brand);
width: 18px;
margin-top: 3px;
}
.footer-contact-list a,
.footer-contact-list span,
.footer-links a {
color: var(--public-text);
}
.footer-contact-list a:hover,
.footer-links a:hover {
color: var(--public-brand-deep);
text-decoration: none;
}
.footer-heading {
color: var(--public-ink);
font-family: Manrope, 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 16px;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
font-size: 14px;
line-height: 1.6;
}
.footer-bottom {
background: #101826;
padding: 18px 0;
}
.footer-brand a,
.footer-copyright,
.footer-copyright a,
.footer-legal-link,
.footer-social a {
color: rgb(255 255 255 / 90%);
}
.footer-social a:hover,
.footer-legal-link:hover,
.footer-copyright a:hover {
color: #fff;
}
.footer-bottom-links {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.footer-legal-link {
margin-left: 14px;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.skip-link {
background: var(--public-ink);
border-radius: 999px;
}
@media (width <= 1199px) {
.footer-cta-band__inner {
border-radius: 26px 26px 0 0;
}
.footer-cta-band h2 {
font-size: 30px;
}
}
@media (width <= 991px) {
body {
padding-top: 0;
}
.public-utility-bar {
position: relative;
}
.public-navbar.navbar-default {
top: 0;
}
.public-nav-search {
margin: 10px 0;
}
.public-nav-search .form-control {
width: 100%;
}
.public-nav-search .form-control:focus {
width: 100%;
}
.public-nav-links > li > a {
padding-top: 14px;
padding-bottom: 14px;
}
.public-nav-links > li.active > a,
.public-nav-links > li.active > a:hover,
.public-nav-links > li.active > a:focus,
.public-nav-links > .dropdown.active > .dropdown-toggle {
color: #14213d !important;
background-color: #eef4ff !important;
border-radius: 10px;
}
.public-nav-action {
margin-left: 0;
}
.public-nav-action > a,
.navbar-right .signin_btn {
margin-top: 0;
margin-bottom: 10px;
display: inline-block;
}
.page-content-wrapper {
padding-top: 110px;
}
.info-page-content {
padding-top: 104px;
}
.footer-cta-band__inner,
.footer-trust-strip__grid {
grid-template-columns: 1fr;
}
.footer-usecase-strip__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-cta-band__inner {
display: block;
}
.footer-cta-band__actions {
margin-top: 24px;
flex-wrap: wrap;
}
.footer-brand-column {
padding-right: 15px;
margin-bottom: 24px;
}
}
@media (width <= 991px) {
.pricing-coverage-grid {
grid-template-columns: 1fr;
}
}
@media (width <= 767px) {
.pricing-coverage-tiers {
grid-template-columns: 1fr;
}
}
@media (width <= 767px) {
.public-utility-bar__inner {
padding-top: 8px;
padding-bottom: 8px;
}
.public-utility-bar__message,
.public-utility-bar__actions {
width: 100%;
gap: 8px 14px;
}
.public-pref-switchers {
width: 100%;
}
.public-pref-select {
flex: 1 1 auto;
min-width: 0;
}
.public-navbar.navbar-default {
min-height: 68px;
}
.public-navbar .navbar-brand {
height: 68px;
}
.navbar-brand.logo_name {
font-size: 21px;
}
.standalone-card,
.contact-form-card,
.info-page-body {
padding: 28px 22px;
}
.info-page-content .page-hero,
.info-page-content .info-page-hero,
.pricing-hero,
.contact-hero {
padding: 68px 0 56px;
}
.info-page-content .page-hero h1,
.info-page-content .info-page-hero h1,
.pricing-hero h1,
.contact-hero h1 {
font-size: 32px;
}
.footer-cta-band__inner {
padding: 28px 24px;
border-radius: 24px 24px 0 0;
}
.footer-cta-band h2,
.footer-brand-title {
font-size: 28px;
}
.footer-trust-item {
padding: 18px;
}
.footer-usecase-strip__grid {
grid-template-columns: 1fr;
}
.footer-bottom-links {
justify-content: center;
}
}
.crm-about-content {
font-size: 15px;
line-height: 1.85;
margin-bottom: 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--public-border);
}
.public-section-intro {
max-width: 760px;
margin: 0 auto 34px;
text-align: center;
}
.public-section-intro .lead {
color: var(--public-text);
font-size: 18px;
line-height: 1.8;
}
.public-section-divider {
margin: 40px 0;
border-color: rgb(20 33 61 / 8%);
}
.public-section-heading {
margin-bottom: 28px;
text-align: center;
color: var(--public-ink);
}
.public-tabs {
margin-bottom: 28px !important;
border-bottom: 1px solid rgb(20 33 61 / 8%);
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.public-tabs > li {
float: none;
margin-bottom: 0;
}
.public-tabs > li > a {
margin-right: 0;
border: 1px solid rgb(20 33 61 / 8%);
border-radius: 999px;
background: rgb(255 255 255 / 88%);
color: var(--public-text);
font-weight: 700;
padding: 10px 16px;
}
.public-tabs > li.active > a,
.public-tabs > li.active > a:hover,
.public-tabs > li.active > a:focus,
.public-tabs > li > a:hover,
.public-tabs > li > a:focus {
background: linear-gradient(135deg, var(--public-brand), var(--public-brand-deep));
border-color: transparent;
color: #fff;
}
.products-proof-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 8px 0 34px;
}
.products-proof-item {
background: rgb(255 255 255 / 96%);
border: 1px solid var(--public-border);
border-radius: 18px;
box-shadow: var(--public-shadow-soft);
padding: 20px;
}
.products-proof-item strong,
.products-proof-item span {
display: block;
}
.products-proof-item strong {
color: var(--public-ink);
font-size: 1rem;
margin-bottom: 8px;
}
.products-proof-item span {
color: var(--public-muted);
line-height: 1.65;
font-size: .92rem;
}
.products-story-shell,
.products-blueprint-shell,
.products-connections-shell,
.solution-finder-shell {
margin-bottom: 34px;
}
.public-pillar-grid,
.products-blueprint-grid,
.products-connection-grid {
display: grid;
gap: 22px;
}
.public-pillar-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.public-pillar-card,
.products-blueprint-card,
.products-connection-card,
.wizard-summary {
background: rgb(255 255 255 / 96%);
border: 1px solid var(--public-border);
border-radius: 22px;
box-shadow: var(--public-shadow-soft);
}
.public-pillar-card {
padding: 24px;
}
.public-pillar-card__icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgb(108 88 123 / 12%), rgb(240 95 64 / 14%));
color: var(--public-brand);
font-size: 1.35rem;
margin-bottom: 16px;
}
.public-pillar-card h3,
.products-blueprint-card h3,
.products-connection-card h3 {
color: var(--public-ink);
font-size: 1.18rem;
font-weight: 700;
margin: 0 0 12px;
}
.public-pillar-card p,
.products-blueprint-card p,
.products-connection-card p {
color: var(--public-muted);
line-height: 1.7;
margin: 0;
}
.products-blueprint-grid,
.products-connection-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.products-blueprint-card,
.products-connection-card {
padding: 28px;
}
.products-blueprint-card__tag {
display: inline-flex;
margin-bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: #f6f0fb;
color: #6c587b;
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.products-blueprint-card ul {
margin: 14px 0 0;
padding-left: 18px;
color: var(--public-text);
line-height: 1.7;
}
.solution-step-col {
margin-bottom: 30px;
}
.products-overview-card {
padding: 30px;
border: 1px solid var(--public-border);
border-radius: 22px;
min-height: 280px;
background: linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(247 249 252 / 98%) 100%);
box-shadow: var(--public-shadow-soft);
}
.products-overview-card .fa {
margin-bottom: 15px;
}
.product-solutions-intro {
margin-bottom: 18px;
}
.solution-step {
padding: 25px;
border: 1px solid var(--public-border);
border-radius: 24px;
min-height: 520px;
background: rgb(255 255 255 / 96%);
box-shadow: var(--public-shadow-soft);
}
.solution-step.is-active {
border-color: rgb(233 138 95 / 50%);
box-shadow: 0 18px 46px rgb(233 138 95 / 14%);
}
.solution-step-number-wrap {
text-align: center;
margin-bottom: 15px;
}
.solution-step-number {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #9ca3af;
color: #fff;
font-size: 18px;
font-weight: 800;
}
.solution-step.is-active .solution-step-number {
background: linear-gradient(135deg, var(--public-accent), #d46f45);
}
.solution-step-note {
margin-bottom: 12px;
text-align: center;
color: var(--public-muted);
font-size: 12px;
}
.solution-step-search,
.solution-step-select {
margin-bottom: 12px;
}
.wizard-preview {
margin-top: 16px;
padding: 16px;
border-radius: 16px;
background: #faf7f3;
min-height: 180px;
border: 1px solid rgb(233 138 95 / 12%);
}
.wizard-preview-media {
margin-bottom: 8px;
}
.wizard-preview img {
width: 100%;
max-height: 140px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.wizard-preview-title {
font-size: 16px;
font-weight: 700;
color: #2a2f45;
margin-bottom: 6px;
}
.wizard-preview-copy {
color: #5b6475;
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.wizard-preview-link {
display: inline-block;
margin-top: 12px;
color: var(--public-accent);
font-weight: 700;
}
.wizard-meta-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.wizard-meta-pill {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: #fff;
border: 1px solid #f0dfd8;
color: #7a5a4f;
font-size: 12px;
font-weight: 600;
}
.wizard-metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.wizard-metric {
border-radius: 12px;
background: #fff;
border: 1px solid #efe3df;
padding: 10px;
}
.wizard-metric-label {
color: #8d7d76;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wizard-metric-value {
color: #1f2638;
font-size: 15px;
font-weight: 700;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.feature-card {
display: flex;
gap: 12px;
padding: 12px;
border: 1px solid #ececec;
border-radius: 12px;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
border-color: var(--public-accent);
box-shadow: 0 10px 24px rgb(240 95 64 / 12%);
transform: translateY(-1px);
}
.feature-card.is-selected {
border-color: var(--public-accent);
background: #fff8f6;
}
.feature-card-check {
padding-top: 4px;
}
.feature-card-media {
width: 64px;
height: 64px;
border-radius: 12px;
background: #f4f4f4;
object-fit: cover;
flex: 0 0 64px;
}
.feature-card-body {
flex: 1;
min-width: 0;
}
.feature-card-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.feature-card-title {
font-weight: 700;
color: #20263a;
margin: 0;
}
.feature-card-price {
color: var(--public-accent);
font-weight: 700;
white-space: nowrap;
}
.feature-card-copy {
color: #616b7c;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
.feature-card-actions {
display: flex;
gap: 10px;
margin-top: 10px;
align-items: center;
}
.feature-card-link {
color: var(--public-accent);
font-weight: 700;
font-size: 12px;
}
.feature-card-note {
color: #8a7a73;
font-size: 12px;
}
.plan-tiers-panel {
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #f7f3f1;
border: 1px solid #f0e4df;
display: none;
}
.plan-tiers-panel.is-open {
display: block;
}
.plan-tiers-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #9e8d86;
margin-bottom: 10px;
}
.plan-tiers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 8px;
}
.plan-tier-card {
background: #fff;
border: 1px solid #ece2de;
border-radius: 10px;
padding: 10px;
text-align: center;
}
.plan-tier-name {
font-size: 12px;
font-weight: 700;
color: #20263a;
margin-bottom: 4px;
}
.plan-tier-cost {
font-size: 18px;
font-weight: 800;
color: var(--public-accent);
line-height: 1.1;
}
.plan-tier-period {
font-size: 11px;
color: #9b9b9b;
margin-bottom: 6px;
}
.plan-tier-meta {
font-size: 11px;
color: #78716c;
line-height: 1.5;
}
.btn-toggle-plans {
background: none;
border: 1px solid #f0cec5;
color: #c05a3f;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.btn-toggle-plans:hover {
background: var(--public-accent);
color: #fff;
}
.wizard-summary-cta {
padding-top: 18px;
text-align: center;
}
.wizard-summary {
margin-bottom: 30px;
padding: 28px;
}
.wizard-summary-title {
margin-top: 0;
margin-bottom: 10px;
color: var(--public-ink);
}
.wizard-summary-copy {
margin-bottom: 18px;
}
.wizard-summary-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.wizard-summary-list li {
display: flex;
justify-content: space-between;
gap: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgb(20 33 61 / 8%);
}
.wizard-summary-label {
color: var(--public-muted);
font-weight: 600;
}
.wizard-summary-value {
color: var(--public-ink);
font-weight: 700;
text-align: right;
}
.wizard-summary-button {
display: inline-block;
margin-top: 10px;
}
.wizard-summary-button--ghost {
margin-left: 5px;
}
.feature-list-shell {
max-height: 300px;
overflow-y: auto;
}
.wizard-price-summary {
margin-top: 10px;
font-weight: 700;
}
.wizard-price-details {
margin-top: 8px;
font-size: 12px;
}
.wizard-quote-message {
margin-top: 10px;
}
.quote-panel,
.contact-panel,
.resource-panel,
.resource-media-card,
.training-card,
.document-card,
.knowledge-card,
.contact-quick-card,
.industry-card,
.public-card-col {
margin-bottom: 30px;
}
.public-card-col-sm {
margin-bottom: 25px;
}
.public-card-col-xs {
margin-bottom: 20px;
}
.resource-video {
width: 100%;
max-height: 200px;
display: block;
}
.resource-video--sm {
max-height: 180px;
}
.resource-media-card__placeholder-text {
margin-top: 10px;
}
.resource-media-card--alt {
background: #f7f7f7;
border: 0;
border-radius: 8px;
}
.resource-media-card--alt .resource-media-card__placeholder {
background: #2d1b4e;
color: #fff;
padding: 60px 20px;
text-align: center;
}
.resource-media-card__body {
padding: 15px;
}
.resource-list-card {
padding: 25px;
border: 1px solid #eee;
border-radius: 8px;
}
.resource-list-card__list {
padding-left: 20px;
line-height: 2;
}
.resource-doc-lane {
padding: 20px;
border-left: 4px solid #F05F40;
}
.resource-doc-lane--sales {
border-left-color: #F05F40;
}
.resource-doc-lane--tech {
border-left-color: #3498db;
}
.resource-doc-lane--guides {
border-left-color: #27ae60;
}
.resource-doc-lane--legal {
border-left-color: #f39c12;
}
.resource-gallery-card {
border-radius: 8px;
overflow: hidden;
border: 1px solid #eee;
background: #fff;
}
.resource-gallery-thumb {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.resource-gallery-card__body {
padding: 12px;
}
.resource-gallery-card__title {
margin: 0 0 4px;
}
.resource-gallery-card__desc {
font-size: 12px;
margin: 0;
}
.resource-showcase-card {
background: #f0f0f0;
border-radius: 8px;
padding: 40px 15px;
text-align: center;
min-height: 180px;
}
.resource-showcase-card__icon {
margin-bottom: 10px;
}
.resource-showcase-card__desc {
font-size: 12px;
}
.resource-row-gap {
margin-bottom: 20px;
}
.resource-media-card__title {
margin-top: 0;
}
.resource-media-card__desc {
font-size: 13px;
}
.resource-doc-card {
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
min-height: 160px;
}
.resource-doc-card__head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.resource-doc-card__icon {
flex-shrink: 0;
margin-top: 4px;
}
.resource-doc-card__desc {
margin-top: 6px;
font-size: 13px;
}
.resource-doc-card__rev {
font-size: 11px;
}
.resource-chip {
font-size: 10px;
}
.resource-chip--gap-lg {
margin-left: 6px;
}
.resource-chip--gap-sm {
margin-left: 4px;
}
.resource-separator {
margin: 30px 0;
}
.resource-separator--sm {
margin: 20px 0;
}
.resource-section-heading {
margin-bottom: 30px;
}
.resource-search-results-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
padding: 18px 24px;
background: #f8f6fa;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 16px;
}
.resource-search-results-header h2 {
margin: 0;
font-size: 1.3rem;
color: #241c2b;
}
.resource-guideline-col {
margin-bottom: 15px;
}
.resource-guideline-card {
padding: 15px;
border-left: 4px solid #27ae60;
}
.resource-guideline-card__desc {
margin-top: 5px;
font-size: 13px;
}
.resource-vertical-card {
display: block;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow .2s;
}
.resource-vertical-card:hover,
.resource-vertical-card:focus {
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
text-decoration: none;
color: inherit;
}
.resource-vertical-card__media {
height: 90px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: #f0f0f0;
}
.resource-vertical-card__media--fallback {
background: linear-gradient(135deg, #f05f40, #c94030);
display: flex;
align-items: center;
justify-content: center;
}
.resource-vertical-card__media--fallback .fa {
color: rgb(255 255 255 / 70%);
}
.resource-vertical-card__body {
padding: 12px;
}
.resource-vertical-card__title {
font-size: 13px;
}
.resource-vertical-card__desc {
font-size: 11px;
margin: 4px 0 0;
}
.resource-product-card {
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
min-height: 140px;
}
.resource-product-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.resource-product-card__title {
margin: 0 0 8px;
}
.resource-product-card__price {
color: #f05f40;
white-space: nowrap;
}
.resource-product-card__desc {
font-size: 13px;
margin: 0;
}
.product-mini-card {
background: rgb(255 255 255 / 94%);
border: 1px solid var(--public-border);
border-radius: 20px;
box-shadow: var(--public-shadow-soft);
}
.quote-panel,
.contact-panel,
.resource-panel {
padding: 30px;
}
.quote-panel-message,
.contact-panel-copy {
margin-bottom: 20px;
color: var(--public-muted);
}
.products-quote-row {
margin: 30px 0;
}
.final-cta {
margin-top: 30px;
margin-bottom: 40px;
text-align: center;
}
.final-cta p {
margin-bottom: 20px;
color: var(--public-muted);
}
.final-cta-actions {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.about-proof-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 28px;
}
.about-proof-item {
background: var(--public-surface-strong, #fff);
border: 1px solid var(--public-border, rgb(20 33 61 / 10%));
border-radius: var(--public-radius, 22px);
box-shadow: var(--public-shadow-soft, 0 10px 30px rgb(20 33 61 / 8%));
padding: 26px;
}
.about-proof-item strong {
display: block;
margin-bottom: 8px;
font-size: 16px;
color: var(--public-ink, #14213d);
}
.about-proof-item span {
display: block;
color: var(--public-muted, #6b7280);
font-size: 14px;
line-height: 1.75;
}
.about-capability-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 24px;
}
.about-capability-card {
background: var(--public-surface-strong, #fff);
border: 1px solid var(--public-border, rgb(20 33 61 / 10%));
border-radius: var(--public-radius, 22px);
box-shadow: var(--public-shadow-soft, 0 10px 30px rgb(20 33 61 / 8%));
padding: 26px;
}
.about-capability-card h3 {
margin: 0 0 10px;
color: var(--public-ink, #14213d);
font-size: 18px;
}
.about-capability-card p {
margin: 0;
color: var(--public-muted, #6b7280);
line-height: 1.75;
}
@media (width <= 991px) {
.about-proof-strip,
.about-capability-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (width <= 767px) {
.about-proof-strip,
.about-capability-grid {
grid-template-columns: 1fr;
}
}
.pricing-buyers-guide,
.pricing-includes-grid,
.pricing-implementation-grid {
display: grid;
gap: 20px;
}
.pricing-buyers-guide,
.pricing-includes-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pricing-implementation-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-guide-card,
.pricing-include-card,
.pricing-implementation-card {
background: rgb(255 255 255 / 96%);
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 14px 34px rgb(15 23 42 / 6%);
padding: 24px;
}
.pricing-buyers-guide {
margin: 0 0 28px;
}
.pricing-guide-card strong,
.pricing-guide-card span {
display: block;
}
.pricing-guide-card strong,
.pricing-include-card h3,
.pricing-implementation-card h3 {
color: #241c2b;
margin-bottom: 10px;
}
.pricing-guide-card span,
.pricing-include-card p,
.pricing-implementation-card p {
color: #655f6c;
line-height: 1.7;
margin: 0;
}
.plan-kicker {
display: inline-flex;
margin-bottom: 12px;
padding: 6px 12px;
border-radius: 999px;
background: #f6f0fb;
color: #6c587b;
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.plan-best-for {
color: #5f5866;
line-height: 1.65;
margin-bottom: 16px;
font-size: .92rem;
}
.plan-module-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.plan-module-chip {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: #faf6fd;
border: 1px solid rgb(108 88 123 / 12%);
color: #6c587b;
font-size: .78rem;
font-weight: 700;
}
.pricing-includes-section,
.pricing-implementation-section {
margin: 54px 0 0;
}
.pricing-feature-inventory-section,
.pricing-stack-section,
.pricing-integration-path-section,
.pricing-roadmap-section {
margin-top: 54px;
}
.pricing-feature-inventory-grid,
.pricing-integration-coverage-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing-feature-inventory-card,
.pricing-integration-coverage-card {
background: rgb(255 255 255 / 96%);
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 20px;
box-shadow: 0 14px 34px rgb(15 23 42 / 6%);
padding: 24px;
}
.pricing-feature-inventory-card h3,
.pricing-integration-coverage-card h3 {
color: #241c2b;
margin: 0 0 12px;
}
.pricing-feature-inventory-card ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.pricing-feature-inventory-card li {
color: #655f6c;
line-height: 1.6;
}
.pricing-feature-inventory-card li i {
color: var(--public-accent);
margin-right: 8px;
}
.pricing-integration-coverage-grid {
margin-top: 22px;
}
.pricing-integration-coverage-card p {
margin: 0;
color: #655f6c;
line-height: 1.7;
}
.pricing-implementation-card span {
display: inline-flex;
margin-bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: #f6f0fb;
color: #6c587b;
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.footer-navigation-strip {
padding: 0 0 24px;
background: #0f1728;
}
.footer-navigation-strip__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.footer-navigation-card {
display: block;
text-decoration: none;
background: rgb(255 255 255 / 4%);
border: 1px solid rgb(255 255 255 / 8%);
border-radius: 18px;
padding: 20px;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.footer-navigation-card strong,
.footer-navigation-card span {
display: block;
}
.footer-navigation-card strong {
color: #fff;
margin-bottom: 8px;
}
.footer-navigation-card span {
color: rgb(255 255 255 / 74%);
line-height: 1.65;
}
.footer-navigation-card:hover,
.footer-navigation-card:focus {
text-decoration: none;
transform: translateY(-2px);
border-color: rgb(240 95 64 / 42%);
background: rgb(255 255 255 / 6%);
}
.footer-global-strip {
padding: 0 0 28px;
background: #0f1728;
}
.footer-compliance-strip {
padding: 0 0 28px;
background: #0f1728;
}
.footer-compliance-strip__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-radius: 16px;
border: 1px solid rgb(255 255 255 / 8%);
background-color: #0c1220;  
background: rgb(12 18 32 / 95%);
padding: 16px 20px;
}
.footer-compliance-strip__copy {
color: rgb(255 255 255 / 76%);
margin: 0;
}
.footer-compliance-strip__links {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.footer-compliance-strip__links a {
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgb(255 255 255 / 20%);
text-decoration: none;
}
.footer-compliance-strip__links a:hover,
.footer-compliance-strip__links a:focus {
color: #fff;
border-color: rgb(240 95 64 / 52%);
background: rgb(240 95 64 / 20%);
text-decoration: none;
}
.footer-newsletter-strip {
padding: 40px 0;
background:
radial-gradient(circle at bottom right, rgb(233 138 95 / 12%), transparent 36%),
linear-gradient(180deg, #f6f7fb 0%, #fffaf6 100%);
}
.footer-newsletter-strip__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.footer-newsletter-copy h3 {
margin: 0 0 6px;
color: var(--public-ink, #14213d);
font-size: 24px;
}
.footer-newsletter-copy p {
margin: 0;
color: var(--public-muted, #6b7280);
font-size: 15px;
}
.footer-newsletter-form {
flex: 1;
min-width: 280px;
max-width: 480px;
}
.footer-newsletter-input-group {
display: flex;
gap: 8px;
}
.footer-newsletter-input-group .form-control {
height: 46px;
border-radius: 14px;
border: 1px solid var(--public-border, rgb(20 33 61 / 10%));
box-shadow: none;
flex: 1;
}
.footer-newsletter-input-group .btn {
height: 46px;
border-radius: 14px;
padding: 0 24px;
white-space: nowrap;
}
.footer-newsletter-disclaimer {
margin: 8px 0 0;
font-size: 12px;
color: var(--public-muted, #6b7280);
}
.footer-newsletter-disclaimer a {
color: var(--public-brand-deep, #4b395d);
}
@media (width <= 767px) {
.footer-newsletter-strip__inner {
flex-direction: column;
text-align: center;
}
.footer-newsletter-form {
max-width: 100%;
width: 100%;
}
.footer-newsletter-input-group {
flex-direction: column;
}
.footer-newsletter-input-group .btn {
width: 100%;
}
}
.info-page-meta {
margin-bottom: 24px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.info-page-meta__chip {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 8px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: #5a5363;
border: 1px solid rgb(108 88 123 / 20%);
background: rgb(246 240 251 / 62%);
}
.footer-global-strip__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.footer-global-item {
border-radius: 16px;
border: 1px solid rgb(255 255 255 / 8%);
background: rgb(255 255 255 / 3%);
padding: 18px;
}
.footer-global-item strong,
.footer-global-item span {
display: block;
}
.footer-global-item strong {
color: #fff;
margin-bottom: 8px;
}
.footer-global-item span {
color: rgb(255 255 255 / 72%);
line-height: 1.65;
}
.resource-hub-card {
padding: 30px;
border: 1px solid var(--public-border);
border-radius: 20px;
min-height: 250px;
background: linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(247 249 252 / 98%));
box-shadow: var(--public-shadow-soft);
text-align: center;
}
.resource-hub-card .fa,
.resource-media-card .fa,
.contact-quick-card .fa,
.knowledge-card .fa {
margin-bottom: 12px;
}
.resource-hub-card .btn,
.training-card .btn,
.document-card .btn {
margin-top: 12px;
}
.knowledge-card {
padding: 22px;
border-left: 4px solid var(--public-accent);
}
.knowledge-card ul,
.training-card ul,
.document-card ul {
padding-left: 20px;
}
.resource-media-card {
overflow: hidden;
}
.resource-media-card__body {
padding: 15px;
}
.resource-media-card__placeholder {
padding: 60px 20px;
text-align: center;
background: linear-gradient(135deg, #2d1b4e, #182848);
color: #fff;
}
.document-card__head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.document-card__meta {
margin-top: 6px;
font-size: 11px;
color: var(--public-muted);
}
.industry-card,
.product-mini-card,
.contact-quick-card {
padding: 18px;
}
.industry-card {
display: block;
color: inherit;
text-decoration: none;
overflow: hidden;
}
.industry-card:hover {
color: inherit;
text-decoration: none;
transform: translateY(-2px);
box-shadow: var(--public-shadow);
}
.industry-card__image {
height: 96px;
background-size: cover;
background-position: center;
border-radius: 14px;
margin-bottom: 12px;
background-color: #f0f0f0;
}
.industry-card__image--fallback {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--public-accent), #c94030);
}
.contact-directory {
margin-top: 18px;
}
.contact-directory-empty,
.department-detail-placeholder {
padding: 20px;
text-align: center;
color: var(--public-muted);
}
.department-detail-card {
padding: 25px;
min-height: 300px;
}
.department-detail-content {
text-align: center;
padding: 30px;
}
.department-detail-content .fa-user-circle {
color: var(--public-accent);
margin-bottom: 15px;
}
.department-detail-placeholder {
padding-top: 80px;
}
.contact-quick-row {
margin-top: 20px;
}
.contact-panel-title {
margin-top: 0;
}
.contact-feedback-toggle {
margin-bottom: 15px;
}
.rating-stars {
font-size: 28px;
cursor: pointer;
color: #ddd;
text-align: center;
margin: 10px 0;
}
.status-alert {
margin-bottom: 16px;
}
@media (width <= 991px) {
.solution-step {
min-height: 0;
}
}
@media (width <= 767px) {
.public-tabs {
display: block;
}
.public-tabs > li {
display: block;
margin-bottom: 10px;
}
.public-tabs > li > a {
display: block;
text-align: center;
}
.products-overview-card,
.resource-hub-card,
.quote-panel,
.contact-panel,
.resource-panel,
.knowledge-card,
.industry-card,
.product-mini-card,
.contact-quick-card {
padding: 22px;
}
.wizard-summary-cta {
padding-top: 0;
}
.wizard-summary-button,
.wizard-summary-button--ghost {
display: block;
margin-left: 0;
}
.final-cta-actions {
display: flex;
width: 100%;
}
.final-cta-actions .btn {
width: 100%;
}
}
@media (width <= 1199px) {
.products-proof-strip,
.pricing-buyers-guide,
.pricing-includes-grid,
.public-pillar-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (width <= 991px) {
.products-blueprint-grid,
.products-connection-grid,
.pricing-implementation-grid,
.pricing-feature-inventory-grid,
.pricing-integration-coverage-grid,
.footer-navigation-strip__grid,
.footer-global-strip__grid {
grid-template-columns: 1fr;
}
.footer-compliance-strip__inner {
flex-direction: column;
align-items: flex-start;
}
}
@media (width <= 767px) {
.products-proof-strip,
.pricing-buyers-guide,
.pricing-includes-grid,
.public-pillar-grid {
grid-template-columns: 1fr;
}
.wizard-summary-list li {
flex-direction: column;
align-items: flex-start;
}
.wizard-summary-value {
text-align: left;
}
}
.home-page {
background:
radial-gradient(circle at top left, rgb(233 138 95 / 14%), transparent 32%),
linear-gradient(180deg, #fffaf6 0%, #f6f7fb 42%, #edf1f8 100%);
}
.home-hero {
position: relative;
overflow: hidden;
padding: 150px 0 80px;
background:
radial-gradient(circle at top left, rgb(233 138 95 / 25%), transparent 28%),
radial-gradient(circle at bottom right, rgb(255 255 255 / 12%), transparent 28%),
linear-gradient(135deg, #182848 0%, #4b395d 52%, #6c587b 100%);
color: #fff;
}
.home-hero::after {
content: "";
position: absolute;
inset: auto auto -120px -120px;
width: 320px;
height: 320px;
border-radius: 50%;
background: rgb(255 255 255 / 6%);
}
.home-hero__inner,
.home-hero__row {
position: relative;
z-index: 1;
}
.home-hero__content {
padding-right: 36px;
}
.home-eyebrow {
margin: 0 0 12px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgb(255 255 255 / 72%);
}
.home-eyebrow--dark {
color: rgb(20 33 61 / 58%);
}
.home-hero h1 {
max-width: 700px;
margin: 0 0 18px;
font-size: 56px;
line-height: 1.04;
hyphens: none;
}
.home-hero__copy {
max-width: 640px;
margin: 0 0 28px;
font-size: 18px;
line-height: 1.8;
color: rgb(255 255 255 / 82%);
}
.home-hero__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.home-trust-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 26px;
}
.home-trust-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 999px;
background: rgb(255 255 255 / 12%);
color: rgb(255 255 255 / 92%);
font-size: 13px;
font-weight: 700;
}
.home-stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.home-stat-card {
padding: 20px;
border-radius: 20px;
background: rgb(255 255 255 / 10%);
border: 1px solid rgb(255 255 255 / 12%);
backdrop-filter: blur(8px);
}
.home-stat-card strong {
display: block;
margin-bottom: 8px;
font-size: 15px;
}
.home-stat-card span {
display: block;
color: rgb(255 255 255 / 76%);
font-size: 13px;
line-height: 1.7;
}
.home-signup-card,
.home-dashboard-card {
background: rgb(255 255 255 / 96%);
color: var(--public-text);
border-radius: 28px;
border: 1px solid rgb(255 255 255 / 50%);
box-shadow: 0 24px 60px rgb(15 23 42 / 20%);
padding: 30px;
}
.home-signup-card__header h2,
.home-dashboard-card h2 {
margin: 0 0 10px;
color: var(--public-ink);
font-size: 34px;
}
.home-signup-card__header p,
.home-dashboard-card p {
color: var(--public-muted);
line-height: 1.8;
}
.home-signup-alert {
min-height: 20px;
margin-bottom: 10px;
}
.home-signup-form .form-group {
margin-bottom: 14px;
}
.home-signup-form .form-control {
height: 48px;
border-radius: 14px;
border: 1px solid rgb(20 33 61 / 12%);
box-shadow: none;
}
.home-signup-form__actions {
margin-top: 10px;
}
.home-signup-form__meta {
margin-top: 10px;
text-align: center;
font-size: 13px;
color: var(--public-muted);
}
.home-signup-card__privacy {
margin: 14px 0 0;
font-size: 12px;
color: var(--public-muted);
text-align: center;
}
.home-signup-card__privacy a {
color: var(--public-brand-deep);
}
.home-social-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 18px;
}
.home-social-row span {
color: var(--public-muted);
font-size: 13px;
font-weight: 700;
}
.home-social-row .social-buttons,
.home-social-row--footer .social-buttons {
margin: 0;
}
.home-social-row .social_icon,
.home-social-row--footer .social_icon {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #101826;
color: #fff;
}
.home-social-row .social_icon:hover,
.home-social-row--footer .social_icon:hover {
color: #fff;
background: var(--public-brand-deep);
}
.home-dashboard-list {
list-style: none;
padding: 0;
margin: 20px 0 22px;
}
.home-dashboard-list li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: var(--public-text);
}
.home-dashboard-list i {
color: var(--public-accent);
}
.home-section {
padding: 72px 0;
content-visibility: auto;
contain-intrinsic-size: auto 300px;
}
.home-section-heading {
max-width: 820px;
margin: 0 auto 34px;
}
.home-section-heading h2 {
margin: 0 0 16px;
color: var(--public-ink);
font-size: 42px;
line-height: 1.12;
}
.home-section-heading p {
color: var(--public-muted);
font-size: 17px;
line-height: 1.8;
}
.home-overview-grid {
margin-top: 26px;
}
.home-overview-card,
.home-capability-card,
.home-use-case-card,
.home-contact-card,
.home-workflow-step {
height: 100%;
padding: 28px;
background: rgb(255 255 255 / 94%);
border: 1px solid var(--public-border);
border-radius: 24px;
box-shadow: var(--public-shadow-soft);
}
.home-overview-card strong {
display: block;
margin-bottom: 10px;
font-size: 18px;
color: var(--public-ink);
}
.home-overview-card p,
.home-capability-card p,
.home-use-case-card p,
.home-contact-card p,
.home-workflow-step p {
margin: 0;
color: var(--public-muted);
line-height: 1.75;
}
.home-capabilities-section,
.home-contact-section {
background: rgb(255 255 255 / 36%);
}
.home-capability-card,
.home-use-case-card,
.home-contact-card {
margin-bottom: 24px;
}
.home-capability-card i,
.home-use-case-card i,
.home-contact-card i {
display: inline-flex;
width: 56px;
height: 56px;
align-items: center;
justify-content: center;
margin-bottom: 16px;
border-radius: 18px;
background: var(--public-highlight);
color: var(--public-brand-deep);
font-size: 22px;
}
.home-capability-card h3,
.home-use-case-card h3,
.home-contact-card h3,
.home-workflow-step h3 {
margin: 0 0 10px;
color: var(--public-ink);
font-size: 22px;
}
.home-workflow-shell {
display: flex;
align-items: center;
}
.home-workflow-copy {
padding-right: 34px;
}
.home-workflow-steps {
display: grid;
gap: 18px;
}
.home-workflow-step {
position: relative;
padding-left: 92px;
}
.home-workflow-step span {
position: absolute;
left: 28px;
top: 28px;
display: inline-flex;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--public-accent), #d46f45);
color: #fff;
font-size: 13px;
font-weight: 800;
}
.home-cta-band {
padding: 0 0 32px;
}
.home-cta-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 32px 36px;
border-radius: 28px;
background:
radial-gradient(circle at top left, rgb(233 138 95 / 18%), transparent 32%),
linear-gradient(135deg, #182848 0%, #4b395d 100%);
color: #fff;
box-shadow: var(--public-shadow);
}
.home-cta-band__inner h2 {
margin: 0;
max-width: 700px;
font-size: 34px;
line-height: 1.15;
}
.home-cta-band__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.home-contact-card a {
color: var(--public-brand-deep);
font-weight: 700;
}
.home-social-row--footer {
justify-content: center;
margin-top: 22px;
}
.home-auth-modal-card {
background: rgb(16 24 38 / 75%);
border-radius: 14px;
padding: 22px;
border: 1px solid rgb(255 255 255 / 16%);
box-shadow: 0 20px 42px rgb(12 18 31 / 35%);
}
.home-auth-modal-title {
color: #fff;
margin-top: 0;
margin-bottom: 20px;
}
@media (width <= 1199px) {
.home-hero h1 {
font-size: 50px;
}
}
@media (width <= 991px) {
.home-hero {
padding-top: 120px;
}
.home-hero__content,
.home-workflow-copy {
padding-right: 15px;
}
.home-stat-grid {
grid-template-columns: 1fr;
}
.home-workflow-shell,
.home-cta-band__inner {
display: block;
}
.home-cta-band__actions {
margin-top: 24px;
}
}
@media (width <= 767px) {
.home-hero {
padding: 104px 0 58px;
}
.home-hero h1 {
font-size: 38px;
}
.home-hero__copy,
.home-section-heading p {
font-size: 16px;
}
.home-section {
padding: 56px 0;
}
.home-section-heading h2,
.home-cta-band__inner h2,
.home-signup-card__header h2,
.home-dashboard-card h2 {
font-size: 30px;
}
.home-signup-card,
.home-dashboard-card,
.home-overview-card,
.home-capability-card,
.home-use-case-card,
.home-contact-card,
.home-workflow-step,
.home-cta-band__inner {
padding: 24px;
}
.home-hero__actions,
.home-social-row,
.home-trust-pills {
display: block;
}
.home-hero__actions .btn,
.home-cta-band__actions .btn {
width: 100%;
margin-bottom: 10px;
}
.home-trust-pill {
margin: 0 8px 8px 0;
}
.home-workflow-step {
padding-left: 24px;
padding-top: 88px;
}
.home-workflow-step span {
left: 24px;
top: 24px;
}
}
.roadmap-phase {
padding: 20px;
background: #fff;
border: 1px solid rgb(108 88 123 / 10%);
border-radius: 16px;
box-shadow: 0 4px 16px rgb(15 23 42 / 4%);
margin-bottom: 20px;
}
.roadmap-phase h3 {
margin: 10px 0 14px;
font-size: 1.15rem;
color: #241c2b;
}
.roadmap-phase__badge {
display: inline-block;
padding: 5px 14px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 700;
}
.roadmap-phase__badge--done {
background: rgb(34 197 94 / 12%);
color: #166534;
}
.roadmap-phase__badge--progress {
background: rgb(245 158 11 / 12%);
color: #92400e;
}
.roadmap-phase__badge--planned {
background: rgb(59 130 246 / 12%);
color: #1e40af;
}
.roadmap-phase__badge--future {
background: rgb(108 88 123 / 10%);
color: #4e3a5e;
}
.roadmap-list {
list-style: none;
padding: 0;
margin: 0;
}
.roadmap-list li {
padding: 5px 0;
font-size: 0.88rem;
color: #4a4550;
line-height: 1.5;
}
.roadmap-list li.done {
color: #2d7a4a;
}
.roadmap-list li i {
margin-right: 6px;
width: 14px;
text-align: center;
}
.roadmap-phase-progress {
margin-bottom: 14px;
}
.roadmap-phase-progress-text {
font-size: 0.78rem;
color: #8a8490;
margin-bottom: 4px;
}
.roadmap-phase-progress-bar-wrap {
height: 4px;
background: rgb(108 88 123 / 10%);
border-radius: 4px;
overflow: hidden;
}
.roadmap-phase-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--brand-primary, #6c587b), #22c55e);
border-radius: 4px;
transition: width 0.5s ease;
}
.roadmap-progress-section {
margin: 20px 0 32px;
}
.roadmap-stat-card {
text-align: center;
padding: 20px 12px;
background: #fff;
border: 1px solid rgb(108 88 123 / 10%);
border-radius: 14px;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgb(15 23 42 / 3%);
}
.roadmap-stat-number {
font-size: 2rem;
font-weight: 800;
color: var(--brand-primary, #6c587b);
line-height: 1.1;
}
.roadmap-stat-label {
font-size: 0.85rem;
color: #8a8490;
margin-top: 4px;
}
.roadmap-progress-bar-wrap {
height: 8px;
background: rgb(108 88 123 / 8%);
border-radius: 8px;
overflow: hidden;
margin-top: 16px;
}
.roadmap-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--brand-primary, #6c587b), #22c55e);
border-radius: 8px;
transition: width 0.6s ease;
}
.roadmap-filter-bar {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 24px;
}
.roadmap-filter-btn {
background: #fff;
border: 1px solid rgb(108 88 123 / 20%);
border-radius: 20px;
padding: 7px 18px;
font-size: 0.86rem;
color: #4e3a5e;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.roadmap-filter-btn:hover {
background: rgb(108 88 123 / 5%);
}
.roadmap-filter-btn.active {
background: var(--brand-primary, #6c587b);
color: #fff;
border-color: var(--brand-primary, #6c587b);
}
.roadmap-releases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 28px;
}
.roadmap-release-card {
background: #fff;
border: 1px solid rgb(108 88 123 / 10%);
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 16px rgb(15 23 42 / 4%);
position: relative;
}
.roadmap-release-version {
display: inline-block;
background: var(--brand-primary, #6c587b);
color: #fff;
padding: 3px 12px;
border-radius: 12px;
font-size: 0.78rem;
font-weight: 700;
margin-bottom: 10px;
}
.roadmap-release-card h4 {
font-size: 1rem;
color: #241c2b;
margin-bottom: 10px;
}
.roadmap-release-card ul {
list-style: none;
padding: 0;
margin: 0 0 10px;
}
.roadmap-release-card li {
padding: 3px 0 3px 18px;
font-size: 0.85rem;
color: #615b67;
position: relative;
}
.roadmap-release-card li::before {
content: '\f00c';
font-family: FontAwesome;
position: absolute;
left: 0;
color: #22c55e;
font-size: 0.75rem;
}
.roadmap-release-date {
font-size: 0.8rem;
color: #8a8490;
font-weight: 600;
}
@media (width <= 767px) {
.roadmap-releases-grid {
grid-template-columns: 1fr;
}
}
.solutions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 40px 0;
}
.solutions-card {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 18px;
padding: 32px 24px;
text-align: center;
min-height: 240px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
}
.solutions-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgb(108 88 123 / 14%);
}
.solutions-card i {
color: var(--brand-primary, #6c587b);
margin-bottom: 16px;
}
.solutions-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #241c2b;
}
.solutions-card p {
color: #615b67;
line-height: 1.65;
font-size: 0.94rem;
}
.solutions-industries {
margin-top: 48px;
text-align: center;
}
.solutions-industry-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 24px 0;
}
.industry-chip {
display: inline-block;
background: rgb(108 88 123 / 8%);
color: #4e3a5e;
border: 1px solid rgb(108 88 123 / 18%);
border-radius: 20px;
padding: 8px 18px;
font-size: 0.88rem;
font-weight: 600;
}
.solutions-cta-row {
margin-top: 28px;
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
@media (width <= 991px) {
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 575px) {
.solutions-grid {
grid-template-columns: 1fr;
}
}
.solutions-card__icon {
margin-bottom: 16px;
transition: transform 0.3s ease;
}
.solutions-card:hover .solutions-card__icon {
transform: scale(1.1);
}
.solutions-card__metrics {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 12px 0 8px;
}
.solutions-metric-pill {
display: inline-block;
background: rgb(108 88 123 / 6%);
color: #4e3a5e;
border-radius: 12px;
padding: 4px 12px;
font-size: 0.78rem;
font-weight: 600;
}
.solutions-card__expand-btn {
display: inline-block;
margin-top: 12px;
background: none;
border: 1px solid rgb(108 88 123 / 20%);
border-radius: 20px;
padding: 6px 18px;
font-size: 0.85rem;
color: var(--brand-primary, #6c587b);
cursor: pointer;
transition: all 0.2s ease;
}
.solutions-card__expand-btn:hover {
background: rgb(108 88 123 / 8%);
border-color: var(--brand-primary, #6c587b);
}
.solutions-card__detail {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease;
text-align: left;
margin-top: 12px;
border-top: 1px solid rgb(108 88 123 / 10%);
padding-top: 0;
}
.solutions-card--expanded .solutions-card__detail {
padding-top: 16px;
}
.solutions-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (width <= 575px) {
.solutions-detail-grid {
grid-template-columns: 1fr;
}
}
.solutions-detail-col h4 {
font-size: 0.9rem;
margin-bottom: 10px;
color: #241c2b;
}
.solutions-detail-col h4 i {
margin-right: 6px;
color: var(--brand-primary, #6c587b);
}
.solutions-feature-list,
.solutions-usecase-list {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
.solutions-feature-list li,
.solutions-usecase-list li {
padding: 3px 0;
font-size: 0.85rem;
color: #4a4550;
position: relative;
padding-left: 16px;
}
.solutions-feature-list li::before {
content: '\f00c';
font-family: FontAwesome;
position: absolute;
left: 0;
color: #22c55e;
font-size: 0.75rem;
}
.solutions-usecase-list li::before {
content: '\f105';
font-family: FontAwesome;
position: absolute;
left: 0;
color: var(--brand-primary, #6c587b);
font-size: 0.8rem;
}
.solutions-detail-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.solutions-filter-bar {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: 24px 0 16px;
}
.solutions-filter-btn {
background: #fff;
border: 1px solid rgb(108 88 123 / 20%);
border-radius: 20px;
padding: 8px 20px;
font-size: 0.88rem;
color: #4e3a5e;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.solutions-filter-btn:hover {
background: rgb(108 88 123 / 5%);
}
.solutions-filter-btn.active {
background: var(--brand-primary, #6c587b);
color: #fff;
border-color: var(--brand-primary, #6c587b);
}
.solutions-timeline {
max-width: 700px;
margin: 32px auto 0;
position: relative;
padding-left: 48px;
}
.solutions-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--brand-primary, #6c587b), rgb(108 88 123 / 15%));
}
.solutions-timeline-step {
position: relative;
margin-bottom: 32px;
padding-left: 16px;
}
.solutions-timeline-number {
position: absolute;
left: -44px;
top: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brand-primary, #6c587b);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 2px 8px rgb(108 88 123 / 30%);
}
.solutions-timeline-content h4 {
margin: 0 0 6px;
font-size: 1.05rem;
color: #241c2b;
}
.solutions-timeline-content p {
margin: 0;
font-size: 0.92rem;
color: #615b67;
line-height: 1.6;
}
.solutions-comparison-table {
margin-top: 24px;
border-collapse: collapse;
}
.solutions-comparison-table thead th {
background: #f8f6fa;
color: #241c2b;
font-weight: 700;
padding: 12px 16px;
font-size: 0.9rem;
border-bottom: 2px solid rgb(108 88 123 / 15%);
}
.solutions-comparison-table tbody td {
padding: 10px 16px;
font-size: 0.88rem;
border-bottom: 1px solid rgb(108 88 123 / 8%);
color: #4a4550;
}
.solutions-comparison-table tbody tr:hover {
background: rgb(108 88 123 / 3%);
}
.solutions-scenarios-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.solutions-scenario-card {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 16px rgb(15 23 42 / 4%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.solutions-scenario-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgb(108 88 123 / 12%);
}
.solutions-scenario-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgb(108 88 123 / 8%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
color: var(--brand-primary, #6c587b);
font-size: 1.3rem;
}
.solutions-scenario-card h4 {
font-size: 1.05rem;
margin-bottom: 10px;
color: #241c2b;
}
.solutions-scenario-card p {
font-size: 0.88rem;
color: #615b67;
line-height: 1.6;
margin-bottom: 8px;
}
.solutions-scenario-result {
background: rgb(34 197 94 / 8%);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.85rem;
font-weight: 600;
color: #166534;
margin-top: 12px;
}
@media (width <= 991px) {
.solutions-scenarios-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 575px) {
.solutions-scenarios-grid {
grid-template-columns: 1fr;
}
}
.solutions-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
text-align: center;
}
.solutions-trust-item {
padding: 24px 16px;
}
.solutions-trust-item i {
color: var(--brand-primary, #6c587b);
margin-bottom: 12px;
}
.solutions-trust-item h4 {
font-size: 1rem;
margin-bottom: 8px;
color: #241c2b;
}
.solutions-trust-item p {
font-size: 0.88rem;
color: #615b67;
line-height: 1.55;
}
@media (width <= 991px) {
.solutions-trust-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 575px) {
.solutions-trust-grid {
grid-template-columns: 1fr;
}
}
.industry-chip {
cursor: pointer;
transition: all 0.2s ease;
}
.industry-chip:hover,
.industry-chip--active {
background: var(--brand-primary, #6c587b);
color: #fff;
border-color: var(--brand-primary, #6c587b);
}
.solutions-industry-detail {
margin-top: 16px;
padding: 16px 24px;
background: rgb(108 88 123 / 4%);
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
}
.solutions-final-cta {
margin-top: 24px;
padding: 48px 0;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 20px 0 40px;
}
.blog-card {
background: #fff;
border: 1px solid rgb(108 88 123 / 12%);
border-radius: 18px;
padding: 28px 24px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgb(108 88 123 / 12%);
}
.blog-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.blog-card__category {
display: inline-block;
background: rgb(108 88 123 / 10%);
color: #6c587b;
border-radius: 12px;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: 600;
}
.blog-card__date,
.blog-card__read-time {
color: #8a8492;
font-size: 0.82rem;
}
.blog-card__title {
font-size: 1.15rem;
line-height: 1.4;
margin: 0 0 12px;
color: #241c2b;
}
.blog-card__title i {
color: var(--brand-primary, #6c587b);
margin-right: 8px;
}
.blog-card__excerpt {
color: #615b67;
line-height: 1.65;
font-size: 0.92rem;
flex: 1;
}
.blog-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #6c587b;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
margin-top: 14px;
}
.blog-card__link:hover {
color: #4e3a5e;
text-decoration: underline;
}
.blog-subscribe-cta {
text-align: center;
padding: 40px 20px;
background: rgb(108 88 123 / 4%);
border-radius: 18px;
margin: 20px 0 0;
}
.blog-subscribe-cta h3 {
font-size: 1.3rem;
color: #241c2b;
margin-bottom: 8px;
}
.blog-subscribe-cta p {
color: #615b67;
margin-bottom: 18px;
}
@media (width <= 767px) {
.blog-grid {
grid-template-columns: 1fr;
}
}
.testimonial-card { transition: transform 0.2s, box-shadow 0.2s; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgb(0 0 0 / 10%); }
.testimonial-stars { color: #f5a623; margin-bottom: 12px; font-size: 1.1em; }
.testimonial-stars .fa { margin-right: 2px; }
.testimonial-quote { font-style: italic; color: #444; line-height: 1.7; border: none; padding: 0; margin: 0 0 15px; font-size: 0.95rem; }
.testimonial-author strong { display: block; color: #333; font-size: 1rem; }
.testimonial-author span { display: block; color: #777; font-size: 0.85rem; margin-top: 2px; }
.testimonial-industry { color: #6c587b !important; font-weight: 500; margin-top: 6px !important; }
.stat-card { padding: 30px 20px; }
.stat-number { font-size: 2.8rem; font-weight: 700; color: #6c587b; line-height: 1; }
.stat-label { font-size: 0.95rem; color: #666; margin-top: 8px; }
.comparison-table th { background: #f5f5f5; font-weight: 600; }
.comparison-highlight { background: rgb(108 88 123 / 6%) !important; }
.feature-checklist { list-style: none; padding: 0; }
.feature-checklist li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; line-height: 1.6; }
.feature-checklist li:last-child { border-bottom: none; }
.feature-checklist .fa { width: 20px; margin-right: 8px; }
.tutorial-card { transition: transform 0.2s, box-shadow 0.2s; }
.tutorial-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgb(0 0 0 / 10%); }
.tutorial-card h3 { font-size: 1.1rem; margin: 10px 0 8px; }
.tutorial-card h3 a { color: #333; text-decoration: none; }
.tutorial-card h3 a:hover { color: #6c587b; }
.tutorial-card p { color: #666; font-size: 0.9rem; line-height: 1.6; }
.tutorial-meta { color: #999; font-size: 0.85rem; }
.tutorial-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.tutorial-badge--beginner { background: #d4edda; color: #155724; }
.tutorial-badge--intermediate { background: #fff3cd; color: #856404; }
.tutorial-badge--advanced { background: #f8d7da; color: #721c24; }
.onboarding-step { display: flex; align-items: flex-start; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; }
.onboarding-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.onboarding-step__number { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; color: #fff; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 20px; margin-top: 2px; }
.onboarding-step__content h3 { margin-top: 0; margin-bottom: 8px; color: #333; }
.onboarding-step__content p { color: #555; line-height: 1.7; margin: 0; }
.timeline-container { position: relative; padding-left: 30px; }
.timeline-container::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: #e0e0e0; border-radius: 2px; }
.timeline-item { position: relative; margin-bottom: 40px; padding-bottom: 20px; }
.timeline-item::before { content: ''; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #6c587b; border: 3px solid #fff; box-shadow: 0 0 0 2px #6c587b; }
.timeline-date { font-size: 0.9rem; color: #888; margin-bottom: 8px; }
.timeline-item h3 { color: #333; margin-bottom: 12px; }
.timeline-item ul { list-style: none; padding: 0; }
.timeline-item li { padding: 4px 0; color: #555; line-height: 1.6; }
.timeline-item li .fa { width: 18px; margin-right: 6px; }
@media (width <= 767px) {
.onboarding-step { flex-direction: column; }
.onboarding-step__number { margin-bottom: 12px; margin-right: 0; }
.stat-number { font-size: 2rem; }
.timeline-container { padding-left: 25px; }
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.container, .row, [class*="col-"] {
overflow-wrap: break-word;
}
.pricing-card, .demo-card, .contact-card, .testimonial-card, .tutorial-card,
.footer-usecase-card, .footer-navigation-card, .footer-trust-item, .footer-global-item,
.pricing-stack-card, .pricing-addon-card, .pricing-roadmap-step,
.standalone-card, .contact-form-card, .contact-method-card,
.blog-card, .faq-item, .stat-card, .onboarding-step {
overflow: hidden;
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
hyphens: auto;
}
a, p, span, li, td, th, label {
overflow-wrap: break-word;
}
@media (width <= 767px) {
.public-utility-bar__inner {
flex-direction: column;
padding: 6px 0;
gap: 4px;
text-align: center;
}
.public-utility-bar__message {
display: none;
}
.public-utility-bar__actions {
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.public-pref-switchers {
flex-wrap: wrap;
justify-content: center;
}
.public-navbar.navbar-default {
top: 30px;
min-height: 56px;
}
.public-navbar .navbar-brand {
height: 56px;
}
.info-page-content,
.page-content-wrapper {
padding-top: 100px;
}
.pricing-hero,
.contact-hero,
.features-hero,
.demo-container,
.info-page-content .page-hero,
.info-page-content .info-page-hero {
padding: 30px 15px;
}
.pricing-hero h1,
.contact-hero h1,
.info-page-content .page-hero h1,
.info-page-content .info-page-hero h1 {
font-size: 24px;
}
.footer-cta-band__inner {
flex-direction: column;
text-align: center;
padding: 24px 16px;
}
.footer-cta-band__actions {
justify-content: center;
}
.footer-trust-strip__grid,
.footer-usecase-strip__grid,
.footer-navigation-strip__grid,
.footer-global-strip__grid {
grid-template-columns: 1fr;
}
.footer-bottom .row {
flex-direction: column;
text-align: center;
gap: 8px;
}
.footer-bottom .text-right {
text-align: center !important;
}
.footer-legal-link {
margin-left: 6px;
margin-right: 6px;
}
.footer-links-row .col-sm-6 {
margin-bottom: 20px;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-roadmap-grid {
grid-template-columns: 1fr;
}
.pricing-enterprise-cta__inner {
flex-direction: column;
text-align: center;
padding: 24px 16px;
}
.pricing-enterprise-cta__actions {
justify-content: center;
}
.demo-roles {
flex-direction: column;
}
.public-nav-search {
margin: 8px 15px;
}
.public-nav-search .form-control {
width: 100%;
}
.public-nav-search .form-control:focus {
width: 100%;
}
.public-nav-links {
margin: 0;
}
.public-nav-action > a {
margin: 4px 15px;
display: block;
text-align: center;
}
table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (width >= 768px) and (width <= 991px) {
.public-navbar.navbar-default {
top: 42px;
}
.info-page-content,
.page-content-wrapper {
padding-top: 130px;
}
.pricing-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-trust-strip__grid,
.footer-usecase-strip__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.pricing-hero, .contact-hero, .features-hero,
.info-page-content .page-hero, .info-page-content .info-page-hero {
overflow: hidden;
position: relative;
}
.footer-main::after,
.footer-bottom::after,
section::after {
content: '';
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
.public-navbar .dropdown-menu {
z-index: 1060;
}
.footer-newsletter-strip__inner {
overflow: hidden;
}
.footer-newsletter-form {
overflow: visible;
}
.footer-newsletter-input-group {
display: flex;
gap: 0;
max-width: 480px;
}
.footer-newsletter-input-group .form-control {
flex: 1;
min-width: 0;
border-radius: 8px 0 0 8px;
}
.footer-newsletter-input-group .btn {
border-radius: 0 8px 8px 0;
white-space: nowrap;
}
.footer-compliance-strip__links {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
@media (width <= 767px) {
.footer-newsletter-strip__inner {
flex-direction: column;
text-align: center;
}
.footer-newsletter-input-group {
max-width: 100%;
}
}
.public-utility-bar__actions {
flex-wrap: nowrap;
max-width: 100%;
overflow: auto hidden;
-webkit-overflow-scrolling: touch;
}
.public-pref-switchers {
flex-wrap: nowrap;
}
.public-pref-apply {
display: none;
}
@media (width <= 1280px) {
.public-utility-bar__message {
display: none;
}
.public-utility-bar__inner {
justify-content: center;
}
}
.footer-section-title {
color: var(--public-ink, #14213d);
font-size: 1rem;
font-weight: 700;
margin: 0 0 20px;
}
.footer-compare-strip {
padding: 24px 0;
background: #f8f6fa;
}
.footer-compare-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.footer-compare-card {
display: block;
padding: 18px 20px;
border-radius: 14px;
border: 1px solid rgb(20 33 61 / 8%);
background: rgb(255 255 255 / 90%);
box-shadow: 0 6px 18px rgb(20 33 61 / 6%);
color: var(--public-ink, #14213d);
text-decoration: none;
transition: transform .2s, box-shadow .2s;
}
.footer-compare-card strong {
display: block;
font-size: .9rem;
color: var(--public-ink, #14213d);
margin-bottom: 6px;
}
.footer-compare-card span {
display: block;
font-size: .82rem;
color: var(--public-muted, #6b7280);
line-height: 1.55;
}
.footer-compare-card:hover,
.footer-compare-card:focus {
color: var(--public-ink, #14213d);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgb(20 33 61 / 12%);
}
.footer-features-strip {
padding: 20px 0;
background: #f8f6fa;
}
.footer-features-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.footer-feature-tag {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgb(108 88 123 / 18%);
background: rgb(255 255 255 / 90%);
color: var(--public-brand, #6c587b);
font-size: .82rem;
font-weight: 600;
text-decoration: none;
transition: background .18s, border-color .18s, color .18s;
min-height: 36px;
}
.footer-feature-tag:hover,
.footer-feature-tag:focus {
background: var(--public-brand, #6c587b);
border-color: transparent;
color: #fff;
text-decoration: none;
}
@media (width <= 991px) {
.footer-links li {
margin-bottom: 0;
}
.footer-links a {
display: flex;
align-items: center;
min-height: 44px;
padding: 4px 0;
}
.footer-legal-link {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 8px;
}
.footer-compare-card {
min-height: 64px;
}
.footer-feature-tag {
min-height: 44px;
}
.footer-multi-account-cta .btn-group a,
.footer-multi-account-cta .btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-compliance-strip__links a {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
}
.footer-quickstart__btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-newsletter-disclaimer a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
}
.footer-contact-list a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-brand a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-copyright a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
}
.footer-live-help a[style] {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.footer-multi-account-cta .btn-group a {
min-height: 44px;
}
.footer-contact-list li {
min-height: 44px;
}
.footer-social a {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-compare-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (width <= 575px) {
.footer-compare-grid {
grid-template-columns: 1fr;
}
}
.fw-bold    { font-weight: 700 !important; }
.fw-semibold{ font-weight: 600 !important; }
.fw-light   { font-weight: 300 !important; }
.display-1 { font-size: 5rem; font-weight: 300; line-height: 1.2; }
.display-2 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
.display-3 { font-size: 4rem; font-weight: 300; line-height: 1.2; }
.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }
.display-5 { font-size: 3rem; font-weight: 300; line-height: 1.2; }
.display-6 { font-size: 2.5rem; font-weight: 300; line-height: 1.2; }
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.d-flex               { display: flex !important; }
.d-grid               { display: grid !important; }
.d-none               { display: none !important; }
.d-block              { display: block !important; }
.align-items-center   { align-items: center !important; }
.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end     { justify-content: flex-end !important; }
.flex-wrap            { flex-wrap: wrap !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem  !important; }
.gap-3 { gap: 1rem    !important; }
.gap-4 { gap: 1.5rem  !important; }
.gap-5 { gap: 3rem    !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem  !important; }
.me-3 { margin-right: 1rem    !important; }
.me-4 { margin-right: 1.5rem  !important; }
.me-5 { margin-right: 3rem    !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem  !important; }
.ms-3 { margin-left: 1rem    !important; }
.ms-4 { margin-left: 1.5rem  !important; }
.ms-auto { margin-left: auto  !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem  !important; padding-right: 0.5rem  !important; }
.px-3 { padding-left: 1rem    !important; padding-right: 1rem    !important; }
.px-4 { padding-left: 1.5rem  !important; padding-right: 1.5rem  !important; }
.px-5 { padding-left: 3rem    !important; padding-right: 3rem    !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem  !important; padding-bottom: 0.5rem  !important; }
.py-3 { padding-top: 1rem    !important; padding-bottom: 1rem    !important; }
.py-4 { padding-top: 1.5rem  !important; padding-bottom: 1.5rem  !important; }
.py-5 { padding-top: 3rem    !important; padding-bottom: 3rem    !important; }
.row.g-3 > [class*="col-"] { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.row.g-4 > [class*="col-"] { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.50 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-90 { opacity: 0.90 !important; }
.border-0 { border: 0 !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; }
.bg-light { background-color: #f8f9fa !important; }
.text-dark { color: #212529 !important; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.card {
position: relative;
display: block;
min-width: 0;
background-color: #fff;
border: 1px solid rgb(0 0 0 / 12.5%);
border-radius: 0.25rem;
}
.card-body {
padding: 1.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgb(0 0 0 / 3%);
border-bottom: 1px solid rgb(0 0 0 / 12.5%);
}
.card-footer {
padding: 0.75rem 1.25rem;
background-color: rgb(0 0 0 / 3%);
border-top: 1px solid rgb(0 0 0 / 12.5%);
}
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.col-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
width: 50%;
}
.fa-6x { font-size: 6em; }
.fa-7x { font-size: 7em; }
.fa-8x { font-size: 8em; }
.fa-9x { font-size: 9em; }
.fa-10x { font-size: 10em; }
.rounded { border-radius: 0.25rem !important; }
.rounded-1 { border-radius: 0.2rem !important; }
.rounded-2 { border-radius: 0.25rem !important; }
.rounded-3 { border-radius: 0.3rem !important; }
.rounded-4 { border-radius: 0.5rem !important; }
.rounded-pill { border-radius: 50rem !important; }
.btn-light {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-light:hover,
.btn-light:focus {
color: #212529;
background-color: #e2e6ea;
border-color: #dae0e5;
}
.btn-outline-primary {
color: #337ab7; background-color: transparent;
border: 1px solid #337ab7;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
color: #fff; background-color: #337ab7;
}
.btn-outline-success {
color: #5cb85c; background-color: transparent;
border: 1px solid #5cb85c;
}
.btn-outline-success:hover, .btn-outline-success:focus {
color: #fff; background-color: #5cb85c;
}
.btn-outline-danger {
color: #d9534f; background-color: transparent;
border: 1px solid #d9534f;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
color: #fff; background-color: #d9534f;
}
.btn-outline-warning {
color: #f0ad4e; background-color: transparent;
border: 1px solid #f0ad4e;
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
color: #fff; background-color: #f0ad4e;
}
.btn-outline-info {
color: #5bc0de; background-color: transparent;
border: 1px solid #5bc0de;
}
.btn-outline-info:hover, .btn-outline-info:focus {
color: #fff; background-color: #5bc0de;
}
.btn-outline-light {
color: #f8f9fa; background-color: transparent;
border: 1px solid #f8f9fa;
}
.btn-outline-light:hover, .btn-outline-light:focus {
color: #212529; background-color: #f8f9fa;
}
.btn-outline-dark {
color: #343a40; background-color: transparent;
border: 1px solid #343a40;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
color: #fff; background-color: #343a40;
}
.btn-outline-teal {
color: #20c997; background-color: transparent;
border: 1px solid #20c997;
}
.btn-outline-teal:hover, .btn-outline-teal:focus {
color: #fff; background-color: #20c997;
}
.btn-outline-purple {
color: #6f42c1; background-color: transparent;
border: 1px solid #6f42c1;
}
.btn-outline-purple:hover, .btn-outline-purple:focus {
color: #fff; background-color: #6f42c1;
}
.btn-outline-secondary {
color: #6c757d; background-color: transparent;
border: 1px solid #6c757d;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
color: #fff; background-color: #6c757d;
}
.text-muted { color: #595959 !important; }
.text-body { color: #212529 !important; }
.text-black-50 { color: rgb(0 0 0 / 50%) !important; }
.text-white-50 { color: rgb(255 255 255 / 50%) !important; }
.border { border: 1px solid #dee2e6 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-start { border-left: 1px solid #dee2e6 !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.border-primary { border-color: #0d6efd !important; }
.border-secondary { border-color: #6c757d !important; }
.border-success { border-color: #198754 !important; }
.border-danger { border-color: #dc3545 !important; }
.border-warning { border-color: #ffc107 !important; }
.border-info { border-color: #0dcaf0 !important; }
.bg-primary { background-color: #0d6efd !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #198754 !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info { background-color: #0dcaf0 !important; }
.bg-dark { background-color: #212529 !important; }
.bg-white { background-color: #fff !important; }
.bg-transparent { background-color: transparent !important; }
.text-primary { color: #0d6efd !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #198754 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #0dcaf0 !important; }
.text-white { color: #fff !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-auto { width: auto !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }
.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.cursor-pointer { cursor: pointer !important; }
.user-select-none { user-select: none !important; }
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: 0.5rem; }
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.ratio-4x3 { --bs-aspect-ratio: 75%; }
.ratio-1x1 { --bs-aspect-ratio: 100%; }
.clearfix::after { display: block; clear: both; content: ""; }
.fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-shield-halved::before         { content: "\f132"; }  
.fa-wand-magic-sparkles::before   { content: "\f0d0"; }  
.fa-mobile-screen-button::before  { content: "\f10b"; }  
.fa-magnifying-glass::before      { content: "\f002"; }  
.fa-xmark::before                 { content: "\f00d"; }  
.fa-circle-check::before          { content: "\f058"; }  
.fa-circle-xmark::before          { content: "\f057"; }  
.fa-circle-info::before           { content: "\f05a"; }  
.fa-circle-question::before       { content: "\f059"; }  
.fa-pen-to-square::before         { content: "\f044"; }  
.fa-trash-can::before             { content: "\f014"; }  
.fa-file-lines::before            { content: "\f15c"; }  
.fa-gear::before                  { content: "\f013"; }  
.fa-house::before                 { content: "\f015"; }  
.fa-arrow-up-right-from-square::before { content: "\f08e"; }  
.fa-up-right-from-square::before  { content: "\f08e"; }  
.fa-envelope-open-text::before    { content: "\f658"; }  
.fa-envelope-open-text::before    { content: "\f003"; }  
.fa-lock-open::before             { content: "\f09c"; }  
header[role="banner"],
.public-header,
.site-header,
header:not(.home-hero) {
background-image: none !important;
min-height: auto !important;
}
.public-utility-bar__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.public-utility-bar__actions a,
.public-utility-bar__actions button,
.public-utility-bar__actions select {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 4px 8px;
}
:root[data-theme="light"] .footer-resource-card,
:root[data-theme="light"] .footer-resource-card h3,
:root[data-theme="light"] .footer-resource-card h4,
:root[data-theme="light"] .footer-resource-card p,
:root[data-theme="light"] .footer-resource-card a {
background: #fff !important;
color: #14213d !important;
}
@media (max-width: 576px) {
.footer-resource-grid {
grid-template-columns: 1fr;
}
.footer-resource-card {
min-height: 44px;
padding: 16px;
}
}
.site-footer .footer-links a,
.site-footer .footer-contact-list a {
display: inline-block;
min-height: 24px;
padding: 4px 0;
}
.public-utility-bar,
.public-utility-bar a,
.public-utility-bar span,
.public-utility-bar button {
color: #fff;
}
.public-pref-apply {
background: rgb(255 255 255 / 35%);
border-color: rgb(255 255 255 / 65%);
color: #fff;
}
.public-pref-apply:hover,
.public-pref-apply:focus {
background: rgb(255 255 255 / 50%);
border-color: #fff;
}
.brand-wordmark {
color: var(--public-ink, #14213d);
}
.public-navbar .navbar-toggle {
color: var(--public-ink, #14213d) !important;
background-color: transparent !important;
border-color: var(--public-ink, #14213d) !important;
}
.public-navbar .navbar-toggle .icon-bar {
background-color: var(--public-ink, #14213d) !important;
}
.home-signup-card__privacy {
color: var(--public-text, #32415d);
}
.home-signup-card__privacy a {
color: var(--public-ink, #14213d);
text-decoration: underline;
}
.text-muted {
color: #4a4a4a !important;
}
.footer-links a,
.footer-contact-list a,
.public-utility-bar__actions a,
.public-utility-bar__actions button,
.public-nav-links a {
min-height: 24px;
min-width: 24px;
display: inline-flex;
align-items: center;
}
.footer-resource-card,
.footer-resource-card h3,
.footer-resource-card h4,
.footer-resource-card p,
.footer-resource-card a {
color: #14213d !important;
background: #fff !important;
}
.footer-feature-tag {
color: #fff !important;
background: rgb(42 44 72 / 92%) !important;
}
section[aria-label="Integrations"] span[style*="#FF9900"],
section[aria-label="Integrations"] span[style*="#96BF48"],
section[aria-label="Integrations"] span[style*="#FF7A59"] {
color: #000 !important;
}
.id-cookie-accept {
background: #008060 !important;
color: #fff !important;
min-height: 44px;
min-width: 44px;
}
.id-cookie-essential {
color: #fff !important;
border-color: #fff !important;
min-height: 44px;
min-width: 44px;
}
.hero-section,
.cta-section,
section[class*="hero"],
section[class*="cta"] {
position: relative;
}
.hero-section h1,
.hero-section .display-1,
.hero-section .display-2,
.hero-section .display-3,
.hero-section .display-4,
.hero-section .display-5,
.hero-section .display-6,
.hero-section .lead,
.cta-section h1,
.cta-section .display-1,
.cta-section .display-2,
.cta-section .display-3,
.cta-section .display-4,
.cta-section .display-5,
.cta-section .display-6,
.cta-section .lead,
.hero-section .btn-outline-light,
.cta-section .btn-outline-light {
text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.hero-section i,
.cta-section i {
text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.text-primary { color: #0b5ed7 !important; }
.text-success { color: #157a50 !important; }
.text-info { color: #087990 !important; }
.text-warning { color: #997404 !important; }
.text-danger { color: #b02a37 !important; }
.text-secondary { color: #565c64 !important; }
.text-muted { color: #4a4a4a !important; }
.stat-number,
.display-6.fw-bold.text-primary,
.display-6.fw-bold.text-info,
.display-6.fw-bold.text-warning,
.display-6.fw-bold.text-success {
color: #4f46c4 !important;
}
.fas,
.far,
.fab {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
}
.fas {
font-family: "FontAwesome", "Font Awesome 6 Free", "Font Awesome 5 Free";
font-weight: 900;
}
.far {
font-family: "FontAwesome", "Font Awesome 6 Free", "Font Awesome 5 Free";
font-weight: 400;
}
.fab {
font-family: "FontAwesome", "Font Awesome 6 Brands", "Font Awesome 5 Brands";
font-weight: 400;
}
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pt-1 { padding-top: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.mt-lg-0 { margin-top: 0 !important; }
.mt-lg-1 { margin-top: .25rem !important; }
.mt-lg-2 { margin-top: .5rem !important; }
.mt-lg-3 { margin-top: 1rem !important; }
.mt-lg-4 { margin-top: 1.5rem !important; }
.mt-lg-5 { margin-top: 3rem !important; }
.mb-lg-0 { margin-bottom: 0 !important; }
.mb-lg-1 { margin-bottom: .25rem !important; }
.mb-lg-2 { margin-bottom: .5rem !important; }
.mb-lg-3 { margin-bottom: 1rem !important; }
.mb-lg-4 { margin-bottom: 1.5rem !important; }
.mb-lg-5 { margin-bottom: 3rem !important; }
.mt-md-0 { margin-top: 0 !important; }
.mt-md-1 { margin-top: .25rem !important; }
.mt-md-2 { margin-top: .5rem !important; }
.mt-md-3 { margin-top: 1rem !important; }
.mt-md-4 { margin-top: 1.5rem !important; }
.mt-md-5 { margin-top: 3rem !important; }
.mb-md-0 { margin-bottom: 0 !important; }
.mb-md-1 { margin-bottom: .25rem !important; }
.mb-md-2 { margin-bottom: .5rem !important; }
.mb-md-3 { margin-bottom: 1rem !important; }
.mb-md-4 { margin-bottom: 1.5rem !important; }
.mb-md-5 { margin-bottom: 3rem !important; }
.mt-sm-0 { margin-top: 0 !important; }
.mt-sm-1 { margin-top: .25rem !important; }
.mt-sm-2 { margin-top: .5rem !important; }
.mt-sm-3 { margin-top: 1rem !important; }
.mt-sm-4 { margin-top: 1.5rem !important; }
.mt-sm-5 { margin-top: 3rem !important; }
.mb-sm-0 { margin-bottom: 0 !important; }
.mb-sm-1 { margin-bottom: .25rem !important; }
.mb-sm-2 { margin-bottom: .5rem !important; }
.mb-sm-3 { margin-bottom: 1rem !important; }
.mb-sm-4 { margin-bottom: 1.5rem !important; }
.mb-sm-5 { margin-bottom: 3rem !important; }
.ms-lg-1 { margin-left: .25rem !important; }
.ms-lg-2 { margin-left: .5rem !important; }
.ms-lg-3 { margin-left: 1rem !important; }
.ms-lg-4 { margin-left: 1.5rem !important; }
.ms-lg-5 { margin-left: 3rem !important; }
.me-lg-1 { margin-right: .25rem !important; }
.me-lg-2 { margin-right: .5rem !important; }
.me-lg-3 { margin-right: 1rem !important; }
.me-lg-4 { margin-right: 1.5rem !important; }
.me-lg-5 { margin-right: 3rem !important; }
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
}
.col-1 { width: 8.333333%; }
.col-2 { width: 16.666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333333%; }
.col-5 { width: 41.666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333%; }
.col-8 { width: 66.666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-italic { font-style: italic !important; }
main,
[role="main"] {
display: block;
}
[style*="color:#667eea"],
[style*="color: #667eea"],
li i.fas,
li i.far,
li i.fab,
.benefit-list li i,
.feature-list li i {
color: #4f46c4 !important;
}
.feature-icon i,
.hero-section i,
.cta-section i,
section[class*="hero"] i,
section[class*="cta"] i {
color: #fff !important;
}
.hero-section,
.cta-section,
section[class*="hero"],
section[class*="cta"] {
position: relative;
z-index: 0;
}
.hero-section::before,
.cta-section::before,
section[class*="hero"]::before,
section[class*="cta"]::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
z-index: -1;
pointer-events: none;
}
.hero-section .container,
.hero-section .row,
.hero-section [class*="col-"],
.cta-section .container,
.cta-section .row,
.cta-section [class*="col-"],
section[class*="hero"] .container,
section[class*="hero"] .row,
section[class*="hero"] [class*="col-"],
section[class*="cta"] .container,
section[class*="cta"] .row,
section[class*="cta"] [class*="col-"] {
position: relative;
z-index: 1;
}
.hero-section > :first-child,
.cta-section > :first-child,
section[class*="hero"] > :first-child,
section[class*="cta"] > :first-child {
position: relative;
z-index: 1;
}
#mainNav.navbar-fixed-top, #mainNav.affix { top: 42px; }