body{text-rendering:auto}
[data-theme="light"] { --w-55: rgba(0, 0, 0, 0.62) !important; }
.footer-bottom {
justify-content: flex-start !important;
text-align: left !important;
gap: 8px !important;
flex-wrap: wrap;
}
.footer-bottom span[aria-hidden="true"] { display: inline !important; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
@media (max-width: 720px) {
.footer-bottom { gap: 6px !important; }
}
.footer-bottom .beian-gongan {
display: inline-flex; align-items: center; gap: 4px;
text-decoration: none; white-space: nowrap;
}
.footer-bottom .beian-gongan img {
width: 13px; height: 14px; display: block; flex: none;
filter: none;
}
.footer-bottom .beian-gongan:hover { text-decoration: underline; }
.footer-bottom .beian-gongan:hover img { text-decoration: none; }
:root {
--r-sm: 4px;
--r-card: 16px;
--r-pill: 100px;
--accent-brand: #1D4ED8;
--accent-brand-glow: rgba(29,78,216,.12);
--accent-brand-glow-strong: rgba(29,78,216,.22);
--accent-brand-hover: #1E40AF;
--accent-teal: #0F766E;
--accent-teal-glow: rgba(15,118,110,.10);
--bg-alt: #F6F7F9;
--bg-base: #FFFFFF;
--bg-elevated: #FFFFFF;
--bg-navbar: rgba(255,255,255,.82);
--bg-surface: #F6F7F9;
--border-default: rgba(0,0,0,.10);
--border-strong: rgba(0,0,0,.18);
--border-subtle: rgba(0,0,0,.055);
--card-veil: linear-gradient(to top,rgba(255,255,255,.96),transparent);
--ls-display: -.03em;
--shadow-btn: 0 1px 2px rgba(16,24,40,.08);
--shadow-card: 0 1px 2px rgba(16,24,40,.04),0 12px 28px rgba(16,24,40,.07);
--signal-fail: #FF5F56;
--signal-pass: #2DD4BF;
--signal-warn: #FFBD2E;
--text-body: 18px;
--text-desc: #55565A;
--text-display: clamp(36px,4.2vw,64px);
--text-h1: 44px;
--text-h2: 36px;
--text-h3: 20px;
--text-muted: #86868B;
--text-primary: #1C1C1E;
--text-secondary: #55565A;
--text-small: 14px;
--text-title: #0B0B0C;
--w-03: rgba(0,0,0,0.048);
--w-04: rgba(0,0,0,0.064);
--w-05: rgba(0,0,0,0.08);
--w-06: rgba(0,0,0,0.096);
--w-07: rgba(0,0,0,0.112);
--w-08: rgba(0,0,0,0.128);
--w-09: rgba(0,0,0,0.144);
--w-10: rgba(0,0,0,0.16);
--w-12: rgba(0,0,0,0.192);
--w-14: rgba(0,0,0,0.2);
--w-16: rgba(0,0,0,0.2);
--w-18: rgba(0,0,0,0.2);
--w-20: rgba(0,0,0,0.2);
--w-22: rgba(0,0,0,0.22);
--w-24: rgba(0,0,0,0.24);
--w-25: rgba(0,0,0,0.25);
--w-28: rgba(0,0,0,0.28);
--w-30: rgba(0,0,0,0.3);
--w-35: rgba(0,0,0,0.35);
--w-38: rgba(0,0,0,0.38);
--w-40: rgba(0,0,0,0.4);
--w-42: rgba(0,0,0,0.42);
--w-44: rgba(0,0,0,0.44);
--w-45: rgba(0,0,0,0.45);
--w-50: rgba(0,0,0,0.5);
--w-52: rgba(0,0,0,0.52);
--w-55: rgba(0, 0, 0, 0.62);
--w-56: rgba(0,0,0,0.56);
--w-60: rgba(0,0,0,0.6);
--w-64: rgba(0,0,0,0.64);
--w-66: rgba(0,0,0,0.66);
--w-72: rgba(0,0,0,0.72);
--w-75: rgba(0,0,0,0.75);
--w-78: rgba(0,0,0,0.78);
--w-84: rgba(0,0,0,0.84);
}
.navbar .logo-mark, .navbar .logo-text,
.navbar .logo-mark circle, .navbar .logo-mark path { color: #E8EAED !important; }
:root {
--bg: #FFFFFF !important;
--bg-base: #FFFFFF !important;
--bg-alt: #F6F7F9 !important;
--bg-elevated: #FFFFFF !important;
--bg-surface: #F6F7F9 !important;
--bg-page: #FFFFFF !important;
--bg-navbar: rgba(255,255,255,.92) !important;
--bg-dark: #F3F4F6 !important;
--text-primary: #111827 !important;
--text-secondary: rgba(17,24,39,.72) !important;
--text-muted: rgba(17,24,39,.56) !important;
--text-title: #111827 !important;
--border-subtle: rgba(0,0,0,.06) !important;
--border-default: rgba(0,0,0,.10) !important;
--border-strong: rgba(0,0,0,.16) !important;
}
[data-theme="dark"],
[data-theme="light"] {
background-color: #FFFFFF !important;
color: #111827 !important;
}
html, body {
background-color: #FFFFFF !important;
color: #111827 !important;
}
.theme-toggle,
button[class*="theme"],
a[class*="theme"] {
display: none !important;
}
.navbar {
background: rgba(255,255,255,.92) !important;
color: #111827 !important;
--text-primary: #111827 !important;
}
.navbar .logo-mark,
.navbar .logo-text,
.navbar .logo {
color: #111827 !important;
}
.navbar .menu a,
.navbar .nav-link {
color: rgba(17,24,39,.72) !important;
}
.navbar .menu a:hover,
.navbar .nav-link:hover {
color: #111827 !important;
}
.hero,
.phead,
section[class*="hero"] {
background-color: #FFFFFF !important;
color: #111827 !important;
}
.hero::before,
.phead::before,
section[class*="hero"]::before {
opacity: .5 !important;
}
.hero::after,
.phead::after,
section[class*="hero"]::after {
background: linear-gradient(to bottom,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.88) 40%,
rgba(255,255,255,.96) 100%) !important;
box-shadow: none !important;
}
#v2 .hero .hint,
#v2 .ask .hint,
.hero .trial-hint,
#v2 .ask .examples button,
.hero .examples button,
.hero .trial-hint span {
color: rgba(17,24,39,.72) !important;
}
#v2 .ask .examples button:hover,
.hero .examples button:hover {
color: #111827 !important;
}
.footer,
.linkcard,
.uc-cta,
.pillar,
.ctabox,
.uc-card,
.icell,
.footer-logo,
.footer-col,
.footer-brand,
.dark,
[data-theme="dark"] {
--text-primary: #E8EAED !important;
--text-secondary: rgba(255,255,255,.72) !important;
--text-muted: rgba(255,255,255,.56) !important;
--text-title: #F5F6F8 !important;
}
.navbar .seg button,
.navbar .seg a {
color: rgba(17,24,39,.72) !important;
}
.navbar .seg button.active,
.navbar .seg a.active {
color: #111827 !important;
background: rgba(17,24,39,.10) !important;
}
.accent,
#v2 .accent,
span.accent {
color: #0369A1 !important;
}
.cta-btn,
a.cta-btn,
#v2 .cta-btn {
color: #FFFFFF !important;
}
.hero h1, .hero h2, .hero h3,
.hero p, .hero .eyebrow, .hero .subtitle,
.hero .tagline, .hero .lead,
.phead h1, .phead h2, .phead p,
section[class*="hero"] h1,
section[class*="hero"] p,
section[class*="hero"] .eyebrow {
color: #111827 !important;
}
.pmain .cta-panel-card, #v2 .cta-panel-card, html body .cta-panel-card,
.pmain .cta-panel, #v2 .cta-panel, html body .cta-panel {
background-color: #FFFFFF !important;
border-color: rgba(17,24,39,.10) !important;
}
.pmain .cta-panel-card .cta-panel-title, #v2 .cta-panel-title, html body .cta-panel-title {
color: #111827 !important;
}
.pmain .cta-panel-card .cta-panel-desc, #v2 .cta-panel-desc, html body .cta-panel-desc {
color: rgba(17,24,39,.72) !important;
}
.pmain a.cta, #v2 a.cta, html body a.cta,
.pmain .ctas a.cta, #v2 .ctas a.cta,
.pmain .ctabox a.cta, #v2 .ctabox a.cta,
.pmain .ctabox .cta, #v2 .ctabox .cta {
color: rgba(17,24,39,.80) !important;
border-color: rgba(17,24,39,.32) !important;
}
.pmain a.cta:hover, #v2 a.cta:hover, html body a.cta:hover {
color: #111827 !important;
border-color: #111827 !important;
background-color: rgba(17,24,39,.04) !important;
}
.pmain code, #v2 code, html body code,
.pmain .uc-cta code, #v2 .uc-cta code, .pmain pre, #v2 pre, html body pre {
color: #111827 !important;
background-color: rgba(17,24,39,.06) !important;
}
.pmain .uc-cta .uc-cta-t, #v2 .uc-cta .uc-cta-t, html body .uc-cta-t,
.pmain .uc-cta h2, #v2 .uc-cta h2, .pmain .uc-cta h3, #v2 .uc-cta h3 {
color: #111827 !important;
}
.pmain .uc-cta .uc-cta-d, #v2 .uc-cta .uc-cta-d, html body .uc-cta-d,
.pmain .uc-cta p, #v2 .uc-cta p {
color: rgba(17,24,39,.72) !important;
}
.pmain .uc-cta .cta, #v2 .uc-cta .cta, html body .uc-cta .cta,
.pmain .ctas .cta, #v2 .ctas .cta, html body .cta {
color: rgba(17,24,39,.80) !important;
border-color: rgba(17,24,39,.32) !important;
}
.pmain .uc-cta .cta:hover, #v2 .uc-cta .cta:hover, html body .uc-cta .cta:hover {
color: #111827 !important;
border-color: #111827 !important;
background-color: rgba(17,24,39,.04) !important;
}
.pmain .uc-card, #v2 .uc-card, html body .uc-card,
.pmain .icell, #v2 .icell, html body .icell,
.pmain .pillar, #v2 .pillar, html body .pillar,
.pmain .ctabox, #v2 .ctabox, html body .ctabox,
.pmain .uc-cta, #v2 .uc-cta, html body .uc-cta {
background-color: #FFFFFF !important;
border-color: rgba(17,24,39,.10) !important;
color: #111827 !important;
}
.pmain .uc-card *, #v2 .uc-card *, html body .uc-card *,
.pmain .icell *, #v2 .icell *, html body .icell *,
.pmain .pillar *, #v2 .pillar *, html body .pillar *,
.pmain .ctabox *, #v2 .ctabox *, html body .ctabox * {
color: #111827 !important;
}
.pmain .uc-card .uc-card-d, #v2 .uc-card .uc-card-d,
.pmain .uc-card p, #v2 .uc-card p,
.pmain .pillar p, #v2 .pillar p,
.pmain .ctabox p, #v2 .ctabox p {
color: rgba(17,24,39,.72) !important;
}
.pmain .uc-card .uc-card-t, #v2 .uc-card .uc-card-t, html body .uc-card .uc-card-t,
.pmain .uc-card-t, #v2 .uc-card-t, html body .uc-card-t {
color: #111827 !important;
}
.pmain .uc-card .uc-card-d, #v2 .uc-card .uc-card-d, html body .uc-card .uc-card-d,
.pmain .uc-card-d, #v2 .uc-card-d, html body .uc-card-d,
.pmain .uc-card p, #v2 .uc-card p {
color: rgba(17,24,39,.72) !important;
}
.pmain .uc-card, #v2 .uc-card, html body .uc-card {
color: #111827 !important;
}
.pmain .ev-footer .ev-footer-col-title, #v2 .ev-footer-col-title, html body .ev-footer-col-title {
color: rgba(17,24,39,.50) !important;
}
.pmain .ev-footer *, #v2 .ev-footer *, html body .ev-footer * {
color: rgba(17,24,39,.72) !important;
}
.pmain .pdemo-tab, #v2 .pdemo-tab, html body .pdemo-tab,
.pmain .report .pdemo-tab, #v2 .report .pdemo-tab {
color: rgba(17,24,39,.60) !important;
}
.pmain .pdemo-tab.active, #v2 .pdemo-tab.active, html body .pdemo-tab.active {
color: #111827 !important;
}
.pmain .pdemo *, #v2 .pdemo *, html body .pdemo * {
color: #111827 !important;
}
#v2 .ask .box,
#v2 .trial,
.hero .trial,
.hero .ask .box {
background-color: rgba(17,24,39,.04) !important;
border-color: rgba(17,24,39,.14) !important;
}
#v2 .ask textarea,
#v2 .trial-input,
#v2 textarea,
#v2 input[type="text"],
#v2 input[type="email"],
#v2 input[type="search"],
.hero textarea,
.hero input[type="text"] {
color: #111827 !important;
}
#v2 .ask textarea::placeholder,
#v2 .trial-input::placeholder,
.hero textarea::placeholder,
.hero input::placeholder {
color: rgba(17,24,39,.45) !important;
}
#v2 .ask .examples button,
.hero .examples button {
background-color: rgba(17,24,39,.03) !important;
border-color: rgba(17,24,39,.14) !important;
}
#v2 .ask .examples button:hover,
.hero .examples button:hover {
border-color: rgba(17,24,39,.28) !important;
background-color: rgba(17,24,39,.06) !important;
}
#v2 .trial-send:disabled,
#v2 .ask .send:disabled {
background-color: rgba(17,24,39,.12) !important;
opacity: 1 !important;
}
.footer,
footer.footer {
background-color: #FFFFFF !important;
}
.footer .logo-text,
.footer .footer-copy,
.footer .footer-col h3,
.footer .footer-col h4,
.footer .footer-col a,
.footer .footer-bottom,
.footer .footer-bottom a,
.footer .bo-label,
.footer .bo-name,
.footer .bo-role,
.footer .footer-brand-info a {
color: rgba(17,24,39,.72) !important;
}
.footer .logo-mark,
.footer .footer-col a:hover,
.footer .footer-bottom a:hover {
color: #111827 !important;
}
.footer .footer-col h3,
.footer .footer-col h4 {
color: rgba(17,24,39,.50) !important;
}
code, kbd, samp,
.pmain code, .prose-body code, .psec code, pre code, pre {
color: #111827 !important;
background-color: rgba(17,24,39,.06) !important;
}
.ver, .tl-ver, .tl-date, .tl-t, .saxis,
.pmain .ver, .ph-title .ver {
color: rgba(17,24,39,.72) !important;
}
.accent, #v2 .accent, span.accent,
.accent-teal, .txt-accent {
color: #0369A1 !important;
}
.cta-btn:not(.primary):not(.cta-primary) {
color: #111827 !important;
border-color: rgba(17,24,39,.20) !important;
}
.cta-btn.primary, .cta-btn.cta-primary {
color: #FFFFFF !important;
}
.linkcard, .policy-link, .card {
background-color: #FFFFFF !important;
border-color: rgba(17,24,39,.10) !important;
}
.linkcard h2, .linkcard h3, .linkcard p, .linkcard span,
.policy-link h2, .policy-link h3, .policy-link p, .policy-link span,
.linkcard .t, .policy-link .t {
color: #111827 !important;
}
.linkcard p, .policy-link p, .linkcard .d, .policy-link .d {
color: rgba(17,24,39,.72) !important;
}
.seg {
background-color: rgba(17,24,39,.04) !important;
padding: 3px !important;
}
.seg button {
background-color: transparent !important;
color: rgba(17,24,39,.72) !important;
}
.seg button.active {
background-color: rgba(17,24,39,.12) !important;
color: #111827 !important;
}
.menu a, .navbar .menu a {
position: relative !important;
}
.menu a.active, .navbar .menu a.active {
color: #111827 !important;
font-weight: 500 !important;
}
.menu a.active::after, .navbar .menu a.active::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: -8px !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background-color: #111827 !important;
border-radius: 1px !important;
width: 100% !important;
}
#v2 .hero h1 .accent, #v2 .tagline .accent, #v2 h1.tagline .accent, #v2 .page-title .accent {
color: inherit !important;
}
.hero .cta,
.hero .page-ctas .cta,
#v2 .hero .cta,
.page-head .cta,
.sec.page-head .cta {
display: inline-flex !important;
align-items: center !important;
align-self: flex-start !important;
gap: 6px !important;
padding: 12px 24px !important;
border-radius: 8px !important;
background-color: #224eee !important;
color: #fff !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 1.4 !important;
text-decoration: none !important;
border: 1px solid #224eee !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
transition: transform .15s ease, box-shadow .15s ease !important;
}
.hero .cta:hover,
.page-head .cta:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px rgba(34,78,238,.25) !important;
}
.hero .ph-intro,
.hero .lead,
.page-head .sec-desc,
#v2 .page-head .sec-desc {
font-size: 1.25rem !important;
line-height: 1.55 !important;
color: rgba(17,24,39,.72) !important;
max-width: 680px !important;
margin: 16px 0 28px 0 !important;
}
.eyebrow, .ph-label, .plabel, .section-label {font-family: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "PingFang SC", "HarmonyOS Sans SC", MiSans, -apple-system, "Microsoft YaHei", sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
color: rgba(17,24,39,.56) !important;
}
.demo-sec .eyebrow, .play-sec .eyebrow, .final .eyebrow, .dark-sec .eyebrow,
#v2 .demo-sec .eyebrow, #v2 .play-sec .eyebrow, #v2 .final .eyebrow {
color: rgba(255,255,255,.78) !important;
}
.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;
}
}
.skip-link {
position: absolute !important;
left: -9999px !important;
top: 0 !important;
z-index: 9999 !important;
padding: 12px 20px !important;
background: #111827 !important;
color: #fff !important;
border-radius: 0 0 8px 0 !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.skip-link:focus {
left: 0 !important;
outline: 2px solid #224eee !important;
outline-offset: 2px !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;
}