.page,
#v2 .page,
#v2 .page-inner,
.page-inner {
width: 100% !important;
max-width: 1344px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
.logo-mark {
width: 26px !important;
height: 26px !important;
color: #000 !important;
}
.logo-mark circle,
.logo-mark path {
stroke: #000 !important;
stroke-width: 2.4px !important;
}
.logo {
color: #000 !important;
}
.logo-text {
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: -0.02em !important;
color: #000 !important;
}
.navbar {
height: 72px !important;
display: flex !important;
align-items: center !important;
}
.navbar .page.nav-inner,
.navbar .nav-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 1344px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
height: 100% !important;
}
.navbar .menu {
display: flex !important;
align-items: center !important;
gap: 32px !important;
}
.navbar .menu a {
font-size: 14px !important;
font-weight: 450 !important;
color: rgba(17,24,39,.64) !important;
padding: 8px 0 !important;
}
.navbar .menu a:hover {
color: #111827 !important;
}
.hero,
#v2 .hero,
#v2 > section.hero {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
height: auto !important;
min-height: 520px !important;
padding: 120px 0 80px !important;
}
.hero .hd {
max-width: none !important;
width: 100% !important;
}
#v2 .hero .hd > h1,
#v2 .hero .hd > .tagline,
#v2 .hero .hd > .page-title {
max-width: none !important;
width: 100% !important;
}
.hero h1,
.hero .tagline,
.page-head h1,
.page-head .page-title {
overflow-wrap: break-word !important;
word-break: break-word !important;
hyphens: auto !important;
}
.demo-sec .eyebrow, .play-sec .eyebrow, .final .eyebrow, .dark-sec .eyebrow,
.demo-sec .sec-inner > .eyebrow, .play-sec .eyebrow {
color: rgba(255,255,255,.78) !important;
opacity: 1 !important;
}
.final .btn-primary,
.final .cta {
background-color: #fff !important;
color: #111827 !important;
border-color: #fff !important;
}
.final .btn-on-dark {
background-color: transparent !important;
color: #fff !important;
border-color: rgba(255,255,255,.45) !important;
}
.final .cta:hover {
background-color: rgba(255,255,255,.88) !important;
border-color: rgba(255,255,255,.88) !important;
}
.final .btn-on-dark:hover {
background-color: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.7) !important;
}
.final .btn:not(.btn-on-dark):not(.btn-primary):not(.cta) {
background-color: transparent !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.42) !important;
}
.final .btn:not(.btn-on-dark):not(.btn-primary):not(.cta):hover {
background-color: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.7) !important;
}
.demo-sec h1, .demo-sec h2, .demo-sec h3, .demo-sec h4, .demo-sec .sec-title,
.play-sec h1, .play-sec h2, .play-sec h3, .play-sec h4, .play-sec .sec-title,
.final h1, .final h2, .final h3, .final h4 {
color: #fff !important;
}
.demo-sec p, .demo-sec .sec-desc, .demo-sec .demo-name,
.play-sec p, .play-sec .sec-desc, .play-sec .sub,
.final p, .final .lead {
color: rgba(255,255,255,.72) !important;
}
.demo-sec .demo-sub, .play-sec .demo-sub {
color: rgba(255,255,255,.56) !important;
}
.demo-sec .demo-card, .play-sec .demo-card {
background-color: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.1) !important;
}
.sec-inner,
.sec .sec-inner,
.demo-sec .sec-inner,
.play-sec .sec-inner,
#v2 .sec-inner {
width: 100% !important;
max-width: 1344px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
.sec,
.demo-sec,
.play-sec {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.demo-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
max-width: none !important;
justify-content: stretch !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.grid3, .grid2, .cards, .mech, .uc-grid {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.demo-card {
width: 100% !important;
max-width: none !important;
}
@media (max-width: 720px) {
.sec-inner, .sec .sec-inner, .demo-sec .sec-inner, #v2 .sec-inner {
padding-left: 20px !important;
padding-right: 20px !important;
}
.demo-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 720px) {
.page,
#v2 .page {
padding-left: 20px !important;
padding-right: 20px !important;
}
.hero,
#v2 .hero,
#v2 > section.hero {
padding: 64px 0 48px !important;
min-height: auto !important;
}
.hero h1,
.hero .tagline,
.page-head h1,
.page-head .page-title,
#v2 .hero h1,
#v2 .hero .tagline {
font-size: clamp(30px, 8vw, 44px) !important;
line-height: 1.12 !important;
letter-spacing: -0.02em !important;
}
.hero .lead,
.hero .ph-intro,
.page-head .sec-desc,
#v2 .hero .lead {
font-size: 16px !important;
line-height: 1.6 !important;
}
.hero .eyebrow,
.page-head .eyebrow {
font-size: 11px !important;
margin-bottom: 16px !important;
}
.navbar {
height: 64px !important;
}
.navbar .page.nav-inner,
.navbar .nav-inner {
padding-left: 20px !important;
padding-right: 20px !important;
}
.navbar .menu {
gap: 20px !important;
}
.navbar .menu a {
font-size: 13px !important;
}
.logo-text {
font-size: 15px !important;
}
#v2 .ask .box,
.ask .box {
padding: 14px !important;
}
}
@media (max-width: 480px) {
.hero h1,
.hero .tagline,
.page-head h1,
#v2 .hero h1 {
font-size: clamp(26px, 9vw, 34px) !important;
}
}
.hero .eyebrow,
.page-head .eyebrow {
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: rgba(17,24,39,.48) !important;
margin-bottom: 24px !important;
}
.hero h1,
.hero .tagline,
.page-head h1,
.page-head .page-title {
font-size: clamp(36px, 5vw, 64px) !important;
line-height: 1.08 !important;
letter-spacing: -.02em !important;
font-weight: 500 !important;
color: #111827 !important;
margin-bottom: 24px !important;
}
.hero .lead,
.hero .ph-intro,
.page-head .sec-desc {
font-size: 18px !important;
line-height: 1.6 !important;
color: rgba(17,24,39,.68) !important;
max-width: 640px !important;
margin-bottom: 32px !important;
}
.cta,
.btn-primary,
.btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
padding: 0 24px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all .15s ease !important;
}
.cta,
.btn-primary {
background-color: #111827 !important;
color: #fff !important;
border: 1px solid #111827 !important;
}
.cta:hover,
.btn-primary:hover {
background-color: #1f2937 !important;
transform: translateY(-1px) !important;
}
.btn:not(.btn-primary) {
background-color: transparent !important;
color: #111827 !important;
border: 1px solid rgba(17,24,39,.16) !important;
}
.seg {
height: 32px !important;
padding: 3px !important;
background-color: rgba(17,24,39,.06) !important;
border: none !important;
border-radius: 999px !important;
}
.seg button {
height: 26px !important;
padding: 0 12px !important;
font-size: 12px !important;
font-weight: 500 !important;
color: rgba(17,24,39,.64) !important;
background-color: transparent !important;
border-radius: 999px !important;
}
.seg button.active {
background-color: #fff !important;
color: #111827 !important;
box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}
#v2 .ask .box,
.ask .box,
#trial .box {
background-color: #fff !important;
border: 1px solid rgba(17,24,39,.2) !important;
border-radius: 16px !important;
box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
padding: 20px !important;
}
#v2 .ask textarea,
.ask textarea {
color: #111827 !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
#v2 .ask textarea::placeholder,
.ask textarea::placeholder {
color: rgba(17,24,39,.65) !important;
}
#v2 .ask .hint,
.ask .hint {
color: rgba(17,24,39,.56) !important;
font-size: 13px !important;
}
#v2 .ask .examples button,
.ask .examples button {
background-color: rgba(17,24,39,.08) !important;
color: rgba(17,24,39,.78) !important;
border: 1px solid rgba(17,24,39,.1) !important;
border-radius: 999px !important;
padding: 8px 14px !important;
font-size: 13px !important;
}
#v2 .ask .examples button:hover,
.ask .examples button:hover {
background-color: rgba(17,24,39,.12) !important;
border-color: rgba(17,24,39,.16) !important;
}
#v2 .ask .examples button:hover,
.ask .examples button:hover {
background-color: rgba(17,24,39,.1) !important;
}
.final .cta, .final .btn,
.play-sec .cta, .play-sec .btn,
.footer .cta, .footer .btn,
.cta-panel .cta, .cta-panel .btn,
.ctabox .cta, .ctabox .btn,
.uc-cta .cta, .uc-cta .btn,
.linkcard .cta, .linkcard .btn,
.pillar .cta, .pillar .btn,
.icell .cta, .icell .btn,
.sm .cta, .sm .btn,
.trust .cta, .trust .btn,
.navbar .cta,
.dark .cta, .dark .btn,
.bg-dark .cta, .bg-dark .btn,
[data-theme="dark"] .cta {
background-color: rgba(255,255,255,.08) !important;
color: #fff !important;
border-color: rgba(255,255,255,.42) !important;
}
.final .cta:hover, .final .btn:hover,
.play-sec .cta:hover, .play-sec .btn:hover,
.footer .cta:hover, .footer .btn:hover,
.cta-panel .btn:hover, .ctabox .btn:hover, .uc-cta .btn:hover {
background-color: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.6) !important;
}
.final h1, .final h2, .final h3, .final p, .final .lead,
.play-sec h1, .play-sec h2, .play-sec h3, .play-sec p, .play-sec .lead {
color: #fff !important;
}
.final .lead, .play-sec .lead, .final .sub, .play-sec .sub {
color: rgba(255,255,255,.68) !important;
}
.card,
.linkcard,
.uc-card,
.rcard {
border-radius: 16px !important;
border: 1px solid rgba(17,24,39,.08) !important;
background-color: #fff !important;
overflow: hidden !important;
}