html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: sans-serif;
}
article,
aside,
details,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
a {
background-color: #0000;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: 700;
}
h1 {
margin: 0.67em 0;
}
small {
font-size: 80%;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
button,
input {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
text-transform: none;
-webkit-appearance: button;
cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
img {
vertical-align: middle;
}
.site-inline-link {
max-width: 100%;
display: inline-block;
}
h1,
h2,
h3,
h4 {
margin-bottom: 10px;
font-weight: 700;
}
h1,
h2,
h3 {
margin-top: 20px;
}
h4 {
margin-top: 10px;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
blockquote {
border-left: 5px solid #e2e2e2;
margin: 0 0 10px;
padding: 10px 20px;
font-size: 18px;
line-height: 22px;
}
ol,
ul {
margin-top: 0;
margin-bottom: 10px;
padding-left: 40px;
}
[type="button"],
button {
cursor: pointer;
-webkit-appearance: button;
border: 0;
}
label {
margin-bottom: 5px;
font-weight: 700;
display: block;
}
@font-face {
font-family: Sora;
src: url(../wisewand/fonts/sora-600.ttf) format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
:root {
--site-neutral-dark: #0d211d;
--site-neutral-white: #fff;
--site-brand-turquoise: #6bdbc5;
--site-alpha-dark-73: #0d211dba;
--site-neutral-light: #fcfcfc;
}
:root,
body {
--site-padding-section-xl: 6.25em;
--site-padding-section: 5em;
--site-font-size-h1: 4.375em;
--site-font-size-h2: 3.25em;
--site-font-size-h3: 2em;
--site-font-size-h4: 1.5em;
--site-padding-padding-horizontal: 2.5em;
--site-padding-section-m: 4em;
}
body {
background-color: var(--site-neutral-light);
font-family: Poppins, Arial, sans-serif;
color: var(--site-neutral-dark);
line-height: 1.4;
font-weight: 400;
letter-spacing: -0.007em;
font-size: var(--site-size-font);
}
ol {
margin-top: 0;
margin-bottom: 0;
padding-left: 2em;
}
li {
margin-bottom: 0.3em;
}
img {
object-fit: cover;
width: 100%;
max-width: 100%;
height: 100%;
display: inline-block;
}
.site-page {
overflow: clip;
}
.site-section {
width: 100%;
position: relative;
}
.site-section.site-hero {
padding-top: 6.25em;
}
.site-grid-3 {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-rows: auto;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: var(--site-grid-3);
display: grid;
}
.site-flex-col {
flex-flow: column;
display: flex;
}
.site-flex-col.site-gap-14 {
grid-column-gap: 0.875em;
grid-row-gap: 0.875em;
}
.site-m-center {
margin-left: auto;
margin-right: auto;
}
.site-text-l {
font-size: 1.125em;
}
.site-text-s {
font-size: 0.875em;
}
.site-theme {
background-color: var(--site-neutral-light);
color: var(--site-neutral-dark);
}
.site-overflow-hidden {
overflow: hidden;
}
.site-u-relative {
position: relative;
}
.site-button,
.site-z-1 {
z-index: 1;
position: relative;
}
.site-button {
font-weight: 600;
text-decoration: none;
padding: calc(0.75em + 1px) calc(1.375em + 1px) calc(0.85em + 3px) calc(1em + 1px);
}
.site-button + .site-button {
padding: 0.75em 1em 0.75em 1.375em;
}
.site-button,
.site-button-inner {
justify-content: center;
align-items: center;
display: flex;
}
.site-button-inner {
z-index: 2;
grid-column-gap: 0.5em;
grid-row-gap: 0.5em;
border-radius: 100vw;
position: relative;
}
.site-button-background {
z-index: 0;
border-radius: inherit;
border: 1px solid #0d211d;
border-bottom-width: 3px;
box-shadow: inset 0 -5px 0 #ffffff26, 0 4px 10px #00000059;
position: absolute;
inset: 0;
}
.site-weight-500 {
font-weight: 500;
}
.site-text-fade {
color: var(--site-alpha-dark-73);
}
.site-button-group {
grid-column-gap: 0.75em;
grid-row-gap: 0.75em;
justify-content: flex-start;
align-items: center;
display: flex;
}
.site-button-group:where(.site-buttons-centered) {
justify-content: center;
align-items: center;
}
.site-heading,
.site-paragraph {
width: 100%;
}
.site-section-layout {
grid-column-gap: 3.75em;
grid-row-gap: 3.75em;
flex-flow: column;
display: flex;
}
.site-section-layout.site-hero-actions {
grid-column-gap: 2.75em;
grid-row-gap: 2.75em;
}
.site-section-layout.site-faq-layout {
grid-column-gap: 2.5em;
grid-row-gap: 2.5em;
}
.site-hero-title {
grid-column-gap: 0.145em;
grid-row-gap: 0;
flex-flow: wrap;
justify-content: center;
align-items: center;
display: flex;
}
.site-hero-intro {
grid-column-gap: 1.75em;
grid-row-gap: 1.75em;
flex-flow: column;
display: flex;
}
.site-hero-reviews {
grid-column-gap: 1.25em;
grid-row-gap: 1.25em;
grid-template-rows: auto;
grid-template-columns: 1fr 1px 1fr 1px 1fr;
grid-auto-columns: 1fr;
width: 100%;
max-width: 56em;
margin-left: auto;
margin-right: auto;
display: grid;
}
.site-hero-guarantee {
grid-column-gap: 1em;
grid-row-gap: 1em;
justify-content: center;
align-items: center;
display: flex;
}
.site-integrations {
width: 100%;
max-width: 22.5em;
}
.site-integrations.site-grid-3 {
grid-column-gap: 0.625em;
grid-row-gap: 0.625em;
}
.site-area {
height: 1.375em;
position: absolute;
top: 0;
}
.site-container {
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 991px) {
body {
--site-padding-section-xl: 6.25em;
--site-padding-section: 5em;
--site-font-size-h1: 4.375em;
--site-font-size-h2: 3.25em;
--site-font-size-h3: 2em;
--site-font-size-h4: 1.5em;
--site-padding-padding-horizontal: 2.5em;
--site-padding-section-m: 4em;
}
.site-hero-reviews {
flex-flow: column;
display: flex;
}
}
@media screen and (max-width: 767px) {
body {
--site-padding-section-xl: 5em;
--site-padding-section: 4em;
--site-font-size-h1: 2.8em;
--site-font-size-h2: 2.2em;
--site-font-size-h3: 1.7em;
--site-font-size-h4: 1.4em;
--site-padding-padding-horizontal: 1.25em;
--site-padding-section-m: 3em;
}
.site-section.site-hero {
padding-top: 4.375em;
}
.site-grid-3 {
grid-template-columns: var(--site-grid-1);
}
.site-section-layout {
grid-column-gap: 2.75em;
grid-row-gap: 2.75em;
}
.site-section-layout.site-hero-actions {
grid-column-gap: 1.75em;
grid-row-gap: 1.75em;
}
.site-section-layout.site-faq-layout {
grid-column-gap: 2em;
grid-row-gap: 2em;
}
.site-hero-reviews {
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.site-integrations.site-grid-3 {
grid-template-columns: var(--site-grid-3);
}
}
@media screen and (max-width: 479px) {
.site-button-group {
flex-flow: column;
align-items: stretch;
}
.site-hero-guarantee {
display: none;
}
}
:root {
--site-size-unit: 16;
--site-size-container-ideal: 1440;
--site-size-container-min: 1080px;
--site-size-container-max: 1740px;
--site-size-container: clamp(var(--site-size-container-min), 100vw, var(--site-size-container-max));
--site-size-font: calc(var(--site-size-container)/(var(--site-size-container-ideal)/var(--site-size-unit)));
--site-max-width: 75em;
}
@media screen and (max-width: 991px) {
:root {
--site-size-container-ideal: 834;
--site-size-container-min: 768px;
--site-size-container-max: 991px;
}
}
@media screen and (max-width: 767px) {
:root {
--site-size-container-ideal: 550;
--site-size-container-min: 480px;
--site-size-container-max: 767px;
}
}
@media screen and (max-width: 479px) {
:root {
--site-size-container-ideal: 390;
--site-size-container-min: 320px;
--site-size-container-max: 479px;
}
}
body,
html {
font-size: var(--site-size-font);
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
h1 {
font-size: var(--site-font-size-h1);
}
h1,
h2 {
letter-spacing: -0.06em;
font-family: Sora, Arial, sans-serif;
line-height: 1.1;
font-weight: 600;
}
h2 {
font-size: var(--site-font-size-h2);
}
h3 {
font-size: var(--site-font-size-h3);
}
h3,
h4 {
letter-spacing: -0.06em;
font-family: Sora, Arial, sans-serif;
line-height: 1.1;
font-weight: 600;
}
h4 {
font-size: var(--site-font-size-h4);
}
@media (max-width: 767px) {
.site-text-l.site-sm-m {
font-size: 1em !important;
}
}
:root {
--site-grid-1: repeat(1, minmax(0, 1fr));
--site-grid-3: repeat(3, minmax(0, 1fr));
}
.site-container {
width: 100%;
max-width: calc(var(--site-max-width) + var(--site-padding-padding-horizontal) * 2) !important;
padding-left: var(--site-padding-padding-horizontal);
padding-right: var(--site-padding-padding-horizontal);
}
.site-container[data-space-bottom="0"] {
padding-bottom: 0 !important;
}
.site-container[data-space-top="0"] {
padding-top: 0 !important;
}
.site-container[data-space-top="m"] {
padding-top: var(--site-padding-section-m) !important;
}
.site-container {
padding-bottom: var(--site-padding-section);
padding-top: var(--site-padding-section);
}
.site-container[data-space-top="xl"] {
padding-top: var(--site-padding-section-xl);
}
.site-container[data-width="none"] {
max-width: 100vw !important;
}
.site-container[data-width="1440"] {
max-width: 90em !important;
}
.site-container[data-width="800"] {
max-width: 50em !important;
}
.site-gap-12 {
gap: 0.75em;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
-webkit-font-smoothing: antialiased;
}
body {
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
svg {
max-width: none;
height: auto;
box-sizing: border-box;
vertical-align: middle;
}
body,
html {
width: 100%;
height: auto !important;
min-height: 100%;
-ms-overflow-style: none;
scrollbar-width: none;
}
::selection {
background-color: var(--site-brand-turquoise);
text-shadow: none;
}
::-moz-selection {
background-color: var(--site-brand-turquoise);
color: var(--site-neutral-white);
text-shadow: none;
}
body ::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
}
html {
scrollbar-width: none;
}
[tabindex]:focus-visible {
outline: 0.125rem solid #4d65ff;
outline-offset: 0.125rem;
}
a,
button {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.site-text-center {
text-align: center;
}
.site-m-center {
margin: 0 auto;
}
:root {
--site-ease-main: cubic-bezier(0.625, 0.02, 0, 1.05);
--site-duration-s: 0.4s;
}
.site-button .site-button-background {
transition: all var(--site-duration-s) var(--site-ease-main);
}
.site-button:hover .site-button-background {
inset: 0.125em;
}
@font-face {
font-family: Poppins;
src: url("../wisewand/fonts/poppins-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../wisewand/fonts/poppins-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../wisewand/fonts/poppins-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../wisewand/fonts/poppins-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--site-black: #08090b;
--site-ink: #0d1212;
--site-panel: #0e1618;
--site-panel-2: #111d1f;
--site-border: hsla(0, 0%, 100%, 0.12);
--site-text: #fff;
--site-muted: #a1a1ab;
--site-teal: #0099a7;
--site-teal-dark: #007682;
--site-teal-light: #67dde7;
--site-orange: #fea500;
--site-shadow: 0 20px 48px rgba(0, 153, 167, 0.18);
}
html {
background: var(--site-black);
scroll-behavior: smooth;
}
.site-page,
body {
background: var(--site-black) !important;
color: var(--site-text) !important;
font-family:
Poppins,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
sans-serif !important;
}
body {
overflow-x: hidden;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.11;
background-image: radial-gradient(hsla(0, 0%, 100%, 0.65) 1px, transparent 1.5px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, #000, transparent 85%);
}
::selection {
background: var(--site-teal);
color: #fff;
}
body .site-section {
position: relative;
background: var(--site-black) !important;
color: #fff !important;
border-color: var(--site-border) !important;
}
body .site-section:nth-of-type(2n) {
background: #0b1113 !important;
}
body .site-section:nth-of-type(3n) {
background: #0d1618 !important;
}
body
.site-section
:where(
h1,
h2,
h3,
h4,
h5,
h6,
strong,
.site-weight-600,
.site-weight-700,
.site-hero-data-item,
.site-need-item,
.site-step-tag,
.site-step-demande-item,
.site-faq-nav-btn-text
) {
color: #fff !important;
}
body .site-section :where(p, .site-text-fade, .site-text-s, .site-text-xs) {
color: var(--site-muted) !important;
}
body .site-section a {
color: inherit;
}
.site-header {
position: absolute;
inset: 0 0 auto;
z-index: 100;
width: 100%;
color: #fff;
background: transparent;
font-family:
Poppins,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
sans-serif;
}
.site-header * {
box-sizing: border-box;
}
.site-nav {
position: relative;
width: min(1140px, calc(100% - 32px));
height: 72px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.site-logo {
grid-column: 1;
justify-self: start;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.site-logo img {
display: block;
width: 190px;
height: 32px;
object-fit: contain;
}
.site-menu {
position: absolute;
left: 50%;
top: 50%;
grid-column: auto;
justify-self: auto;
display: flex;
align-items: center;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
transform: translate(-50%, -50%);
}
.site-menu > li {
position: relative;
margin: 0;
padding: 0;
}
.site-menu a,
.site-menu button {
font:
500 14px/1 Poppins,
sans-serif;
color: hsla(0, 0%, 100%, 0.8);
text-decoration: none;
transition: color 0.2s ease;
background: none;
border: 0;
cursor: pointer;
}
.site-drop-button,
.site-menu > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 20px 0 !important;
white-space: nowrap;
}
.site-dropdown.site-is-open > .site-drop-button,
.site-menu a:hover,
.site-menu button:hover {
color: #fff;
}
.site-chevron {
width: 12px;
height: 12px;
opacity: 0.6;
transition: transform 0.2s ease;
}
.site-dropdown.site-is-open .site-chevron,
.site-dropdown:focus-within .site-chevron,
.site-dropdown:hover .site-chevron {
transform: rotate(180deg);
}
.site-drop-wrap {
position: absolute;
top: 100%;
left: 50%;
z-index: 120;
display: none;
padding-top: 13px;
transform: translateX(-50%);
}
.site-dropdown.site-is-open .site-drop-wrap,
.site-dropdown:focus-within .site-drop-wrap,
.site-dropdown:hover .site-drop-wrap {
display: block;
}
.site-nav-panel {
width: max-content;
min-width: 230px;
margin: 0;
padding: 8px;
list-style: none;
border-radius: 14px;
background: #fff;
box-shadow: 0 20px 48px -12px rgba(8, 9, 11, 0.28);
}
.site-nav-panel li {
margin: 0;
padding: 0;
}
.site-nav-panel a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
color: #08090b;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
}
.site-nav-panel a:hover {
color: #007682;
background: #f0fafa;
}
.site-nav-panel svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.site-actions {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.site-login,
.site-try {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border-radius: 80px;
color: #fff !important;
font:
600 14px/1 Poppins,
sans-serif;
text-decoration: none;
transition:
transform 0.2s ease,
background 0.2s ease;
}
.site-login {
border: 1px solid #fff;
background: transparent;
}
.site-try {
border: 1px solid #007682;
background: #007682;
}
.site-login:hover,
.site-try:hover {
transform: translateY(-2px);
}
.site-try:hover {
background: #0099a7;
border-color: #0099a7;
}
.site-flag {
display: block;
width: 18px;
height: 12px;
border-radius: 2px;
overflow: hidden;
}
.site-mobile-toggle {
display: none;
width: 42px;
height: 42px;
place-items: center;
padding: 0;
border: 1px solid hsla(0, 0%, 100%, 0.3);
border-radius: 50%;
background: hsla(0, 0%, 100%, 0.06);
color: #fff;
cursor: pointer;
}
.site-mobile-toggle svg {
width: 21px;
height: 21px;
}
.site-drawer,
.site-overlay {
display: none;
}
@media (max-width: 980px) {
.site-nav {
width: calc(100% - 32px);
}
.site-menu {
gap: 14px;
}
.site-logo img {
width: 158px;
height: auto;
}
.site-login,
.site-try {
padding: 11px 16px;
}
}
@media (max-width: 880px) {
.site-nav {
height: 64px;
}
.site-login,
.site-menu {
display: none;
}
.site-actions {
margin-left: auto;
gap: 9px;
}
.site-try {
padding: 11px 16px;
font-size: 13px;
}
.site-mobile-toggle {
display: grid;
}
.site-overlay {
position: fixed;
inset: 0;
z-index: 998;
display: block;
background: rgba(0, 0, 0, 0.48);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.site-drawer {
position: fixed;
inset: 0 0 0 auto;
z-index: 999;
display: flex;
width: min(86%, 384px);
padding: 22px 24px 28px;
flex-direction: column;
overflow-y: auto;
background: #fff;
color: #08090b;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.site-header.site-is-mobile-open .site-overlay {
opacity: 1;
pointer-events: auto;
}
.site-header.site-is-mobile-open .site-drawer {
transform: translateX(0);
}
.site-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.site-drawer-head img {
width: 150px;
filter: brightness(0);
}
.site-drawer-close {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid #d8e0e1;
border-radius: 50%;
background: #fff;
color: #08090b;
font-size: 25px;
line-height: 1;
cursor: pointer;
}
.site-mobile-group {
border-bottom: 1px solid #e3e8e9;
}
.site-mobile-group summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 2px;
list-style: none;
font-weight: 600;
cursor: pointer;
}
.site-mobile-group summary::-webkit-details-marker {
display: none;
}
.site-mobile-group summary:after {
content: "+";
color: #007682;
font-size: 20px;
font-weight: 400;
}
.site-mobile-group[open] summary:after {
content: "−";
}
.site-mobile-links {
display: grid;
gap: 2px;
padding: 0 0 12px;
}
.site-mobile-link,
.site-mobile-links a {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 2px;
color: #08090b !important;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.site-mobile-links svg {
width: 18px;
height: 18px;
color: #007682;
}
.site-drawer-actions {
display: flex;
gap: 10px;
margin-top: 24px;
}
.site-drawer-actions a {
flex: 1;
text-align: center;
padding: 13px 12px;
border-radius: 80px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.site-drawer-login {
border: 1px solid #cad4d5;
color: #08090b !important;
}
.site-drawer-try {
background: #007682;
color: #fff !important;
}
body.site-menu-locked {
overflow: hidden;
}
}
.site-section:first-of-type {
padding-top: 22px !important;
background: radial-gradient(
circle at 58% 12%,
rgba(0, 118, 130, 0.76) 0,
rgba(0, 81, 90, 0.32) 28%,
var(--site-black) 64%
) !important;
}
.site-section:first-of-type:before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(hsla(0, 0%, 100%, 0.025) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, 0.025) 1px, transparent 0);
background-size: 72px 72px;
mask-image: radial-gradient(circle at 50% 35%, #000, transparent 70%);
}
.site-hero-emblem {
position: absolute;
z-index: 0;
top: 70px;
left: 50%;
width: min(720px, 64vw);
aspect-ratio: 1;
transform: translateX(-50%);
pointer-events: none;
border: 1px solid rgba(103, 221, 231, 0.08);
border-radius: 50%;
opacity: 0.72;
background: radial-gradient(circle, rgba(0, 153, 167, 0.18) 0, rgba(0, 118, 130, 0.07) 29%, transparent 67%);
}
.site-hero-emblem:after,
.site-hero-emblem:before {
content: "";
position: absolute;
border: 1px dashed rgba(103, 221, 231, 0.12);
border-radius: 50%;
}
.site-hero-emblem:before {
inset: 14%;
}
.site-hero-emblem:after {
inset: 30%;
border-style: solid;
border-color: hsla(0, 0%, 100%, 0.07);
}
.site-hero-emblem img {
position: absolute;
top: 50%;
left: 50%;
width: 24%;
height: auto;
transform: translate(-50%, -50%);
filter: brightness(0) invert(1);
opacity: 0.075;
}
.site-floating-signals {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.site-floating-signal {
position: absolute;
width: 92px;
height: 92px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.18));
will-change: transform;
}
.site-floating-signal:after,
.site-floating-signal:before {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.site-floating-signal:before {
inset: -8px;
border: 1px dashed rgba(103, 221, 231, 0.17);
}
.site-floating-signal:after {
width: 5px;
height: 5px;
top: 50%;
left: 50%;
margin: -2.5px 0 0 -2.5px;
background: var(--site-teal-light);
box-shadow: 0 0 12px rgba(103, 221, 231, 0.8);
will-change: transform;
animation: site-signal-dot-orbit 5.4s linear infinite;
}
.site-floating-signal.site-google:after {
animation-duration: 4.8s;
animation-delay: -1.2s;
}
.site-floating-signal.site-chatgpt:after {
animation-duration: 6.2s;
animation-direction: reverse;
animation-delay: -3.4s;
}
.site-floating-signal.site-gemini:after {
animation-duration: 5.5s;
animation-delay: -2.1s;
}
.site-floating-signal.site-claude:after {
animation-duration: 6.8s;
animation-direction: reverse;
animation-delay: -0.8s;
}
@keyframes site-signal-dot-orbit {
0% {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: rotate(1turn) translateX(50px) rotate(-1turn);
}
}
.site-signal-core {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.site-signal-core img {
display: block;
width: 36px;
height: 36px;
object-fit: contain;
}
.site-floating-signal.site-chatgpt .site-signal-core img {
width: 46px;
height: 46px;
}
.site-floating-signal.site-gemini .site-signal-core img {
width: 38px;
height: 38px;
}
.site-floating-signal.site-claude .site-signal-core img {
width: 40px;
height: 40px;
}
.site-signal-label {
position: absolute;
top: 103px;
left: 50%;
transform: translateX(-50%);
color: hsla(0, 0%, 100%, 0.76);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
text-shadow: 0 2px 12px #08090b;
}
.site-floating-signal.site-google {
top: 470px;
left: clamp(28px, 7vw, 132px);
animation: site-signal-google 7.5s ease-in-out infinite;
}
.site-floating-signal.site-chatgpt {
top: 278px;
right: clamp(28px, 7vw, 132px);
animation: site-signal-chat 9.5s ease-in-out -1.8s infinite;
}
.site-floating-signal.site-gemini {
top: 255px;
left: clamp(80px, 14vw, 238px);
animation: site-signal-gemini 8.8s ease-in-out -0.7s infinite;
}
.site-floating-signal.site-claude {
top: 492px;
right: clamp(80px, 14vw, 238px);
animation: site-signal-claude 10.3s ease-in-out -2.6s infinite;
}
@keyframes site-signal-google {
0%,
to {
transform: translateZ(0) rotate(-3deg);
}
35% {
transform: translate3d(13px, -17px, 0) rotate(2deg);
}
70% {
transform: translate3d(-7px, 9px, 0) rotate(-1deg);
}
}
@keyframes site-signal-chat {
0%,
to {
transform: translateZ(0) rotate(3deg);
}
30% {
transform: translate3d(-16px, 11px, 0) rotate(-2deg);
}
65% {
transform: translate3d(7px, -19px, 0) rotate(1deg);
}
}
@keyframes site-signal-gemini {
0%,
to {
transform: translateZ(0) scale(0.96);
}
40% {
transform: translate3d(-10px, 18px, 0) scale(1.03);
}
75% {
transform: translate3d(12px, -6px, 0) scale(1);
}
}
@keyframes site-signal-claude {
0%,
to {
transform: translateZ(0) rotate(-2deg);
}
38% {
transform: translate3d(15px, 14px, 0) rotate(3deg);
}
72% {
transform: translate3d(-9px, -11px, 0) rotate(0);
}
}
.site-hero-reviews.site-proof-mounted {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 54px;
margin-top: -30px !important;
margin-inline: auto !important;
margin-bottom: -50px !important;
}
.site-hero-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.site-proof-avatars {
display: flex;
align-items: center;
padding-left: 8px;
}
.site-proof-avatars img {
width: 42px;
height: 42px;
margin-left: -8px;
border: 2px solid #fff;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}
.site-proof-copy {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
}
.site-proof-stars {
color: var(--site-orange);
font-size: 15px;
letter-spacing: 2px;
line-height: 1;
}
.site-proof-copy span,
.site-proof-copy strong {
display: block;
}
.site-proof-copy strong {
color: #fff !important;
font-size: 12px;
line-height: 1.35;
}
.site-proof-copy span {
margin-top: 2px;
color: var(--site-muted);
font-size: 11px;
line-height: 1.3;
}
.site-section:first-of-type .site-section-layout.site-hero-actions {
gap: 16px !important;
}
.site-hero-guarantee.site-guarantee-mounted {
display: block !important;
width: auto !important;
}
.site-guarantee-line {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
color: #d9f4f3;
font-size: 12px;
line-height: 1.45;
text-align: center;
}
.site-guarantee-line > .site-guarantee-icon {
flex: none;
width: 22px;
height: 22px;
display: grid;
place-items: center;
border: 1px solid rgba(103, 221, 231, 0.45);
border-radius: 7px;
background: linear-gradient(145deg, rgba(103, 221, 231, 0.24), rgba(0, 153, 167, 0.08));
box-shadow:
inset 0 1px 0 hsla(0, 0%, 100%, 0.12),
0 5px 15px rgba(0, 153, 167, 0.15);
}
.site-guarantee-icon svg {
width: 15px;
height: 15px;
overflow: visible;
}
.site-guarantee-icon .site-shield {
fill: rgba(103, 221, 231, 0.16);
stroke: #9ce9ef;
stroke-width: 1.5;
stroke-linejoin: round;
}
.site-guarantee-icon .site-check {
fill: none;
stroke: #fff;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-guarantee-line strong {
color: #d9f4f3 !important;
font-weight: 500 !important;
}
.site-section:first-of-type .site-button-group .site-button:first-child .site-button-label {
display: flex;
align-items: center;
gap: 10px;
}
.site-section:first-of-type .site-button-group .site-button:first-child .site-button-label:after {
content: "→";
font-size: 18px;
font-weight: 500;
line-height: 1;
transition: transform 0.2s ease;
}
.site-section:first-of-type .site-button-group .site-button:first-child:hover .site-button-label:after {
transform: translateX(4px);
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2) {
display: inline-flex !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2) .site-button-background {
display: none !important;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2) .site-button-inner {
min-height: 0 !important;
padding: 8px 4px !important;
background: transparent !important;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2) .site-button-label {
display: flex;
align-items: center;
gap: 7px;
color: hsla(0, 0%, 100%, 0.78) !important;
font-size: 13px;
font-weight: 500;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2) .site-button-label:after {
content: "↓";
font-size: 16px;
line-height: 1;
transition: transform 0.2s ease;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2):hover {
transform: none !important;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2):hover .site-button-label {
color: #fff !important;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2):hover .site-button-label:after {
transform: translateY(3px);
}
.site-section:first-of-type .site-support-inline {
width: 100%;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
overflow-x: auto;
}
.site-section:first-of-type .site-support-inline > .site-paragraph {
width: auto !important;
flex: 0 0 auto;
margin: 0 !important;
}
.site-section:first-of-type .site-support-inline > .site-paragraph p {
white-space: nowrap;
}
.site-section:first-of-type .site-support-inline > .site-integrations {
width: auto !important;
max-width: none !important;
flex: 0 0 auto;
margin: 0 !important;
}
.site-section:first-of-type .site-support-inline .site-support-strip {
width: auto;
flex-wrap: nowrap;
justify-content: flex-start;
}
.site-hero-title {
color: #fff !important;
line-height: 1.02 !important;
letter-spacing: -0.055em !important;
}
.site-hero-intro {
gap: 12px !important;
}
.site-highlight {
display: inline-block;
color: #fff !important;
background: linear-gradient(110deg, #53b6c5, var(--site-teal-dark));
border: 2px solid hsla(0, 0%, 100%, 0.8);
border-radius: 0.18em;
padding: 0.02em 0.18em 0.09em;
box-shadow: 0 12px 30px rgba(0, 153, 167, 0.3);
transform: rotate(1deg);
white-space: nowrap;
}
.site-section:first-of-type .site-hero-intro p.site-text-l {
color: #fff !important;
opacity: 0.96 !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.2);
}
.site-button {
border-color: hsla(0, 0%, 100%, 0.25) !important;
border-radius: 999px !important;
overflow: hidden;
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
}
.site-button .site-button-background {
background: linear-gradient(110deg, #53b6c5, var(--site-teal-dark)) !important;
}
.site-button .site-button-inner,
.site-button .site-button-label {
color: #fff !important;
}
.site-button:hover {
box-shadow: var(--site-shadow);
transform: translateY(-1px);
}
.site-button-group .site-button:nth-child(2) {
background: transparent !important;
border: 1px solid hsla(0, 0%, 100%, 0.45) !important;
}
.site-button-group .site-button:nth-child(2) .site-button-background {
background: hsla(0, 0%, 100%, 0.03) !important;
}
.site-integrations {
color: #fff !important;
}
.site-support-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
width: 100%;
}
.site-partner-strip {
gap: 0 !important;
align-items: center;
}
.site-partner-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
color: #fff;
white-space: nowrap;
}
.site-partner-item:first-child {
padding-left: 0;
}
.site-partner-item:last-child {
padding-right: 0;
}
.site-partner-item + .site-partner-item:before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 1px;
height: 20px;
background: hsla(0, 0%, 100%, 0.13);
}
.site-partner-item > i {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid hsla(0, 0%, 100%, 0.14);
border-radius: 10px;
background: hsla(0, 0%, 100%, 0.055);
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 700;
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.05);
}
.site-partner-item > i img {
width: 19px;
height: 19px;
object-fit: contain;
}
.site-partner-item > i.site-wordpress {
font-family: Georgia, serif;
font-size: 15px;
}
.site-partner-item > i.site-api {
color: var(--site-teal-light);
font-size: 10px;
}
.site-partner-item > i.site-mcp {
color: #b5eef2;
font-size: 16px;
}
.site-partner-item strong {
color: #fff !important;
font-size: 11px;
font-weight: 500 !important;
letter-spacing: 0;
}
.site-app-preview {
position: relative;
width: min(1120px, 92vw);
margin: 4rem auto 1rem;
border: 1px solid rgba(103, 221, 231, 0.45);
border-radius: 24px;
background: #f8fafb;
color: var(--site-ink);
overflow: hidden;
box-shadow:
0 40px 100px rgba(0, 153, 167, 0.24),
0 0 0 8px hsla(0, 0%, 100%, 0.035);
text-align: left;
}
.site-app-preview * {
box-sizing: border-box;
}
.site-app-topbar {
height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 22px;
border-bottom: 1px solid #e7ecee;
background: #fff;
}
.site-app-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: #08090b;
}
.site-app-brand img {
width: 28px;
height: 28px;
}
.site-app-brand .site-app-logo {
width: 150px;
height: auto;
filter: invert(1);
object-fit: contain;
}
.site-shop-status {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid #e5eaec;
border-radius: 999px;
font-size: 12px;
color: #465153;
background: #fff;
}
.site-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #35c879;
box-shadow: 0 0 0 4px rgba(53, 200, 121, 0.12);
}
.site-faq-list {
width: min(900px, 100%);
margin: 2.5rem auto;
display: grid;
gap: 10px;
}
.site-faq-item {
border: 1px solid var(--site-border);
border-radius: 16px;
background: var(--site-panel);
overflow: hidden;
transition:
border-color 0.25s ease,
background 0.25s ease;
}
.site-faq-item[open] {
border-color: rgba(103, 221, 231, 0.48);
background: var(--site-panel-2);
}
.site-faq-item summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 22px;
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.site-faq-item summary::-webkit-details-marker {
display: none;
}
.site-faq-item summary:after {
content: "+";
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
border: 1px solid var(--site-border);
border-radius: 50%;
color: var(--site-teal-light);
font-size: 20px;
font-weight: 400;
transition: transform 0.25s ease;
}
.site-faq-item[open] summary:after {
transform: rotate(45deg);
}
.site-faq-answer {
padding: 0 22px 22px;
color: var(--site-muted);
font-size: 0.92rem;
line-height: 1.65;
max-width: 780px;
}
footer {
background: #050607 !important;
color: #fff !important;
border-color: var(--site-border) !important;
}
@media (max-width: 991px) {
.site-floating-signals {
display: none;
}
.site-app-preview {
width: 92vw;
margin-top: 2.4rem;
}
}
@media (max-width: 767px) {
.site-section:first-of-type {
padding-top: 26px !important;
}
.site-hero-emblem {
top: 84px;
width: 116vw;
opacity: 0.58;
}
.site-hero-emblem img {
width: 26%;
opacity: 0.065;
}
.site-hero-reviews.site-proof-mounted {
margin-bottom: -14px !important;
}
.site-hero-proof {
flex-direction: column;
gap: 9px;
}
.site-proof-copy {
flex-direction: column;
gap: 5px;
text-align: center;
}
.site-section:first-of-type .site-support-inline {
justify-content: flex-start !important;
padding-inline: 16px;
scrollbar-width: none;
}
.site-section:first-of-type .site-support-inline::-webkit-scrollbar {
display: none;
}
.site-hero-title {
letter-spacing: -0.045em !important;
}
.site-highlight {
white-space: normal;
}
.site-app-topbar {
height: 54px;
padding: 0 14px;
}
.site-shop-status {
font-size: 9px;
padding: 7px 9px;
}
}
.site-product-demo {
margin-top: 3rem;
background: #f4f7f7;
border-color: rgba(103, 221, 231, 0.55);
box-shadow:
0 42px 110px rgba(0, 153, 167, 0.22),
0 0 0 8px hsla(0, 0%, 100%, 0.035);
}
.site-product-demo .site-app-topbar {
height: 58px;
background: #fff;
}
.site-demo-steps {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
padding: 9px 10px 13px;
border-bottom: 1px solid #e3e9ea;
background: #edf1f1;
overflow: hidden;
}
.site-demo-steps span {
position: relative;
z-index: 1;
padding: 9px 12px;
border-radius: 9px;
color: #849093;
font-size: 10px;
font-weight: 700;
text-align: center;
transition:
color 0.35s ease,
background 0.35s ease,
box-shadow 0.35s ease;
}
.site-demo-steps span.site-is-active {
color: #006b75;
background: #fff;
box-shadow: 0 3px 12px rgba(16, 44, 48, 0.08);
}
.site-demo-progress {
position: absolute;
bottom: 0;
left: 0;
width: 20%;
height: 3px;
background: linear-gradient(90deg, #67dde7, #0099a7);
transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.site-product-demo[data-step="1"] .site-demo-progress {
width: 40%;
}
.site-product-demo[data-step="2"] .site-demo-progress {
width: 60%;
}
.site-product-demo[data-step="3"] .site-demo-progress {
width: 80%;
}
.site-product-demo[data-step="4"] .site-demo-progress {
width: 100%;
}
.site-demo-stage {
position: relative;
display: grid;
grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.22fr);
min-height: 500px;
background: #f7f9f9;
overflow: hidden;
}
.site-demo-cursor {
position: absolute;
z-index: 12;
left: 37%;
top: 79%;
width: 4px;
height: 4px;
pointer-events: none;
filter: drop-shadow(0 7px 10px rgba(10, 24, 26, 0.18));
transition:
left 1.05s cubic-bezier(0.2, 0.75, 0.2, 1),
top 1.05s cubic-bezier(0.2, 0.75, 0.2, 1),
transform 0.22s ease;
}
.site-demo-cursor svg {
position: absolute;
left: -2px;
top: -2px;
width: 24px;
height: 28px;
overflow: visible;
}
.site-demo-cursor svg path {
fill: #0b1112;
stroke: #fff;
stroke-width: 1.5;
stroke-linejoin: round;
}
.site-demo-cursor span {
position: absolute;
left: 17px;
top: 21px;
padding: 6px 9px;
border-radius: 7px 7px 7px 2px;
background: #087f89;
color: #fff;
font-size: 8px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(0, 121, 133, 0.22);
}
.site-demo-cursor > i {
position: absolute;
left: 3px;
top: 4px;
width: 12px;
height: 12px;
border: 2px solid rgba(8, 127, 137, 0.55);
border-radius: 50%;
opacity: 0;
animation: site-cursor-click 1.8s ease-in-out infinite;
}
.site-product-demo[data-step="1"] .site-demo-cursor {
left: 59%;
top: 21%;
}
.site-product-demo[data-step="2"] .site-demo-cursor {
left: 82%;
top: 61%;
}
.site-product-demo[data-step="3"] .site-demo-cursor {
left: 89%;
top: 20%;
}
.site-product-demo[data-step="4"] .site-demo-cursor {
left: 83%;
top: 48%;
}
@keyframes site-cursor-click {
0%,
58%,
to {
opacity: 0;
transform: scale(0.5);
}
68% {
opacity: 0.75;
transform: scale(1);
}
84% {
opacity: 0;
transform: scale(1.65);
}
}
.site-demo-chat,
.site-demo-planner {
position: relative;
min-width: 0;
background: #fff;
transition:
opacity 0.45s ease,
transform 0.45s ease;
}
.site-product-demo[data-step="4"] .site-demo-chat,
.site-product-demo[data-step="4"] .site-demo-planner {
opacity: 0;
transform: scale(0.985);
}
.site-demo-chat {
border-right: 1px solid #e0e7e8;
}
.site-demo-panel-head {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 20px;
border-bottom: 1px solid #e7ecec;
background: hsla(0, 0%, 100%, 0.96);
}
.site-demo-panel-head > div {
min-width: 0;
}
.site-demo-panel-head small,
.site-demo-panel-head strong {
display: block;
}
.site-demo-panel-head strong {
color: #101718 !important;
font-size: 13px;
line-height: 1.25;
}
.site-demo-panel-head small {
margin-top: 4px;
color: #7a8789;
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-demo-ai-pill,
.site-demo-publish {
flex: none;
padding: 7px 10px;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
white-space: nowrap;
}
.site-demo-ai-pill {
color: #007782;
background: #e6f8f9;
}
.site-demo-publish {
color: #08764f;
background: #eaf9f1;
}
.site-demo-conversation {
position: relative;
height: 356px;
padding: 22px 20px 76px;
overflow: hidden;
}
.site-demo-intro {
position: absolute;
inset: 0 18px 54px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: #101718;
text-align: center;
transition:
opacity 0.45s ease,
transform 0.45s ease;
}
.site-demo-intro img {
width: 34px;
height: 34px;
}
.site-demo-intro strong {
color: #101718 !important;
font-size: 17px;
line-height: 1.3;
}
.site-demo-message {
position: relative;
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.5s ease,
transform 0.5s ease;
color: #263032;
font-size: 11px;
line-height: 1.52;
}
.site-demo-user {
margin: 0 0 18px 34px;
padding: 13px 14px;
border: 1px solid #e2e8e9;
border-radius: 14px 14px 4px 14px;
background: #f5f7f7;
}
.site-demo-assistant {
display: grid;
grid-template-columns: 27px 1fr;
gap: 10px;
padding-right: 8px;
}
.site-demo-assistant img {
width: 27px;
height: 27px;
}
.site-demo-assistant p {
margin: 0;
}
.site-demo-assistant strong {
color: #007782 !important;
}
.site-product-demo[data-step="1"] .site-demo-intro,
.site-product-demo[data-step="2"] .site-demo-intro,
.site-product-demo[data-step="3"] .site-demo-intro {
opacity: 0;
transform: translateY(-10px);
}
.site-product-demo[data-step="1"] .site-demo-assistant,
.site-product-demo[data-step="1"] .site-demo-user,
.site-product-demo[data-step="2"] .site-demo-assistant,
.site-product-demo[data-step="2"] .site-demo-user,
.site-product-demo[data-step="3"] .site-demo-assistant,
.site-product-demo[data-step="3"] .site-demo-user {
opacity: 1;
transform: none;
}
.site-product-demo[data-step="1"] .site-demo-assistant {
transition-delay: 0.32s;
}
.site-demo-composer {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 3;
min-height: 49px;
display: flex;
align-items: center;
padding: 11px 50px 11px 14px;
border: 1px solid #dfe7e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(20, 48, 52, 0.09);
color: #3b4648;
font-size: 10px;
line-height: 1.35;
}
.site-demo-composer button {
position: absolute;
right: 8px;
top: 8px;
width: 33px;
height: 33px;
padding: 0;
border: 0;
border-radius: 50%;
background: #0a1112;
color: #fff;
font-size: 18px;
line-height: 1;
pointer-events: none;
}
.site-demo-caret {
width: 1px;
height: 15px;
margin-left: 2px;
background: #0099a7;
animation: site-demo-caret 0.75s steps(1) infinite;
}
@keyframes site-demo-caret {
50% {
opacity: 0;
}
}
.site-demo-calendar-head {
height: 51px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
border-bottom: 1px solid #e7ecec;
background: #fafbfb;
color: #788587;
font-size: 10px;
}
.site-demo-calendar-head button {
width: 25px;
height: 25px;
padding: 0;
border: 1px solid #dfe6e7;
border-radius: 7px;
background: #fff;
color: #263234;
pointer-events: none;
}
.site-demo-calendar-head b {
padding: 7px 10px;
border-radius: 999px;
background: #dcf7f8;
color: #006d77 !important;
}
.site-demo-calendar-head span {
margin-left: auto;
}
.site-demo-empty {
position: absolute;
inset: 122px 20px 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
color: #768285;
transition:
opacity 0.42s ease,
transform 0.42s ease;
}
.site-demo-empty img {
width: 37px;
height: 37px;
opacity: 0.75;
}
.site-demo-empty strong {
color: #1d282a !important;
font-size: 14px;
}
.site-demo-empty span {
font-size: 10px;
}
.site-demo-content-list {
display: grid;
gap: 10px;
padding: 17px 18px 24px;
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.5s ease,
transform 0.5s ease;
}
.site-demo-content-card {
display: grid;
grid-template-columns: 55px minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
min-height: 82px;
padding: 11px 12px;
border: 1px solid #dfe7e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 18px rgba(31, 60, 64, 0.045);
opacity: 0;
transform: translateY(9px);
transition:
opacity 0.45s ease,
transform 0.45s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.site-demo-content-card:nth-child(2) {
transition-delay: 0.13s;
}
.site-demo-content-card:nth-child(3) {
transition-delay: 0.26s;
}
.site-demo-content-card time {
display: grid;
place-items: center;
align-self: stretch;
border-radius: 10px;
background: #e9f8f9;
color: #007782;
font-size: 9px;
font-weight: 800;
text-align: center;
}
.site-demo-content-card div {
min-width: 0;
}
.site-demo-content-card span,
.site-demo-content-card strong {
display: block;
}
.site-demo-content-card strong {
color: #162022 !important;
font-size: 11px;
line-height: 1.35;
}
.site-demo-content-card span {
margin-top: 5px;
color: #7a8789;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-demo-content-card em {
min-width: 76px;
padding: 7px 8px;
border-radius: 999px;
background: #f0f3f3;
color: #7c898b;
font-size: 8px;
font-style: normal;
font-weight: 800;
text-align: center;
transition:
color 0.3s ease,
background 0.3s ease;
}
.site-product-demo[data-step="2"] .site-demo-empty,
.site-product-demo[data-step="3"] .site-demo-empty {
opacity: 0;
transform: translateY(-8px);
}
.site-product-demo[data-step="2"] .site-demo-content-card,
.site-product-demo[data-step="2"] .site-demo-content-list,
.site-product-demo[data-step="3"] .site-demo-content-card,
.site-product-demo[data-step="3"] .site-demo-content-list {
opacity: 1;
transform: none;
}
.site-demo-content-card[data-state="working"] {
border-color: #8bdce3;
box-shadow: 0 7px 24px rgba(0, 153, 167, 0.1);
}
.site-demo-content-card[data-state="working"] em {
color: #006f79;
background: #def6f8;
}
.site-demo-content-card[data-state="optimizing"] em {
color: #965a00;
background: #fff1d8;
}
.site-demo-content-card[data-state="published"] em,
.site-demo-content-card[data-state="published"] time {
color: #08754f;
background: #e4f8ed;
}
.site-demo-toast {
position: absolute;
top: 82px;
right: 18px;
z-index: 4;
max-width: 340px;
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
padding: 12px 15px;
border: 1px solid #d7e9df;
border-radius: 14px;
background: #fff;
box-shadow: 0 16px 40px rgba(17, 49, 37, 0.16);
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition:
opacity 0.45s ease,
transform 0.45s ease;
}
.site-demo-toast i {
width: 31px;
height: 31px;
display: grid;
place-items: center;
border-radius: 9px;
background: #dff8e9;
color: #08754f;
font-style: normal;
font-weight: 900;
}
.site-demo-toast span,
.site-demo-toast strong {
display: block;
}
.site-demo-toast strong {
color: #14201b !important;
font-size: 11px;
}
.site-demo-toast span {
margin-top: 3px;
color: #718079;
font-size: 9px;
line-height: 1.35;
}
.site-product-demo[data-step="3"] .site-demo-toast {
opacity: 1;
transform: none;
}
.site-demo-growth {
position: absolute;
inset: 0;
z-index: 6;
padding: 24px 26px 20px;
background: linear-gradient(145deg, #f9fbfb, #eef8f8);
opacity: 0;
transform: translateY(14px);
pointer-events: none;
transition:
opacity 0.55s ease,
transform 0.55s ease;
}
.site-product-demo[data-step="4"] .site-demo-growth {
opacity: 1;
transform: none;
}
.site-growth-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.site-growth-head h3 {
margin: 3px 0 2px;
color: #101718 !important;
font-size: 20px !important;
line-height: 1.2;
}
.site-growth-head p {
margin: 0;
color: #718083;
font-size: 10px;
}
.site-growth-kicker {
color: #008e9b;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.13em;
}
.site-growth-controls {
display: flex;
align-items: center;
gap: 7px;
}
.site-growth-cadence,
.site-growth-range {
padding: 8px 11px;
border: 1px solid #dce5e6;
border-radius: 999px;
background: #fff;
color: #607073;
font-size: 9px;
font-weight: 700;
white-space: nowrap;
}
.site-growth-cadence {
display: flex;
align-items: center;
gap: 6px;
color: #08754f;
background: #ecf9f2;
}
.site-growth-cadence i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #24ba72;
box-shadow: 0 0 0 3px rgba(36, 186, 114, 0.12);
}
.site-growth-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 14px;
}
.site-growth-metrics article {
position: relative;
padding: 12px 14px;
border: 1px solid #dfe8e9;
border-radius: 12px;
background: hsla(0, 0%, 100%, 0.9);
box-shadow: 0 5px 16px rgba(24, 58, 62, 0.04);
}
.site-growth-metrics em,
.site-growth-metrics span,
.site-growth-metrics strong {
display: block;
}
.site-growth-metrics span {
color: #748184;
font-size: 8px;
}
.site-growth-metrics strong {
margin-top: 4px;
color: #132022 !important;
font-size: 22px;
line-height: 1;
}
.site-growth-metrics strong b {
color: #132022 !important;
font-weight: 700;
}
.site-growth-metrics em {
position: absolute;
right: 12px;
bottom: 12px;
color: #07865b;
font-size: 8px;
font-style: normal;
font-weight: 800;
}
.site-growth-chart-card {
margin-top: 12px;
padding: 13px 16px 8px;
border: 1px solid #dfe8e9;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 26px rgba(24, 58, 62, 0.055);
}
.site-growth-chart-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.site-growth-chart-head > div > strong {
display: block;
color: #182325 !important;
font-size: 10px;
}
.site-growth-chart-head > div > span {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
color: #728083;
font-size: 7px;
}
.site-growth-chart-head > div > span i {
width: 13px;
height: 3px;
border-radius: 3px;
background: #14aab8;
}
.site-growth-chart-head > div > span i.site-impressions {
margin-left: 7px;
background: #8b7cf6;
}
.site-growth-chart-head > b {
color: #008b66 !important;
font-size: 20px;
line-height: 1;
}
.site-growth-chart-head > b small {
display: block;
margin-top: 4px;
color: #7a8789;
font-size: 7px;
font-weight: 600;
text-align: right;
}
.site-growth-chart {
height: 232px;
margin-top: -3px;
}
.site-growth-chart svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.site-growth-grid path {
fill: none;
stroke: #e9eeee;
stroke-width: 1;
}
.site-growth-area {
fill: url(#site-growth-fill);
opacity: 0;
}
.site-growth-line {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.site-growth-line.site-clicks {
stroke: #0ba8b6;
}
.site-growth-line.site-impressions {
stroke: #8b7cf6;
stroke-width: 2;
opacity: 0.6;
}
.site-growth-days text {
fill: #839093;
font-size: 8px;
}
.site-growth-events {
color: #0ba8b6;
}
.site-growth-events g {
opacity: 0;
filter: drop-shadow(0 4px 6px rgba(10, 48, 52, 0.13));
}
.site-growth-events circle {
fill: #fff;
stroke: #0ba8b6;
stroke-width: 3;
}
.site-growth-events line {
stroke: #65cbd3;
stroke-width: 1.5;
stroke-dasharray: 2 2;
}
.site-growth-events rect {
fill: #fff;
stroke: #cfe7e9;
stroke-width: 1;
}
.site-growth-events text {
fill: #087983;
font-size: 7.5px;
font-weight: 800;
text-anchor: middle;
}
.site-product-demo[data-step="4"] .site-growth-line.site-clicks {
animation: site-growth-draw 3.3s cubic-bezier(0.2, 0.75, 0.2, 1) 0.25s forwards;
}
.site-product-demo[data-step="4"] .site-growth-line.site-impressions {
animation: site-growth-draw 3.5s cubic-bezier(0.2, 0.75, 0.2, 1) 0.45s forwards;
}
.site-product-demo[data-step="4"] .site-growth-area {
animation: site-growth-area 1s ease 2.1s forwards;
}
.site-product-demo[data-step="4"] .site-growth-events g {
animation: site-growth-event 0.42s ease forwards;
}
.site-product-demo[data-step="4"] .site-growth-events g:first-child {
animation-delay: 1.05s;
}
.site-product-demo[data-step="4"] .site-growth-events g:nth-child(2) {
animation-delay: 2.05s;
}
.site-product-demo[data-step="4"] .site-growth-events g:nth-child(3) {
animation-delay: 3s;
}
@keyframes site-growth-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes site-growth-area {
to {
opacity: 1;
}
}
@keyframes site-growth-event {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.site-demo-caption {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 10px 20px;
border-top: 1px solid #e1e8e9;
background: #f5f8f8;
color: #788587;
font-size: 10px;
}
.site-demo-caption > span {
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.site-demo-caption > span i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #24ba72;
box-shadow: 0 0 0 4px rgba(36, 186, 114, 0.12);
}
.site-demo-caption strong {
color: #344143 !important;
font-weight: 600 !important;
}
@media (max-width: 900px) {
.site-product-demo {
width: 94vw;
margin-top: 2.1rem;
border-radius: 18px;
}
.site-demo-steps {
grid-template-columns: repeat(5, minmax(90px, 1fr));
overflow-x: auto;
scrollbar-width: none;
}
.site-demo-steps::-webkit-scrollbar {
display: none;
}
.site-demo-steps span {
font-size: 8px;
padding-inline: 6px;
}
.site-demo-stage {
grid-template-columns: 1fr;
min-height: 0;
}
.site-demo-chat {
min-height: 385px;
border-right: 0;
border-bottom: 1px solid #e0e7e8;
}
.site-demo-planner {
min-height: 420px;
}
.site-demo-conversation {
height: 310px;
}
.site-demo-panel-head {
height: 62px;
padding-inline: 14px;
}
.site-demo-panel-head small {
max-width: 190px;
}
.site-demo-content-list {
padding-inline: 12px;
}
.site-demo-content-card {
grid-template-columns: 48px minmax(0, 1fr);
}
.site-demo-content-card em {
grid-column: 2;
justify-self: start;
margin-top: -5px;
}
.site-demo-toast {
left: 12px;
right: 12px;
top: 72px;
max-width: none;
}
.site-demo-caption {
flex-direction: column;
gap: 3px;
text-align: center;
}
.site-demo-cursor {
display: none;
}
.site-product-demo[data-step="4"] .site-demo-stage {
height: 620px;
}
.site-product-demo[data-step="4"] .site-demo-chat,
.site-product-demo[data-step="4"] .site-demo-planner {
display: none;
}
.site-demo-growth {
padding: 18px 12px;
}
.site-growth-head h3 {
font-size: 17px !important;
}
.site-growth-controls {
align-items: flex-end;
flex-direction: column;
}
.site-growth-cadence,
.site-growth-range {
padding: 6px 7px;
font-size: 7px;
}
.site-growth-metrics {
gap: 6px;
}
.site-growth-metrics article {
padding: 10px 8px;
}
.site-growth-metrics strong {
font-size: 16px;
}
.site-growth-metrics em {
position: static;
margin-top: 5px;
}
.site-growth-chart-card {
padding-inline: 8px;
}
.site-growth-chart {
height: 250px;
}
}
body .site-section.site-home-features {
position: relative;
padding: 112px 24px 124px !important;
background: #f4f7f7 !important;
color: #11191a !important;
overflow: clip;
}
body .site-section.site-home-features:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: -180px;
width: 110%;
height: 260px;
border-radius: 50%;
background: #08090b;
transform: translateX(-50%);
box-shadow: 0 18px 46px rgba(56, 173, 183, 0.11);
pointer-events: none;
}
.site-feature-shell {
position: relative;
z-index: 1;
width: min(1120px, 100%);
margin: 0 auto;
}
.site-feature-head {
max-width: 820px;
margin: 0 auto 60px;
text-align: center;
}
.site-feature-eyebrow {
display: block;
margin-bottom: 17px;
color: #168894;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.17em;
}
.site-feature-head h2 {
margin: 0;
color: #11191a !important;
font-size: clamp(44px, 4.2vw, 68px) !important;
line-height: 1.02 !important;
letter-spacing: -0.055em !important;
}
.site-feature-head > p {
max-width: 730px;
margin: 24px auto 0;
color: #69777a !important;
font-size: 16px;
line-height: 1.55;
}
.site-feature-rotating {
position: relative;
display: inline-block;
min-width: 3.6em;
color: #4dabb7 !important;
transition:
opacity 0.23s ease,
transform 0.23s ease;
}
.site-feature-rotating:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, #67dde7, transparent);
opacity: 0.55;
}
.site-feature-rotating.site-is-changing {
opacity: 0;
transform: translateY(9px);
}
.site-feature-bento {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 16px;
}
.site-feature-card {
grid-column: span 2;
min-width: 0;
min-height: 420px;
display: flex;
flex-direction: column;
border: 1px solid #dfe8e9;
border-radius: 24px;
background: linear-gradient(145deg, #f0f6f6, #edf2f2);
overflow: hidden;
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.65s ease,
transform 0.65s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.site-feature-card:nth-child(2) {
transition-delay: 0.07s;
}
.site-feature-card:nth-child(3) {
transition-delay: 0.12s;
}
.site-feature-card:nth-child(4) {
transition-delay: 0.18s;
}
.site-feature-card:nth-child(5) {
transition-delay: 0.24s;
}
.site-feature-card:nth-child(6) {
transition-delay: 0.3s;
}
.site-feature-card.site-is-visible {
opacity: 1;
transform: none;
}
.site-feature-card:hover {
border-color: #b9dcdf;
box-shadow: 0 24px 55px rgba(43, 85, 90, 0.09);
}
.site-feature-card.site-feature-wide {
grid-column: span 3;
min-height: 455px;
}
.site-feature-visual {
position: relative;
height: 252px;
flex: none;
overflow: hidden;
}
.site-feature-wide .site-feature-visual {
height: 286px;
}
.site-feature-copy {
margin-top: auto;
padding: 12px 26px 27px;
text-align: center;
}
.site-feature-copy h3 {
margin: 8px 0;
color: #172021 !important;
font-size: 19px !important;
line-height: 1.25;
}
.site-feature-copy > p:last-child {
margin: 0;
color: #6d7a7d !important;
font-size: 12px;
line-height: 1.55;
}
.site-feature-kicker {
margin: 0 !important;
color: #258d97 !important;
font-size: 9px !important;
font-weight: 700;
letter-spacing: 0.08em;
}
.site-feature-kicker span {
margin-right: 4px;
color: #259ca7;
}
.site-feature-radar {
background: radial-gradient(circle at 50% 48%, rgba(103, 221, 231, 0.18), transparent 54%);
}
.site-feature-radar-stage {
top: 49%;
width: 196px;
height: 196px;
}
.site-feature-radar-stage,
.site-feature-ring {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.site-feature-ring {
top: 50%;
border: 1px solid rgba(60, 142, 150, 0.18);
border-radius: 50%;
}
.site-feature-ring.site-r1 {
width: 194px;
height: 194px;
}
.site-feature-ring.site-r2 {
width: 140px;
height: 140px;
}
.site-feature-ring.site-r3 {
width: 84px;
height: 84px;
}
.site-feature-sweep {
position: absolute;
inset: 1px;
border-radius: 50%;
background: conic-gradient(from 90deg, transparent 0 65%, rgba(69, 171, 181, 0.27) 82%, transparent 83%);
animation: site-feature-radar-spin 5.8s linear infinite;
}
.site-feature-radar-core {
position: absolute;
left: 50%;
top: 50%;
width: 58px;
height: 58px;
display: grid;
place-items: center;
border: 1px solid rgba(58, 153, 162, 0.2);
border-radius: 50%;
background: #f8fbfb;
transform: translate(-50%, -50%);
box-shadow: 0 8px 22px rgba(31, 98, 105, 0.12);
}
.site-feature-radar-core img {
width: 34px;
height: 30px;
object-fit: contain;
}
.site-feature-keyword {
position: absolute;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid #e1e9ea;
border-radius: 10px;
background: hsla(0, 0%, 100%, 0.94);
color: #4c595b;
font-size: 9px;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(24, 62, 66, 0.08);
animation: site-feature-keyword-float 3.8s ease-in-out infinite;
}
.site-feature-keyword b {
width: 21px;
height: 21px;
display: grid;
place-items: center;
border-radius: 50%;
background: #e6f8f1;
color: #16815d !important;
font-size: 8px;
}
.site-feature-keyword.site-k1 {
left: 30px;
top: 45px;
}
.site-feature-keyword.site-k2 {
right: 28px;
top: 70px;
animation-delay: -1.1s;
}
.site-feature-keyword.site-k3 {
left: 48px;
bottom: 35px;
animation-delay: -2.2s;
}
.site-feature-keyword.site-k4 {
right: 40px;
bottom: 28px;
animation-delay: -0.6s;
}
.site-feature-editor {
padding: 32px 24px;
background: linear-gradient(145deg, #edf3f3, #e7eeee);
}
.site-feature-editor-frame {
position: relative;
height: 220px;
border: 1px solid #dce5e6;
border-radius: 13px;
background: #fff;
overflow: hidden;
box-shadow: 0 14px 35px rgba(34, 67, 70, 0.075);
}
.site-feature-editor-bar {
height: 41px;
display: flex;
align-items: center;
gap: 5px;
padding: 0 11px;
border-bottom: 1px solid #e8eeee;
color: #859093;
font-size: 8px;
}
.site-feature-editor-bar > i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #f39e92;
}
.site-feature-editor-bar > i:nth-child(2) {
background: #e8d69b;
}
.site-feature-editor-bar > i:nth-child(3) {
background: #badfd2;
}
.site-feature-editor-bar > span {
margin-left: 7px;
}
.site-feature-editor-bar > b {
margin-left: auto;
padding: 5px 8px;
border-radius: 999px;
background: #e7f7ee;
color: #20805d !important;
font-size: 8px;
}
.site-feature-editor-body {
padding: 17px 18px;
}
.site-feature-editor-body > strong {
display: block;
margin-bottom: 11px;
color: #172021 !important;
font-size: 13px;
}
.site-feature-line {
display: block;
height: 5px;
margin-top: 7px;
border-radius: 5px;
background: #e1e7e7;
transform-origin: left;
animation: site-feature-editor-line 3.4s ease-in-out infinite;
}
.site-feature-line.site-l1 {
width: 88%;
}
.site-feature-line.site-l2 {
width: 79%;
animation-delay: -0.4s;
}
.site-feature-line.site-l3 {
width: 92%;
animation-delay: -0.8s;
}
.site-feature-line.site-l4 {
width: 64%;
animation-delay: -1.2s;
}
.site-feature-source {
height: 47px;
display: flex;
align-items: center;
gap: 9px;
margin: 11px 0 4px;
padding: 7px 9px;
border: 1px solid #dfe8e9;
border-radius: 9px;
background: #f6fafa;
}
.site-feature-source > i {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 7px;
background: #daf5e6;
color: #16815d;
font-size: 11px;
font-style: normal;
font-weight: 800;
}
.site-feature-source > span b,
.site-feature-source > span small {
display: block;
}
.site-feature-source > span b {
color: #243032 !important;
font-size: 8px;
}
.site-feature-source > span small {
margin-top: 2px;
color: #839093;
font-size: 7px;
}
.site-feature-source > em {
margin-left: auto;
padding: 5px 7px;
border-radius: 6px;
background: #dff4f6;
color: #157a84;
font-size: 7px;
font-style: normal;
font-weight: 700;
}
.site-feature-editor-cursor {
position: absolute;
z-index: 4;
left: 59%;
top: 52%;
width: 4px;
height: 4px;
pointer-events: none;
filter: drop-shadow(0 4px 5px rgba(14, 48, 52, 0.18));
animation: site-feature-editor-cursor 5.2s cubic-bezier(0.25, 0.72, 0.22, 1) infinite;
}
.site-feature-editor-cursor svg {
position: absolute;
left: -2px;
top: -2px;
width: 22px;
height: 25px;
overflow: visible;
}
.site-feature-editor-cursor path {
fill: #11191a;
stroke: #fff;
stroke-width: 1.6;
stroke-linejoin: round;
}
.site-feature-editor-cursor em {
position: absolute;
left: 15px;
top: 18px;
padding: 4px 7px;
border-radius: 4px;
background: #158e99;
color: #fff;
font-size: 7px;
font-style: normal;
font-weight: 700;
line-height: 1;
white-space: nowrap;
box-shadow: 0 5px 12px rgba(21, 142, 153, 0.22);
}
.site-feature-editor-cursor > i {
position: absolute;
left: 1px;
top: 1px;
width: 16px;
height: 16px;
border: 1.5px solid #34bbc5;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%) scale(0.2);
animation: site-feature-editor-click 5.2s ease infinite;
}
.site-feature-data {
padding: 20px;
background: linear-gradient(145deg, #eaf1f1, #edf4f4);
}
.site-feature-brand-article {
position: absolute;
inset: 20px 24px 19px 20px;
padding: 12px;
border: 1px solid #dfe8e9;
border-radius: 12px;
background: #fff;
box-shadow: 0 14px 30px rgba(24, 62, 66, 0.075);
overflow: hidden;
}
.site-feature-brand-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
height: 90px;
margin-bottom: 12px;
}
.site-feature-brand-images span {
display: grid;
place-items: center;
border-radius: 7px;
background: linear-gradient(135deg, #c7ecef, #e6f4f5);
color: #5ba6ad;
font-size: 22px;
}
.site-feature-brand-images span:nth-child(2) {
background: linear-gradient(135deg, #dce9dc, #eef5eb);
color: #77a778;
}
.site-feature-brand-article > strong {
display: block;
margin-bottom: 10px;
color: #253133 !important;
font-size: 11px;
}
.site-feature-brand-article > i {
display: block;
width: 91%;
height: 5px;
margin-top: 6px;
border-radius: 5px;
background: #e6ebec;
transform-origin: left;
animation: site-feature-brand-line 4.8s ease-in-out infinite;
}
.site-feature-brand-article > i.site-short {
width: 48%;
}
.site-feature-brand-article > i.site-medium {
width: 70%;
}
.site-feature-brand-panel {
position: absolute;
right: 12px;
bottom: 17px;
width: 174px;
padding: 11px;
border: 1px solid #dce7e8;
border-radius: 11px;
background: hsla(0, 0%, 100%, 0.97);
box-shadow: 0 16px 34px rgba(31, 71, 75, 0.14);
animation: site-feature-brand-panel 5.2s cubic-bezier(0.2, 0.72, 0.22, 1) infinite;
}
.site-feature-brand-panel > small {
display: block;
margin: 1px 0 7px;
color: #849194;
font-size: 6.5px;
font-weight: 800;
letter-spacing: 0.07em;
}
.site-feature-brand-panel > small:nth-of-type(2) {
margin-top: 11px;
}
.site-feature-brand-tones {
display: flex;
gap: 4px;
}
.site-feature-brand-tones > * {
padding: 5px 6px;
border: 1px solid #e0e9e9;
border-radius: 999px;
color: #667376;
font-size: 7px;
font-weight: 600;
}
.site-feature-brand-tones > b {
border-color: #6abfc7;
background: #e7f8f9;
color: #167d86 !important;
}
.site-feature-brand-sources {
display: flex;
align-items: center;
}
.site-feature-brand-sources i {
width: 19px;
height: 19px;
margin-right: -4px;
border: 2px solid #fff;
border-radius: 50%;
background: #42adbd;
}
.site-feature-brand-sources i:nth-child(2) {
background: #865fcb;
}
.site-feature-brand-sources i:nth-child(3) {
background: #e67c52;
}
.site-feature-brand-sources i:nth-child(4) {
background: #4dac75;
}
.site-feature-brand-sources b {
margin-left: 9px;
color: #536164 !important;
font-size: 7px;
font-weight: 700;
}
.site-feature-graph {
padding: 20px 0;
background-color: #edf3f3;
background-image: radial-gradient(circle at 1px 1px, rgba(77, 137, 143, 0.12) 1px, transparent 0);
background-size: 13px 13px;
}
.site-feature-link-flow {
position: absolute;
inset: 21px 0 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.site-feature-link-row {
position: relative;
width: 100%;
height: 30px;
display: flex;
align-items: center;
}
.site-feature-link-side {
position: relative;
height: 1px;
flex: 1;
overflow: hidden;
background: rgba(82, 111, 115, 0.18);
}
.site-feature-link-side i {
position: absolute;
top: 0;
width: 27px;
height: 1px;
background: linear-gradient(90deg, transparent, #36adb8, transparent);
opacity: 0;
animation: site-feature-link-side 7.2s ease-in-out infinite;
animation-delay: calc(var(--site-slot) * 1.55s);
}
.site-feature-link-side.site-left i {
left: -27px;
}
.site-feature-link-side.site-right i {
right: -27px;
animation-name: site-feature-link-side-reverse;
}
.site-feature-link-pill {
position: relative;
z-index: 2;
min-width: 132px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 12px;
border: 1px solid #dde7e8;
border-radius: 999px;
background: #fff;
color: #536164;
box-shadow: 0 6px 14px rgba(24, 62, 66, 0.08);
animation: site-feature-link-pill 7.2s ease-in-out infinite;
animation-delay: calc(var(--site-slot) * 1.55s);
}
.site-feature-link-row.site-step-two .site-feature-link-pill {
min-width: 192px;
}
.site-feature-link-row.site-step-three .site-feature-link-pill {
min-width: 167px;
}
.site-feature-link-row.site-step-four .site-feature-link-pill {
min-width: 151px;
}
.site-feature-link-pill em {
font-size: 8px;
font-style: normal;
font-weight: 650;
white-space: nowrap;
}
.site-feature-link-icon {
position: relative;
width: 16px;
height: 16px;
display: grid;
place-items: center;
flex: none;
}
.site-feature-link-icon i {
position: absolute;
inset: 1px;
border: 1.5px solid #2aa1ac;
border-top-color: transparent;
border-radius: 50%;
opacity: 0;
}
.site-feature-link-icon b {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #168f99 !important;
font-size: 11px;
line-height: 1;
opacity: 0;
transform: scale(0.2);
}
.site-feature-link-row.site-step-one .site-feature-link-icon i {
animation: site-feature-link-spinner-one 7.2s linear infinite;
}
.site-feature-link-row.site-step-two .site-feature-link-icon i {
animation: site-feature-link-spinner-two 7.2s linear infinite;
}
.site-feature-link-row.site-step-three .site-feature-link-icon i {
animation: site-feature-link-spinner-three 7.2s linear infinite;
}
.site-feature-link-row.site-step-four .site-feature-link-icon i {
animation: site-feature-link-spinner-four 7.2s linear infinite;
}
.site-feature-link-row.site-step-one .site-feature-link-icon b {
animation: site-feature-link-check-one 7.2s ease-in-out infinite;
}
.site-feature-link-row.site-step-two .site-feature-link-icon b {
animation: site-feature-link-check-two 7.2s ease-in-out infinite;
}
.site-feature-link-row.site-step-three .site-feature-link-icon b {
animation: site-feature-link-check-three 7.2s ease-in-out infinite;
}
.site-feature-link-row.site-step-four .site-feature-link-icon b {
animation: site-feature-link-check-four 7.2s ease-in-out infinite;
}
.site-feature-link-join {
position: relative;
width: 1px;
height: 24px;
flex: none;
overflow: hidden;
background: rgba(82, 111, 115, 0.2);
}
.site-feature-link-join i {
position: absolute;
left: 0;
top: -10px;
width: 1px;
height: 10px;
background: #2da8b3;
box-shadow: 0 0 5px rgba(45, 168, 179, 0.7);
animation: site-feature-link-join 7.2s ease-in-out infinite;
animation-delay: calc(var(--site-slot) * 1.55s + 0.72s);
}
.site-feature-strategy {
padding: 18px 0;
background: linear-gradient(145deg, #edf4f4, #e7eeee);
}
.site-feature-strategy:after,
.site-feature-strategy:before {
content: "";
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
width: 44px;
pointer-events: none;
}
.site-feature-strategy:before {
left: 0;
background: linear-gradient(90deg, #eaf1f1, rgba(234, 241, 241, 0));
}
.site-feature-strategy:after {
right: 0;
background: linear-gradient(270deg, #e8efef, rgba(232, 239, 239, 0));
}
.site-feature-strategy-track {
display: grid;
grid-template-rows: repeat(2, 96px);
grid-auto-flow: column;
grid-auto-columns: 154px;
gap: 8px;
width: max-content;
padding: 12px 8px;
animation: site-feature-strategy-scroll 13s linear infinite;
}
.site-feature-strategy-track article {
min-width: 0;
padding: 10px;
border: 1px solid #dce6e7;
border-radius: 10px;
background: #fff;
box-shadow: 0 8px 18px rgba(27, 67, 71, 0.07);
}
.site-feature-strategy-track header {
display: flex;
align-items: center;
gap: 5px;
}
.site-feature-strategy-track header > b {
width: 20px;
height: 20px;
display: grid;
place-items: center;
flex: none;
border: 1px solid #dbe5e6;
border-radius: 5px;
color: #536164 !important;
font-size: 7px;
}
.site-feature-strategy-track header > span {
max-width: 92px;
padding: 4px 5px;
border-radius: 4px;
overflow: hidden;
color: #33767d;
font-size: 6px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
.site-feature-strategy-track header > span.site-research {
background: #e2f2fb;
color: #307b9f;
}
.site-feature-strategy-track header > span.site-explainer {
background: #f6ebdf;
color: #9a693d;
}
.site-feature-strategy-track header > span.site-product {
background: #e6f5ec;
color: #34815d;
}
.site-feature-strategy-track header img {
width: 13px;
height: 13px;
margin-left: auto;
object-fit: contain;
}
.site-feature-strategy-track p {
margin: 10px 0 0;
color: #788587 !important;
font-size: 7px;
line-height: 1.45;
}
.site-feature-strategy-track p strong {
color: #263335 !important;
font-weight: 700 !important;
}
.site-feature-languages-card {
grid-column: 1/-1 !important;
min-height: 338px;
padding: 35px 0 36px;
border-color: #20383b;
background:
radial-gradient(circle at 18% -35%, rgba(53, 185, 197, 0.28), transparent 53%),
linear-gradient(145deg, #122427, #0d191b);
color: #fff;
}
.site-feature-languages-card:hover {
border-color: #2e5559;
box-shadow: 0 24px 55px rgba(15, 43, 46, 0.18);
}
.site-feature-languages-copy {
display: block;
padding: 0 50px 27px;
}
.site-feature-languages-copy > div {
text-align: left;
}
.site-feature-languages-copy h3 {
margin: 0 0 6px;
color: #fff !important;
font-size: 26px !important;
line-height: 1.2;
}
.site-feature-languages-copy > div > p:last-child {
margin: 0;
color: rgba(231, 245, 246, 0.63) !important;
font-size: 11px;
}
.site-feature-language-marquees {
position: relative;
display: grid;
gap: 9px;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent);
}
.site-feature-language-marquees:after,
.site-feature-language-marquees:before {
content: "";
position: absolute;
z-index: 2;
top: -15px;
bottom: -15px;
width: 98px;
pointer-events: none;
filter: blur(11px);
}
.site-feature-language-marquees:before {
left: -36px;
background: #101f21;
}
.site-feature-language-marquees:after {
right: -36px;
background: #101f21;
}
.site-feature-language-marquee {
position: relative;
width: 100%;
overflow: hidden;
}
.site-feature-language-track {
display: flex;
width: max-content;
will-change: transform;
animation: site-feature-language-scroll 32s linear infinite;
}
.site-feature-language-marquee.site-row-two .site-feature-language-track {
animation-duration: 37s;
animation-direction: reverse;
}
.site-feature-language-marquee.site-row-three .site-feature-language-track {
animation-duration: 34s;
}
.site-feature-language-set {
display: flex;
gap: 9px;
padding-right: 9px;
}
.site-feature-language-set span {
width: 146px;
height: 49px;
display: flex;
align-items: center;
flex: none;
gap: 10px;
padding: 7px 11px;
border: 1px solid hsla(0, 0%, 100%, 0.14);
border-radius: 10px;
background: hsla(0, 0%, 100%, 0.055);
color: #eff9fa;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.05);
}
.site-feature-language-set span i {
width: 30px;
height: 30px;
display: grid;
place-items: center;
flex: none;
border: 1px solid hsla(0, 0%, 100%, 0.11);
border-radius: 8px;
background: hsla(0, 0%, 100%, 0.045);
font-size: 16px;
font-style: normal;
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.04);
}
@keyframes site-feature-radar-spin {
to {
transform: rotate(1turn);
}
}
@keyframes site-feature-keyword-float {
50% {
transform: translateY(-7px);
}
}
@keyframes site-feature-editor-line {
50% {
transform: scaleX(0.86);
opacity: 0.7;
}
}
@keyframes site-feature-editor-cursor {
0%,
12%,
to {
transform: translate(-38px, 34px);
}
31%,
45% {
transform: translate(14px, 18px);
}
63%,
78% {
transform: translate(92px, 7px);
}
}
@keyframes site-feature-editor-click {
0%,
29%,
39%,
61%,
71%,
to {
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
}
33%,
65% {
opacity: 0.85;
transform: translate(-50%, -50%) scale(1.15);
}
36%,
68% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.65);
}
}
@keyframes site-feature-brand-panel {
0%,
13%,
to {
opacity: 0;
transform: translateX(38px);
}
26%,
78% {
opacity: 1;
transform: none;
}
91% {
opacity: 0;
transform: translateX(-7px);
}
}
@keyframes site-feature-brand-line {
50% {
transform: scaleX(0.87);
background: #dfe9e9;
}
}
@keyframes site-feature-strategy-scroll {
to {
transform: translateX(-486px);
}
}
@keyframes site-feature-language-scroll {
to {
transform: translateX(-50%);
}
}
@keyframes site-feature-link-side {
0%,
to {
left: -27px;
opacity: 0;
}
3% {
opacity: 1;
}
13% {
left: calc(100% - 27px);
opacity: 1;
}
17%,
99% {
left: calc(100% - 27px);
opacity: 0;
}
}
@keyframes site-feature-link-side-reverse {
0%,
to {
right: -27px;
opacity: 0;
}
3% {
opacity: 1;
}
13% {
right: calc(100% - 27px);
opacity: 1;
}
17%,
99% {
right: calc(100% - 27px);
opacity: 0;
}
}
@keyframes site-feature-link-pill {
0%,
to {
border-color: #dde7e8;
box-shadow: 0 6px 14px rgba(24, 62, 66, 0.08);
transform: none;
}
16%,
5% {
border-color: #78c4ca;
box-shadow: 0 8px 19px rgba(34, 145, 155, 0.15);
transform: translateY(-1px);
}
22%,
99% {
border-color: #d6e5e6;
box-shadow: 0 6px 14px rgba(24, 62, 66, 0.08);
transform: none;
}
}
@keyframes site-feature-link-spinner-one {
0% {
opacity: 1;
transform: rotate(0);
}
14% {
opacity: 1;
transform: rotate(540deg);
}
18%,
to {
opacity: 0;
transform: rotate(600deg);
}
}
@keyframes site-feature-link-spinner-two {
0%,
21% {
opacity: 0;
transform: rotate(0);
}
23%,
35% {
opacity: 1;
}
39%,
to {
opacity: 0;
transform: rotate(540deg);
}
}
@keyframes site-feature-link-spinner-three {
0%,
42% {
opacity: 0;
transform: rotate(0);
}
44%,
57% {
opacity: 1;
}
61%,
to {
opacity: 0;
transform: rotate(540deg);
}
}
@keyframes site-feature-link-spinner-four {
0%,
63% {
opacity: 0;
transform: rotate(0);
}
65%,
78% {
opacity: 1;
}
82%,
to {
opacity: 0;
transform: rotate(540deg);
}
}
@keyframes site-feature-link-check-one {
0%,
14%,
to {
opacity: 0;
transform: scale(0.2);
}
18%,
91% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 0;
transform: scale(0.65);
}
}
@keyframes site-feature-link-check-two {
0%,
35%,
to {
opacity: 0;
transform: scale(0.2);
}
39%,
91% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 0;
transform: scale(0.65);
}
}
@keyframes site-feature-link-check-three {
0%,
57%,
to {
opacity: 0;
transform: scale(0.2);
}
61%,
91% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 0;
transform: scale(0.65);
}
}
@keyframes site-feature-link-check-four {
0%,
78%,
to {
opacity: 0;
transform: scale(0.2);
}
82%,
91% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 0;
transform: scale(0.65);
}
}
@keyframes site-feature-link-join {
0%,
to {
top: -10px;
opacity: 0;
}
3% {
opacity: 1;
}
14% {
top: 24px;
opacity: 1;
}
18%,
99% {
top: 24px;
opacity: 0;
}
}
@media (max-width: 991px) {
.site-feature-bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-feature-card,
.site-feature-card.site-feature-wide {
grid-column: span 1;
}
.site-feature-card:last-child,
.site-feature-card:nth-child(5) {
grid-column: 1/-1;
}
.site-feature-head h2 {
font-size: clamp(40px, 7vw, 58px) !important;
}
.site-feature-strategy-track {
grid-auto-columns: 190px;
}
}
@media (max-width: 767px) {
body .site-section.site-home-features {
padding: 96px 16px 88px !important;
background: #f4f7f7 !important;
}
body .site-section.site-home-features:before {
top: -150px;
width: 145%;
height: 210px;
}
.site-feature-head {
margin-bottom: 42px;
}
.site-feature-head h2 {
font-size: 38px !important;
}
.site-feature-head > p {
font-size: 14px;
}
.site-feature-bento {
grid-template-columns: 1fr;
}
.site-feature-card,
.site-feature-card.site-feature-wide,
.site-feature-card:last-child,
.site-feature-card:nth-child(5) {
grid-column: 1;
min-height: 0;
}
.site-feature-visual,
.site-feature-wide .site-feature-visual {
height: 245px;
}
.site-feature-copy {
padding: 12px 20px 24px;
}
.site-feature-copy h3 {
font-size: 18px !important;
}
.site-feature-keyword.site-k1 {
left: 10px;
}
.site-feature-keyword.site-k2 {
right: 8px;
}
.site-feature-keyword.site-k3 {
left: 14px;
}
.site-feature-keyword.site-k4 {
right: 10px;
}
.site-feature-editor {
padding: 25px 12px;
}
.site-feature-editor-frame {
height: 198px;
}
.site-feature-brand-panel {
right: 8px;
}
.site-feature-strategy-track {
grid-auto-columns: 154px;
}
.site-feature-languages-card {
min-height: 373px;
padding: 29px 0 28px;
}
.site-feature-languages-copy {
padding: 0 24px 22px;
}
.site-feature-languages-copy > div {
text-align: left;
}
.site-feature-languages-copy h3 {
font-size: 21px !important;
}
.site-feature-language-marquees {
gap: 8px;
}
.site-feature-language-marquees:after,
.site-feature-language-marquees:before {
width: 57px;
}
.site-feature-language-set span {
width: 136px;
height: 47px;
padding: 7px 9px;
}
.site-feature-language-set span i {
width: 29px;
height: 29px;
}
}
body .site-section.site-article-lab {
position: relative;
min-height: 0 !important;
height: auto !important;
padding: 128px 24px 138px !important;
background: radial-gradient(circle at 50% -8%, rgba(50, 174, 185, 0.16), transparent 31%), #0b1517 !important;
color: #fff;
overflow: hidden;
isolation: isolate;
}
body .site-section.site-article-lab:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(hsla(0, 0%, 100%, 0.018) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, 0.018) 1px, transparent 0);
background-size: 42px 42px;
-webkit-mask-image: linear-gradient(180deg, #000, transparent 49%);
mask-image: linear-gradient(180deg, #000, transparent 49%);
}
.site-article-shell {
position: relative;
z-index: 1;
width: min(1160px, 100%);
margin: 0 auto;
}
.site-article-shell * {
box-sizing: border-box;
}
.site-article-heading {
max-width: 850px;
margin: 0 auto 57px;
text-align: center;
}
.site-article-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color: #73d3dc !important;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
}
.site-article-eyebrow > i {
width: 7px;
height: 7px;
border: 2px solid #71d2da;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(71, 182, 192, 0.1);
}
.site-article-heading h2 {
margin: 0;
color: #f6fbfb !important;
font-size: clamp(48px, 5.4vw, 72px) !important;
font-weight: 540 !important;
letter-spacing: -0.055em !important;
line-height: 0.98 !important;
}
.site-article-heading h2 span {
color: #69c4ce !important;
}
.site-article-heading > p {
max-width: 660px;
margin: 25px auto 0;
color: rgba(224, 239, 241, 0.62) !important;
font-size: 16px;
line-height: 1.65;
}
.site-article-simulator {
--site-profile: #2eabb6;
--site-profile-dark: #12292c;
position: relative;
border: 1px solid rgba(185, 223, 226, 0.34);
border-radius: 22px;
background: #f7f9f9;
color: #172426;
box-shadow:
0 45px 100px rgba(0, 0, 0, 0.35),
inset 0 1px 0 hsla(0, 0%, 100%, 0.75);
overflow: hidden;
transition: --site-profile 0.3s ease;
}
.site-article-simulator[data-profile="shop"] {
--site-profile: #ce816a;
--site-profile-dark: #27382f;
}
.site-article-simulator[data-profile="agency"] {
--site-profile: #6c68ec;
--site-profile-dark: #191c32;
}
.site-article-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 22px;
background: #fff;
}
.site-article-tabs button {
position: relative;
display: flex;
align-items: center;
margin: 0;
padding: 0 20px;
border: 0;
border-bottom: 1px solid #dce4e5;
background: transparent;
color: #263537;
font-family: inherit;
text-align: left;
cursor: pointer;
transition:
background 0.25s ease,
border-color 0.25s ease;
}
.site-article-tabs button:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--site-profile);
opacity: 0;
transform: scaleX(0.25);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.site-article-tabs button:hover {
background: #f8fafa;
}
.site-article-tabs button.site-is-active:after {
opacity: 1;
transform: scaleX(1);
}
.site-article-tabs button > span {
min-width: 0;
display: flex;
flex-direction: column;
}
.site-article-tabs button strong {
color: #233234 !important;
font-weight: 750;
}
.site-article-tabs button small {
color: #8a989a !important;
}
.site-article-tabs button > i {
display: grid;
place-items: center;
margin-left: auto;
border-radius: 50%;
background: var(--site-profile);
color: #fff;
font-style: normal;
opacity: 0;
transform: scale(0.5);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.site-article-tabs button.site-is-active > i {
opacity: 1;
transform: scale(1);
}
.site-article-tab-icon {
display: grid;
place-items: center;
flex: none;
border-radius: 10px;
background: #10292c;
color: #fff !important;
box-shadow: inset 0 1px hsla(0, 0%, 100%, 0.16);
}
.site-article-tailor-head {
display: flex;
align-items: center;
gap: 14px;
padding: 27px 25px 14px;
background: #fff;
}
.site-article-tailor-head span {
flex: none;
color: #788789 !important;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-article-tailor-head i {
height: 1px;
flex: 1;
background: #e6ebec;
}
.site-article-tailoring {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0 22px 22px;
background: #fff;
}
.site-article-tailor-card {
min-width: 0;
border: 1px solid #e1e8e9;
border-radius: 11px;
background: #fafcfc;
}
.site-article-tailor-card header {
display: flex;
align-items: center;
}
.site-article-tailor-card header > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.site-article-tailor-card header strong {
color: #263537 !important;
font-weight: 750;
}
.site-article-tailor-card header small {
color: #96a2a4 !important;
font-size: 7px;
}
.site-article-tailor-card header em {
margin-left: auto;
color: #55aab2 !important;
font-size: 7px;
font-style: normal;
font-weight: 750;
white-space: nowrap;
}
.site-article-card-icon {
display: grid;
place-items: center;
flex: none;
border: 1px solid #dce7e8;
border-radius: 7px;
background: #fff;
color: #478f96 !important;
font-weight: 800;
}
.site-article-swatches,
.site-article-tags {
display: flex;
overflow: hidden;
}
.site-article-swatches i {
width: 31px;
display: block;
flex: 1;
border: 3px solid #fff;
border-radius: 6px;
background: var(--site-color);
box-shadow: 0 0 0 1px #e1e7e8;
}
.site-article-tags span {
max-width: 124px;
border: 1px solid #dfe7e8;
border-radius: 6px;
background: #fff;
color: #5d6c6e !important;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.site-article-offers span {
color: var(--site-profile) !important;
border-color: color-mix(in srgb, var(--site-profile) 30%, #dfe7e8);
background: color-mix(in srgb, var(--site-profile) 7%, #fff);
}
.site-article-workspace {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.72fr);
gap: 14px;
padding: 14px;
background: #e9efef;
}
.site-article-article-preview {
position: relative;
min-width: 0;
border: 1px solid #d8e2e3;
border-radius: 13px;
background: #fff;
box-shadow: 0 14px 30px rgba(36, 66, 69, 0.08);
overflow: hidden;
}
.site-article-article-page {
padding: 0 40px 38px;
background: #fff;
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.site-article-article-nav {
height: 61px;
display: flex;
align-items: center;
border-bottom: 1px solid #edf0f0;
}
.site-article-article-nav > a {
color: var(--site-profile-dark) !important;
font-weight: 850;
letter-spacing: -0.05em;
text-decoration: none;
pointer-events: none;
}
.site-article-article-nav > div {
display: flex;
gap: 20px;
margin-left: auto;
color: #788587;
font-weight: 650;
}
.site-article-article-nav > b {
margin-left: 22px;
border-radius: 6px;
background: var(--site-profile-dark);
color: #fff !important;
white-space: nowrap;
}
.site-article-breadcrumb {
display: flex;
align-items: center;
gap: 7px;
margin-top: 18px;
color: #9aa5a7 !important;
}
.site-article-breadcrumb i {
font-style: normal;
}
.site-article-breadcrumb b {
color: var(--site-profile) !important;
font-weight: 700;
}
.site-article-article-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 28px;
color: #8b999b !important;
}
.site-article-article-meta > span:first-child {
padding: 5px 7px;
border-radius: 4px;
background: color-mix(in srgb, var(--site-profile) 10%, #fff);
color: var(--site-profile) !important;
font-weight: 850;
letter-spacing: 0.1em;
}
.site-article-article-meta i {
font-style: normal;
}
.site-article-article-page h3 {
max-width: 620px;
margin: 14px 0 13px;
color: #182527 !important;
font-weight: 650 !important;
letter-spacing: -0.045em !important;
line-height: 1.08 !important;
}
.site-article-lead {
max-width: 610px;
margin: 0;
line-height: 1.65 !important;
}
.site-article-hero-visual {
position: relative;
height: 236px;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
margin: 28px 0;
border-radius: 11px;
background:
radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--site-profile) 45%, transparent), transparent 37%),
var(--site-profile-dark);
overflow: hidden;
}
.site-article-hero-visual:before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(hsla(0, 0%, 100%, 0.16) 1px, transparent 0);
background-size: 15px 15px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000);
mask-image: linear-gradient(90deg, transparent, #000);
}
.site-article-hero-copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding: 30px;
}
.site-article-hero-copy small {
color: color-mix(in srgb, var(--site-profile) 72%, #fff) !important;
font-size: 7px;
font-weight: 850;
letter-spacing: 0.14em;
}
.site-article-hero-copy strong {
margin-top: 10px;
color: #fff !important;
font-weight: 650;
line-height: 1.13;
}
.site-article-hero-copy span {
margin-top: 18px;
color: hsla(0, 0%, 100%, 0.48) !important;
font-size: 7px;
}
.site-article-hero-chart {
position: relative;
z-index: 1;
height: 155px;
margin: 20px 22px 0 0;
border-left: 1px solid hsla(0, 0%, 100%, 0.08);
border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
}
.site-article-hero-chart svg {
position: absolute;
inset: 17px 0 0;
width: 100%;
height: calc(100% - 17px);
overflow: visible;
}
.site-article-hero-chart .site-area {
fill: color-mix(in srgb, var(--site-profile) 31%, transparent);
}
.site-article-hero-chart .site-line {
fill: none;
stroke: color-mix(in srgb, var(--site-profile) 75%, #fff);
stroke-width: 2;
stroke-linecap: round;
filter: drop-shadow(0 0 6px var(--site-profile));
stroke-dasharray: 410;
stroke-dashoffset: 410;
animation: site-article-draw 2.2s ease forwards;
}
.site-article-hero-chart > span {
position: absolute;
z-index: 2;
}
.site-article-hero-chart .site-c1 {
right: 1px;
top: -3px;
padding: 5px 7px;
border: 1px solid hsla(0, 0%, 100%, 0.18);
border-radius: 5px;
background: hsla(0, 0%, 100%, 0.11);
color: #fff !important;
font-weight: 800;
}
.site-article-hero-chart .site-c2,
.site-article-hero-chart .site-c3,
.site-article-hero-chart .site-c4 {
width: 7px;
height: 7px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--site-profile);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-profile) 25%, transparent);
}
.site-article-hero-chart .site-c2 {
left: 28%;
top: 93px;
}
.site-article-hero-chart .site-c3 {
left: 55%;
top: 67px;
}
.site-article-hero-chart .site-c4 {
right: 2%;
top: 23px;
}
.site-article-answer-box {
margin: 0 0 27px;
border-left: 3px solid var(--site-profile);
border-radius: 0 8px 8px 0;
background: color-mix(in srgb, var(--site-profile) 7%, #fff);
}
.site-article-answer-box span {
color: var(--site-profile) !important;
font-weight: 850;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.site-article-answer-box p {
margin: 7px 0 0;
color: #47585a !important;
line-height: 1.65 !important;
}
.site-article-article-page h4 {
margin: 0 0 10px;
color: #1d2b2d !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.22 !important;
}
.site-article-article-page > p:not(.site-article-lead) {
margin: 0;
line-height: 1.7 !important;
}
.site-article-article-page blockquote {
position: relative;
margin: 24px 0;
padding: 18px 20px 17px 42px;
border: 0;
border-radius: 9px;
background: #f3f6f6;
}
.site-article-article-page blockquote > span {
position: absolute;
left: 16px;
top: 12px;
color: var(--site-profile) !important;
font-family: Georgia, serif;
font-size: 29px;
line-height: 1;
}
.site-article-article-page blockquote p {
margin: 0;
color: #405052 !important;
font-weight: 600;
line-height: 1.55 !important;
}
.site-article-article-page blockquote cite {
display: block;
margin-top: 8px;
color: #8a9799 !important;
font-style: normal;
}
.site-article-source-row {
display: grid;
align-items: stretch;
margin-top: 12px;
}
.site-article-source-row > span {
padding-top: 8px;
color: #6e7d7f !important;
font-weight: 800;
}
.site-article-source-row > div {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e5ebec;
border-radius: 7px;
}
.site-article-source-row > div > i {
display: grid;
place-items: center;
flex: none;
border-radius: 5px;
background: #edf5f5;
color: var(--site-profile) !important;
font-style: normal;
font-weight: 800;
}
.site-article-source-row p {
min-width: 0;
margin: 0;
}
.site-article-source-row b,
.site-article-source-row small {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.site-article-source-row b {
color: #475658 !important;
}
.site-article-source-row small {
margin-top: 2px;
color: #9aa5a7 !important;
}
.site-article-generating {
position: absolute;
z-index: 5;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(247, 250, 250, 0.92);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.2s ease,
visibility 0.2s ease;
}
.site-article-generating > span {
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid #d8e5e6;
border-radius: 15px;
background: #fff;
box-shadow: 0 12px 28px rgba(35, 86, 91, 0.12);
}
.site-article-generating img {
width: 28px;
height: 28px;
}
.site-article-generating > span i {
position: absolute;
inset: -6px;
border: 2px solid transparent;
border-top-color: var(--site-profile);
border-radius: 18px;
animation: site-article-spin 0.8s linear infinite;
}
.site-article-generating strong {
margin-top: 16px;
color: #283638 !important;
font-size: 13px;
}
.site-article-generating small {
margin-top: 5px;
color: #8b989a !important;
font-size: 9px;
}
.site-article-simulator.site-is-loading .site-article-generating {
opacity: 1;
visibility: visible;
}
.site-article-simulator.site-is-refreshed .site-article-article-page {
animation: site-article-refresh 0.45s ease;
}
.site-article-simulator.site-is-refreshed .site-article-checks li {
animation: site-article-check-in 0.4s ease both;
animation-delay: var(--site-delay);
}
.site-article-quality {
min-width: 0;
align-self: start;
padding: 22px 18px 17px;
border: 1px solid #d8e2e3;
border-radius: 13px;
background: #fff;
box-shadow: 0 14px 30px rgba(36, 66, 69, 0.07);
}
.site-article-quality-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-article-quality-head > div:first-child {
display: flex;
flex-direction: column;
gap: 4px;
}
.site-article-quality-head span {
color: #899698 !important;
}
.site-article-quality-head strong {
color: #233234 !important;
}
.site-article-score {
display: flex;
align-items: baseline;
color: #2aa47c;
}
.site-article-score b {
color: #2aa47c !important;
font-weight: 750;
letter-spacing: -0.06em;
}
.site-article-score small {
color: #8b999a !important;
}
.site-article-score-bar {
height: 5px;
margin-top: 14px;
border-radius: 999px;
background: #e9efef;
overflow: hidden;
}
.site-article-score-bar i {
--site-score: 96%;
width: var(--site-score);
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, #49bcc6, #39b889);
transition: width 0.5s ease;
}
.site-article-quality > p {
margin: 9px 0 16px;
color: #929ea0 !important;
}
.site-article-checks {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.site-article-checks li {
display: flex;
align-items: center;
padding: 8px 0;
border-top: 1px solid #eef1f2;
}
.site-article-checks li > i {
display: grid;
place-items: center;
flex: none;
border-radius: 50%;
background: #e1f6ed;
color: #26916d !important;
font-style: normal;
font-weight: 850;
}
.site-article-checks li > span {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.site-article-checks li b {
color: #354446 !important;
font-weight: 720;
}
.site-article-checks li small {
white-space: normal;
}
.site-article-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-top: 17px;
}
.site-article-metrics > div {
min-width: 0;
padding: 10px 6px;
border: 1px solid #e5ebec;
border-radius: 7px;
background: #f8fafa;
text-align: center;
}
.site-article-metrics b,
.site-article-metrics span {
display: block;
}
.site-article-metrics b {
color: #2f3f41 !important;
}
.site-article-metrics span {
margin-top: 3px;
color: #98a3a5 !important;
}
.site-article-publish-status {
display: flex;
align-items: center;
gap: 9px;
margin-top: 10px;
padding: 11px 10px;
border-radius: 8px;
background: #163033;
}
.site-article-publish-status > i {
width: 22px;
height: 22px;
display: grid;
place-items: center;
flex: none;
border-radius: 6px;
background: #45b68e;
color: #fff !important;
font-size: 10px;
font-style: normal;
}
.site-article-publish-status > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.site-article-publish-status strong {
color: #fff !important;
}
.site-article-publish-status span {
color: rgba(228, 244, 245, 0.52) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-article-publish-status > b {
margin-left: auto;
color: #77d2da !important;
font-size: 13px;
}
@keyframes site-article-spin {
to {
transform: rotate(1turn);
}
}
@keyframes site-article-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes site-article-refresh {
0% {
opacity: 0.25;
transform: translateY(7px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes site-article-check-in {
0% {
opacity: 0.25;
transform: translateX(5px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 991px) {
.site-article-heading h2 {
font-size: 54px !important;
}
.site-article-workspace {
grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
}
.site-article-article-page {
padding-right: 28px;
padding-left: 28px;
}
.site-article-article-page h3 {
font-size: 27px !important;
}
.site-article-hero-visual {
height: 220px;
}
.site-article-article-nav > div {
display: none;
}
.site-article-source-row {
grid-template-columns: 1fr 1fr;
}
.site-article-source-row > span {
grid-column: 1/-1;
}
.site-article-metrics {
grid-template-columns: 1fr;
}
.site-article-metrics > div {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 8px 10px;
}
.site-article-metrics span {
margin: 0;
}
}
@media (max-width: 767px) {
body .site-section.site-article-lab {
padding: 88px 16px 94px !important;
}
.site-article-heading {
margin-bottom: 39px;
}
.site-article-heading h2 {
font-size: 40px !important;
line-height: 1.02 !important;
}
.site-article-heading > p {
font-size: 14px;
}
.site-article-simulator {
border-radius: 16px;
}
.site-article-tabs {
display: flex;
padding: 0 13px;
overflow-x: auto;
scrollbar-width: none;
}
.site-article-tabs::-webkit-scrollbar {
display: none;
}
.site-article-tabs button {
padding: 0 13px;
}
.site-article-tailor-head {
padding: 23px 17px 12px;
}
.site-article-tailoring {
grid-template-columns: 1fr;
padding: 0 13px 17px;
}
.site-article-workspace {
grid-template-columns: 1fr;
padding: 9px;
}
.site-article-metrics {
grid-template-columns: repeat(3, 1fr);
}
.site-article-metrics > div {
display: block;
padding: 10px 5px;
}
.site-article-metrics span {
margin-top: 3px;
}
.site-article-article-page {
padding: 0 20px 30px;
}
.site-article-article-nav {
height: 54px;
}
.site-article-hero-visual {
height: 225px;
grid-template-columns: 1fr;
margin: 23px 0;
}
.site-article-hero-copy {
padding: 22px;
}
.site-article-hero-copy span {
margin-top: 10px;
}
.site-article-hero-chart {
position: absolute;
right: 12px;
bottom: 10px;
width: 48%;
height: 115px;
margin: 0;
opacity: 0.8;
}
.site-article-source-row {
grid-template-columns: 1fr;
}
.site-article-source-row > span {
grid-column: 1;
}
.site-article-quality {
padding: 19px 16px 15px;
}
.site-article-checks {
grid-template-columns: 1fr 1fr;
column-gap: 14px;
}
.site-article-publish-status {
margin-top: 12px;
}
}
@media (max-width: 479px) {
.site-article-heading h2 {
font-size: 35px !important;
}
.site-article-eyebrow {
font-size: 9px;
}
.site-article-tailor-card header em {
display: none;
}
.site-article-article-page {
padding-right: 15px;
padding-left: 15px;
}
.site-article-article-nav > b {
margin-left: auto;
}
.site-article-article-meta {
flex-wrap: wrap;
}
.site-article-hero-copy {
padding: 19px;
}
.site-article-hero-chart {
width: 54%;
opacity: 0.65;
}
.site-article-checks {
grid-template-columns: 1fr;
}
.site-article-checks li {
min-height: 51px;
}
.site-article-metrics {
grid-template-columns: repeat(3, 1fr);
}
.site-article-source-row > div {
padding: 9px;
}
}
.site-article-tabs button {
height: 92px;
gap: 13px;
padding-right: 22px;
padding-left: 22px;
}
.site-article-tabs button + button:before {
content: "";
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
width: 1px;
background: #dce5e6;
}
.site-article-tabs button > span {
gap: 4px;
}
.site-article-tabs button strong {
font-size: 14px;
}
.site-article-tabs button small {
font-size: 11px;
}
.site-article-tabs button > i {
width: 21px;
height: 21px;
font-size: 11px;
}
.site-article-tab-icon {
width: 40px;
height: 40px;
font-size: 15px;
}
.site-article-tailor-head span {
font-size: 10px;
}
.site-article-tailor-card {
padding: 16px 15px 15px;
}
.site-article-tailor-card header {
gap: 10px;
}
.site-article-tailor-card header strong {
font-size: 12px;
}
.site-article-tailor-card header em,
.site-article-tailor-card header small {
font-size: 9px;
}
.site-article-card-icon {
width: 30px;
height: 30px;
font-size: 11px;
}
.site-article-swatches,
.site-article-tags {
gap: 7px;
margin-top: 15px;
}
.site-article-swatches i {
height: 27px;
}
.site-article-tags span {
padding: 7px 9px;
font-size: 9px;
}
.site-article-article-nav > a {
font-size: 19px;
}
.site-article-article-nav > div {
font-size: 9px;
}
.site-article-article-nav > b {
padding: 8px 12px;
font-size: 9px;
}
.site-article-article-meta,
.site-article-breadcrumb {
font-size: 9px;
}
.site-article-article-meta > span:first-child {
font-size: 8px;
}
.site-article-article-page h3 {
font-size: 33px !important;
}
.site-article-lead {
color: #596a6c !important;
font-size: 12px !important;
}
.site-article-hero-copy small,
.site-article-hero-copy span {
font-size: 9px;
}
.site-article-hero-copy strong {
font-size: 22px;
}
.site-article-hero-chart .site-c1 {
font-size: 10px;
}
.site-article-answer-box {
padding: 19px 21px;
}
.site-article-answer-box span {
font-size: 9px;
}
.site-article-answer-box p {
font-size: 11px !important;
}
.site-article-article-page h4 {
font-size: 21px !important;
}
.site-article-article-page > p:not(.site-article-lead) {
color: #586a6c !important;
font-size: 11px !important;
}
.site-article-article-page blockquote p {
font-size: 11px !important;
}
.site-article-article-page blockquote cite {
font-size: 9px;
}
.site-article-source-row {
grid-template-columns: 102px 1fr 1fr;
gap: 9px;
}
.site-article-source-row > span {
font-size: 10px;
}
.site-article-source-row > div {
padding: 10px;
}
.site-article-source-row > div > i {
width: 26px;
height: 26px;
font-size: 9px;
}
.site-article-source-row b {
font-size: 9px;
}
.site-article-source-row small {
font-size: 8px;
}
.site-article-quality-head span {
font-size: 10px;
}
.site-article-quality-head strong {
font-size: 16px;
}
.site-article-score b {
font-size: 30px;
}
.site-article-score small {
font-size: 10px;
}
.site-article-quality > p {
font-size: 10px !important;
}
.site-article-checks li {
min-height: 58px;
gap: 10px;
}
.site-article-checks li > i {
width: 22px;
height: 22px;
font-size: 10px;
}
.site-article-checks li b {
font-size: 11px;
}
.site-article-checks li small {
color: #7f8e90 !important;
font-size: 9px;
line-height: 1.35;
}
.site-article-metrics b {
font-size: 14px;
}
.site-article-metrics span {
font-size: 8px;
}
.site-article-publish-status strong {
font-size: 10px;
}
.site-article-publish-status span {
font-size: 8px;
}
.site-article-ai-card {
margin: -5px -2px 19px;
padding: 14px;
border: 1px solid #afd7dc;
border-radius: 10px;
background: linear-gradient(145deg, #f4fbfc, #eef8fa);
}
.site-article-ai-title {
display: flex;
align-items: center;
gap: 8px;
}
.site-article-ai-title > span {
width: 26px;
height: 26px;
display: grid;
place-items: center;
flex: none;
border: 1px solid #c8e5e8;
border-radius: 7px;
background: #fff;
color: #269aa5;
}
.site-article-ai-title svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-article-ai-title strong {
color: #203638 !important;
font-size: 12px;
font-weight: 750;
}
.site-article-ai-title em {
display: flex;
align-items: center;
gap: 5px;
margin-left: auto;
color: #31868d !important;
font-size: 7px;
font-style: normal;
font-weight: 800;
white-space: nowrap;
}
.site-article-ai-title em i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #38ad82;
box-shadow: 0 0 0 3px rgba(56, 173, 130, 0.11);
animation: site-article-geo-pulse 1.55s ease-in-out infinite;
}
.site-article-ai-card > p {
margin: 11px 0 12px;
color: #597174 !important;
font-size: 9px !important;
line-height: 1.55 !important;
}
.site-article-ai-platforms {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.site-article-ai-platforms > span {
min-width: 0;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid #d6e7e9;
border-radius: 7px;
background: hsla(0, 0%, 100%, 0.88);
color: #4b6265 !important;
font-size: 8px;
font-weight: 700;
}
.site-article-ai-platforms i {
width: 17px;
height: 17px;
display: grid;
place-items: center;
flex: none;
border-radius: 5px;
background: #fff;
}
.site-article-ai-platforms img {
width: 12px;
height: 12px;
display: block;
object-fit: contain;
}
@media (max-width: 767px) {
.site-article-tabs button {
min-width: 215px;
height: 82px;
padding-right: 15px;
padding-left: 15px;
}
.site-article-tabs button + button:before {
top: 16px;
bottom: 16px;
}
.site-article-article-page h3 {
font-size: 28px !important;
}
.site-article-lead {
font-size: 11px !important;
}
.site-article-hero-copy strong {
font-size: 19px;
}
.site-article-checks li {
min-height: 60px;
}
}
@media (max-width: 479px) {
.site-article-tabs button {
min-width: 202px;
}
.site-article-article-page h3 {
font-size: 26px !important;
}
.site-article-answer-box p,
.site-article-article-page blockquote p,
.site-article-article-page > p:not(.site-article-lead) {
font-size: 11px !important;
}
.site-article-ai-card {
padding: 13px;
}
.site-article-ai-card > p {
font-size: 10px !important;
}
.site-article-ai-platforms > span {
font-size: 8px;
}
}
body .site-section.site-article-lab:after {
content: "" !important;
position: absolute;
z-index: 0;
left: 50%;
top: -125px;
width: 118%;
height: 190px;
border-radius: 50%;
background: #f4f7f7;
transform: translateX(-50%);
box-shadow: 0 22px 56px rgba(56, 173, 183, 0.11);
pointer-events: none;
}
@media (max-width: 767px) {
body .site-section.site-article-lab:after {
top: -92px;
width: 155%;
height: 132px;
box-shadow: 0 17px 42px rgba(56, 173, 183, 0.1);
}
}
body .site-section.site-results-showcase {
position: relative;
min-height: 0 !important;
height: auto !important;
padding: 122px 0 108px !important;
background: #f3f8f7 !important;
color: #182224;
overflow: hidden;
}
body .site-section.site-results-showcase:after,
body .site-section.site-results-showcase:before {
content: none !important;
}
.site-results-showcase > .site-result-marquee,
.site-results-showcase > .site-result-shell {
position: relative;
z-index: 1;
}
body .site-section.site-results-showcase:before {
content: "" !important;
position: absolute;
z-index: 0;
left: 50%;
top: -122px;
width: 122%;
height: 180px;
border-radius: 50%;
background: #0b1517;
transform: translateX(-50%);
box-shadow: 0 24px 52px rgba(72, 196, 205, 0.13);
pointer-events: none;
}
.site-result-shell {
width: min(1120px, calc(100% - 48px));
margin: 0 auto;
}
.site-result-heading {
display: flex;
align-items: flex-end;
gap: 44px;
margin-bottom: 74px;
}
.site-result-heading > div {
min-width: 0;
}
.site-result-eyebrow {
display: block;
margin-bottom: 18px;
color: #2da9b4 !important;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.16em;
}
.site-result-heading h2 {
margin: 0;
color: #151d1f !important;
font-size: clamp(54px, 5.4vw, 76px) !important;
font-weight: 540 !important;
letter-spacing: -0.06em !important;
line-height: 0.99 !important;
}
.site-result-heading .site-highlight {
color: #fff !important;
}
.site-result-marquee {
position: relative;
display: grid;
gap: 14px;
width: calc(100% + 320px);
margin-left: -160px;
overflow: hidden;
}
.site-result-marquee:after,
.site-result-marquee:before {
content: "";
position: absolute;
z-index: 4;
top: 0;
bottom: 0;
pointer-events: none;
}
.site-result-row {
width: 100%;
overflow: hidden;
}
.site-result-track {
display: flex;
width: max-content;
will-change: transform;
animation: site-result-scroll 58s linear infinite;
}
.site-result-row.site-row-two .site-result-track {
animation-duration: 64s;
animation-direction: reverse;
}
.site-result-set {
display: flex;
gap: 14px;
padding-right: 14px;
}
.site-result-marquee:hover .site-result-track {
animation-play-state: paused;
}
.site-result-card {
width: 376px;
height: 382px;
flex: none;
border: 1px solid #dfe4e6;
border-radius: 18px;
background: #fff;
box-shadow: 0 12px 30px rgba(25, 49, 53, 0.055);
overflow: hidden;
}
.site-result-result {
display: flex;
flex-direction: column;
}
.site-result-chart-proof {
position: relative;
flex: none;
overflow: hidden;
}
.site-result-result-copy {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
padding: 23px 22px 18px;
}
.site-result-category {
position: absolute;
right: 12px;
padding: 7px 10px;
border-radius: 7px;
background: hsla(0, 0%, 100%, 0.88);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
color: #526164 !important;
font-size: 9px;
font-weight: 700;
}
.site-result-result-copy > small {
color: #9ba5a7 !important;
font-size: 8px;
font-weight: 750;
letter-spacing: 0.08em;
}
.site-result-result-copy h3 {
margin: 8px 0 0;
color: #263234 !important;
font-size: 20px !important;
font-weight: 650 !important;
letter-spacing: -0.035em !important;
line-height: 1.15 !important;
}
.site-result-result-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #e8ecec;
}
.site-result-result-metrics span,
.site-result-result-metrics strong {
display: block;
}
.site-result-result-metrics strong {
color: #263234 !important;
font-size: 21px;
}
.site-result-result-metrics span {
margin-top: 3px;
color: #97a1a3 !important;
font-size: 8px;
}
.site-result-quote {
grid-template-columns: 43% 57%;
}
.site-result-quote-copy blockquote {
padding: 0;
border: 0;
}
@keyframes site-article-geo-pulse {
0%,
to {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 0 3px rgba(56, 173, 130, 0.11);
}
50% {
opacity: 0.28;
transform: scale(0.72);
box-shadow: 0 0 0 7px rgba(56, 173, 130, 0);
}
}
@keyframes site-result-scroll {
to {
transform: translateX(-50%);
}
}
@media (max-width: 991px) {
.site-result-heading h2 {
font-size: 58px !important;
}
.site-result-marquee {
width: calc(100% + 180px);
margin-left: -90px;
}
.site-result-card {
width: 348px;
}
}
@media (max-width: 767px) {
body .site-section.site-results-showcase {
padding: 89px 0 76px !important;
}
.site-result-shell {
width: calc(100% - 34px);
}
.site-result-heading {
align-items: flex-start;
flex-direction: column;
gap: 27px;
margin-bottom: 50px;
}
.site-result-eyebrow {
font-size: 9px;
}
.site-result-heading h2 {
font-size: 43px !important;
line-height: 1.02 !important;
}
.site-result-marquee {
gap: 10px;
width: calc(100% + 80px);
margin-left: -40px;
}
.site-result-set {
gap: 10px;
padding-right: 10px;
}
.site-result-card {
width: 310px;
height: 342px;
border-radius: 15px;
}
.site-result-quote {
grid-template-columns: 42% 58%;
}
.site-result-result-copy {
padding: 18px 17px 14px;
}
.site-result-result-copy h3 {
font-size: 17px !important;
}
.site-result-result-metrics strong {
font-size: 18px;
}
.site-result-track {
animation-duration: 46s;
}
.site-result-row.site-row-two .site-result-track {
animation-duration: 51s;
}
body .site-section.site-results-showcase:before {
top: -82px;
width: 155%;
height: 116px;
transform: translateX(-50%);
box-shadow: 0 18px 38px rgba(72, 196, 205, 0.12);
}
}
@media (max-width: 479px) {
.site-result-heading h2 {
font-size: 39px !important;
}
.site-result-card {
width: 292px;
}
.site-result-quote {
grid-template-columns: 40% 60%;
}
.site-result-result-copy h3 {
font-size: 16px !important;
}
}
.site-result-chart-proof {
height: 155px;
padding: 0;
display: grid;
place-items: center;
background: #f2f5f8;
}
.site-result-chart-proof > img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #f4f7fa;
}
.site-result-category {
top: -147px;
}
@media (max-width: 767px) {
.site-result-chart-proof {
height: 132px;
}
.site-result-category {
top: -125px;
}
}
@media (max-width: 479px) {
.site-result-heading h2 br {
display: block;
}
}
.site-result-heading {
justify-content: center;
text-align: center;
}
.site-result-quote {
width: 376px;
display: block;
}
.site-result-quote-copy {
height: 100%;
padding: 28px;
display: flex;
flex-direction: column;
}
.site-result-person {
display: flex;
align-items: center;
gap: 14px;
}
.site-result-person > img {
width: 56px;
height: 56px;
display: block;
flex: none;
border: 2px solid #f0f3f4;
border-radius: 50%;
object-fit: cover;
object-position: center top;
box-shadow: 0 7px 17px rgba(31, 56, 60, 0.1);
}
.site-result-person > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.site-result-person strong {
color: #263234 !important;
font-size: 13px;
font-weight: 750;
}
.site-result-person span {
color: #7e8c8e !important;
font-size: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.site-result-quote-copy blockquote {
margin: 28px 0 24px;
color: #435254 !important;
font-size: 15px !important;
font-style: italic;
font-weight: 500 !important;
letter-spacing: -0.012em !important;
line-height: 1.62 !important;
}
.site-result-quote-footer {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
color: #8b9799 !important;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.11em;
}
.site-result-quote-footer img {
width: 21px;
height: 21px;
display: block;
opacity: 0.72;
}
.site-result-marquee {
--site-result-overhang: 160px;
}
.site-result-marquee:after,
.site-result-marquee:before {
width: 138px;
filter: blur(12px);
}
.site-result-marquee:before {
left: var(--site-result-overhang);
background: linear-gradient(90deg, #f3f8f7 15%, rgba(243, 248, 247, 0.82) 42%, transparent);
}
.site-result-marquee:after {
right: var(--site-result-overhang);
background: linear-gradient(270deg, #f3f8f7 15%, rgba(243, 248, 247, 0.82) 42%, transparent);
}
@media (max-width: 991px) {
.site-result-quote {
width: 348px;
}
.site-result-marquee {
--site-result-overhang: 90px;
}
}
@media (max-width: 767px) {
.site-result-quote {
width: 310px;
}
.site-result-quote-copy {
padding: 23px;
}
.site-result-person > img {
width: 50px;
height: 50px;
}
.site-result-quote-copy blockquote {
margin-top: 23px;
font-size: 14px !important;
line-height: 1.55 !important;
}
.site-result-marquee {
--site-result-overhang: 40px;
}
.site-result-marquee:after,
.site-result-marquee:before {
width: 72px;
filter: blur(8px);
}
}
@media (max-width: 479px) {
.site-result-quote {
width: 292px;
}
.site-result-quote-copy {
padding: 21px;
}
.site-result-person {
gap: 12px;
}
.site-result-person > img {
width: 48px;
height: 48px;
}
.site-result-quote-copy blockquote {
font-size: 13px !important;
}
}
.site-app-preview img,
.site-article-simulator img,
.site-feature-shell img,
.site-footer img,
.site-header img,
.site-results-showcase img {
max-width: 100%;
}
.site-app-preview,
.site-article-article-preview,
.site-article-quality,
.site-article-simulator,
.site-article-workspace,
.site-demo-chat,
.site-demo-planner,
.site-demo-stage,
.site-feature-card,
.site-feature-shell,
.site-footer *,
.site-nav,
.site-result-shell {
min-width: 0;
}
@media (max-width: 991px) {
.site-product-demo {
width: calc(100% + 32px);
max-width: none;
margin-right: -16px;
margin-left: -16px;
}
}
@media (max-width: 880px) {
.site-try {
min-height: 42px;
}
}
@media (max-width: 767px) {
.site-article-tabs {
scroll-snap-type: x proximity;
}
.site-article-tabs button {
scroll-snap-align: start;
}
.site-article-tailor-head span {
min-width: 0;
flex: 0 1 auto;
white-space: normal;
line-height: 1.4;
}
.site-guarantee-line {
align-items: flex-start;
padding-inline: 8px;
}
.site-partner-strip {
min-width: max-content;
}
.site-footer {
width: 100%;
}
}
@media (max-width: 359px) {
.site-logo img {
width: 120px;
}
.site-try {
padding: 10px 13px;
font-size: 12px;
}
.site-mobile-toggle {
width: 40px;
height: 40px;
}
.site-hero-title {
font-size: 40px !important;
}
.site-feature-head h2 {
font-size: 34px !important;
}
.site-article-heading h2 {
font-size: 32px !important;
}
.site-result-heading h2 {
font-size: 35px !important;
}
.site-article-tailor-head span {
font-size: 8px;
}
.site-footer-form button,
.site-footer-form input {
width: 100%;
}
}
html.site-native-scroll,
html.site-native-scroll body:not(.site-menu-locked) {
height: auto !important;
overflow-y: auto !important;
}
html.site-native-scroll .site-page {
overflow-x: clip !important;
overflow-y: visible !important;
}
.site-footer {
position: relative;
padding: 92px 24px 28px;
background: radial-gradient(ellipse at 50% -30%, rgba(38, 139, 149, 0.12), transparent 48%), #080a0c;
color: #fff;
overflow: hidden;
border-top: 1px solid hsla(0, 0%, 100%, 0.035);
}
.site-footer-shell {
position: relative;
width: min(1120px, 100%);
margin: 0 auto;
}
.site-footer-grid {
display: grid;
grid-template-columns: 1.28fr 0.78fr 0.9fr 0.72fr 1.45fr;
gap: 44px;
align-items: start;
}
.site-footer-logo {
display: block;
width: 164px;
}
.site-footer-logo img {
display: block;
width: 100%;
height: auto;
}
.site-footer-brand > p {
max-width: 225px;
margin: 21px 0 22px;
color: rgba(231, 240, 241, 0.56) !important;
font-size: 14px;
line-height: 1.65;
}
.site-footer-language {
width: max-content;
display: flex;
align-items: center;
gap: 7px;
padding: 9px 11px;
border: 1px solid hsla(0, 0%, 100%, 0.16);
border-radius: 6px;
color: hsla(0, 0%, 100%, 0.82) !important;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.site-footer-language:hover {
border-color: rgba(115, 216, 225, 0.4);
background: rgba(115, 216, 225, 0.08);
}
.site-footer-nav h2,
.site-footer-newsletter h2 {
margin: 2px 0 22px;
color: hsla(0, 0%, 100%, 0.68) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.site-footer-nav ul {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer-nav a {
display: inline-block;
color: rgba(229, 237, 238, 0.5) !important;
font-size: 13px;
line-height: 1.45;
text-decoration: none;
transition:
color 0.2s ease,
transform 0.2s ease;
}
.site-footer-nav a:hover {
color: #fff !important;
transform: translateX(2px);
}
.site-footer-newsletter > p {
margin: 0 0 14px;
color: rgba(229, 237, 238, 0.51) !important;
font-size: 13px;
line-height: 1.5;
}
.site-footer-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
}
.site-footer-form input {
min-width: 0;
height: 45px;
padding: 0 16px;
border: 1px solid hsla(0, 0%, 100%, 0.15);
border-radius: 999px;
outline: none;
background: hsla(0, 0%, 100%, 0.07);
color: #fff;
font-family: inherit;
font-size: 13px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.site-footer-form input::placeholder {
color: hsla(0, 0%, 100%, 0.38);
}
.site-footer-form input:focus {
border-color: rgba(111, 210, 219, 0.65);
box-shadow: 0 0 0 3px rgba(75, 178, 188, 0.11);
}
.site-footer-form button {
height: 45px;
padding: 0 19px;
border: 0;
border-radius: 999px;
background: #58aeba;
color: #fff;
font-family: inherit;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.site-footer-form button:hover {
background: #67c0ca;
transform: translateY(-1px);
}
.site-footer-socials {
display: flex;
gap: 10px;
margin-top: 18px;
}
.site-footer-socials a {
width: 25px;
height: 25px;
display: grid;
place-items: center;
color: hsla(0, 0%, 100%, 0.42);
transition:
color 0.2s ease,
transform 0.2s ease;
}
.site-footer-socials a:hover {
color: #fff;
transform: translateY(-2px);
}
.site-footer-socials svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-footer-socials a:last-child svg {
fill: currentColor;
stroke: none;
}
.site-footer-socials svg .site-play {
fill: #080a0c;
}
.site-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 66px;
padding-top: 23px;
border-top: 1px solid hsla(0, 0%, 100%, 0.1);
}
.site-footer-bottom a,
.site-footer-bottom p {
margin: 0;
color: rgba(229, 237, 238, 0.38) !important;
font-size: 12px;
text-decoration: none;
}
.site-footer-bottom a:hover {
color: hsla(0, 0%, 100%, 0.72) !important;
}
.site-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 1050px) {
.site-footer-grid {
grid-template-columns: 1.2fr repeat(3, 0.8fr);
gap: 38px;
}
.site-footer-newsletter {
grid-column: 1/-1;
max-width: 420px;
margin-top: 13px;
}
}
@media (max-width: 767px) {
.site-footer {
padding: 68px 22px 25px;
}
.site-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 42px 26px;
}
.site-footer-brand {
grid-column: 1/-1;
}
.site-footer-brand > p {
max-width: 260px;
}
.site-footer-newsletter {
grid-column: 1/-1;
max-width: none;
margin: 0;
}
.site-footer-form {
grid-template-columns: 1fr;
}
.site-footer-form button {
width: 100%;
}
.site-footer-bottom {
align-items: flex-start;
flex-direction: column;
margin-top: 48px;
}
}
@media (max-width: 479px) {
.site-footer-grid {
grid-template-columns: 1fr;
}
.site-footer-brand,
.site-footer-newsletter {
grid-column: 1;
}
.site-footer-nav h2,
.site-footer-newsletter h2 {
margin-bottom: 16px;
}
.site-footer-nav ul {
gap: 10px;
}
}
body .site-section.site-faq-section {
position: relative;
padding: 48px 24px 112px !important;
background:
radial-gradient(circle at 50% -8%, rgba(67, 180, 190, 0.16), transparent 34%),
radial-gradient(circle at 8% 72%, rgba(91, 190, 172, 0.09), transparent 28%), #f1f8f7 !important;
color: #172426 !important;
overflow: hidden;
}
body .site-section.site-faq-section:before {
content: "" !important;
position: absolute;
z-index: 0;
inset: 0;
background-image: radial-gradient(rgba(35, 123, 132, 0.12) 0.8px, transparent 0);
background-size: 24px 24px;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 70%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 70%);
opacity: 0.28;
pointer-events: none;
}
.site-faq-section .site-container {
position: relative;
z-index: 1;
width: min(1040px, 100%) !important;
max-width: none !important;
margin-inline: auto !important;
padding-top: 0 !important;
}
.site-faq-section .site-section-layout {
width: 100%;
}
.site-faq-section .site-section-layout > .site-flex-col {
align-items: center !important;
gap: 18px !important;
}
.site-faq-eyebrow {
display: block;
color: #229da8 !important;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.17em;
text-align: center;
}
.site-faq-section .site-heading {
max-width: 860px !important;
}
.site-faq-section .site-heading h2 {
margin: 0;
color: #172426 !important;
font-size: clamp(52px, 5.3vw, 74px) !important;
font-weight: 540 !important;
letter-spacing: -0.06em !important;
line-height: 1 !important;
}
.site-faq-section .site-heading h2 .site-highlight {
color: #fff !important;
}
.site-faq-section .site-paragraph {
max-width: 620px !important;
}
.site-faq-section .site-paragraph p {
color: #68787a !important;
font-size: 16px !important;
line-height: 1.65 !important;
}
.site-faq-section .site-faq-list {
width: min(900px, 100%);
margin: 58px auto 0;
gap: 12px;
}
.site-faq-section .site-faq-item {
border-color: #d4e5e5;
border-radius: 18px;
background: hsla(0, 0%, 100%, 0.86);
box-shadow: 0 10px 28px rgba(34, 75, 79, 0.05);
transition:
border-color 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
.site-faq-section .site-faq-item:hover {
border-color: #add4d7;
transform: translateY(-1px);
}
.site-faq-section .site-faq-item[open] {
border-color: #6fc2c9;
background: #fbfefe;
box-shadow: 0 17px 40px rgba(35, 126, 135, 0.09);
}
.site-faq-section .site-faq-item summary {
padding: 22px 24px;
color: #243335 !important;
font-size: 16px;
font-weight: 650;
}
.site-faq-section .site-faq-item summary:after {
width: 32px;
height: 32px;
border-color: #c6dfe0;
background: #eaf7f7;
color: #168c96;
font-size: 20px;
}
.site-faq-section .site-faq-answer {
max-width: 800px;
padding: 0 68px 23px 24px;
color: #667678 !important;
font-size: 14px;
line-height: 1.7;
}
@media (max-width: 767px) {
body .site-section.site-faq-section {
padding: 40px 17px 84px !important;
}
.site-faq-section .site-heading h2 {
font-size: 43px !important;
line-height: 1.02 !important;
}
.site-faq-section .site-paragraph p {
font-size: 15px !important;
}
.site-faq-section .site-faq-list {
margin-top: 43px;
}
.site-faq-section .site-faq-item summary {
padding: 19px 18px;
font-size: 15px;
line-height: 1.35;
}
.site-faq-section .site-faq-answer {
padding: 0 52px 20px 18px;
font-size: 13px;
}
}
@media (max-width: 479px) {
.site-faq-section .site-heading h2 {
font-size: 39px !important;
}
.site-faq-section .site-heading h2 br {
display: block;
}
.site-faq-section .site-faq-item summary:after {
width: 29px;
height: 29px;
}
}
@media (max-width: 767px) {
.site-section:first-of-type .site-hero-title .site-highlight {
white-space: nowrap !important;
font-size: clamp(27px, 8.2vw, 52px) !important;
letter-spacing: -0.05em !important;
max-width: 100%;
vertical-align: baseline;
}
.site-section:first-of-type .site-button-group {
width: 100%;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
}
.site-section:first-of-type .site-button-group .site-button {
flex: none !important;
max-width: 100% !important;
}
.site-section:first-of-type .site-button-group .site-button:first-child {
width: min(290px, 100%) !important;
}
.site-section:first-of-type .site-button-group .site-button:first-child .site-button-inner {
width: 100%;
justify-content: center;
flex-wrap: nowrap;
padding: 15px 18px !important;
}
.site-section:first-of-type .site-button-group .site-button:first-child .site-button-label {
font-size: 15px !important;
}
.site-section:first-of-type .site-button-group .site-button:nth-child(2) {
width: auto !important;
}
.site-section:first-of-type .site-button-group .site-button-label {
white-space: nowrap !important;
flex-wrap: nowrap !important;
word-break: normal;
overflow-wrap: normal;
}
}
.site-article-ai-platforms > span:first-child img {
filter: none;
width: 16px;
height: 16px;
}
.site-article-tabs button .site-article-tab-icon {
background: linear-gradient(145deg, #23717b, #102f39);
border: 1px solid hsla(0, 0%, 100%, 0.42);
box-shadow:
inset 0 1px 0 hsla(0, 0%, 100%, 0.2),
0 4px 10px rgba(23, 62, 66, 0.12);
}
.site-article-tabs button[data-profile="shop"] .site-article-tab-icon {
background: linear-gradient(145deg, #e5ad8e, #bb745f);
}
.site-article-tabs button[data-profile="agency"] .site-article-tab-icon {
background: linear-gradient(145deg, #9c91f3, #625bce);
}
.site-article-tab-icon svg {
display: block;
width: 27px;
height: 27px;
fill: none;
stroke: #fff;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s ease;
}
.site-article-tab-icon .site-article-icon-tint {
fill: hsla(0, 0%, 100%, 0.12);
}
.site-article-tab-icon .site-article-icon-dot {
fill: #fff;
stroke: none;
}
.site-article-tabs button:hover .site-article-tab-icon svg {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.site-article-tab-icon svg {
transition: none;
}
.site-article-tabs button:hover .site-article-tab-icon svg {
transform: none;
}
.site-article-ai-title em i,
.site-article-generating > span i,
.site-article-hero-chart .site-line,
.site-article-simulator.site-is-refreshed .site-article-article-page,
.site-article-simulator.site-is-refreshed .site-article-checks li,
.site-demo-caret,
.site-demo-cursor > i,
.site-feature-brand-article > i,
.site-feature-brand-panel,
.site-feature-editor-cursor,
.site-feature-editor-cursor > i,
.site-feature-keyword,
.site-feature-language-track,
.site-feature-line,
.site-feature-link-icon b,
.site-feature-link-icon i,
.site-feature-link-join i,
.site-feature-link-pill,
.site-feature-link-side i,
.site-feature-strategy-track,
.site-feature-sweep,
.site-floating-signal,
.site-floating-signal:after,
.site-growth-area,
.site-growth-events g,
.site-growth-line,
.site-result-track {
animation: none !important;
stroke-dashoffset: 0;
}
.site-feature-card {
opacity: 1;
transform: none;
}
.site-feature-link-icon i {
opacity: 0;
}
.site-feature-link-icon b {
opacity: 1;
transform: scale(1);
}
}
body .site-section.site-launch {
position: relative;
isolation: isolate;
overflow: hidden;
margin-top: -64px;
padding: 110px 24px 96px !important;
background: #f1f8f7 !important;
color: #fff !important;
}
.site-launch:before {
inset: 0 -4% 0;
border-radius: 50% 50% 0 0/100px 100px 0 0;
background:
radial-gradient(ellipse at 50% 18%, #267b7838, transparent 58%), linear-gradient(0deg, #080a0c, transparent 40%),
#0b1517;
box-shadow:
0 -8px 32px #409d9714,
inset 0 1px 0 #93dcd925;
}
.site-launch:after,
.site-launch:before {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.site-launch:after {
width: min(1040px, 140vw);
height: 280px;
top: 60px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse, #73cfc119, transparent 68%);
filter: blur(30px);
}
.site-launch-shell {
position: relative;
z-index: 1;
width: min(1120px, 100%);
margin: auto;
text-align: center;
}
.site-launch-owl-watermark {
position: absolute;
z-index: 0;
top: 160px;
left: calc(50% + 180px);
width: min(610px, 49vw);
aspect-ratio: 34/30;
background: linear-gradient(155deg, #94e2d8, #3c9f9b 65%, #123035);
-webkit-mask: url("../wisewand/images/owl-mark.svg") center / contain no-repeat;
mask: url("../wisewand/images/owl-mark.svg") center / contain no-repeat;
opacity: 0.075;
transform: rotate(-9deg);
pointer-events: none;
}
.site-launch-owl-signature {
display: grid;
place-items: center;
width: 74px;
height: 74px;
margin: 0 auto 27px;
border: 1px solid #93dcd93b;
border-radius: 23px;
background: linear-gradient(145deg, #99e6dc1f, #47a9a00a);
box-shadow:
inset 0 1px 0 #e8fffc17,
0 0 50px #6cd9c719;
}
.site-launch-owl-signature > span {
width: 47px;
height: 42px;
background: linear-gradient(145deg, #ddfff4, #72c9ca);
-webkit-mask: url("../wisewand/images/owl-mark.svg") center / contain no-repeat;
mask: url("../wisewand/images/owl-mark.svg") center / contain no-repeat;
}
.site-launch-demo {
width: min(590px, 100%);
margin: 0 auto 43px;
}
.site-launch-demo-head {
display: flex;
align-items: center;
justify-content: center;
min-height: 24px;
margin-bottom: 18px;
padding-inline: 4px;
}
.site-launch-demo-head > span {
display: flex;
align-items: center;
gap: 9px;
color: #9ac1c2;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.13em;
text-align: left;
}
.site-launch-demo-head i {
width: 6px;
height: 6px;
flex: none;
border-radius: 50%;
background: #78d8c0;
box-shadow:
0 0 0 4px #78d8c012,
0 0 18px #78d8c050;
}
.site-launch-notifications {
position: relative;
height: 238px;
margin: 0;
padding: 0;
list-style: none;
}
.site-launch-note {
position: absolute;
inset: 0 0 auto;
display: flex;
align-items: flex-start;
gap: 16px;
height: 202px;
padding: 24px;
border: 1px solid #ffffffe0;
border-radius: 23px;
background: linear-gradient(125deg, #fff, #f1f8f7);
box-shadow:
0 20px 60px #00000030,
inset 0 1px 0 #fff;
text-align: left;
transform-origin: center bottom;
transition:
transform 0.8s cubic-bezier(0.22, 0.8, 0.22, 1),
opacity 0.8s ease,
filter 0.8s ease;
}
.site-launch-note[data-position="0"] {
z-index: 3;
opacity: 1;
transform: translateY(0) scale(1);
filter: none;
}
.site-launch-note[data-position="1"] {
z-index: 2;
opacity: 0.48;
transform: translateY(16px) scale(0.95);
filter: blur(1px);
}
.site-launch-note[data-position="2"] {
z-index: 1;
opacity: 0.22;
transform: translateY(32px) scale(0.9);
filter: blur(2px);
}
.site-launch-note-icon {
position: relative;
display: grid;
place-items: center;
width: 54px;
height: 54px;
flex: none;
border: 1px solid #fff;
border-radius: 16px;
background: linear-gradient(145deg, #fff, #e9f2f0);
color: #268c90;
box-shadow:
0 7px 16px #2b535315,
inset 0 0 0 1px #dfeae766;
}
.site-launch-note-icon img {
width: 30px;
height: 30px;
object-fit: contain;
}
.site-launch-note-icon.site-is-published {
background: linear-gradient(145deg, #fff, #edf5e8);
}
.site-launch-note-icon.site-is-strategy {
background: linear-gradient(145deg, #fff, #eef2fa);
}
.site-launch-logo-badge {
position: absolute;
bottom: -5px;
right: -5px;
display: grid;
place-items: center;
width: 25px;
height: 25px;
background: #fff;
border-radius: 9px;
box-shadow: 0 3px 10px #173f3f24;
border: 2px solid #fff;
}
.site-launch-note-icon .site-launch-logo-badge img {
width: 15px;
height: 15px;
}
.site-launch-note[data-position="0"] .site-launch-note-icon {
animation: site-launch-logo-arrive 0.85s cubic-bezier(0.22, 0.8, 0.22, 1) both;
}
.site-launch-note-body {
min-width: 0;
flex: 1;
}
.site-launch-note-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 10px;
color: #7a8d90;
font-size: 9px;
line-height: 1.4;
}
.site-launch-note-meta > span:first-child {
font-weight: 600;
letter-spacing: 0.045em;
}
.site-launch-note-meta b {
margin: 0 4px;
font-weight: 400;
color: #b1c5c4;
}
.site-launch-status {
display: inline-flex;
align-items: center;
gap: 5px;
color: #318b73;
}
.site-launch-status i {
width: 5px;
height: 5px;
border-radius: 50%;
background: #48ac88;
}
.site-launch-note[data-position="0"] .site-launch-status i {
animation: site-launch-status-pulse 2s ease-in-out infinite;
}
body .site-launch .site-launch-note-body strong {
display: block;
color: #1a3235 !important;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.35;
}
body .site-launch .site-launch-note-body p {
margin: 7px 0 11px;
color: #687d7f !important;
font-size: 12px;
line-height: 1.6;
}
.site-launch-note-tag {
display: flex;
align-items: center;
gap: 5px;
color: #2c8a75;
font-size: 9px;
font-weight: 500;
}
.site-launch-note-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 12px;
margin-top: 13px;
padding-top: 11px;
border-top: 1px solid #dde9e6;
}
.site-launch-domain {
display: inline-flex;
align-items: center;
gap: 6px;
color: #546d70;
font-size: 10px;
font-weight: 500;
}
.site-launch-domain img {
width: 12px;
height: 12px;
object-fit: contain;
opacity: 0.7;
}
.site-launch-note-footer .site-launch-note-tag {
margin-left: auto;
color: #899c9e;
font-size: 9px;
}
.site-launch-note:after {
content: "";
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, #5faabb, #94cbb8);
transform: scaleX(0);
transform-origin: left;
opacity: 0.65;
}
.site-launch-note[data-position="0"]:after {
animation: site-launch-note-progress 4.6s linear both;
}
.site-launch.site-is-paused .site-launch-note-icon,
.site-launch.site-is-paused .site-launch-note:after,
.site-launch.site-is-paused .site-launch-status i {
animation-play-state: paused;
}
@keyframes site-launch-logo-arrive {
0% {
transform: translateY(6px) scale(0.9);
}
to {
transform: translateY(0) scale(1);
}
}
@keyframes site-launch-status-pulse {
50% {
box-shadow: 0 0 0 4px #48ac8815;
opacity: 0.55;
}
}
@keyframes site-launch-note-progress {
to {
transform: scaleX(1);
}
}
.site-launch-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 6px;
color: #7b9598;
font-size: 10px;
}
.site-launch-sequence span {
transition: color 0.7s ease;
}
.site-launch-sequence .site-is-current {
color: #a6e6de;
}
.site-launch-sequence i {
width: 24px;
height: 1px;
background: #91cbc52b;
}
body .site-launch .site-launch-copy h2 {
margin: 0;
color: #f3f9f8 !important;
font-size: clamp(40px, 4.5vw, 64px) !important;
font-weight: 600 !important;
letter-spacing: -0.055em !important;
line-height: 1.12 !important;
}
.site-launch-copy h2 > span {
color: #87d4d5;
}
body .site-launch .site-launch-copy > p {
margin: 23px auto 28px;
color: #adc2c4 !important;
font-size: 14px;
line-height: 1.85;
max-width: 1120px;
}
.site-launch-proof {
margin: 0 auto 24px;
}
.site-launch-proof .site-hero-proof {
gap: 14px;
}
.site-launch-proof .site-proof-copy {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.site-launch-proof .site-proof-stars {
font-size: 12px;
letter-spacing: 2px;
}
.site-launch-proof .site-proof-avatars img {
width: 38px;
height: 38px;
}
body .site-launch .site-launch-button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 22px;
min-height: 58px;
padding: 16px 29px;
border: 1px solid #c4f8f64d;
border-radius: 12px;
color: #fff !important;
background: linear-gradient(120deg, #51aebb, #238b98);
box-shadow:
0 8px 28px #45b7bd28,
inset 0 1px 0 #ffffff24;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.site-launch-button svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.site-launch-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 38px #45b7bd40 !important;
}
.site-launch-button:hover svg {
transform: translateX(3px);
}
.site-launch-button:focus-visible {
outline: 3px solid #a9eee9;
outline-offset: 5px;
}
.site-launch-reassurance {
max-width: 640px;
margin: 21px auto 0;
}
.site-launch-reassurance .site-guarantee-line {
font-size: 11px;
line-height: 1.6;
}
@media (max-width: 767px) {
body .site-section.site-launch {
margin-top: -40px;
padding: 76px 22px 70px !important;
}
.site-launch:before {
inset-inline: -15%;
border-radius: 50% 50% 0 0/65px 65px 0 0;
}
.site-launch-owl-watermark {
width: 440px;
max-width: 115vw;
left: 30%;
top: 215px;
opacity: 0.045;
}
.site-launch-owl-signature {
width: 62px;
height: 62px;
border-radius: 19px;
margin-bottom: 24px;
}
.site-launch-owl-signature > span {
width: 40px;
height: 36px;
}
.site-launch-demo {
margin-bottom: 33px;
}
.site-launch-note {
height: 226px;
padding: 20px 17px;
gap: 12px;
}
.site-launch-notifications {
height: 262px;
}
.site-launch-note-icon {
width: 39px;
height: 39px;
border-radius: 11px;
}
.site-launch-note-icon img {
width: 25px;
height: 25px;
}
.site-launch-note-meta {
font-size: 8px;
}
.site-launch-note-meta > span:last-child {
display: inline-flex;
}
.site-launch-note-meta {
gap: 5px 8px;
}
.site-launch-note-footer {
margin-top: 10px;
padding-top: 9px;
}
.site-launch-note-footer .site-launch-note-tag {
margin-left: 0;
font-size: 8px;
}
.site-launch-domain {
font-size: 9px;
}
body .site-launch .site-launch-note-body strong {
font-size: 15px;
}
body .site-launch .site-launch-note-body p {
font-size: 11px;
}
.site-launch-note-tag {
font-size: 8px;
}
.site-launch-demo-head > span {
font-size: 8px;
letter-spacing: 0.09em;
}
body .site-launch .site-launch-copy h2 {
font-size: clamp(32px, 7.5vw, 46px) !important;
}
body .site-launch .site-launch-copy > p {
font-size: 13px;
line-height: 1.8;
margin-block: 19px 24px;
}
.site-launch-proof .site-hero-proof {
gap: 10px;
}
.site-launch-proof .site-proof-copy {
align-items: center;
}
.site-launch-reassurance .site-guarantee-line {
font-size: 10px;
}
}
@media (max-width: 359px) {
body .site-section.site-launch {
padding-inline: 16px !important;
}
.site-launch-note {
gap: 9px;
padding-inline: 13px;
height: 242px;
}
.site-launch-notifications {
height: 278px;
}
.site-launch-note-icon {
width: 32px;
height: 32px;
}
body .site-launch .site-launch-note-body strong {
font-size: 14px;
}
.site-launch-note-tag {
align-items: flex-start;
}
body .site-launch .site-launch-button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-launch-button,
.site-launch-button svg,
.site-launch-note,
.site-launch-sequence span {
transition: none !important;
}
.site-launch-note-icon,
.site-launch-note:after,
.site-launch-status i {
animation: none !important;
}
}