@charset "UTF-8";
:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}
*,
::before,
::after {
box-sizing: border-box;
}
html {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
}
body {
margin: 0;
}
hr {
height: 0;
color: inherit;
}
abbr[title] {
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
::-moz-focus-inner {
border-style: none;
padding: 0;
}
:-moz-focusring {
outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
box-shadow: none;
}
legend {
padding: 0;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/onest/onest-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/onest/onest-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/onest/onest-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/onest/onest-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'glabix-iconset';
src: url('../fonts/glabix-iconset.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.i--md {
font-size: 12px;
}
.i--3md {
font-size: 16px;
}
.i--lg {
font-size: 18px;
}
.i--3xl {
font-size: 39px !important;
}
.i--spin:before {
animation: spin 0.8s linear infinite;
display: inline-block;
transform-origin: 50% 49%;
}
a.i:hover,
a:hover .i {
text-decoration: none;
}
.i {
font-family: 'glabix-iconset' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.i-windows:before {
content: '\ea4c';
}
.i-rustore:before {
content: '\ea3c';
}
.i-comment-lines:before {
content: '\ea35';
}
.i-apple:before {
content: '\ea15';
}
.i-arrow-right:before {
content: '\e920';
}
.i-clipboard-check:before {
content: '\e972';
}
.i-clone:before {
content: '\e98e';
}
.i-search:before {
content: '\e9db';
}
.i-minus:before {
content: '\ea05';
}
.i-spinner:before {
content: '\ea0f';
}
.i-timer:before {
content: '\ea12';
}
.i-face-laugh:before {
content: '\e950';
}
.i-paper-plane-2:before {
content: '\e9e3';
}
.i-video:before {
content: '\e9fd';
}
.i-quote-left:before {
content: '\e917';
}
.i-quote-right:before {
content: '\e918';
}
.i-caret-down:before {
content: '\e900';
}
.i-caret-up:before {
content: '\e903';
}
.i-circle-minus-solid:before {
content: '\e968';
}
.i-bars:before {
content: '\e975';
}
.i-check:before {
content: '\e97d';
}
.i-chevron-down:before {
content: '\e97e';
}
.i-chevron-left:before {
content: '\e97f';
}
.i-chevron-right:before {
content: '\e980';
}
.i-chevron-up:before {
content: '\e981';
}
.i-check-circle-solid:before {
content: '\e982';
}
.i-circle-check:before {
content: '\e983';
}
.i-question-circle:before {
content: '\e989';
}
.i-envelope:before {
content: '\e997';
}
.i-trash:before {
content: '\e9d6';
}
.i-user:before {
content: '\e9dd';
}
.i-vk:before {
content: '\e9de';
}
.i-close:before {
content: '\e9e0';
}
.i-app-store:before {
content: '\ea4d';
}
.i-clapperboard-play:before {
content: '\ea50';
}
.i-max:before {
content: '\ea52';
}
.i-rutube:before {
content: '\ea53';
}
.i-telegram:before {
content: '\ea54';
}
.i-vk-video:before {
content: '\ea55';
}
:root {
--brand-black: #111111;
--brand-white: #ffffff;
--brand-green-strong: #5fd47f;
--brand-green-subdued: #8fe1a6;
--brand-blue-strong: #4191f5;
--brand-blue-subdued: #7ab2f8;
--brand-purple-subdued: #9d8bd3;
--brand-red-subdued: #e97f91;
--brand-pink-subdued: #e8bbcc;
--brand-cyan-subdued: #a2e6ee;
--brand-link: #4091f5;
--text-default: #111111;
--text-muted: rgba(17, 17, 17, 0.8);
--text-subtle: rgba(17, 17, 17, 0.3);
--surface-footer: #f6f6f6;
--surface-footer-bottom: #ebebeb;
--surface-card-blue-soft: #cfe4ff;
--surface-card-purple-soft: #ebd2f8;
--surface-card-green-soft: #d6f8d2;
--surface-card-orange-soft: #fde2c6;
--surface-card-pink-soft: #ffd7df;
--surface-card-sky-soft: #e1f1fb;
--gradient-primary: linear-gradient(-19.72deg, #e75468 18.48%, #7359bf 83.54%);
--gradient-secondary: linear-gradient(-22.38deg, #4091f5 34.4%, #54bea5 63.23%, #5fd47f 95.1%);
--shadow-btn: 0 12px 32px rgba(0, 0, 0, 0.08);
--shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.04);
--shadow-shape: 0 40px 60px rgba(0, 0, 0, 0.04);
--shadow-xsm: 0 1px 2px rgba(16, 24, 40, 0.05);
--light: #ffffff;
--dark: #111111;
--primary: #5fd47f;
--primary-100: #e3f4ee;
--primary-200: #b3e0d1;
--primary-700: #007a52;
--primary-gradient: var(--gradient-secondary);
--blue: #0077ff;
--yellow: #fad200;
--orange: #ff5c00;
--magenta: #ff4974;
--magenta-gradient: var(--gradient-primary);
--purple-pink-gradient: linear-gradient(0.96deg, #e17587 -117.85%, #5a46ff 237.12%);
--body-bg: var(--light);
--gray-100: #f9f9f9;
--gray-200: #f3f3f4;
--gray-300: #e7e8e9;
--gray-400: #cfd1d4;
--gray-500: #9fa3a9;
--gray-600: #6f757e;
--gray-700: #3f4753;
--gray-900: #1a1a1a;
--error: #ff4974;
--bg-color-1: #ccead4;
--bg-color-2: #ccdfff;
--bg-color-3: #ffe8cc;
--bg-color-4: #cdf3f0;
--bg-color-5: #e1d1eb;
--bg-color-6: #fef6cc;
--bg-color-7: #e7cfdc;
--bg-color-8: #cdeefd;
--bg-color-9: #ffd1da;
--palette-common-0: #00962a;
--palette-common-1: #0061fd;
--palette-common-2: #ff8a00;
--palette-common-3: #04c1b6;
--palette-common-4: #6a1b9a;
--palette-common-5: #ab47bc;
--palette-common-6: #ff24bd;
--palette-common-7: #880e4f;
--palette-common-8: #d81b60;
--palette-common-9: #ff1744;
--palette-common-10: #795548;
--palette-common-11: #827717;
--palette-common-12: #bf360c;
--palette-common-13: #e65100;
--palette-common-14: #78909c;
--palette-common-15: #004d40;
--palette-common-16: #03a9f4;
--palette-common-17: #00838f;
--palette-common-18: #4caf50;
--palette-common-19: #283593;
--palette-light-0: #ccead4;
--palette-light-1: #ccdfff;
--palette-light-2: #ffe8cc;
--palette-light-3: #cdf3f0;
--palette-light-4: #e1d1eb;
--palette-light-5: #eedaf2;
--palette-light-6: #ffd3f2;
--palette-light-7: #e7cfdc;
--palette-light-8: #f7d1df;
--palette-light-9: #ffd1da;
--palette-light-10: #e4ddda;
--palette-light-11: #e6e4d1;
--palette-light-12: #f2d7ce;
--palette-light-13: #fadccc;
--palette-light-14: #e4e9eb;
--palette-light-15: #ccdbd9;
--palette-light-16: #cdeefd;
--palette-light-17: #cce6e9;
--palette-light-18: #dbefdc;
--palette-light-19: #d4d7e9;
--bp-sm: 576px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-xxl: 1400px;
--column-gap-sm: 10px;
--column-gap: 20px;
--column-gap-lg: 40px;
--column-gap-xl: 60px;
--column-gap-xxl: 80px;
--page-pad-x: 20px;
}
@media (min-width: 576px) {
:root {
--page-pad-x: 32px;
}
}
@media (min-width: 1280px) {
:root {
--page-pad-x: 0px;
}
}
*,
::before,
::after {
border-color: currentColor;
border-style: solid;
border-width: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
scrollbar-gutter: stable;
}
@media (min-width: 1024px) and (max-width: 1279px) {
html {
scroll-padding-top: 64px;
}
}
html,
body {
min-height: 100vh;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: var(--gray-400);
border-radius: 7px;
}
::-webkit-scrollbar-track {
border-radius: 7px;
}
body {
color: var(--text-default);
font-family: "Onest", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
position: relative;
display: flex;
flex-direction: column;
overflow-x: clip;
}
body main {
flex-grow: 1;
}
body.page-nav-modal-open {
overflow: hidden;
}
strong {
font-weight: 700;
}
figure {
margin: 0;
}
.article-content {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
text-rendering: optimizeLegibility;
hanging-punctuation: first last;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
.text-lg {
font-size: 20px;
line-height: 28px;
}
.text-sm {
font-size: 14px;
line-height: 16px;
}
.text-28 {
font-size: 28px !important;
}
.text-32 {
font-size: 32px !important;
}
@media (min-width: 768px) {
.text-40\:md {
font-size: 40px !important;
}
}
.lh-32 {
line-height: 32px;
}
.lh-40 {
line-height: 40px !important;
}
@media (min-width: 768px) {
.lh-40\:md {
line-height: 40px !important;
}
}
.font-weight-400 {
font-weight: 400 !important;
}
.font-weight-500,
.fw-500 {
font-weight: 500 !important;
}
.font-weight-600,
.fw-600 {
font-weight: 600 !important;
}
.fw-700 {
font-weight: 700 !important;
}
.fw-800 {
font-weight: 800 !important;
}
.font-style-italic {
font-style: italic;
}
.text-light {
color: var(--light) !important;
}
.text-dark {
color: var(--dark) !important;
}
.text-center {
text-align: center;
}
.text-underline {
text-decoration: underline;
}
.hover-underline-none:hover {
text-decoration: none;
}
.link-hover-underline:hover {
text-decoration: none;
}
.link-hover-underline:hover .link-hover-underline {
text-decoration: underline;
}
.order-list {
padding-inline-start: 25px;
}
@media (min-width: 576px) {
.order-list {
padding-inline-start: 40px;
}
}
.order-list a {
word-break: break-all;
}
.order-list li::marker {
content: attr(data-marker);
font-weight: normal;
}
.order-list.fw-marker-700 li::marker {
font-weight: 700;
}
.order-list.fw-marker-600 li::marker {
font-weight: 600;
}
ul.order-list > li::marker {
content: none;
}
ul.order-list > li {
position: relative;
}
ul.order-list > li::before {
content: "\2022";
font-size: 1.5em;
position: absolute;
left: -0.45em;
top: 0.09em;
}
.text-page {
font-size: 16px;
line-height: 1.6;
}
@media (min-width: 576px) {
.text-page {
font-size: 17px;
}
}
main.text-page {
padding-bottom: 64px;
}
@media (min-width: 768px) {
main.text-page {
padding-bottom: 96px;
}
}
.breadcrumb {
font-weight: 300;
font-size: 14px;
margin-top: 30px;
margin-bottom: 30px;
}
@media (min-width: 1024px) {
.breadcrumb {
margin-top: 40px;
}
}
.breadcrumb > * {
display: inline;
}
.breadcrumb > *:not(:last-child):after {
font-family: "glabix-iconset" !important;
content: "\e980";
display: inline-block;
margin: 0 8px;
font-size: 11px;
color: var(--gray-600);
vertical-align: baseline;
}
.breadcrumb a {
color: var(--gray-600);
}
.text-h1,
.text-h2,
.text-h3 {
font-family: "Onest", sans-serif;
color: var(--text-default);
margin: 0;
}
.text-h1 {
font-size: 32px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.64px;
}
@media (min-width: 768px) {
.text-h1 {
font-size: 36px;
letter-spacing: -0.72px;
}
}
@media (min-width: 1024px) {
.text-h1 {
font-size: 40px;
letter-spacing: -0.8px;
}
}
@media (min-width: 1280px) {
.text-h1 {
font-size: 52px;
letter-spacing: -1.04px;
}
}
.text-h2 {
font-size: 28px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.56px;
}
@media (min-width: 768px) {
.text-h2 {
font-size: 36px;
letter-spacing: -0.72px;
}
}
@media (min-width: 1024px) {
.text-h2 {
font-size: 32px;
letter-spacing: -0.64px;
}
}
@media (min-width: 1280px) {
.text-h2 {
font-size: 40px;
letter-spacing: -0.8px;
}
}
.text-h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.2px;
}
@media (min-width: 768px) {
.text-h3 {
font-size: 24px;
letter-spacing: 0.24px;
}
}
@media (min-width: 1280px) {
.text-h3 {
font-size: 32px;
letter-spacing: 0.32px;
}
}
.text-title-l {
font-family: "Onest", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
letter-spacing: 0.16px;
color: var(--text-default);
}
@media (min-width: 1280px) {
.text-title-l {
font-size: 20px;
line-height: 1.4;
letter-spacing: 0.2px;
}
}
.text-title-s {
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.14px;
color: var(--text-default);
}
.text-body-l {
font-family: "Onest", sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.18px;
color: var(--text-default);
}
@media (min-width: 1024px) {
.text-body-l {
font-size: 20px;
letter-spacing: 0.2px;
}
}
.text-body-m {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.12px;
color: var(--text-default);
}
@media (min-width: 1024px) {
.text-body-m {
font-size: 14px;
}
}
@media (min-width: 1280px) {
.text-body-m {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.text-body-s {
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.14px;
color: var(--text-default);
}
.text-caption {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
color: var(--text-muted);
}
.text-muted {
color: var(--text-muted);
}
.text-on-brand {
color: var(--brand-white);
}
.text-underline-accent {
text-decoration: underline;
text-decoration-color: var(--brand-blue-subdued);
text-decoration-thickness: 6px;
text-underline-offset: 0.12em;
text-decoration-skip-ink: none;
}
@media (max-width: 767px) {
.text-underline-accent {
text-decoration-thickness: 4px;
}
}
.text-underline-accent--blue {
text-decoration-color: var(--brand-blue-subdued);
}
.text-underline-accent--green {
text-decoration-color: var(--brand-green-subdued);
}
.text-underline-accent--purple {
text-decoration-color: var(--brand-purple-subdued);
}
.text-underline-accent--red {
text-decoration-color: var(--brand-red-subdued);
}
.text-underline-accent--pink {
text-decoration-color: var(--brand-pink-subdued);
}
.text-underline-accent--cyan {
text-decoration-color: var(--brand-cyan-subdued);
}
.text-underline-accent--yellow {
text-decoration-color: var(--yellow);
}
.text-underline-accent--white {
text-decoration-color: rgba(255, 255, 255, 0.7);
}
.page-container {
margin-right: auto;
margin-left: auto;
max-width: 1216px;
width: 100%;
padding-left: var(--page-pad-x);
padding-right: var(--page-pad-x);
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: calc(-0.5 * var(--column-gap));
margin-right: calc(-0.5 * var(--column-gap));
}
.row-lg {
margin-left: calc(-0.5 * var(--column-gap-lg));
margin-right: calc(-0.5 * var(--column-gap-lg));
}
.row-lg > [class*='col-'] {
padding-left: calc(var(--column-gap-lg) * 0.5);
padding-right: calc(var(--column-gap-lg) * 0.5);
}
.column-gap-sm {
column-gap: var(--column-gap-sm);
}
.column-gap-lg {
column-gap: var(--column-gap-lg);
}
.row-gap {
row-gap: var(--column-gap);
}
.flex {
display: flex !important;
}
.flex-col {
flex-direction: column !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
.flex-shrink-0 {
flex-shrink: 0 !important;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
@media (min-width: 1024px) {
.justify-self-end-lg {
justify-self: end !important;
}
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.gap-5 {
gap: 5px !important;
}
.gap-10 {
gap: 10px !important;
}
.gap-20 {
gap: 20px;
}
.gap-24 {
gap: 24px;
}
.gap-25 {
gap: 25px;
}
.gap-lg-60 {
@media (min-width: 1024px) {
gap: 60px;
}
}
.flex-center-4 {
display: flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
}
.flex-center-6 {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
}
[class*='col-'] {
flex: 0 0 auto;
padding-left: calc(var(--column-gap) * 0.5);
padding-right: calc(var(--column-gap) * 0.5);
}
.hidden, .visible-sm, .visible-md, .visible-lg {
display: none !important;
}
@media (min-width: 576px) {
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
}
@media (min-width: 768px) {
.hidden-md {
display: none !important;
}
.visible-md {
display: block !important;
}
.visible-inline-md {
display: inline-block !important;
}
}
@media (min-width: 1024px) {
.hidden-lg {
display: none !important;
}
.visible-lg {
display: block !important;
}
}
.page-content-narrow {
max-width: 1000px;
margin-inline: auto;
}
.flex-center-5 {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 5px;
}
.flex-center-6 {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 6px;
}
@media (min-width: 576px) {
.flex-center-6 {
width: 32px;
height: 32px;
}
}
@media (min-width: 768px) {
.flex-center-6 {
width: 36px;
height: 36px;
}
}
.page-nav-modal-backdrop {
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
pointer-events: none;
}
.page-nav-modal-wrapper {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
z-index: 1000;
display: none;
}
.page-nav-modal-open .page-nav-modal-wrapper {
display: block;
}
@media (min-width: 1200px) {
.page-nav-modal-wrapper {
display: none !important;
}
}
.page-nav-modal {
background-color: var(--body-bg);
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25);
animation-name: fadeinleft;
animation-duration: 0.15s;
width: 375px;
max-width: 100%;
min-height: 100vh;
position: relative;
z-index: 2;
padding: 0 20px 20px;
display: flex;
flex-direction: column;
}
@media (min-width: 576px) {
.page-nav-modal {
padding-left: 32px;
padding-right: 32px;
}
}
.page-nav-modal-header {
min-height: 64px;
display: flex;
align-items: center;
gap: 12px;
}
.page-nav-modal-header .i-close {
font-size: 20px;
}
@media (min-width: 576px) {
.page-nav-modal-header .i-close {
font-size: 26px;
}
}
@media (min-width: 768px) {
.page-nav-modal-header .i-close {
font-size: 30px;
}
}
.page-nav-modal-body {
flex: 1;
}
.page-nav-modal-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.page-nav-modal-list .page-nav-modal-list {
gap: 10px;
}
.page-nav-modal-footer {
padding-top: 40px;
}
.site-header {
position: sticky;
top: 0;
z-index: 900;
background-color: transparent;
transition:
background-color 0.25s ease,
box-shadow 0.25s ease;
}
.site-header.is-scrolled {
background-color: var(--brand-white);
box-shadow: var(--shadow-menu);
}
.site-nav {
display: flex;
align-items: center;
gap: 16px;
min-height: 64px;
padding: 12px 0;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.site-nav {
min-height: 48px;
}
}
@media (min-width: 1280px) {
.site-nav {
min-height: 64px;
gap: 32px;
}
}
.site-nav-logo-group {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.site-nav-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
text-decoration: none;
}
.site-nav-logo img {
display: block;
height: 20px;
width: auto;
}
@media (min-width: 576px) and (max-width: 767px) {
.site-nav-logo img {
height: 24px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.site-nav-logo img {
height: 28px;
}
}
@media (min-width: 1280px) {
.site-nav-logo img {
height: 26px;
}
}
.site-nav-burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-default);
cursor: pointer;
}
.site-nav-burger .i-bars {
font-size: 20px;
}
@media (min-width: 576px) {
.site-nav-burger {
width: 32px;
height: 32px;
}
.site-nav-burger .i-bars {
font-size: 26px;
}
}
@media (min-width: 768px) {
.site-nav-burger {
width: 36px;
height: 36px;
}
.site-nav-burger .i-bars {
font-size: 30px;
}
}
@media (min-width: 1024px) {
.site-nav-burger {
display: none;
}
}
.site-nav-menu {
display: none;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: 16px;
height: 100%;
}
@media (min-width: 1024px) {
.site-nav-menu {
display: flex;
}
}
@media (min-width: 1280px) {
.site-nav-menu {
gap: 24px;
}
}
.site-nav-item {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.site-nav-link {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
color: var(--text-default);
opacity: 0.8;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: opacity 0.15s ease;
}
@media (min-width: 1280px) {
.site-nav-link {
font-size: 14px;
line-height: 1.6;
}
}
.site-nav-link:hover,
.site-nav-item:hover > .site-nav-link--dropdown {
opacity: 1;
text-decoration: none;
}
.site-nav-link--dropdown {
cursor: default;
}
.site-nav-link[aria-current="page"] {
opacity: 1;
text-decoration: underline;
text-decoration-color: var(--brand-blue-subdued);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.site-nav-dropdown-holder {
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
padding-top: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 1000;
}
.site-nav-item.has-dropdown:hover .site-nav-dropdown-holder,
.site-nav-item.has-dropdown:focus-within .site-nav-dropdown-holder {
opacity: 1;
pointer-events: auto;
}
.site-nav-dropdown {
background-color: var(--brand-white);
box-shadow: var(--shadow-menu);
border-radius: 16px;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 220px;
}
.site-nav-dropdown-link {
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
color: var(--text-default);
text-decoration: none;
white-space: nowrap;
opacity: 0.8;
transition: opacity 0.15s ease;
}
.site-nav-dropdown-link:hover {
opacity: 1;
text-decoration: none;
}
.site-nav-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
@media (min-width: 1024px) {
.site-nav-actions {
margin-left: 0;
}
}
.btn-header-outline {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 8px;
border: 0.75px solid rgba(17, 17, 17, 0.5);
border-radius: 4px;
background: transparent;
color: var(--text-default);
font-family: "Onest", sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
}
@media (min-width: 576px) and (max-width: 1023px) {
.btn-header-outline {
height: 40px;
padding: 10.5px 16px;
border: 1px solid rgba(17, 17, 17, 0.5);
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
}
.btn-header-outline img {
width: 16px;
height: 16px;
}
}
@media (min-width: 1024px) {
.btn-header-outline {
height: 28px;
}
}
@media (min-width: 1280px) {
.btn-header-outline {
height: 32px;
padding: 8px 12px 8px 10px;
border: 1px solid rgba(17, 17, 17, 0.5);
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
}
}
.btn-header-outline:hover {
border-color: var(--text-default);
text-decoration: none;
}
.btn-header-outline img {
display: block;
width: 12px;
height: 12px;
}
@media (min-width: 1280px) {
.btn-header-outline img {
width: 16px;
height: 16px;
}
}
.btn-header-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 6px 10px;
border-radius: 4px;
background-color: var(--brand-black);
box-shadow: var(--shadow-btn);
color: var(--brand-white);
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
@media (min-width: 576px) and (max-width: 1023px) {
.btn-header-primary {
height: 40px;
padding: 10.5px 16px;
font-size: 12px;
line-height: 1.4;
}
}
@media (min-width: 1024px) {
.btn-header-primary {
height: 28px;
padding: 8px 8px;
font-size: 10px;
line-height: 1.5;
}
}
@media (min-width: 1280px) {
.btn-header-primary {
height: 32px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.4;
}
}
.btn-header-primary:hover {
color: var(--brand-white);
text-decoration: none;
}
.site-footer {
position: relative;
z-index: 1;
font-family: "Onest", sans-serif;
font-size: 12px;
line-height: 1.6;
color: var(--text-muted);
}
.site-footer .page-container {
max-width: 1216px;
padding-left: var(--page-pad-x);
padding-right: var(--page-pad-x);
}
@media (min-width: 1280px) {
.site-footer {
font-size: 14px;
}
}
.site-footer-main {
background-color: var(--surface-footer);
padding: 32px 0;
}
@media (min-width: 1024px) {
.site-footer-main {
padding: 32px 0 40px;
}
}
@media (min-width: 1280px) {
.site-footer-main {
padding: 48px 0 56px;
}
}
.site-footer-main-inner {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 1024px) {
.site-footer-main-inner {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-rows: auto auto 1fr;
column-gap: 48px;
row-gap: 16px;
}
.site-footer-top {
display: contents;
}
.site-footer-logo {
grid-column: 1;
grid-row: 1;
}
.site-footer-top .btn-2026 {
grid-column: 1;
grid-row: 3;
align-self: end;
justify-self: start;
}
.site-footer-contacts-row {
grid-column: 1;
grid-row: 2;
}
.site-footer-links {
grid-column: 2;
grid-row: 1 / span 3;
}
}
@media (min-width: 1280px) {
.site-footer-main-inner {
grid-template-columns: 220px 1fr;
column-gap: 60px;
}
}
@media (min-width: 1024px) {
.site-footer-top {
display: contents !important;
}
}
.site-footer-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.site-footer-logo {
display: inline-flex;
align-items: center;
width: fit-content;
text-decoration: none;
}
.site-footer-logo img {
display: block;
height: 20px;
width: auto;
}
@media (min-width: 1280px) {
.site-footer-logo img {
height: 26px;
}
}
.site-footer-socials {
display: flex;
gap: 8px;
}
@media (min-width: 576px) {
.site-footer-socials {
display: grid;
grid-template-columns: repeat(3, max-content);
}
}
.site-footer-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 4px;
background-color: var(--brand-white);
box-shadow: var(--shadow-btn);
text-decoration: none;
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.site-footer-social:hover {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}
.site-footer-social img {
display: block;
width: 20px;
height: 20px;
}
@media (min-width: 1024px) {
.site-footer-socials {
gap: 12px;
}
.site-footer-social {
width: 32px;
height: 32px;
}
}
@media (min-width: 1280px) {
.site-footer-social {
width: 42px;
height: 42px;
}
}
.site-footer-contacts {
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
@media (min-width: 1024px) {
.site-footer-contacts {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
}
.site-footer-contacts a {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.site-footer-contacts a:hover {
color: var(--text-default);
text-decoration: none;
}
@media (min-width: 1024px) and (max-width: 1279px) {
.site-footer-contacts a {
font-size: 10px;
}
}
@media (min-width: 1280px) {
.site-footer-contacts a {
font-size: 14px;
}
}
.site-footer-contacts-row {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 16px;
border-top: 1px solid rgba(17, 17, 17, 0.08);
}
@media (min-width: 1024px) {
.site-footer-contacts-row {
padding-top: 0;
border-top: 0;
margin-top: 0;
}
}
@media (min-width: 1280px) {
.site-footer-contacts-row {
padding-top: 8px;
}
}
.site-footer-top .btn-2026 {
align-self: flex-start;
flex: 0 0 auto;
height: 40px;
padding: 10px 16px;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
}
@media (min-width: 1024px) {
.site-footer-top .btn-2026 {
align-self: end;
height: 36px;
padding: 10px 14px;
font-size: 10px;
}
}
@media (min-width: 1280px) {
.site-footer-top .btn-2026 {
height: 42px;
padding: 12px 16px;
font-size: 12px;
}
}
.site-footer-links {
display: flex;
flex-direction: column;
gap: 0;
flex: 1 1 auto;
}
@media (min-width: 576px) and (max-width: 1023px) {
.site-footer-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
}
.site-footer-group {
border-bottom: 0;
}
.site-footer-group[open] {
padding-bottom: 0;
}
.site-footer-group-title {
padding: 0 0 8px;
cursor: default;
}
.site-footer-group-title::after {
display: none;
}
.site-footer-group > .site-footer-group-list {
display: flex !important;
}
}
@media (min-width: 576px) and (max-width: 1023px) {
.site-footer-main-inner {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"logo socials btn"
"links links links";
column-gap: 16px;
row-gap: 20px;
align-items: center;
}
.site-footer-top {
display: contents;
}
.site-footer-contacts-row {
display: contents;
}
.site-footer-logo {
grid-area: logo;
}
.site-footer-socials {
grid-area: socials;
justify-self: end;
gap: 8px;
}
.site-footer-top .btn-2026 {
grid-area: btn;
}
.site-footer-contacts {
display: none;
}
.site-footer-links {
grid-area: links;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
row-gap: 20px;
}
.site-footer-group {
display: flex;
flex-direction: column;
gap: 16px;
border-bottom: 0;
}
.site-footer-group-title {
font-size: 14px;
font-weight: 600;
padding: 0;
}
.site-footer-group-list {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
gap: 12px 16px;
padding: 0;
}
.site-footer-group-list a {
font-size: 14px;
letter-spacing: 0.14px;
color: rgba(17, 17, 17, 0.8);
white-space: nowrap;
}
.site-footer-bottom {
padding: 20px 0;
}
.site-footer-bottom-inner {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
font-size: 12px;
}
.site-footer-copy {
order: 0;
margin-right: 0;
color: rgba(17, 17, 17, 0.3);
}
.site-footer-legal {
order: 1;
flex-direction: row;
gap: 16px;
}
.site-footer-legal a {
color: rgba(17, 17, 17, 0.3);
}
.site-footer-top .btn-2026 {
height: 40px;
padding: 10.5px 16px;
font-size: 12px;
line-height: 1.6;
}
.site-footer-logo img {
height: 28px;
}
}
@media (min-width: 1024px) {
.site-footer-links {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px 16px;
}
}
.site-footer-group {
display: block;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.site-footer-group[open] {
padding-bottom: 12px;
}
@media (min-width: 1024px) {
.site-footer-group {
display: flex;
flex-direction: column;
gap: 12px;
border-bottom: 0;
}
.site-footer-group[open] {
padding-bottom: 0;
}
.site-footer-group > .site-footer-group-list {
display: flex !important;
}
}
.site-footer-group-title {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
color: var(--text-default);
margin: 0;
padding: 16px 0;
cursor: pointer;
list-style: none;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-footer-group-title::-webkit-details-marker {
display: none;
}
.site-footer-group-title::after {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-right: 4px;
margin-top: -4px;
transition: transform 0.15s ease;
flex: 0 0 auto;
}
.site-footer-group[open] > .site-footer-group-title::after {
transform: rotate(-135deg);
margin-top: 4px;
}
@media (min-width: 1280px) {
.site-footer-group-title {
font-size: 14px;
}
}
@media (min-width: 1024px) {
.site-footer-group-title {
padding: 0;
cursor: default;
}
.site-footer-group-title::after {
display: none;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.site-footer-group-title {
font-size: 11px;
}
}
.site-footer-group-list {
list-style: none;
padding: 0 0 4px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 1024px) {
.site-footer-group-list {
padding: 0;
gap: 8px;
}
}
@media (min-width: 1280px) {
.site-footer-group-list {
gap: 12px;
}
}
.site-footer-group-list a {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.site-footer-group-list a:hover {
color: var(--text-default);
text-decoration: none;
}
@media (min-width: 1024px) and (max-width: 1279px) {
.site-footer-group-list a {
font-size: 11px;
}
}
@media (min-width: 1280px) {
.site-footer-group-list a {
font-size: 14px;
}
}
.site-footer-bottom {
background-color: var(--surface-footer-bottom);
padding: 20px 0;
}
.site-footer-bottom-inner {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 8px;
column-gap: 16px;
align-items: center;
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: var(--text-subtle);
}
.site-footer-copy {
grid-column: 1;
grid-row: 2;
color: var(--text-subtle);
}
.site-footer-legal {
display: contents;
}
.site-footer-legal a:first-child {
grid-column: 1;
grid-row: 1;
}
.site-footer-legal a:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.site-footer-design {
grid-column: 2;
grid-row: 2;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-subtle);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease;
}
.site-footer-design:hover {
color: var(--text-muted);
text-decoration: none;
}
.site-footer-design img {
display: block;
width: 12px;
height: 12px;
}
.site-footer-legal a {
color: var(--text-subtle);
text-decoration: none;
transition: color 0.15s ease;
}
.site-footer-legal a:hover {
color: var(--text-muted);
text-decoration: none;
}
@media (min-width: 576px) and (max-width: 767px) {
.site-footer-bottom-inner {
row-gap: 12px;
column-gap: 20px;
}
.site-footer-design img {
width: 16px;
height: 16px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.site-footer-design img {
width: 16px;
height: 16px;
}
}
@media (min-width: 768px) {
.site-footer-bottom-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.site-footer-copy {
order: 0;
margin-right: auto;
}
.site-footer-legal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
order: 1;
gap: 24px;
}
.site-footer-design {
order: 2;
margin-left: auto;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.site-footer-bottom-inner {
font-size: 11px;
}
}
@media (min-width: 576px) {
.site-footer-group > .site-footer-group-list {
display: flex !important;
}
.site-footer-group-title {
pointer-events: none;
cursor: default;
}
.site-footer-group-title::after {
display: none;
}
}
@media (min-width: 576px) and (max-width: 1023px) {
.site-footer-group {
border-bottom: 0;
}
.site-footer-group-title {
font-size: 14px;
font-weight: 600;
}
.site-footer-group-list {
flex-direction: row;
flex-wrap: wrap;
gap: 12px 16px;
}
.site-footer-group-list a {
font-size: 14px;
color: rgba(17, 17, 17, 0.8);
}
.site-footer-bottom-inner {
font-size: 12px;
}
.site-footer-legal {
flex-direction: row;
}
}
@media (max-width: 575px) {
.btn-header-primary {
height: auto;
padding: 8px 12px;
font-size: 12px;
}
.site-nav-actions .btn-header-primary {
font-size: 10px;
}
.site-footer-main {
padding: 24px 0;
}
.site-footer-group-title {
font-size: 14px;
}
.site-footer-contacts-row {
padding-top: 0;
border-top: 0;
}
.site-footer-contacts a {
font-size: 14px;
}
.site-footer-main-inner {
gap: 20px;
}
.site-footer-top .btn-2026 {
font-size: 12px;
}
}
@media (max-width: 575px) {
.site-footer-bottom {
padding: 16px 0;
}
.site-footer-bottom-inner {
gap: 8px 16px;
font-size: 10px;
color: rgba(17, 17, 17, 0.3);
}
.site-footer-copy {
color: rgba(17, 17, 17, 0.3);
}
.site-footer-legal a,
.site-footer-design {
color: rgba(17, 17, 17, 0.3);
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.site-footer-group-list a {
font-size: 12px;
}
.site-footer-contacts a {
font-size: 12px;
}
.site-footer-bottom-inner {
font-size: 12px;
}
}
.hr {
height: 1px;
background-color: currentColor;
}
.swiper-container {
--swiper-pagination-bullet-horizontal-gap: 6px;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--gray-400);
position: relative;
opacity: 1;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 8px;
width: 20px;
border-radius: 8px;
transform: translateX(-50%);
background-color: var(--primary-200);
}
.swiper-pagination--danger .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
background-color: var(--palette-common-9);
}
.simple-table {
width: 100%;
border-collapse: collapse;
}
.simple-table td {
padding: 10px;
border: solid 1px var(--gray-400);
vertical-align: top;
}
.simple-table.border-primary-200 td {
border-color: var(--primary-200);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll-target {
position: absolute;
top: 0;
}
.card {
border-radius: 16px;
padding: 30px;
background-color: var(--gray-200);
min-height: 120px;
transition: background-color, box-shadow 0.15s linear;
}
.cookies-popover {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
padding: 16px;
z-index: 1999;
animation-name: fadeIn;
animation-duration: 0.15s;
}
@media (min-width: 1024px) {
.cookies-popover {
padding: 20px;
font-size: 20px;
}
}
.btn-2026 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 16px 24px;
border: 0;
border-radius: 4px;
background-color: var(--brand-white);
background-size: 100% 100%;
background-position: 0% 0%;
box-shadow: var(--shadow-btn);
color: var(--brand-black);
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.6;
letter-spacing: 0.12px;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
appearance: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
@media (min-width: 1024px) and (max-width: 1279px) {
.btn-2026 {
padding: 14px 24px;
font-size: 14px;
}
}
@media (min-width: 1280px) {
.btn-2026 {
height: 64px;
padding: 20px 32px;
font-size: 16px;
letter-spacing: 0.16px;
}
}
:where(button, a).btn-2026:hover {
color: var(--brand-black);
text-decoration: none;
box-shadow:
var(--shadow-btn),
0 4px 16px rgba(0, 0, 0, 0.08),
0 0 28px rgba(0, 0, 0, 0.05);
}
.btn-2026:focus-visible {
outline: 2px solid var(--brand-black);
outline-offset: 3px;
}
.btn-2026--outline {
border: 1px solid var(--brand-black);
box-shadow: none;
}
.btn-2026--gradient-purple,
.btn-2026--gradient-green {
background-color: transparent;
background-image: var(--gradient-primary);
color: var(--brand-white);
transition:
transform 0.2s ease,
box-shadow 0.4s ease,
background-size 0.4s ease,
background-position 0s linear 0.4s;
}
:where(button, a).btn-2026--gradient-purple:hover,
:where(button, a).btn-2026--gradient-green:hover {
color: var(--brand-white);
background-size: 150% 150%;
background-position: 100% 100%;
transition:
transform 0.2s ease,
box-shadow 0.4s ease,
background-size 0.4s ease,
background-position 0s linear;
}
:where(button, a).btn-2026--gradient-purple:hover {
box-shadow:
var(--shadow-btn),
0 4px 16px rgba(231, 84, 104, 0.14),
0 0 28px rgba(115, 89, 191, 0.14);
}
.btn-2026--gradient-green {
background-image: var(--gradient-secondary);
}
:where(button, a).btn-2026--gradient-green:hover {
box-shadow:
var(--shadow-btn),
0 4px 16px rgba(64, 145, 245, 0.14),
0 0 28px rgba(95, 212, 127, 0.14);
}
.btn-2026--sm {
height: 48px;
padding: 14px 20px;
font-size: 14px;
letter-spacing: 0.14px;
}
.btn-2026--xs {
height: 42px;
padding: 0 12px;
font-size: 14px;
letter-spacing: 0.14px;
}
.btn-2026--block {
display: flex;
width: 100%;
}
.btn-2026--icon .i {
font-size: 20px;
}
.btn-2026--icon-right {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-2026:disabled,
.btn-2026.is-disabled,
.btn-2026.is-loading {
opacity: 0.7;
cursor: default;
pointer-events: none;
filter: saturate(0.85);
}
.btn-2026:disabled:hover,
.btn-2026.is-disabled:hover,
.btn-2026.is-loading:hover {
box-shadow: var(--shadow-btn);
background-size: 100% 100%;
background-position: 0% 0%;
}
.btn-2026 {
--btn-spinner-color: var(--brand-black);
}
.btn-2026--gradient-purple,
.btn-2026--gradient-green {
--btn-spinner-color: var(--brand-white);
}
.btn-2026.is-loading {
position: relative;
color: transparent !important;
}
.btn-2026.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border-radius: 50%;
border: 2px solid var(--btn-spinner-color);
border-right-color: transparent;
opacity: 0.9;
animation: btn-2026-spin 0.7s linear infinite;
}
@keyframes btn-2026-spin {
to {
transform: rotate(360deg);
}
}
.cta-badge-wrap {
position: relative;
display: inline-flex;
}
.cta-badge-wrap--gradient-purple {
--badge-gradient: var(--gradient-primary);
}
.cta-badge-wrap--gradient-green {
--badge-gradient: var(--gradient-secondary);
}
.cta-badge {
position: absolute;
top: -12px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
box-sizing: border-box;
background: var(--brand-white);
border-radius: 4px;
box-shadow: var(--shadow-btn);
pointer-events: none;
}
.cta-badge > span {
display: inline-block;
font-family: "Onest", sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
background-image: var(--badge-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.cta-form-section {
position: relative;
overflow: hidden;
padding: 40px 0;
margin: 72px 0;
background-color: #f6f6f6;
}
.cta-form-section .page-container {
max-width: 1216px;
padding-left: var(--page-pad-x);
padding-right: var(--page-pad-x);
}
@media (min-width: 768px) {
.cta-form-section {
margin: 80px 0;
}
}
@media (min-width: 1280px) {
.cta-form-section {
margin: 120px 0;
}
}
@media (max-width: 575px) {
.cta-form-section {
margin: 64px 0;
}
}
.cta-form-section::before {
content: "";
position: absolute;
inset: -5% -15%;
pointer-events: none;
background-image: url("/images/index/v2/cta-form-grid.avif");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 0.7;
mask-image: radial-gradient(ellipse 80% 80% at center, #000 40%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at center, #000 40%, transparent 75%);
z-index: 0;
}
.cta-form-section::after {
content: "";
position: absolute;
right: -10%;
top: 5%;
width: 70%;
height: 100%;
background-image: url("/images/index/v2/cta-form-gradient-blob.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
pointer-events: none;
z-index: 0;
}
.cta-form-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
.cta-form-content {
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
align-items: center;
margin: 0 auto;
}
.cta-form-title {
margin: 0;
}
.cta-form-subtitle {
margin: 0;
}
@media (min-width: 576px) {
.cta-form-subtitle {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.cta-form-checklist {
list-style: none;
margin: 16px 0 0;
padding: 24px;
background-color: var(--brand-white);
border-radius: 8px;
box-shadow: var(--shadow-shape);
display: flex;
flex-direction: column;
gap: 16px;
@media (max-width: 575px) {
padding: 16px;
gap: 8px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
padding: 16px 20px;
gap: 8px;
}
}
.cta-form-checklist-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--brand-black);
text-align: left;
@media (max-width: 575px) {
gap: 8px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
gap: 8px;
}
}
.cta-form-checklist-icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 8px;
background-image: linear-gradient(180deg, #d0f2cc 0%, #5fd47f 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brand-white);
@media (max-width: 575px) {
width: 16px;
height: 16px;
border-radius: 0;
}
@media (min-width: 1024px) and (max-width: 1279px) {
width: 16px;
height: 16px;
}
}
.cta-form-checklist-icon .i {
font-size: 12px;
}
.cta-form-manager {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 16px;
}
.cta-form-manager > .cta-form-checklist {
flex: 1;
margin-top: 0;
}
.cta-form-manager-photo {
flex: 0 0 86px;
width: 86px;
height: 172px;
border-radius: 16px;
object-fit: cover;
object-position: top center;
@media (max-width: 575px) {
flex: 0 0 65px;
width: 65px;
height: 130px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
flex: 0 0 65px;
width: 65px;
height: 130px;
}
}
.cta-form-manager-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-top: 8px;
padding-left: 8px;
border-left: 2px solid #5fd47f;
text-align: left;
}
.cta-form-manager-name,
.cta-form-manager-role {
font-family: "Onest", sans-serif;
font-size: 8px;
font-weight: 500;
line-height: 1.4;
@media (min-width: 576px) and (max-width: 1023px) {
font-size: 10px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
font-size: 8px;
}
@media (min-width: 1280px) {
font-size: 12px;
}
}
.cta-form-manager-name {
color: var(--brand-black);
}
.cta-form-manager-role {
color: var(--gray-500);
}
.cta-form-checklist-item .text-body-m {
font-size: 10px;
@media (min-width: 576px) and (max-width: 1023px) {
font-size: 12px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
font-size: 10px;
}
@media (min-width: 1280px) {
font-size: 14px;
}
}
.cta-form-card {
position: relative;
background-color: var(--brand-white);
border-radius: 8px;
padding: 20px;
box-shadow: var(--shadow-shape);
}
@media (min-width: 768px) {
.cta-form-inner {
gap: 40px;
}
.cta-form-card {
padding: 32px;
}
}
@media (min-width: 1024px) {
.cta-form-section {
padding: 32px 0;
}
.cta-form-inner {
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.cta-form-content {
flex: 0 0 50%;
padding-top: 20px;
gap: 32px;
text-align: left;
align-items: flex-start;
margin: 0;
}
.cta-form-card {
flex: 1 1 auto;
max-width: 50%;
padding: 24px;
}
.cta-form-field {
grid-template-columns: 120px 1fr;
}
.cta-form-label,
.cta-form-input {
font-size: 12px;
letter-spacing: 0.12px;
}
.cta-form-bottom .btn-2026 {
height: 40px;
padding: 12px 16px;
font-size: 12px;
}
.cta-form-policy-text {
font-size: 10px;
}
}
@media (min-width: 1280px) {
.cta-form-section {
padding: 80px 0;
}
.cta-form-inner {
gap: 50px;
}
.cta-form-content {
flex: 0 0 50%;
padding-top: 32px;
gap: 24px;
}
.cta-form-subtitle {
font-size: 20px;
}
.cta-form-card {
max-width: 592px;
padding: 32px;
}
.cta-form-field {
grid-template-columns: 170px 1fr;
}
.cta-form-label,
.cta-form-input {
font-size: 16px;
letter-spacing: 0.16px;
}
.cta-form-bottom .btn-2026 {
height: 64px;
padding: 20px 32px;
font-size: 16px;
}
}
.cta-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.cta-form-field {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 8px;
}
@media (min-width: 768px) {
.cta-form {
gap: 24px;
}
.cta-form-field {
grid-template-columns: 170px 1fr;
gap: 0 16px;
align-items: baseline;
}
}
.cta-form-label {
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.12px;
color: var(--text-default);
white-space: nowrap;
}
@media (min-width: 1280px) {
.cta-form-label {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.cta-form-input {
border: none;
border-radius: 0;
padding: 0;
background-color: transparent;
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.12px;
color: var(--text-default);
appearance: none;
outline: none;
width: 100%;
flex: 1 1 auto;
}
@media (min-width: 1280px) {
.cta-form-input {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.cta-form-input:focus {
outline: none;
}
.cta-form-input::placeholder {
color: var(--text-subtle);
}
.cta-form-textarea {
min-height: 60px;
resize: vertical;
}
.cta-form-bottom {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 8px;
}
.cta-form-bottom .btn-2026 {
align-self: flex-start;
}
.cta-form-policy {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.cta-form-policy input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 2px;
cursor: pointer;
border: 1px solid #d0d0d0;
border-radius: 8px;
}
.cta-form-policy-text {
font-family: "Onest", sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.6;
color: var(--text-default);
}
.cta-form-policy-text a {
color: var(--brand-link);
text-decoration: underline;
}
@media (min-width: 768px) {
.cta-form-bottom {
flex-direction: row;
align-items: center;
gap: 40px;
}
}
@media (max-width: 1023px) {
.cta-form-section {
padding: 50px 0;
}
.cta-form-content {
gap: 0;
}
.cta-form-policy-text {
font-size: 8px;
}
}
@media (min-width: 576px) and (max-width: 1023px) {
.cta-form-inner {
gap: 24px;
}
.cta-form-label,
.cta-form-input {
font-size: 14px;
letter-spacing: 0.14px;
}
.cta-form-bottom .btn-2026 {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.cta-form-card {
max-width: 720px;
margin: 0 auto;
}
.cta-form-field {
grid-template-columns: 190px 1fr;
}
.cta-form-policy {
align-items: center;
}
.cta-form-title {
margin-bottom: 16px;
}
.cta-form-checklist {
margin-top: 32px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.cta-form-title {
font-size: 32px;
letter-spacing: -0.64px;
margin-bottom: 16px;
}
.cta-form-checklist {
margin-top: 24px;
}
.cta-form-card {
padding: 24px;
}
.cta-form-field {
grid-template-columns: 190px 1fr;
}
.cta-form-bottom {
flex-direction: row;
}
.cta-form-policy {
align-items: center;
}
}
@media (max-width: 575px) {
.cta-form-section {
padding: 32px 0;
}
.cta-form-inner {
gap: 16px;
}
.cta-form-manager {
margin-top: 32px;
}
.cta-form-title {
font-size: 28px;
letter-spacing: -0.56px;
margin-bottom: 16px;
}
.cta-form-subtitle {
font-size: 14px;
letter-spacing: 0.14px;
}
.cta-form-checklist {
margin-top: 24px;
}
.cta-form-card {
padding: 24px;
}
.cta-form-field {
grid-template-columns: 1fr;
}
.cta-form-label,
.cta-form-input {
font-size: 12px;
letter-spacing: 0.12px;
}
.cta-form-bottom {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.cta-form-bottom .btn-2026 {
width: 100%;
font-size: 12px;
}
.cta-form-policy {
align-items: center;
}
}
.download-cta {
margin: 72px 0;
}
.download-cta .page-container {
max-width: 1216px;
padding-left: var(--page-pad-x);
padding-right: var(--page-pad-x);
}
.download-cta-inner {
position: relative;
overflow: hidden;
border-radius: 8px;
padding: 40px 20px;
background-color: #7359bf;
background-image: var(--gradient-primary);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: var(--brand-white);
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
text-align: center;
}
@media (max-width: 575px) {
.download-cta-buttons {
gap: 8px;
justify-content: center;
}
}
@media (min-width: 768px) {
.download-cta-inner {
padding: 48px 40px;
gap: 32px;
}
}
.download-cta-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("/images/index/v2/download-bg-768.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.download-cta-title {
position: relative;
margin: 0;
max-width: 560px;
}
.download-cta-buttons {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.download-cta-buttons .btn-2026 {
height: 40px;
padding: 10px 16px;
font-size: 12px;
letter-spacing: 0.12px;
}
@media (min-width: 768px) {
.download-cta-buttons .btn-2026 {
height: 44px;
padding: 12px 20px;
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (min-width: 1280px) {
.download-cta-buttons .btn-2026 {
height: 64px;
padding: 20px 28px;
font-size: 16px;
letter-spacing: 0.16px;
}
}
.download-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 20px;
}
.download-cta-icon--windows::before {
color: #4191f5;
}
@media (min-width: 1024px) {
.download-cta-grid {
background-image: url("/images/index/v2/download-bg.png");
}
.download-cta-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 60px 32px 60px 60px;
}
.download-cta-title {
white-space: nowrap;
}
.download-cta-buttons {
flex-shrink: 0;
gap: 8px;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.download-cta-buttons .btn-2026 {
height: 48px;
padding: 14px 24px;
font-size: 12px;
letter-spacing: 0.12px;
}
}
@media (min-width: 768px) {
.download-cta {
margin: 80px 0;
}
}
@media (min-width: 1280px) {
.download-cta {
margin: 120px 0;
}
.download-cta-inner {
padding: 64px 80px;
}
.download-cta-buttons {
gap: 12px;
}
}
@media (min-width: 576px) and (max-width: 1023px) {
.download-cta-inner {
padding: 60px 30px;
gap: 16px;
}
.download-cta-buttons .btn-2026 {
height: 52px;
padding: 12px 24px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.download-cta {
margin: 72px 0;
}
.download-cta-title {
font-size: 32px;
letter-spacing: -0.64px;
}
.download-cta-buttons .btn-2026 {
font-size: 14px;
}
}
@media (max-width: 575px) {
.download-cta {
margin: 64px 0;
}
.download-cta-inner {
padding: 40px 20px;
gap: 24px;
}
.download-cta-title {
font-size: 28px;
letter-spacing: -0.56px;
}
.download-cta-buttons .btn-2026 {
height: 44px;
padding: 12px 16px;
font-size: 12px;
}
}
.cta-banner-2026 {
--cta-banner-bg-grid: url("/images/index/v2/business-bg-grid.svg");
--cta-banner-bg-grid-sm: url("/images/index/v2/business-bg-grid-768.svg");
--cta-banner-bg-grid-xs: url("/images/index/v2/business-bg-grid-375.svg");
--cta-banner-gradient: linear-gradient(
304.64deg,
#4091f5 34.4%,
#4192f3 37.25%,
#4194f0 39.8%,
#4296ed 42.17%,
#4398e9 44.45%,
#449ae5 46.76%,
#469de0 49.21%,
#47a0da 51.9%,
#49a4d3 54.94%,
#4ba9cb 58.44%,
#4daec2 62.5%,
#50b4b8 67.24%,
#53baac 72.76%,
#57c29f 79.18%,
#5bca90 86.59%,
#5fd47f 95.1%
);
position: relative;
overflow: hidden;
padding: 40px 0 0;
margin: 72px 0;
background-image: var(--cta-banner-gradient);
color: var(--brand-white);
}
.cta-banner-2026 .page-container {
max-width: 1216px;
padding-left: var(--page-pad-x);
padding-right: var(--page-pad-x);
}
.cta-banner-2026 {
@media (min-width: 768px) {
padding: 60px 0 0;
margin: 80px 0;
}
@media (min-width: 1024px) {
padding: 0;
min-height: 364px;
}
@media (min-width: 1280px) {
height: 488px;
margin: 120px 0;
}
@media (min-width: 576px) and (max-width: 767px) {
padding: 44px 0 0;
}
@media (max-width: 575px) {
margin: 64px 0;
}
&::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--cta-banner-bg-grid);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
@media (min-width: 576px) and (max-width: 1023px) {
background-image: var(--cta-banner-bg-grid-sm);
}
@media (max-width: 575px) {
background-image: var(--cta-banner-bg-grid-xs);
}
}
}
.cta-banner-2026-inner {
position: relative;
z-index: 1;
@media (min-width: 1024px) {
display: flex;
align-items: stretch;
min-height: 364px;
}
}
.cta-banner-2026-content {
max-width: 520px;
padding-bottom: 24px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
margin: 0 auto;
@media (min-width: 768px) {
padding-bottom: 32px;
gap: 20px;
}
@media (min-width: 1024px) {
position: relative;
z-index: 2;
max-width: 330px;
padding: 40px 0;
align-items: flex-start;
text-align: left;
margin: 0;
gap: 12px;
min-height: 364px;
}
@media (min-width: 1280px) {
max-width: 441px;
padding: 80px 0 0;
gap: 20px;
min-height: auto;
}
@media (min-width: 768px) and (max-width: 1023px) {
gap: 0;
max-width: 550px;
padding-bottom: 0;
}
@media (min-width: 576px) and (max-width: 767px) {
padding-bottom: 0;
gap: 0;
}
@media (max-width: 575px) {
padding-bottom: 0;
gap: 0;
}
& > * {
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
@media (min-width: 1024px) {
margin: 0;
}
}
& .cta-banner-2026-title {
@media (min-width: 768px) and (max-width: 1023px) {
margin-bottom: 16px;
}
@media (max-width: 767px) {
font-size: 32px;
letter-spacing: -0.64px;
margin-bottom: 16px;
}
}
& .cta-banner-2026-text:nth-of-type(1) {
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
margin: 0 0 12px;
}
@media (max-width: 767px) {
font-size: 14px;
margin: 0 0 12px;
}
}
& .cta-banner-2026-text:nth-of-type(2) {
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
margin: 0 0 24px;
}
@media (max-width: 767px) {
font-size: 14px;
margin: 0 0 24px;
}
}
& .btn-2026 {
color: var(--brand-black);
height: 48px;
padding: 14px 24px;
font-size: 14px;
@media (min-width: 768px) {
height: 56px;
padding: 16px 28px;
font-size: 16px;
}
@media (min-width: 1024px) {
height: 40px;
padding: 12px 16px;
font-size: 12px;
letter-spacing: 0.12px;
margin-top: auto;
}
@media (min-width: 1280px) {
height: 56px;
padding: 16px 28px;
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 575px) {
height: 44px;
padding: 12px 20px;
font-size: 12px;
}
}
}
.cta-banner-2026-media {
position: relative;
width: 100%;
margin-top: 16px;
padding: 0 var(--page-pad-x);
box-sizing: border-box;
@media (min-width: 768px) {
margin-top: 24px;
}
@media (min-width: 768px) and (max-width: 1023px) {
max-width: 670px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 660px;
min-height: auto;
display: flex;
align-items: flex-end;
}
@media (min-width: 1280px) {
width: 800px;
}
@media (max-width: 575px) {
position: static;
width: 100%;
margin-top: 8px;
}
}
.cta-banner-2026-illustration {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
}
.cta-banner-2026-title {
margin: 0;
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.56px;
color: var(--brand-white);
@media (min-width: 768px) {
font-size: 36px;
letter-spacing: -0.72px;
}
@media (min-width: 1024px) {
font-size: 32px;
letter-spacing: -0.64px;
}
@media (min-width: 1280px) {
font-size: 40px;
letter-spacing: -0.8px;
}
}
.cta-banner-2026-text {
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.12px;
color: var(--brand-white);
@media (min-width: 1024px) {
font-size: 14px;
}
@media (min-width: 1280px) {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.cta-banner-2026--primary {
--cta-banner-gradient: var(--gradient-primary);
}
.cta-banner-2026--secondary {
--cta-banner-gradient: var(--gradient-secondary);
}
.cta-banner-2026--center {
padding: 56px 0;
}
@media (min-width: 768px) {
.cta-banner-2026--center {
padding: 64px 0;
}
}
@media (min-width: 1024px) {
.cta-banner-2026--center {
padding: 72px 0;
min-height: 0;
}
}
@media (min-width: 1280px) {
.cta-banner-2026--center {
height: auto;
padding: 80px 0;
}
}
.cta-banner-2026--center .cta-banner-2026-inner {
display: block;
min-height: 0;
}
.cta-banner-2026--center .cta-banner-2026-content {
max-width: 640px;
margin: 0 auto;
padding: 0;
align-items: center;
text-align: center;
min-height: 0;
}
.cta-banner-2026--center .cta-banner-2026-content > * {
margin-left: auto;
margin-right: auto;
}
.cta-banner-2026--center .cta-banner-2026-content .btn-2026 {
margin-top: 8px;
}
.cta-banner-2026--boxed {
margin: 40px 0;
padding: 0;
min-height: 0;
height: auto;
background-image: none;
}
.cta-banner-2026--boxed::before {
display: none;
}
@media (min-width: 1024px) {
.cta-banner-2026--boxed {
margin: 60px 0;
padding: 0;
min-height: 0;
}
}
@media (min-width: 1280px) {
.cta-banner-2026--boxed {
height: auto;
padding: 0;
}
}
.cta-banner-2026--boxed .cta-banner-2026-inner {
display: block;
position: relative;
overflow: hidden;
max-width: 960px;
min-height: 0;
margin: 0 auto;
padding: 40px 20px;
border-radius: 16px;
background-image: var(--cta-banner-gradient);
}
.cta-banner-2026--boxed .cta-banner-2026-inner::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("/images/index/v2/hero-bg.svg");
background-repeat: no-repeat;
background-position: center center;
opacity: 0.15;
}
.cta-banner-2026--boxed .cta-banner-2026-content {
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.cta-banner-2026--boxed .cta-banner-2026-inner {
padding: 40px 60px;
}
}
@media (min-width: 1024px) {
.cta-banner-2026--boxed .cta-banner-2026-inner {
padding: 48px 120px;
}
}
.pricing-2026-title {
margin: 0 0 40px;
text-align: center;
}
.pricing-2026-list {
display: flex;
flex-direction: column;
gap: 0;
}
.pricing-2026-card + .pricing-2026-card {
margin-top: 64px;
position: relative;
}
.pricing-2026-card + .pricing-2026-card::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -32px;
height: 1px;
background: rgba(17, 17, 17, 0.1);
}
@media (min-width: 1280px) {
.pricing-2026-card + .pricing-2026-card {
margin-top: 96px;
}
.pricing-2026-card + .pricing-2026-card::before {
top: -48px;
}
}
.pricing-2026-card {
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
@media (min-width: 576px) {
.pricing-2026-card {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
grid-template-areas:
"illust tag"
"illust title"
"illust body"
"illust tiers";
column-gap: 24px;
row-gap: 12px;
align-items: start;
}
}
@media (min-width: 1024px) {
.pricing-2026-card {
grid-template-columns: 100px minmax(0, 1fr) auto;
grid-template-areas:
"illust tag tag"
"illust title title"
"illust body tiers";
}
}
@media (min-width: 1280px) {
.pricing-2026-card {
grid-template-columns: 208px minmax(0, 1fr) auto;
column-gap: 28px;
row-gap: 16px;
}
}
.pricing-2026-card-illust {
width: 208px;
height: 208px;
border-radius: 4px;
align-self: flex-start;
display: block;
object-fit: cover;
}
@media (max-width: 575px) {
.pricing-2026-card-illust {
display: none;
}
}
@media (min-width: 576px) {
.pricing-2026-card-illust {
grid-area: illust;
align-self: start;
width: 100px;
height: 100px;
}
}
@media (min-width: 1280px) {
.pricing-2026-card-illust {
width: 208px;
height: 208px;
}
}
.pricing-2026-card-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
}
@media (min-width: 576px) {
.pricing-2026-card-content {
display: contents;
}
}
.pricing-2026-card-tag {
display: inline-block;
padding: 5px 10px;
background: var(--surface-footer);
border-radius: 4px;
font-family: "Onest", sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 1.4;
color: var(--text-muted);
}
@media (min-width: 576px) {
.pricing-2026-card-tag {
grid-area: tag;
justify-self: start;
}
}
.pricing-2026-card-title {
margin: 0;
}
@media (min-width: 576px) {
.pricing-2026-card-title {
grid-area: title;
justify-self: start;
}
}
.pricing-2026-card-body {
margin: 0;
color: var(--text-muted);
}
@media (min-width: 576px) {
.pricing-2026-card-body {
grid-area: body;
}
}
.pricing-2026-card-tiers {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 16px;
width: 100%;
}
@media (max-width: 575px) {
.pricing-2026-card-tiers {
justify-content: space-around;
gap: 0;
container-type: inline-size;
}
}
@media (min-width: 576px) {
.pricing-2026-card-tiers {
grid-area: tiers;
flex-wrap: nowrap;
gap: 32px;
}
}
@media (min-width: 1024px) {
.pricing-2026-card-tiers {
align-self: center;
justify-content: flex-end;
}
}
@media (min-width: 1280px) {
.pricing-2026-card-tiers {
gap: 48px;
}
}
.pricing-2026-tier {
display: grid;
grid-template-rows: 1fr auto;
align-items: center;
justify-items: center;
row-gap: 12px;
width: 124px;
min-height: 108px;
text-align: center;
position: relative;
}
.pricing-2026-tier + .pricing-2026-tier::before {
content: "";
position: absolute;
left: calc((300px - 100cqi) / 6);
top: 0;
bottom: 0;
width: 1px;
background: rgba(17, 17, 17, 0.1);
}
@media (min-width: 576px) {
.pricing-2026-tier + .pricing-2026-tier::before {
left: -16px;
}
}
@media (max-width: 767px) {
.pricing-2026-tier {
width: 100px;
}
}
.pricing-2026-tier-label {
font-family: "Onest", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.16px;
color: var(--text-muted);
}
@media (max-width: 575px) {
.pricing-2026-tier-label {
font-size: 14px;
letter-spacing: 0.14px;
}
}
.pricing-2026-tier-price,
.pricing-2026-tier .btn-2026 {
width: 120px;
}
.pricing-2026-tier-price {
cursor: text;
}
@media (max-width: 767px) {
.pricing-2026-tier-price,
.pricing-2026-tier .btn-2026 {
width: 100%;
}
.pricing-2026-tier-price {
padding: 0 8px;
font-size: 13px;
}
}
@media (min-width: 1280px) {
.pricing-2026-tier + .pricing-2026-tier::before {
left: -24px;
}
}
.pricing-tier-cards {
position: relative;
z-index: 1;
}
.pricing-tier-cards-frame {
position: relative;
}
@media (max-width: 1023px) {
.pricing-tier-cards.swiper {
overflow: hidden;
}
.pricing-tier-cards-track {
align-items: stretch;
}
.pricing-tier-card.swiper-slide {
height: auto;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.pricing-tier-card.swiper-slide {
width: 344px;
}
}
@media (min-width: 1024px) {
.pricing-tier-cards .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
transform: none !important;
}
.pricing-tier-card.swiper-slide {
width: auto;
max-width: none;
}
}
@media (min-width: 1280px) {
.pricing-tier-cards .swiper-wrapper {
gap: 24px;
}
}
.pricing-tier-cards-nav {
position: absolute;
top: 320px;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background-color: var(--brand-white);
box-shadow: var(--shadow-btn);
color: var(--brand-black);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
@media (min-width: 1024px) {
display: none;
}
}
.pricing-tier-cards-nav--prev {
left: 8px;
}
.pricing-tier-cards-nav--next {
right: 8px;
}
.pricing-tier-cards-nav.swiper-button-disabled {
opacity: 0.4;
pointer-events: none;
}
.pricing-tier-card {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 40px 24px 24px;
border-radius: 8px;
background-color: #f6f6f6;
color: #1a1a1a;
overflow: clip;
isolation: isolate;
height: 100%;
min-width: 310px;
@media (min-width: 1024px) {
padding: 56px 28px 32px;
}
@media (min-width: 1280px) {
padding: 69px 30px 40px;
}
}
.pricing-tier-card > * {
position: relative;
z-index: 2;
}
.pricing-tier-card::before {
content: "";
position: absolute;
top: 2px;
width: 1216px;
height: 902px;
background-image: url("/images/pricing/v2/card-bg-grid.svg");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 1216px 902px;
z-index: 0;
pointer-events: none;
}
.pricing-tier-card::after {
content: "";
position: absolute;
width: 770px;
height: 388px;
background-image: linear-gradient(-52deg, rgba(85, 74, 240, 0.65) 13%, rgba(242, 97, 255, 0.65) 85%);
filter: blur(120px);
border-radius: 50%;
opacity: 0.45;
z-index: 1;
pointer-events: none;
}
.pricing-tier-card--pink::before,
.pricing-tier-card--purple::before {
left: -87px;
}
.pricing-tier-card--sky::before {
left: -250px;
}
.pricing-tier-card--pink::after {
top: 40px;
left: -152px;
}
.pricing-tier-card--sky::after {
top: 40px;
left: -316px;
background-image: linear-gradient(-52deg, rgba(74, 144, 226, 0.85) 13%, rgba(168, 213, 255, 0.85) 85%);
opacity: 0.5;
}
.pricing-tier-card--purple::after {
top: 50px;
left: -84px;
}
.pricing-tier-card-head {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 176px;
@media (min-width: 1024px) {
min-height: 188px;
}
}
.pricing-tier-card-title {
margin: 0;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 1.2;
color: #1a1a1a;
@media (min-width: 1024px) {
font-size: 36px;
line-height: 48px;
}
}
.pricing-tier-card-price-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-left: 10px;
}
.pricing-tier-card-price {
display: inline-flex;
align-items: baseline;
font-family: "Onest", sans-serif;
font-weight: 300;
font-size: 30px;
line-height: 40px;
color: #1a1a1a;
@media (min-width: 1024px) {
font-size: 34px;
}
}
.pricing-tier-card-price strong {
font-weight: 700;
}
.pricing-tier-card-period {
margin-left: 4px;
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 40px;
color: #1a1a1a;
}
.pricing-tier-card-discount {
display: inline-flex;
align-items: center;
justify-content: center;
height: 29px;
padding: 0 8px;
border-radius: 28px;
background: #54ca77;
color: #ffffff;
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1;
white-space: nowrap;
}
.pricing-tier-card-old-price {
margin-top: -14px;
padding-left: 10px;
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #1a1a1a;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.pricing-tier-card-contact {
display: inline-block;
font-family: "Onest", sans-serif;
font-weight: 300;
font-size: 26px;
line-height: 40px;
color: #1a1a1a;
text-decoration: none;
@media (min-width: 1024px) {
font-size: 30px;
}
}
.pricing-tier-card-illust {
margin: 0;
display: flex;
justify-content: center;
}
.pricing-tier-card-illust img {
display: block;
width: 100%;
max-width: 366px;
height: auto;
}
.pricing-tier-card-features {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1;
}
.pricing-tier-card-ai {
display: flex;
align-items: center;
gap: 8px;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: 14px;
color: #1a1a1a;
}
.pricing-tier-card-ai img {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.pricing-tier-card-includes {
margin: 0;
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #1a1a1a;
}
.pricing-tier-card-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-tier-card-list li {
display: flex;
align-items: center;
gap: 8px;
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: #1a1a1a;
}
.pricing-tier-card-list li .i-check {
flex-shrink: 0;
width: 18px;
height: 18px;
font-size: 16px;
line-height: 1;
color: #1a1a1a;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pricing-tier-card-footnote {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
margin-top: auto;
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #1a1a1a;
}
.pricing-tier-card-footnote::before {
content: "*";
flex-shrink: 0;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1;
color: #1a1a1a;
}
.pricing-tier-section {
margin: 48px 0 72px;
}
@media (min-width: 768px) {
.pricing-tier-section {
margin: 56px 0 80px;
}
}
@media (min-width: 1280px) {
.pricing-tier-section {
margin: 80px 0 120px;
}
}
.pricing-mode-switch {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 100%;
margin: 0 auto 24px;
padding: 8px;
border: 1px solid #e4e4e4;
border-radius: 8px;
background-color: var(--brand-white, #fff);
@media (min-width: 576px) {
width: fit-content;
}
@media (min-width: 768px) {
gap: 12px;
margin-bottom: 32px;
}
@media (min-width: 1024px) {
gap: 20px;
margin-bottom: 40px;
}
}
.pricing-mode-switch-btn {
flex: 1 1 0;
min-width: 0;
padding: 10px 12px;
border: 0;
border-radius: 8px;
background-color: var(--brand-white, #fff);
box-shadow: 0 2px 11px rgba(0, 0, 0, 0.22);
color: #1a1a1a;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
@media (min-width: 576px) {
flex: 0 0 auto;
padding: 12px 32px;
font-size: 16px;
}
@media (min-width: 768px) {
padding: 12px 48px;
font-size: 20px;
}
@media (min-width: 1024px) {
padding: 12px 64px;
font-size: 24px;
}
}
.pricing-mode-switch-btn--active {
background-color: transparent;
background-image: linear-gradient(-16deg, #4091f5 34%, #54bea5 63%, #5fd47f 95%);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
color: var(--brand-white, #fff);
font-weight: 500;
}
.pricing-mode-panel--hidden {
display: none;
}
.pricing-trial-banner {
margin: 72px 0;
@media (min-width: 768px) {
margin: 80px 0;
}
@media (min-width: 1280px) {
margin: 120px 0;
}
}
.pricing-trial-banner-inner {
position: relative;
display: flex;
flex-direction: column;
gap: 32px;
padding: 32px 24px;
border-radius: 8px;
overflow: hidden;
background-image: linear-gradient(
-47deg,
#4091f5 32%,
#4192f3 35%,
#4194f0 38%,
#4296ed 41%,
#4398e9 43%,
#449ae5 46%,
#469de0 48%,
#47a0da 51%,
#49a4d3 55%,
#4ba9cb 59%,
#4daec2 63%,
#50b4b8 68%,
#53baac 74%,
#57c29f 81%,
#5bca90 90%,
#5fd47f 99%
);
color: var(--brand-white);
@media (min-width: 768px) {
flex-direction: row;
align-items: center;
gap: 40px;
padding: 48px 40px;
}
@media (min-width: 1024px) {
padding: 56px 56px;
}
@media (min-width: 1280px) {
padding: 64px;
}
}
.pricing-trial-banner-inner::before {
content: "";
position: absolute;
inset: 0;
background-image: url("/images/pricing/v2/trial-banner-bg.svg");
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 0;
}
.pricing-trial-banner-inner > * {
position: relative;
z-index: 1;
}
.pricing-trial-banner-content {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
text-align: center;
@media (min-width: 768px) {
flex: 1 1 0;
gap: 24px;
align-items: flex-start;
text-align: left;
}
}
.pricing-trial-banner-content > * {
margin: 0;
}
.pricing-trial-banner-text {
max-width: 630px;
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.12px;
color: var(--brand-white);
@media (max-width: 767px) {
font-size: 14px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
}
@media (min-width: 1024px) {
font-size: 14px;
}
@media (min-width: 1280px) {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.pricing-trial-banner-media {
display: flex;
justify-content: center;
min-width: 0;
@media (min-width: 768px) {
flex: 0 1 410px;
justify-content: flex-end;
}
}
.pricing-trial-banner-media img {
display: block;
width: 100%;
max-width: 410px;
height: auto;
}
.hero-2026 {
--hero-bg-image: url("/images/index/v2/hero-bg-375.svg");
--hero-bg-image-sm: url("/images/index/v2/hero-bg-768.svg");
--hero-bg-image-lg: url("/images/index/v2/hero-bg.svg");
position: relative;
overflow: hidden;
padding: 64px 0 32px;
background-color: #f6f6f6;
margin-top: -64px;
@media (min-width: 576px) {
padding: 88px 0 40px;
}
@media (min-width: 768px) {
padding: 104px 0 50px;
}
@media (min-width: 1024px) {
padding: 80px 0 0;
margin-top: -48px;
}
@media (min-width: 1280px) {
padding: 150px 0 60px;
margin-top: -64px;
}
}
.hero-2026--with-breadcrumb {
padding: 72px 0 32px;
@media (min-width: 576px) {
padding: 96px 0 40px;
}
@media (min-width: 768px) {
padding: 110px 0 50px;
}
@media (min-width: 1024px) {
padding: 80px 0 0;
}
@media (min-width: 1280px) {
padding: 110px 0 60px;
}
}
.hero-2026-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: var(--hero-bg-image);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
@media (min-width: 576px) {
background-image: var(--hero-bg-image-sm);
}
@media (min-width: 1024px) {
background-image: var(--hero-bg-image-lg);
mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
}
.hero-2026-gradient {
position: absolute;
z-index: 0;
pointer-events: none;
}
.hero-2026-container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"media"
"content";
row-gap: 16px;
column-gap: 0;
align-items: center;
@media (min-width: 1024px) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "content media";
column-gap: 32px;
row-gap: 0;
align-items: stretch;
}
@media (min-width: 1280px) {
column-gap: 40px;
}
}
.hero-2026--with-breadcrumb .hero-2026-container {
grid-template-areas:
"breadcrumb"
"media"
"content";
@media (min-width: 1024px) {
grid-template-areas:
"breadcrumb media"
"content media";
row-gap: 12px;
align-items: start;
}
@media (min-width: 1280px) {
grid-template-rows: min-content 1fr;
column-gap: 0;
row-gap: 24px;
}
}
.hero-2026-content {
grid-area: content;
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
max-width: 600px;
text-align: center;
@media (min-width: 576px) and (max-width: 1023px) {
max-width: none;
}
@media (min-width: 1024px) {
justify-self: stretch;
align-self: stretch;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
}
}
.hero-2026--with-breadcrumb .hero-2026-content {
@media (min-width: 1024px) {
max-width: 470px;
}
@media (min-width: 1280px) {
max-width: 600px;
}
}
.hero-2026-breadcrumb {
grid-area: breadcrumb;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.4;
color: rgba(17, 17, 17, 0.8);
@media (max-width: 1023px) {
position: relative;
left: 11px;
}
@media (max-width: 575px) {
top: -4px;
}
@media (min-width: 576px) and (max-width: 767px) {
top: -18px;
}
@media (min-width: 768px) and (max-width: 1023px) {
top: -25px;
}
}
.hero-2026-breadcrumb-link {
color: rgba(17, 17, 17, 0.4);
text-decoration: none;
transition: color 0.15s ease;
&:hover {
color: rgba(17, 17, 17, 0.8);
}
}
.hero-2026-breadcrumb-sep {
flex-shrink: 0;
margin: 0 8px;
color: rgba(17, 17, 17, 0.4);
font-weight: 500;
cursor: default;
}
.hero-2026-breadcrumb-current {
color: rgba(17, 17, 17, 0.8);
}
.hero-2026-title {
margin: 0 0 16px;
@media (max-width: 575px) {
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 40px;
letter-spacing: -0.8px;
margin-bottom: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 44px;
letter-spacing: -0.88px;
margin-bottom: 16px;
}
@media (min-width: 1024px) {
max-width: 430px;
margin-bottom: 16px;
}
@media (min-width: 1280px) {
margin-bottom: 20px;
}
}
.hero-2026--with-breadcrumb .hero-2026-title {
@media (min-width: 1024px) {
max-width: none;
}
}
.hero-2026-title-row {
white-space: nowrap;
}
.hero-2026-subtitle {
margin: 0 0 26px;
max-width: 460px;
@media (max-width: 575px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 14px;
letter-spacing: 0.14px;
margin-bottom: 32px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
letter-spacing: 0.16px;
max-width: 540px;
margin-bottom: 32px;
}
@media (min-width: 1024px) {
max-width: 380px;
font-size: 14px;
letter-spacing: 0.12px;
margin-bottom: 20px;
}
@media (min-width: 1280px) {
max-width: 430px;
font-size: 16px;
letter-spacing: 0.16px;
}
}
.hero-2026--with-breadcrumb .hero-2026-subtitle {
@media (min-width: 1280px) {
max-width: 470px;
}
}
.hero-2026-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
@media (max-width: 575px) {
justify-content: center;
}
@media (min-width: 768px) {
gap: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
margin-top: 0;
}
@media (min-width: 1024px) {
margin-top: auto;
margin-bottom: 50px;
}
@media (min-width: 1280px) {
margin-bottom: 0;
}
.btn-2026 {
font-size: 14px;
@media (min-width: 1280px) {
font-size: 16px;
}
}
}
.hero-2026-media {
grid-area: media;
position: relative;
width: 100%;
max-width: 640px;
margin: 0 auto;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
@media (min-width: 1024px) {
max-width: 520px;
margin: 0 0 0 auto;
justify-self: end;
align-self: flex-end;
justify-content: flex-end;
}
@media (min-width: 1280px) {
max-width: 640px;
margin-left: 0;
}
}
.hero-2026--with-breadcrumb .hero-2026-media {
@media (min-width: 1024px) {
align-self: start;
}
}
.hero-2026-illust {
display: block;
width: 100%;
height: auto;
max-width: 771px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
.hero-2026-illust {
max-width: 480px;
}
}
.hero-2026--with-breadcrumb .hero-2026-illust {
@media (min-width: 768px) and (max-width: 1023px) {
max-width: 560px;
}
}
.hero-2026-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
z-index: 2;
border-radius: 50%;
transition: transform 0.2s ease, filter 0.2s ease;
@media (min-width: 768px) {
width: 80px;
height: 80px;
}
@media (min-width: 1280px) {
width: 95px;
height: 95px;
}
}
.hero-2026-play img {
display: block;
width: 100%;
height: 100%;
}
.hero-2026-play:hover {
transform: translate(-50%, -50%) scale(1.05);
filter: brightness(1.1);
}
.hero-2026-play:focus-visible {
outline: 2px solid var(--brand-primary, #6d3aff);
outline-offset: 4px;
}
.hero-2026--no-media .hero-2026-container {
grid-template-columns: 1fr;
grid-template-areas:
"breadcrumb"
"content";
column-gap: 0;
@media (min-width: 1024px) {
grid-template-columns: 1fr;
grid-template-areas:
"breadcrumb"
"content";
column-gap: 0;
}
}
.hero-2026--no-media .hero-2026-content {
max-width: none;
@media (min-width: 1024px) {
max-width: 62%;
}
}
.hero-2026--no-media .hero-2026-title,
.hero-2026--no-media .hero-2026-subtitle {
max-width: none;
}
@media (max-width: 1023px) {
.hero-2026--no-media .hero-2026-subtitle:last-child {
margin-bottom: 0;
}
}
.features-2026 {
margin: 72px 0;
@media (max-width: 575px) {
margin: 64px 0;
}
@media (min-width: 768px) {
margin: 80px 0;
}
@media (min-width: 1280px) {
margin: 120px 0;
}
}
.features-2026-title {
margin: 0 auto 24px;
text-align: center;
max-width: 760px;
@media (min-width: 768px) {
margin-bottom: 40px;
}
@media (min-width: 768px) and (max-width: 1023px) {
max-width: 680px;
}
@media (min-width: 1024px) {
max-width: 600px;
}
@media (min-width: 1280px) {
max-width: 760px;
}
}
.features-2026:has(.features-2026-subtitle) .features-2026-title {
margin-bottom: 16px;
@media (min-width: 1280px) {
margin-bottom: 20px;
}
}
.features-2026-subtitle {
margin: 0 auto 24px;
max-width: 540px;
@media (max-width: 575px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 14px;
max-width: 470px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
}
@media (min-width: 1024px) {
max-width: 400px;
}
@media (min-width: 1280px) {
max-width: 540px;
}
}
.features-2026-list {
display: flex;
flex-direction: column;
gap: 48px;
@media (min-width: 768px) {
gap: 60px;
}
@media (min-width: 1280px) {
gap: 80px;
}
}
.features-2026-row {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: center;
@media (min-width: 768px) {
gap: 28px;
}
@media (min-width: 1024px) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px;
}
@media (min-width: 1280px) {
gap: 64px;
}
}
.features-2026-row--reverse {
@media (min-width: 1024px) {
.features-2026-row-media {
order: 2;
}
.features-2026-row-content {
order: 1;
}
}
}
.features-2026-row-media {
width: 100%;
max-width: 592px;
aspect-ratio: 592 / 448;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
background-color: #f6f6f6;
@media (min-width: 1024px) {
max-width: none;
}
@media (min-width: 1280px) {
border-radius: 12px;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.features-2026-row-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 592px;
justify-self: center;
@media (min-width: 1024px) {
align-items: flex-start;
text-align: left;
max-width: none;
}
}
.features-2026-row-icon {
width: 52px;
height: 52px;
display: none;
align-items: center;
justify-content: center;
@media (min-width: 1024px) {
display: flex;
margin-bottom: 20px;
}
& img {
width: 100%;
height: 100%;
display: block;
}
}
.features-2026-row-title {
margin: 0 0 16px;
max-width: 540px;
font-size: 24px;
letter-spacing: -0.48px;
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 28px;
letter-spacing: -0.56px;
}
@media (min-width: 1024px) {
font-size: 24px;
letter-spacing: 0.24px;
margin-bottom: 20px;
}
@media (min-width: 1280px) {
font-size: 32px;
letter-spacing: 0.32px;
}
}
.features-2026-row-text {
margin: 0;
max-width: 540px;
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.14px;
@media (min-width: 768px) {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.features-2026-row-step {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 20px;
margin: 0 0 16px;
background: #fff3d8;
border-radius: 30px;
font-family: "Onest", sans-serif;
font-size: 13px;
line-height: 1.6;
letter-spacing: 1.04px;
text-transform: uppercase;
color: var(--text-default);
@media (min-width: 1024px) {
margin-bottom: 20px;
}
}
.features-2026-row-step-num {
font-weight: 900;
}
.features-2026-row-step-label {
font-weight: 600;
}
.features-2026-row-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
justify-content: center;
@media (min-width: 1024px) {
gap: 16px;
margin-top: 32px;
justify-content: flex-start;
}
}
.features-2026-row-actions .btn-2026 .i {
margin-right: 8px;
}
.tagline-2026 {
margin: 72px 0;
@media (min-width: 768px) {
margin: 80px 0;
}
@media (min-width: 1280px) {
margin: 120px 0;
}
@media (max-width: 575px) {
margin: 64px 0;
}
}
.tagline-2026-head {
position: relative;
max-width: 860px;
margin: 0 auto;
padding: 0 28px;
text-align: center;
@media (min-width: 768px) {
padding: 0 40px;
}
@media (min-width: 1024px) {
max-width: none;
padding: 0;
}
@media (min-width: 1280px) {
max-width: none;
padding: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
padding: 0 40px;
max-width: none;
}
@media (min-width: 576px) and (max-width: 767px) {
max-width: none;
padding: 12px 40px 0;
}
@media (max-width: 575px) {
padding: 10px 20px 0;
max-width: none;
}
}
.tagline-2026-heading {
position: relative;
display: inline-block;
max-width: 780px;
margin: 0 auto;
@media (min-width: 1024px) and (max-width: 1279px) {
max-width: 680px;
}
@media (min-width: 1280px) {
max-width: 820px;
}
@media (min-width: 768px) and (max-width: 1023px) {
margin-bottom: 16px;
}
@media (min-width: 576px) and (max-width: 767px) {
max-width: 560px;
}
@media (max-width: 575px) {
max-width: none;
}
}
.tagline-2026-title {
display: inline-block;
margin: 0 auto 16px;
@media (min-width: 1280px) {
margin: 4px auto 20px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 32px;
letter-spacing: -0.64px;
}
}
.tagline-2026-subtitle {
margin: 0 auto;
max-width: 520px;
@media (min-width: 1024px) and (max-width: 1279px) {
max-width: 420px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
letter-spacing: 0.16px;
}
@media (max-width: 575px) {
font-size: 14px;
letter-spacing: 0.14px;
margin-top: 0;
}
}
.tagline-2026-quote {
position: absolute;
width: 28px;
height: 28px;
opacity: 0.85;
@media (min-width: 768px) and (max-width: 1023px) {
width: 32px;
height: 32px;
}
@media (max-width: 767px) {
width: 24px;
height: 24px;
}
@media (max-width: 575px) {
width: 20px;
height: 20px;
}
}
.tagline-2026-quote--left {
left: -24px;
top: auto;
bottom: -8px;
@media (min-width: 768px) and (max-width: 1023px) {
left: -28px;
bottom: -28px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
left: -36px;
bottom: -8px;
}
@media (min-width: 1280px) {
left: -36px;
bottom: -8px;
}
}
.tagline-2026-quote--right {
right: -24px;
left: auto;
top: -8px;
bottom: auto;
@media (min-width: 768px) and (max-width: 1023px) {
right: -28px;
top: -28px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
right: -36px;
top: -8px;
}
@media (min-width: 1280px) {
right: -36px;
top: -8px;
}
}
.tagline-2026-media {
max-width: 1216px;
margin: 32px auto 0;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-shape);
background-color: #000;
@media (min-width: 1024px) {
border-radius: 8px;
}
@media (min-width: 1280px) {
border-radius: 16px;
}
@media (min-width: 576px) and (max-width: 767px) {
margin-top: 24px;
}
@media (max-width: 575px) {
margin-top: 24px;
border-radius: 8px;
}
}
.tagline-2026-video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
transition: opacity 0.4s ease;
}
.meet-promo-2026 {
--meet-promo-bg-image: url("/images/index/v2/meet-promo-bg-375.avif");
--meet-promo-bg-image-sm: url("/images/index/v2/meet-promo-bg-768.avif");
--meet-promo-bg-image-lg: url("/images/index/v2/meet-promo-bg.avif");
position: relative;
overflow: hidden;
margin: 72px 0;
@media (min-width: 768px) {
margin: 80px 0;
}
@media (min-width: 1280px) {
margin: 120px 0;
}
@media (max-width: 575px) {
margin: 64px 0;
}
}
.meet-promo-2026-inner {
position: relative;
text-align: center;
padding: 32px 16px 0;
@media (min-width: 768px) {
padding: 48px 32px 10px;
}
@media (min-width: 1024px) {
padding: 56px 40px 0;
}
@media (min-width: 1280px) {
padding: 96px 60px 0;
}
@media (max-width: 575px) {
padding: 40px 20px 10px;
}
& > *:not(.meet-promo-2026-bg) {
position: relative;
z-index: 1;
}
}
.meet-promo-2026-bg {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
background-image: var(--meet-promo-bg-image);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
aspect-ratio: 335 / 452;
@media (min-width: 576px) {
background-image: var(--meet-promo-bg-image-sm);
aspect-ratio: 704 / 426;
}
@media (min-width: 1024px) {
background-image: var(--meet-promo-bg-image-lg);
aspect-ratio: 1216 / 488;
}
&::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
background-image: linear-gradient(295.23deg, #4091f5 0%, #54bea5 47.5%, #5fd47f 100%);
@media (min-width: 1024px) {
left: 18.34%;
top: 57.17%;
width: 63.32%;
height: 79.51%;
opacity: 0.3;
filter: blur(175px);
}
@media (min-width: 576px) and (max-width: 1023px) {
left: 15.2%;
top: 59.62%;
width: 69.6%;
height: 57.28%;
background-image: linear-gradient(294.96deg, #4091f5 0%, #54bea5 47.5%, #5fd47f 100%);
opacity: 0.3;
filter: blur(100px);
}
@media (max-width: 575px) {
left: 0;
top: 77.88%;
width: 100.3%;
height: 46.68%;
background-image: linear-gradient(300.42deg, #4091f5 0%, #54bea5 47.5%, #5fd47f 100%);
opacity: 0.4;
filter: blur(50px);
}
}
}
.meet-promo-2026-title {
margin: 0 auto 16px;
max-width: 760px;
@media (min-width: 1280px) {
margin-bottom: 20px;
}
}
.meet-promo-2026-subtitle {
margin: 0 auto 24px;
max-width: 540px;
@media (min-width: 1024px) {
max-width: 400px;
}
@media (min-width: 1280px) {
max-width: 540px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 16px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 14px;
max-width: 470px;
}
@media (max-width: 575px) {
font-size: 14px;
letter-spacing: 0.14px;
margin-bottom: 24px;
}
}
.meet-promo-2026-cta {
margin-bottom: 0;
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 14px;
}
@media (max-width: 575px) {
font-size: 12px;
margin-bottom: 20px;
}
}
.meet-promo-2026-illustration {
display: block;
width: 100%;
max-width: 540px;
margin: 0 auto;
height: auto;
@media (min-width: 1024px) {
max-width: 600px;
}
@media (min-width: 1280px) {
max-width: 880px;
}
@media (max-width: 575px) {
max-width: 287px;
}
}
.solutions-2026 {
margin: 72px 0;
@media (min-width: 768px) {
margin: 80px 0;
}
@media (min-width: 1280px) {
margin: 120px 0;
}
@media (max-width: 575px) {
margin: 64px 0;
}
}
.solutions-2026-title {
text-align: center;
margin: 0 0 32px;
@media (min-width: 1024px) {
margin-bottom: 32px;
}
@media (min-width: 1280px) {
margin-bottom: 40px;
}
@media (min-width: 576px) and (max-width: 767px) {
margin-bottom: 24px;
}
@media (max-width: 575px) {
margin-bottom: 24px;
}
}
.solutions-2026-grid {
display: flex;
flex-wrap: nowrap;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(17, 17, 17, 0.2) transparent;
padding: 4px calc(var(--page-pad-x)) 16px;
margin: 0 calc(-1 * var(--page-pad-x));
@media (min-width: 768px) {
gap: 24px;
padding: 4px calc(var(--page-pad-x)) 20px;
}
@media (min-width: 1024px) {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
overflow: visible;
padding: 0;
margin: 0;
scroll-snap-type: none;
}
@media (max-width: 1023px) {
padding-left: 32px;
padding-right: 32px;
scroll-padding-left: 32px;
}
@media (max-width: 575px) {
padding-left: 20px;
padding-right: 20px;
scroll-padding-left: 20px;
}
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(17, 17, 17, 0.2);
border-radius: 2px;
}
}
.solution-card {
flex: 0 0 304px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 24px;
padding-bottom: 32px;
background-color: #f6f6f6;
border-radius: 8px;
overflow: hidden;
@media (min-width: 768px) {
flex-basis: 320px;
}
@media (min-width: 1024px) {
flex-basis: auto;
}
@media (max-width: 575px) {
flex-basis: 280px;
}
}
.solution-card-media {
position: relative;
aspect-ratio: 304 / 206;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
@media (min-width: 1024px) {
aspect-ratio: 384 / 260;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.solution-card--1 .solution-card-media {
background-color: var(--surface-card-blue-soft);
}
.solution-card--2 .solution-card-media {
background-color: var(--surface-card-purple-soft);
}
.solution-card--3 .solution-card-media {
background-color: var(--surface-card-green-soft);
}
.solution-card--4 .solution-card-media {
background-color: var(--surface-card-orange-soft);
}
.solution-card--5 .solution-card-media {
background-color: var(--surface-card-pink-soft);
}
.solution-card--6 .solution-card-media {
background-color: var(--surface-card-sky-soft);
}
.solution-card-body {
display: flex;
flex-direction: column;
padding: 0 24px;
@media (min-width: 768px) {
padding: 0 32px;
}
@media (max-width: 1023px) {
padding-left: 24px;
padding-right: 24px;
}
}
.solution-card-title {
margin: 0 0 12px;
@media (min-width: 1280px) {
margin-bottom: 16px;
}
}
.solution-card-text {
margin: 0;
font-size: 14px;
letter-spacing: 0.14px;
@media (min-width: 1024px) {
font-size: 14px;
}
@media (min-width: 1280px) {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.reviews-2026 {
--reviews-stat-bg-image: url("/images/index/v2/reviews-stat-bg.png");
--reviews-stat-bg-image-mobile: url("/images/index/v2/reviews-stat-bg-768.avif");
margin: 72px 0;
@media (min-width: 768px) {
margin: 80px 0;
}
@media (min-width: 1280px) {
margin: 120px 0;
}
@media (max-width: 575px) {
margin: 64px 0;
}
}
.reviews-2026-title {
margin: 0 0 24px;
text-align: center;
@media (min-width: 1024px) {
text-align: center;
margin-bottom: 32px;
}
@media (min-width: 1280px) {
margin-bottom: 40px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 32px;
letter-spacing: -0.64px;
}
@media (max-width: 575px) {
margin-bottom: 24px;
}
}
.reviews-2026-grid {
display: flex;
flex-direction: column;
gap: 16px;
@media (min-width: 1024px) {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 42px;
align-items: stretch;
}
@media (min-width: 1280px) {
grid-template-columns: 280px minmax(0, 1fr);
gap: 32px;
}
@media (min-width: 768px) and (max-width: 1023px) {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 704px;
margin: 0 auto;
}
@media (min-width: 576px) and (max-width: 767px) {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (max-width: 575px) {
display: flex;
flex-direction: column;
gap: 16px;
}
}
.reviews-2026-stat {
position: relative;
overflow: hidden;
padding: 20px 24px;
border-radius: 8px;
background-image: linear-gradient(-62deg, #e75468 10%, #ab5795 50%, #7359bf 90%);
color: var(--brand-white);
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"value tag"
"value copy"
"btn btn";
column-gap: 20px;
row-gap: 8px;
align-items: center;
order: 2;
@media (min-width: 1024px) {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 24px;
min-height: 320px;
order: 0;
}
@media (min-width: 1280px) {
min-height: 420px;
padding: 32px;
}
@media (min-width: 768px) and (max-width: 1023px) {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"tag value"
"copy value";
column-gap: 24px;
min-height: 119px;
}
@media (max-width: 767px) {
grid-template-columns: auto auto 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"value label tag"
"copy copy copy";
column-gap: 8px;
row-gap: 12px;
min-height: 119px;
}
@media (max-width: 575px) {
padding: 16px 24px;
}
&::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--reviews-stat-bg-image);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 0.75;
@media (max-width: 1023px) {
background-image: var(--reviews-stat-bg-image-mobile);
opacity: 1;
}
}
& > * {
position: relative;
z-index: 1;
}
& .btn-2026 {
grid-area: btn;
margin-top: 12px;
justify-self: stretch;
@media (min-width: 1024px) {
margin-top: 0;
align-self: flex-start;
justify-self: flex-start;
height: 36px;
padding: 10px 14px;
font-size: 12px;
}
@media (min-width: 1280px) {
height: 48px;
padding: 14px 20px;
font-size: 14px;
}
@media (max-width: 1023px) {
display: none;
}
}
}
.reviews-2026-stat-tag {
display: inline-flex;
align-items: center;
width: max-content;
padding: 5px 10px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(2px);
color: var(--brand-white);
font-family: "Onest", sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 1.4;
grid-area: tag;
@media (min-width: 768px) and (max-width: 1023px) {
align-self: start;
}
@media (max-width: 767px) {
justify-self: end;
align-self: start;
}
@media (max-width: 575px) {
font-size: 8px;
}
}
.reviews-2026-stat-value {
font-family: "Onest", sans-serif;
font-size: 56px;
font-weight: 800;
line-height: 1;
letter-spacing: -1.12px;
grid-area: value;
align-self: center;
margin: 0;
@media (min-width: 1024px) {
font-size: 48px;
letter-spacing: -0.96px;
margin-bottom: -16px;
align-self: flex-start;
}
@media (min-width: 1280px) {
font-size: 70px;
letter-spacing: -1.4px;
margin-bottom: -24px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 64px;
letter-spacing: -1.28px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 44px;
letter-spacing: -0.88px;
}
@media (max-width: 575px) {
font-size: 36px;
letter-spacing: -0.72px;
}
}
.reviews-2026-stat-label {
display: none;
@media (min-width: 1024px) {
display: block;
margin-bottom: 0;
font-size: 14px;
}
@media (min-width: 1280px) {
font-size: 20px;
}
@media (max-width: 767px) {
grid-area: label;
display: block;
align-self: end;
font-weight: 600;
font-size: 12px;
margin: 0 0 6px;
}
@media (max-width: 575px) {
font-size: 10px;
margin: 0 0 2px;
}
}
.reviews-2026-stat-copy {
margin: 0;
grid-area: copy;
font-size: 13px;
@media (min-width: 1024px) {
max-width: 180px;
margin-top: auto;
font-size: 12px;
}
@media (min-width: 1280px) {
max-width: 220px;
font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 14px;
max-width: 335px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 14px;
max-width: 360px;
}
@media (max-width: 575px) {
font-size: 12px;
max-width: none;
}
}
.reviews-2026-slider {
position: relative;
min-width: 0;
@media (min-width: 768px) and (max-width: 1023px) {
order: 1;
}
@media (min-width: 576px) and (max-width: 767px) {
order: 1;
}
@media (max-width: 575px) {
order: 1;
}
& .reviews-2026-nav--prev {
left: -20px;
@media (min-width: 1024px) {
left: -24px;
}
@media (max-width: 575px) {
left: -18px;
}
}
& .reviews-2026-nav--next {
right: -20px;
@media (min-width: 1024px) {
right: -24px;
}
@media (max-width: 575px) {
right: -18px;
}
}
}
.reviews-2026-swiper {
position: relative;
overflow: hidden;
border-radius: 8px;
--swiper-navigation-sides-offset: 12px;
& .swiper-wrapper {
min-width: 0;
}
& .swiper-button-prev,
& .swiper-button-next {
--swiper-navigation-size: 16px;
}
& .swiper-navigation-icon {
width: 10px;
height: 16px;
}
}
.reviews-2026-slide {
background-color: #f6f6f6;
border-radius: 8px;
padding: 24px;
display: flex !important;
flex-direction: column;
min-height: 320px;
box-sizing: border-box;
@media (min-width: 768px) {
padding: 32px 48px;
min-height: 420px;
}
@media (min-width: 1024px) {
padding: 24px 36px;
min-height: 320px;
}
@media (min-width: 1280px) {
padding: 32px 48px;
min-height: 420px;
}
@media (min-width: 768px) and (max-width: 1023px) {
padding: 24px 36px;
min-height: 320px;
}
@media (min-width: 576px) and (max-width: 767px) {
padding: 24px;
min-height: 320px;
}
@media (max-width: 767px) {
padding: 32px 24px;
min-height: 360px;
}
@media (max-width: 575px) {
padding: 24px;
min-height: 280px;
}
}
.reviews-2026-slide-tag {
display: inline-flex;
width: max-content;
margin-bottom: 16px;
padding: 5px 10px;
border-radius: 8px;
background-color: var(--brand-blue-subdued);
color: var(--brand-white);
font-family: "Onest", sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 1.4;
@media (min-width: 768px) {
margin-bottom: 20px;
}
@media (max-width: 575px) {
font-size: 8px;
}
}
.reviews-2026-slide-title {
margin: 0 0 16px;
position: relative;
display: inline-block;
@media (min-width: 768px) {
margin-bottom: 20px;
}
@media (max-width: 575px) {
font-size: 14px;
}
&::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 60%;
height: 3px;
background-color: var(--brand-blue-subdued);
border-radius: 2px;
@media (min-width: 768px) and (max-width: 1023px) {
bottom: 0;
}
@media (min-width: 576px) and (max-width: 767px) {
bottom: 0;
}
@media (max-width: 575px) {
bottom: 0;
}
}
}
.reviews-2026-slide-text {
margin: 0 0 16px;
flex: 1;
@media (min-width: 768px) {
margin-bottom: 20px;
}
@media (min-width: 768px) and (max-width: 1023px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (min-width: 576px) and (max-width: 767px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (max-width: 575px) {
font-size: 12px;
}
}
.reviews-2026-slide-author {
display: flex;
align-items: center;
gap: 16px;
padding-top: 16px;
border-top: 1px solid rgba(17, 17, 17, 0.08);
& img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
& .text-caption {
@media (max-width: 575px) {
font-size: 10px;
}
}
}
.reviews-2026-slide-name {
color: var(--brand-black);
font-weight: 600;
@media (max-width: 575px) {
font-size: 12px;
}
}
.reviews-2026-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background-color: var(--brand-white);
box-shadow: var(--shadow-btn);
color: var(--brand-black);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
@media (min-width: 1024px) {
width: 48px;
height: 48px;
}
@media (max-width: 767px) {
width: 40px;
height: 40px;
}
}
.promo-gradient-2026 {
--promo-gradient-bg-image: url("/images/business/v2/security-bg.svg");
margin: 72px 0;
}
@media (max-width: 575px) {
.promo-gradient-2026 {
margin: 64px 0;
}
}
@media (min-width: 768px) {
.promo-gradient-2026 {
margin: 80px 0;
}
}
@media (min-width: 1024px) {
.promo-gradient-2026 {
margin: 80px 0;
}
}
.promo-gradient-2026-card {
position: relative;
border-radius: 4px;
background: linear-gradient(-21.33deg, #4091f5 34.4%, #54bea5 63%, #5fd47f 95%);
overflow: hidden;
padding: 40px 20px;
display: grid;
grid-template-columns: 1fr;
gap: 0;
align-items: center;
}
@media (max-width: 575px) {
.promo-gradient-2026-card {
gap: 20px;
}
}
@media (min-width: 576px) {
.promo-gradient-2026-card {
padding: 40px 24px;
gap: 30px;
}
}
@media (min-width: 768px) {
.promo-gradient-2026-card {
padding: 60px 40px;
grid-template-columns: minmax(0, 1fr) 305px;
}
}
@media (min-width: 1024px) {
.promo-gradient-2026-card {
padding: 60px 80px;
grid-template-columns: minmax(0, 1fr) 408px;
}
}
@media (min-width: 1280px) {
.promo-gradient-2026-card {
padding: 64px 80px;
}
}
.promo-gradient-2026-bg {
position: absolute;
inset: 0;
background-image: var(--promo-gradient-bg-image);
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
pointer-events: none;
}
.promo-gradient-2026-content {
position: relative;
z-index: 1;
max-width: 624px;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) and (max-width: 1023px) {
.promo-gradient-2026-content {
max-width: none;
}
}
.promo-gradient-2026-title {
margin: 0 0 16px;
color: var(--brand-white);
}
@media (min-width: 1280px) {
.promo-gradient-2026-title {
margin-bottom: 20px;
}
}
.promo-gradient-2026-body {
margin: 0;
color: var(--brand-white);
}
@media (min-width: 768px) {
.promo-gradient-2026-body {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.promo-gradient-2026-illust {
position: relative;
z-index: 1;
width: 100%;
max-width: 428px;
height: auto;
display: block;
justify-self: center;
margin-right: 0;
}
@media (max-width: 767px) {
.promo-gradient-2026-illust {
max-width: 228px;
margin-left: 40px;
}
}
@media (min-width: 768px) {
.promo-gradient-2026-illust {
margin-right: -80px;
max-width: 305px;
}
}
@media (min-width: 1024px) {
.promo-gradient-2026-illust {
max-width: 408px;
}
}
.promo-gradient-2026-card--wide .promo-gradient-2026-illust {
margin-right: 0;
}
@media (min-width: 1024px) {
.promo-gradient-2026-card--wide .promo-gradient-2026-illust {
justify-self: end;
}
}
.summary-checklist-2026 {
margin: 72px 0;
}
@media (max-width: 575px) {
.summary-checklist-2026 {
margin: 64px 0;
}
}
@media (min-width: 768px) {
.summary-checklist-2026 {
margin: 80px 0;
}
}
@media (min-width: 1024px) {
.summary-checklist-2026 {
margin: 80px 0;
}
}
.summary-checklist-2026-container {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
@media (min-width: 576px) and (max-width: 767px) {
.summary-checklist-2026-container {
max-width: 530px;
margin: 0 auto;
}
}
@media (min-width: 768px) {
.summary-checklist-2026-container {
gap: 32px;
}
}
@media (min-width: 1024px) {
.summary-checklist-2026-container {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 0 60px;
}
}
@media (max-width: 1023px) {
.summary-checklist-2026-heading {
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.summary-checklist-2026-heading {
max-width: 840px;
margin: 0 auto;
}
}
.summary-checklist-2026-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
@media (max-width: 767px) {
.summary-checklist-2026-list {
margin: 0 auto;
gap: 12px;
}
}
@media (max-width: 767px) {
.summary-checklist-2026-list .text-body-l {
font-size: 14px;
letter-spacing: 0.16px;
}
}
@media (min-width: 768px) {
.summary-checklist-2026-list {
margin: 0 auto;
gap: 20px;
}
}
.summary-checklist-2026-item {
display: flex;
align-items: center;
gap: 16px;
}
@media (min-width: 1024px) {
.summary-checklist-2026-item .text-body-l {
font-size: 16px;
letter-spacing: 0.16px;
}
}
.summary-checklist-2026-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.summary-checklist-2026-icon img {
width: 24px;
height: 24px;
display: block;
}
.promo-quote-2026 {
--promo-quote-bg-image: url("/images/business/v2/culture-bg-375.avif");
--promo-quote-bg-image-sm: url("/images/business/v2/culture-bg-768.avif");
--promo-quote-bg-image-lg: url("/images/business/v2/culture-bg.avif");
position: relative;
padding: 0;
margin: 72px 0;
}
.promo-quote-2026-bg-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
@media (max-width: 575px) {
.promo-quote-2026 {
margin: 64px 0;
}
}
@media (min-width: 768px) {
.promo-quote-2026 {
margin: 80px 0;
}
}
@media (min-width: 1024px) {
.promo-quote-2026 {
margin: 80px 0;
}
}
.promo-quote-2026-bg {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
background-image: var(--promo-quote-bg-image);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
aspect-ratio: 335 / 452;
}
@media (min-width: 576px) {
.promo-quote-2026-bg {
background-image: var(--promo-quote-bg-image-sm);
aspect-ratio: 704 / 426;
}
}
@media (min-width: 1024px) {
.promo-quote-2026-bg {
background-image: var(--promo-quote-bg-image-lg);
aspect-ratio: 1216 / 488;
}
}
.promo-quote-2026-bg::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
background-image: linear-gradient(295.23deg, #4091f5 0%, #54bea5 47.5%, #5fd47f 100%);
}
@media (min-width: 1024px) {
.promo-quote-2026-bg::after {
left: 18.34%;
top: 57.17%;
width: 63.32%;
height: 79.51%;
opacity: 0.3;
filter: blur(175px);
}
}
@media (min-width: 576px) and (max-width: 1023px) {
.promo-quote-2026-bg::after {
left: 15.2%;
top: 59.62%;
width: 69.6%;
height: 57.28%;
background-image: linear-gradient(294.96deg, #4091f5 0%, #54bea5 47.5%, #5fd47f 100%);
opacity: 0.3;
filter: blur(100px);
}
}
@media (max-width: 575px) {
.promo-quote-2026-bg::after {
left: 0;
top: 77.88%;
width: 100.3%;
height: 46.68%;
background-image: linear-gradient(300.42deg, #4091f5 0%, #54bea5 47.5%, #5fd47f 100%);
opacity: 0.4;
filter: blur(50px);
}
}
.promo-quote-2026-inner {
position: relative;
display: flex;
flex-direction: column;
gap: 40px;
padding: 32px 0 0;
}
@media (min-width: 576px) and (max-width: 767px) {
.promo-quote-2026-inner {
padding: 32px 0 10px;
}
}
@media (min-width: 768px) {
.promo-quote-2026-inner {
padding: 48px 0 10px;
gap: 0;
}
}
@media (min-width: 1024px) {
.promo-quote-2026-inner {
display: block;
padding: 60px 0;
}
}
@media (min-width: 1280px) {
.promo-quote-2026-inner {
padding: 80px 0;
}
}
.promo-quote-2026-content {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 620px;
}
.promo-quote-2026-title {
margin: 0 0 16px;
}
@media (min-width: 1280px) {
.promo-quote-2026-title {
margin-bottom: 20px;
}
}
.promo-quote-2026-subtitle {
margin: 0 0 24px;
}
.promo-quote-2026-cta {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.promo-quote-2026-cta {
margin-top: 40px;
}
}
@media (max-width: 575px) {
.promo-quote-2026-cta {
margin-bottom: 20px;
}
}
.promo-quote-2026-cluster {
position: relative;
width: 100%;
max-width: 592px;
height: 431px;
margin-left: auto;
}
@media (min-width: 1024px) {
.promo-quote-2026-cluster {
position: absolute;
right: 0;
margin: 0;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.promo-quote-2026-cluster {
top: -40px;
transform: scale(0.85);
transform-origin: top right;
right: 50px;
}
}
@media (min-width: 1280px) {
.promo-quote-2026-cluster {
top: -40px;
right: 50px;
}
}
.promo-quote-2026-capsule {
position: absolute;
border: 2px solid var(--brand-white);
border-radius: 300px;
pointer-events: none;
}
.promo-quote-2026-capsule--top {
width: 440px;
height: 130px;
left: 68px;
top: 114px;
}
.promo-quote-2026-capsule--bottom {
width: 161px;
height: 52px;
left: 355px;
top: 376px;
}
.promo-quote-2026-photo {
position: absolute;
left: 216px;
top: 0;
width: 240px;
height: 408px;
border-radius: 300px;
overflow: hidden;
}
.promo-quote-2026-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.promo-quote-2026-fact {
position: absolute;
left: 401px;
top: 212px;
width: 191px;
height: 130px;
border: 1px solid var(--brand-white);
border-radius: 4px;
background: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 19px 22px 19px 24px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.promo-quote-2026-fact-value {
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 40px;
line-height: 1.2;
letter-spacing: -0.8px;
background: linear-gradient(-31.6deg, #5fd47f 13%, #54bea5 53%, #4091f5 89%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.promo-quote-2026-fact-label {
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin-top: 4px;
}
.promo-quote-2026-quote {
position: absolute;
left: 0;
top: 269px;
width: 280px;
background: var(--brand-white);
border-radius: 4px;
box-shadow: var(--shadow-shape);
padding: 16px 20px 24px;
display: flex;
flex-direction: column;
}
.promo-quote-2026-quote-text {
margin: 0 0 20px;
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: var(--text-default);
}
.promo-quote-2026-quote-tail {
position: absolute;
right: -8px;
top: 20px;
width: 16px;
height: 16px;
pointer-events: none;
}
.promo-quote-2026-quote-author {
display: flex;
align-items: center;
gap: 8px;
}
.promo-quote-2026-quote-bar {
display: inline-block;
width: 2px;
height: 36px;
background: var(--brand-green-strong);
border-radius: 4px;
}
.promo-quote-2026-quote-name {
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.4;
color: var(--text-default);
}
.promo-quote-2026-quote-role {
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.4;
color: var(--text-default);
opacity: 0.5;
}
@media (max-width: 575px) {
.promo-quote-2026-inner {
padding: 40px 0 10px;
}
.promo-quote-2026-cluster {
zoom: 0.6;
margin-top: -60px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.promo-quote-2026-cluster {
zoom: 0.65;
margin-top: -220px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.promo-quote-2026-cluster {
zoom: 0.85;
margin-top: -120px;
}
}
.blog-banner-2026 {
position: relative;
overflow: hidden;
background-color: #f6f6f6;
width: 100vw;
margin-top: 40px;
margin-bottom: 40px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 40px 0;
@media (min-width: 768px) {
margin-top: 60px;
margin-bottom: 60px;
padding: 56px 0;
}
@media (min-width: 1024px) {
padding: 72px 0;
}
}
.blog-banner-2026-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("/images/blog-banner-bg-2026.svg");
background-repeat: repeat;
background-position: center;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 88%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 88%);
opacity: 0.7;
}
.blog-banner-2026-gradient {
position: absolute;
z-index: 0;
pointer-events: none;
right: 0%;
bottom: -40%;
width: 50%;
height: 100%;
background: linear-gradient(218deg, #d24af0 13%, #ffb861 85%);
filter: blur(120px);
opacity: 0.3;
}
.blog-banner-2026-inner {
position: relative;
z-index: 1;
max-width: 1216px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"media"
"content";
gap: 24px;
align-items: center;
@media (min-width: 768px) {
padding: 0 40px;
grid-template-columns: minmax(0, 480fr) minmax(0, 555fr);
grid-template-areas: "media content";
gap: 32px;
}
@media (min-width: 1024px) {
padding: 0 60px;
gap: 48px;
}
}
.blog-banner-2026-media {
grid-area: media;
width: 100%;
}
.blog-banner-2026-video {
display: block;
width: 100%;
max-width: 460px;
margin: 0 auto;
height: auto;
aspect-ratio: 480 / 345;
border-radius: 8px;
object-fit: cover;
background-color: #000;
}
.blog-banner-2026-content {
grid-area: content;
display: flex;
flex-direction: column;
min-width: 0;
}
.blog-banner-2026-title {
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.39px;
color: #0f172a;
margin: 0 0 12px;
@media (min-width: 768px) {
font-size: 30px;
letter-spacing: -0.45px;
}
@media (min-width: 1024px) {
font-size: 34px;
letter-spacing: -0.51px;
}
@media (min-width: 1280px) {
font-size: 38px;
line-height: 1.1;
letter-spacing: -0.57px;
}
}
.blog-banner-2026-text {
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: #0f172a;
margin: 0 0 20px;
@media (min-width: 768px) {
font-size: 16px;
}
}
.blog-banner-2026-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.blog-banner-2026-btn {
gap: 8px;
height: 48px;
padding: 0 22px;
font-size: 14px;
line-height: 1;
@media (min-width: 768px) {
height: 52px;
padding: 0 28px;
font-size: 15px;
}
}
.articles-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.articles-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
}
@media (min-width: 1024px) {
.articles-grid {
gap: 40px;
}
}
@media (min-width: 1280px) {
.articles-grid {
column-gap: 80px;
row-gap: 40px;
}
}
.cards-grid-3 {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.cards-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.cards-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
}
@media (min-width: 1280px) {
.cards-grid-3 {
gap: 40px;
}
}
.article-content .articles-grid {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.article-content .articles-grid {
grid-template-columns: 1fr;
}
}
.articles-grid > .blog-index-card:not(.blog-index-card--featured) {
padding: 0;
}
.articles-grid > .blog-index-card:not(.blog-index-card--featured) .blog-index-card__title {
font-size: 18px;
margin-bottom: 12px;
}
.articles-grid > .blog-index-card:not(.blog-index-card--featured) .blog-index-card__title a {
-webkit-line-clamp: 3;
}
.articles-grid > .blog-index-card:not(.blog-index-card--featured) .blog-index-card__date {
color: var(--gray-600);
}
.blog-index-card--featured {
position: relative;
overflow: hidden;
background-color: #f5f6fa;
border-radius: 8px;
min-height: 220px;
padding: 28px 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
text-align: center;
}
@media (min-width: 768px) {
.blog-index-card--featured {
min-height: 310px;
padding: 40px 32px;
}
}
.blog-index-card--featured:nth-of-type(2) {
background-color: #fbfbfb;
}
.blog-index-card-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.blog-index-card--featured:nth-of-type(1) .blog-index-card-bg {
background-image: url("/images/articles/featured/featured-bg-1.svg");
}
.blog-index-card--featured:nth-of-type(2) .blog-index-card-bg {
background-image: url("/images/articles/featured/featured-bg-2.svg");
}
.blog-index-card-gradient {
position: absolute;
z-index: 0;
pointer-events: none;
top: -20%;
right: -20%;
width: 80%;
height: 100%;
background: linear-gradient(304.64deg, #4091f5 34.4%, #54bea5 63.23%, #5fd47f 95.1%);
filter: blur(175px);
opacity: 0.3;
}
.blog-index-card--featured {
cursor: pointer;
}
.blog-index-card--featured > *:not(.blog-index-card-bg):not(.blog-index-card-gradient):not(.blog-index-card__cover-link) {
position: relative;
z-index: 2;
}
.blog-index-card--featured > .blog-index-card__cover-link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.blog-index-card--featured .blog-index-card__meta,
.blog-index-card--featured .blog-index-card__title {
pointer-events: none;
}
.blog-index-card--featured .blog-index-card__meta a,
.blog-index-card--featured .blog-index-card__title a {
pointer-events: auto;
}
.blog-index-card--featured .blog-index-card__meta a.blog-index-card__author {
pointer-events: none;
}
.blog-index-card--featured .blog-index-card__author-name {
pointer-events: auto;
}
.blog-index-card--featured .blog-index-card__meta {
flex-wrap: wrap;
justify-content: center;
gap: 2px 8px;
font-size: 13px;
line-height: 1.4;
}
.blog-index-card--featured .blog-index-card__author,
.blog-index-card--featured .blog-index-card__date {
flex-basis: 100%;
justify-content: center;
}
.blog-index-card--featured .blog-index-card__author {
flex-direction: column;
align-items: center;
gap: 8px;
}
.blog-index-card--featured .blog-index-card__avatar {
width: 64px;
height: 64px;
}
.blog-index-card--featured .blog-index-card__author-name {
font-weight: 500;
color: var(--text-default);
}
.blog-index-card--featured .blog-index-card__date {
color: var(--gray-600);
}
.blog-index-card--featured .blog-index-card__title {
font-size: 22px;
line-height: 1.25;
font-weight: 700;
margin-bottom: 0;
}
.blog-index-card--featured .blog-index-card__title a {
-webkit-line-clamp: 4;
}
@media (min-width: 768px) {
.blog-index-card--featured .blog-index-card__title {
font-size: 23px;
}
}
@media (min-width: 1024px) {
.blog-index-card--featured .blog-index-card__title {
font-size: 26px;
}
}
@media (min-width: 1280px) {
.blog-index-card--featured .blog-index-card__title {
font-size: 28px;
}
}
.articles-hero {
position: relative;
overflow: hidden;
padding: 84px 0 32px;
background:
radial-gradient(117.21% 50.82% at 17.18% 0%, rgba(99, 130, 240, 0.45) 0%, rgba(180, 187, 255, 0) 60%),
radial-gradient(172.91% 33.59% at 85.05% 0%, rgba(255, 89, 142, 0.1) 0%, rgba(255, 89, 150, 0) 70%), #edfaff;
margin-top: -64px;
margin-bottom: 40px;
}
@media (min-width: 576px) {
.articles-hero {
padding: 96px 0 40px;
margin-bottom: 48px;
}
}
@media (min-width: 768px) {
.articles-hero {
padding: 112px 0 48px;
margin-bottom: 56px;
}
}
@media (min-width: 1024px) {
.articles-hero {
padding: 116px 0 76px;
margin-top: -48px;
margin-bottom: 60px;
}
}
@media (min-width: 1280px) {
.articles-hero {
padding: 110px 0;
margin-top: -64px;
}
}
.articles-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("/images/articles/hero/articles-hero-bg.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
@media (min-width: 1024px) {
.articles-hero-bg {
background-position: center center;
mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
}
.articles-hero-container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"breadcrumb"
"content"
"meta";
row-gap: 16px;
}
@media (min-width: 1024px) {
.articles-hero-container {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"breadcrumb breadcrumb"
"content meta";
column-gap: 32px;
row-gap: 36px;
align-items: end;
}
}
.articles-hero-breadcrumb {
grid-area: breadcrumb;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.4;
color: rgba(17, 17, 17, 0.8);
}
.articles-hero-breadcrumb-link {
color: rgba(17, 17, 17, 0.4);
text-decoration: none;
transition: color 0.15s ease;
}
.articles-hero-breadcrumb-link:hover {
color: rgba(17, 17, 17, 0.8);
}
.articles-hero-breadcrumb-sep {
flex-shrink: 0;
margin: 0 8px;
color: rgba(17, 17, 17, 0.4);
font-weight: 500;
cursor: default;
}
.articles-hero-breadcrumb-current {
color: rgba(17, 17, 17, 0.8);
}
.articles-hero-content {
grid-area: content;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
@media (min-width: 768px) {
.articles-hero-content {
gap: 13px;
}
}
.articles-hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(206, 210, 255, 0.67);
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 1.55;
color: #4f46e5;
}
@media (min-width: 768px) {
.articles-hero-tag {
padding: 6px 14px;
font-size: 13px;
}
}
.articles-hero-tag-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4f46e5;
}
.articles-hero-title {
margin: 4px 0 0;
}
.articles-hero-title .text-underline-accent {
position: relative;
display: inline-block;
font-weight: 500;
text-decoration: none;
}
.articles-hero-title .text-underline-accent::after {
content: "";
position: absolute;
left: -4px;
right: -4px;
bottom: 0.06em;
height: 0.34em;
background: rgba(47, 109, 240, 0.28);
border-radius: 4px;
pointer-events: none;
}
.articles-hero-title .text-underline-accent--green::after {
background: rgba(95, 212, 127, 0.28);
}
.articles-hero-title .text-underline-accent--purple::after {
background: rgba(139, 92, 246, 0.28);
}
.articles-hero-title .text-underline-accent--red::after {
background: rgba(233, 127, 145, 0.28);
}
.articles-hero-title--solo .text-underline-accent {
font-weight: 700;
}
@media (min-width: 576px) and (max-width: 767px) {
.articles-hero-title {
font-size: 40px;
letter-spacing: -0.8px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.articles-hero-title {
font-size: 48px;
letter-spacing: -0.96px;
}
}
@media (min-width: 1280px) {
.articles-hero-title {
font-size: 64px;
letter-spacing: -1.28px;
line-height: 1;
}
}
.articles-hero-subtitle {
margin: 0;
max-width: 570px;
font-size: 14px;
}
@media (min-width: 1280px) {
.articles-hero-subtitle {
font-size: 16px;
}
}
.articles-hero-meta {
grid-area: meta;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
text-align: right;
font-family: "Onest", sans-serif;
font-size: 13px;
line-height: 1.55;
}
.articles-hero-meta-strong {
font-weight: 700;
letter-spacing: 0.26px;
color: var(--text-default, #0f172a);
}
.articles-hero-meta-note {
color: rgba(17, 17, 17, 0.6);
}
.article-categories-2026 {
margin: 0 0 32px;
}
@media (min-width: 768px) {
.article-categories-2026 {
margin-bottom: 40px;
}
}
@media (min-width: 1024px) {
.article-categories-2026 {
margin-bottom: 56px;
}
}
.article-categories-2026__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
list-style: none;
margin: 0;
padding: 0;
}
.article-categories-2026__pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
background: #fff;
border: 1px solid #e6e8ef;
border-radius: 999px;
color: #0f172a;
font-family: "Onest", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: normal;
text-align: center;
text-decoration: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
white-space: nowrap;
}
a.article-categories-2026__pill:hover {
border-color: #cdd3e1;
background: #f7f8fc;
text-decoration: none;
color: #0f172a;
}
a.article-categories-2026__pill:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.article-categories-2026__count {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: #f0f3fb;
border-radius: 999px;
color: #6b7280;
font-family: "Onest", sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.article-categories-2026__pill--current {
background: linear-gradient(151deg, #4f46e5 0%, #2f6df0 100%);
border-color: rgba(0, 0, 0, 0);
color: #fff;
box-shadow: 0 6px 16px rgba(47, 109, 240, 0.3);
cursor: default;
}
.article-categories-2026__pill--current .article-categories-2026__count {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.article-categories-2026__list > .is-hidden {
display: none;
}
.article-categories-2026__pill--toggle {
cursor: pointer;
background: #f7f8fc;
border-color: #e6e8ef;
color: #4f46e5;
font-weight: 700;
}
.article-categories-2026__pill--toggle:hover {
background: #eef1fb;
border-color: #cdd3e1;
color: #4f46e5;
}
.article-categories-2026__pill--toggle:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.article-categories-2026__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 24px;
margin: 0 0 20px;
}
@media (min-width: 768px) {
.article-categories-2026__header {
margin-bottom: 28px;
}
}
.article-categories-2026__header-title {
margin: 0;
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 1.18;
letter-spacing: -0.0232em;
color: #0f172a;
}
@media (min-width: 768px) {
.article-categories-2026__header-title {
font-size: 38px;
line-height: 48px;
}
}
.article-categories-2026__header-accent {
position: relative;
display: inline-block;
white-space: nowrap;
}
.article-categories-2026__header-accent::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: 0;
height: 11px;
background: rgba(139, 92, 246, 0.28);
border-radius: 4px;
pointer-events: none;
}
@media (min-width: 768px) {
.article-categories-2026__header-accent::after {
height: 15px;
}
}
.article-categories-2026__header-hint {
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: #6b7280;
}
.article-categories-2026__heading {
margin: 24px 0 0;
font-family: "Onest", sans-serif;
}
@media (min-width: 768px) {
.article-categories-2026__heading {
margin-top: 32px;
}
}
.article-categories-2026__heading-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
}
.article-categories-2026__heading-title {
position: relative;
margin: 0;
font-weight: 700;
font-size: 24px;
line-height: 1.14;
letter-spacing: -0.0073em;
color: #0f172a;
}
@media (min-width: 768px) {
.article-categories-2026__heading-title {
font-size: 30px;
line-height: 34px;
}
}
.article-categories-2026__heading-title {
--topic-stripe: rgba(139, 92, 246, 0.28);
}
.article-categories-2026__heading-title[data-accent="blue"] {
--topic-stripe: rgba(65, 145, 245, 0.28);
}
.article-categories-2026__heading-title[data-accent="green"] {
--topic-stripe: rgba(95, 212, 127, 0.28);
}
.article-categories-2026__heading-title[data-accent="purple"] {
--topic-stripe: rgba(139, 92, 246, 0.28);
}
.article-categories-2026__heading-title[data-accent="red"] {
--topic-stripe: rgba(233, 127, 145, 0.28);
}
.article-categories-2026__heading-title[data-accent="sky"] {
--topic-stripe: rgba(92, 182, 246, 0.28);
}
.article-categories-2026__heading-title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 10px;
background: var(--topic-stripe);
border-radius: 4px;
pointer-events: none;
}
@media (min-width: 768px) {
.article-categories-2026__heading-title::after {
bottom: -4px;
height: 14px;
}
}
.article-categories-2026__heading-count {
display: inline-flex;
font-weight: 500;
font-size: 15px;
line-height: 23px;
color: #6b7280;
}
.page-articles-topic .topic-description {
display: block;
max-width: 760px;
margin: 18px 0 0;
font-family: "Onest", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #4b5563;
}
@media (min-width: 768px) {
.page-articles-topic .topic-description {
margin-top: 24px;
font-size: 17px;
}
}
.article-content {
--baseline: 28px;
--gap: 20px;
--gap-before-h2: 56px;
--gap-before-h3: 40px;
--gap-after-heading: 28px;
--gap-after-h3: 14px;
--gap-h2-to-h3: 14px;
--gap-figure: 28px;
--gap-list-block: 28px;
--gap-list-item: 14px;
--list-padding: 28px;
--gap-quote: 40px;
max-width: 720px;
margin-inline: auto;
font-size: 18px;
line-height: 1.55;
}
@media (min-width: 1024px) {
.article-content {
--baseline: 32px;
--gap: 24px;
--gap-before-h2: 64px;
--gap-before-h3: 48px;
--gap-after-heading: 32px;
--gap-after-h3: 16px;
--gap-h2-to-h3: 16px;
--gap-figure: 32px;
--gap-list-block: 32px;
--gap-list-item: 16px;
--list-padding: 32px;
--gap-quote: 48px;
font-size: 20px;
line-height: 1.6;
}
}
.article-hero-video {
max-width: clamp(calc(300px * 16 / 9), calc((100vh - 160px) * 16 / 9), 1000px);
max-width: clamp(calc(300px * 16 / 9), calc((100svh - 160px) * 16 / 9), 1000px);
margin-inline: auto;
margin-bottom: 32px;
}
@media (min-width: 768px) {
.article-hero-video {
margin-bottom: 48px;
}
}
.article-hero-video > figure {
margin: 0;
}
.article-content > * {
margin-block: 0;
}
.article-content > * + * {
margin-top: var(--gap);
}
.article-content > h1 {
font-size: 33px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.5px;
}
@media (min-width: 1024px) {
.article-content > h1 {
font-size: 49px;
line-height: 1.1;
letter-spacing: -0.7px;
}
}
.article-content > h2 {
font-size: 27px;
line-height: 1.2;
font-weight: 700;
}
@media (min-width: 1024px) {
.article-content > h2 {
font-size: 39px;
line-height: 1.15;
letter-spacing: -0.4px;
}
}
.article-content > h3 {
font-size: 22px;
line-height: 1.25;
font-weight: 600;
}
@media (min-width: 1024px) {
.article-content > h3 {
font-size: 31px;
line-height: 1.2;
}
}
.article-content > h4 {
font-size: 20px;
line-height: 1.3;
font-weight: 600;
}
@media (min-width: 1024px) {
.article-content > h4 {
font-size: 25px;
line-height: 1.3;
}
}
.article-content > h5 {
font-size: 17px;
line-height: 1.35;
font-weight: 600;
}
.article-content > h6 {
font-size: 14px;
line-height: 1.4;
font-weight: 700;
}
.article-content > h2 {
margin-top: var(--gap-before-h2);
}
.article-content > h3 {
margin-top: var(--gap-before-h3);
}
.article-content > h2 + * {
margin-top: var(--gap-after-heading);
}
.article-content > h3 + * {
margin-top: var(--gap-after-h3);
}
.article-content > h2 + h3 {
margin-top: var(--gap-h2-to-h3);
}
.article-content > ul,
.article-content > ol {
padding-inline-start: var(--list-padding);
margin-top: var(--gap-list-block);
}
.article-content > ul > li + li,
.article-content > ol > li + li {
margin-top: var(--gap-list-item);
}
.article-content > .blog-index-cards-list {
padding-inline-start: 0;
}
.article-content > .blog-index-cards-list > .blog-index-card {
margin-top: 0;
}
.article-content > blockquote {
margin-top: var(--gap-quote);
}
.article-content > blockquote + * {
margin-top: var(--gap-quote);
}
.article-content figure {
margin: 0;
}
.article-content > figure {
margin-top: var(--gap-figure);
}
.article-content > figure + * {
margin-top: var(--gap-figure);
}
.article-content > figure:first-child {
margin-top: 0;
}
.article-content figure > * + * {
margin-top: 12px;
}
.article-content figure img,
.article-content figure iframe,
.article-content figure video {
display: block;
max-width: 100%;
}
.article-content > table,
.article-content > .table-responsive {
width: 100%;
border-collapse: collapse;
}
.article-content > .table-responsive {
overflow-x: auto;
}
.article-content--block {
margin-top: 40px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
.article-content--block {
margin-top: 60px;
margin-bottom: 60px;
}
}
.article-cta {
display: flex;
justify-content: center;
margin-top: 30px;
}
@media (min-width: 768px) {
.article-cta {
margin-top: 50px;
}
}
.article-quote-2026 {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 12px;
margin-inline: 0;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
@media (min-width: 576px) {
.article-quote-2026 {
gap: 40px;
}
}
@media (min-width: 768px) {
.article-quote-2026 {
gap: 60px;
}
}
.article-quote-2026__icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
color: var(--text-default);
line-height: 0;
}
.article-quote-2026__icon svg,
.article-quote-2026__icon img {
display: block;
width: 100%;
height: 100%;
}
@media (min-width: 576px) {
.article-quote-2026__icon {
width: 56px;
height: 56px;
}
}
@media (min-width: 768px) {
.article-quote-2026__icon {
width: 64px;
height: 64px;
}
}
.article-quote-2026__body {
flex: 1 1 0;
min-width: 0;
}
.article-quote-2026__text {
margin: 0;
font-style: italic;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
color: var(--text-default);
}
@media (min-width: 576px) {
.article-quote-2026__text {
font-size: 20px;
}
}
.article-quote-2026__cite {
margin: 14px 0 0;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 1.6;
color: var(--text-default);
}
@media (min-width: 1024px) {
.article-quote-2026__cite {
margin-top: 16px;
}
}
.article-quote-2026__cite a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
color: inherit;
}
.article-content .table-responsive {
border-radius: 8px;
box-shadow: 0 1px 12.2px 0 rgba(0, 0, 0, 0.13);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.article-content .table-responsive > table,
.article-content > table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: 16px;
line-height: 1.6;
color: #1f1f38;
}
.article-content > table {
border-radius: 8px;
box-shadow: 0 1px 12.2px 0 rgba(0, 0, 0, 0.13);
overflow: hidden;
}
.article-content .table-responsive thead th,
.article-content > table thead th {
background: linear-gradient(180deg, #c5d6fb 0%, #d8f4ff 100%);
padding: 16px 17px;
font-weight: 400;
text-align: left;
vertical-align: middle;
}
.article-content .table-responsive thead tr:first-child th:first-child,
.article-content > table thead tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.article-content .table-responsive thead tr:first-child th:last-child,
.article-content > table thead tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.article-content .table-responsive tbody td,
.article-content > table tbody td {
padding: 16px 17px;
vertical-align: top;
background: #ffffff;
}
.article-content .table-responsive tbody td:first-child,
.article-content > table tbody td:first-child {
background: #f4fcff;
}
.article-content .table-responsive tbody tr + tr td,
.article-content > table tbody tr + tr td {
border-top: 1px solid #e9e9e9;
}
.article-content .table-responsive tbody tr + tr td:first-child,
.article-content > table tbody tr + tr td:first-child {
border-top-color: #dcdee2;
}
.article-content .table-responsive tbody tr:last-child td:first-child,
.article-content > table tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.article-content .table-responsive tbody tr:last-child td:last-child,
.article-content > table tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
@media (max-width: 767px) {
.article-content .table-responsive thead th,
.article-content > table thead th,
.article-content .table-responsive tbody td,
.article-content > table tbody td {
padding: 14px;
font-size: 14px;
}
.article-content .table-responsive > table,
.article-content > table {
font-size: 14px;
min-width: 560px;
}
}
.article-aside {
display: none;
}
.blog-toc .blog-toc-cta {
margin-top: 20px;
font-style: normal;
}
.blog-toc .blog-toc-cta.btn-2026 {
width: 100%;
height: auto;
min-height: 48px;
padding: 12px;
font-size: 13px;
letter-spacing: 0;
line-height: 1.3;
text-align: left;
font-weight: 400;
box-shadow:
0 4px 32px 0 rgba(0, 0, 0, 0.08),
0 2px 27.9px 0 rgba(0, 0, 0, 0.07),
0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
.blog-toc .blog-toc-cta.btn-2026:hover {
box-shadow:
0 6px 36px 0 rgba(0, 0, 0, 0.12),
0 4px 32px 0 rgba(0, 0, 0, 0.10),
0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.article-main:not(:has(> header [itemprop="description"])) > section[itemprop="articleBody"] {
margin-top: 28px;
}
@media (min-width: 1024px) {
.article-main:not(:has(> header [itemprop="description"])) > section[itemprop="articleBody"] {
margin-top: 32px;
}
}
.blog-toc--inline {
font-size: 16px;
line-height: 1.5;
padding: 20px 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-toc--inline > h2 {
font-size: 13px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500, #9fa3a9);
margin: 0 0 16px;
}
.blog-toc--inline .toc-list {
list-style: none;
padding: 0 0 0 20px;
margin: 0;
}
.blog-toc--inline .toc-list > li + li {
margin-top: 8px;
}
.blog-toc--inline .toc-list a {
color: var(--gray-600, #6f757e);
text-decoration: none;
transition: color 0.15s ease;
}
.blog-toc--inline .toc-list a:hover {
color: var(--dark, #111);
text-decoration: underline;
}
.blog-toc--inline .toc-list ul {
list-style: none;
padding: 0;
margin: 8px 0 0 16px;
}
.blog-toc--inline .toc-list ul > li + li {
margin-top: 6px;
}
@media (min-width: 1280px) {
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) min(720px, 100%) minmax(0, 1fr);
column-gap: 28px;
}
.article-aside {
display: block;
grid-column: 1;
justify-self: end;
align-self: start;
width: 100%;
max-width: 240px;
position: sticky;
top: 100px;
}
.article-main {
grid-column: 2;
min-width: 0;
}
.blog-toc--inline {
display: none;
}
.blog-toc--sticky {
font-size: 13px;
line-height: 1.4;
}
.blog-toc--sticky > h2 {
font-size: 13px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500, #9fa3a9);
margin: 0 0 16px;
}
.blog-toc--sticky .toc-list {
list-style: none;
padding: 0;
margin: 0;
max-height: calc(100vh - 260px);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog-toc--sticky .toc-list::-webkit-scrollbar {
display: none;
}
.blog-toc--sticky .toc-list > li {
border-left: 2px solid var(--gray-300, #e7e8e9);
padding: 8px 0 8px 12px;
transition: border-color 0.15s ease;
}
.blog-toc--sticky .toc-list ul {
list-style: none;
padding: 0;
margin: 4px 0 0;
}
.blog-toc--sticky .toc-list ul li {
padding: 4px 0 4px 16px;
}
.blog-toc--sticky .toc-list ul li:last-child {
padding-bottom: 0;
}
.blog-toc--sticky .toc-list > li + li {
margin-top: 4px;
}
.blog-toc--sticky .toc-list a {
color: var(--gray-600, #6f757e);
text-decoration: none;
transition: color 0.15s ease;
display: inline-grid;
}
.blog-toc--sticky .toc-list a::before {
content: attr(data-text);
grid-area: 1 / 1;
font-weight: 600;
visibility: hidden;
pointer-events: none;
}
.blog-toc--sticky .toc-list a > span {
grid-area: 1 / 1;
}
.blog-toc--sticky .toc-list a:hover {
color: var(--dark, #111);
}
.blog-toc--sticky .toc-list li.is-active {
border-left-color: var(--brand-blue-strong, #4191f5);
}
.blog-toc--sticky .toc-list > li:has(li.is-active) {
border-left-color: var(--brand-blue-strong, #4191f5);
}
.blog-toc--sticky .toc-list li.is-active > a {
color: var(--dark, #111);
font-weight: 600;
}
}
.faq-item > summary.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
list-style: none;
}
.faq-item > summary.faq-question::-webkit-details-marker {
display: none;
}
.faq-item > summary.faq-question > h3 {
margin: 0;
flex: 1 1 auto;
}
.faq-item > summary.faq-question::after {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px;
mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px;
transition: transform 0.2s ease;
}
.faq-item[open] > summary.faq-question::after {
transform: rotate(180deg);
}
.faq-item[open] > .faq-answer {
margin-top: 12px;
}
.faq-item > summary.faq-question:focus-visible {
outline: 2px solid var(--brand-blue-strong, #4191f5);
outline-offset: 4px;
border-radius: 4px;
}
@media (min-width: 1280px) {
.article-related {
grid-column: 3;
align-self: start;
justify-self: start;
max-width: 280px;
margin-top: 0;
margin-bottom: 0;
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
scrollbar-width: none;
}
.article-related::-webkit-scrollbar {
display: none;
}
.article-related > h2 {
font-size: 13px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500, #9fa3a9);
margin: 0 0 20px;
}
.article-content.article-related > h2 + * {
margin-top: 0;
}
.article-content.article-related .articles-grid {
column-gap: 0;
row-gap: 24px;
}
.article-related .blog-index-card__title {
font-size: 14px;
line-height: 1.4;
}
.article-related .articles-grid > .blog-index-card:not(.blog-index-card--featured) .blog-index-card__title {
margin-bottom: 8px;
}
.article-related .blog-index-card__meta {
font-size: 12px;
line-height: 1.4;
gap: 6px 12px;
}
.article-related .blog-index-card__avatar {
width: 20px;
height: 20px;
}
}
.article-content figure img.glx-zoomable {
cursor: zoom-in;
}
.glx-lightbox {
position: fixed;
inset: 0;
z-index: 2147483002;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 18, 26, 0.88);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.glx-lightbox.is-open {
display: flex;
}
.glx-lightbox__img {
max-width: 95vw;
max-height: 92vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
cursor: zoom-out;
}
.glx-lightbox__close {
position: absolute;
top: 16px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 30px;
line-height: 1;
cursor: pointer;
transition: background 0.12s ease;
}
.glx-lightbox__close:hover {
background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 600px) {
.glx-lightbox {
padding: 12px;
}
.glx-lightbox__close {
top: 10px;
right: 12px;
}
}
.video-modal[open] {
display: flex;
}
.video-modal {
display: none;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
}
.video-modal::backdrop {
background: rgba(0, 0, 0, 0.8);
}
.video-modal__inner {
position: relative;
margin: auto;
width: min(90vw, 960px);
max-height: 90vh;
}
@media (max-width: 575px) {
.video-modal__inner {
width: 100vw;
padding: 0 12px;
}
}
.video-modal__frame-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
background: #000;
}
@media (max-width: 575px) {
.video-modal__frame-wrap {
border-radius: 8px;
}
}
.video-modal__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-modal__close {
position: fixed;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.15);
color: #fff;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.video-modal__close > .i {
font-size: 18px;
line-height: 1;
}
@media (min-width: 1024px) {
.video-modal__close > .i {
font-size: 20px;
}
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
background: rgba(255, 255, 255, 0.3);
outline: none;
}
@media (min-width: 1024px) {
.video-modal__close {
top: 24px;
right: 24px;
width: 48px;
height: 48px;
}
}
body.video-modal-open {
overflow: hidden;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 12px;
container-type: inline-size;
}
.newsletter-form-row {
display: flex;
flex-direction: column;
gap: 12px;
}
@container (min-width: 400px) {
.newsletter-form-row {
flex-direction: row;
align-items: stretch;
}
}
.newsletter-form-input {
flex: 1 1 auto;
min-width: 0;
height: 48px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.12);
color: var(--brand-white);
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.14px;
appearance: none;
outline: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
}
.newsletter-form-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-form-input:hover {
border-color: rgba(255, 255, 255, 0.85);
}
.newsletter-form-input:focus {
border-color: var(--brand-white);
background-color: rgba(255, 255, 255, 0.18);
outline: none;
}
.newsletter-form-input:focus-visible {
outline: 2px solid var(--brand-white);
outline-offset: 2px;
}
.newsletter-form-input:-webkit-autofill,
.newsletter-form-input:-webkit-autofill:hover,
.newsletter-form-input:-webkit-autofill:focus,
.newsletter-form-input:-webkit-autofill:active {
-webkit-text-fill-color: var(--brand-white);
-webkit-box-shadow: 0 0 0 1000px #0674b538 inset;
box-shadow: 0 0 0 1000px #0674b538 inset;
caret-color: var(--brand-white);
transition:
background-color 600000s 0s ease-in-out,
color 600000s 0s ease-in-out;
}
@media (min-width: 1280px) {
.newsletter-form-input {
height: 64px;
padding: 0 20px;
font-size: 16px;
letter-spacing: 0.16px;
}
}
.newsletter-form-btn {
flex: 0 0 auto;
width: 100%;
}
@container (min-width: 400px) {
.newsletter-form-btn {
width: auto;
}
}
.newsletter-form-policy {
margin: 0;
font-family: "Onest", sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 1024px) {
.newsletter-form-policy {
font-size: 12px;
}
}
.newsletter-form-policy a {
color: var(--brand-white);
text-decoration: underline;
text-underline-offset: 2px;
}
.newsletter-form-policy a:hover {
text-decoration: none;
}
.newsletter-form-error {
margin-top: 8px;
padding: 10px 14px;
border-radius: 4px;
background-color: rgba(244, 67, 54, 0.18);
color: var(--brand-white);
font-family: "Onest", sans-serif;
font-size: 13px;
line-height: 1.5;
}
.newsletter-success {
color: var(--brand-white);
}
.newsletter-success-title {
margin: 0 0 8px;
font-family: "Onest", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
@media (min-width: 768px) {
.newsletter-success-title {
font-size: 28px;
}
}
.newsletter-success-text {
margin: 0;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 1024px) {
.newsletter-success-text {
font-size: 16px;
}
}
.newsletter-modal[open] {
display: flex;
}
.newsletter-modal {
display: none;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
}
.newsletter-modal::backdrop {
background: rgba(0, 0, 0, 0.6);
}
.newsletter-modal__inner {
position: relative;
margin: auto;
width: calc(100% - 32px);
max-width: 560px;
max-height: calc(100vh - 32px);
overflow-y: auto;
background: var(--brand-white);
border-radius: 16px;
box-shadow: var(--shadow-btn);
padding: 28px 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
.newsletter-modal__inner {
padding: 40px;
gap: 20px;
}
}
.newsletter-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: rgba(17, 17, 17, 0.06);
color: var(--text-default);
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.newsletter-modal__close:hover,
.newsletter-modal__close:focus-visible {
background: rgba(17, 17, 17, 0.12);
outline: none;
}
.newsletter-modal__close > .i {
font-size: 16px;
line-height: 1;
}
@media (min-width: 768px) {
.newsletter-modal__close {
top: 16px;
right: 16px;
width: 44px;
height: 44px;
}
.newsletter-modal__close > .i {
font-size: 18px;
}
}
.newsletter-modal__title {
margin: 0;
padding-right: 48px;
font-family: "Onest", sans-serif;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
color: var(--text-default);
}
@media (min-width: 768px) {
.newsletter-modal__title {
font-size: 32px;
}
}
.newsletter-modal__text {
margin: 0;
font-family: "Onest", sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--text-muted);
}
.newsletter-modal__form {
margin-top: 8px;
}
@media (min-width: 768px) {
.newsletter-modal__form {
margin-top: 12px;
}
}
@media (max-width: 1279px) {
.newsletter-modal .newsletter-form-btn {
font-size: 14px;
}
}
.newsletter-modal .newsletter-form-input {
border-color: rgba(17, 17, 17, 0.2);
background-color: transparent;
color: var(--text-default);
}
.newsletter-modal .newsletter-form-input::placeholder {
color: rgba(17, 17, 17, 0.45);
}
.newsletter-modal .newsletter-form-input:hover {
border-color: rgba(17, 17, 17, 0.45);
}
.newsletter-modal .newsletter-form-input:focus {
border-color: var(--text-default);
background-color: transparent;
}
.newsletter-modal .newsletter-form-input:focus-visible {
outline: 2px solid var(--text-default);
outline-offset: 2px;
}
.newsletter-modal .newsletter-form-input:-webkit-autofill,
.newsletter-modal .newsletter-form-input:-webkit-autofill:hover,
.newsletter-modal .newsletter-form-input:-webkit-autofill:focus,
.newsletter-modal .newsletter-form-input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text-default);
-webkit-box-shadow: 0 0 0 1000px var(--brand-white) inset;
box-shadow: 0 0 0 1000px var(--brand-white) inset;
caret-color: var(--text-default);
}
.newsletter-modal .newsletter-form-policy {
color: var(--text-muted);
}
.newsletter-modal .newsletter-form-policy a {
color: var(--text-default);
text-decoration: underline;
}
.newsletter-modal .newsletter-form-policy a:hover {
text-decoration: none;
}
.newsletter-modal .newsletter-form-error {
background-color: rgba(255, 73, 116, 0.12);
color: #b80027;
}
.newsletter-modal .newsletter-success,
.newsletter-modal .newsletter-success-title {
color: var(--text-default);
}
.newsletter-modal .newsletter-success-text {
color: var(--text-muted);
}
body.newsletter-modal-open {
overflow: hidden;
}
[data-banner-inline="share-story"] {
position: relative;
overflow: hidden;
}
[data-banner-inline="share-story"]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("/images/business/v2/security-bg.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
z-index: 0;
}
[data-banner-inline="share-story"] > .share-story-banner {
position: relative;
z-index: 1;
}
.share-story-banner {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 1024px) {
.share-story-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 32px;
}
}
.share-story-banner-title {
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.share-story-banner-cta {
align-self: flex-start;
flex: 0 0 auto;
width: 200px;
}
@media (min-width: 1024px) {
.share-story-banner-cta {
align-self: center;
}
}
@media (min-width: 1280px) {
.js-banner-inline-only {
display: none !important;
}
}
.banner-widget {
display: none;
}
@media (min-width: 1280px) {
.banner-widget {
display: block;
position: fixed;
left: 24px;
bottom: 24px;
z-index: 1900;
width: 220px;
padding: 18px 16px;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(20, 24, 48, 0.22);
color: var(--light);
opacity: 0;
transform: translateX(-24px);
transition:
opacity 0.28s ease,
transform 0.28s ease,
bottom 0.2s ease;
pointer-events: none;
}
body:has(.cookies-popover:not(.hidden)) .banner-widget {
bottom: calc(24px + var(--cookies-popover-h, 80px));
}
.banner-widget[hidden] {
display: none;
}
.banner-widget--active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.banner-widget--share-story {
background: var(--gradient-secondary);
}
}
.banner-widget-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: var(--light);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.banner-widget-close:hover {
background: rgba(255, 255, 255, 0.32);
}
.banner-widget-close:focus-visible {
outline: 2px solid var(--brand-white);
outline-offset: 2px;
}
.banner-widget-close .i {
font-size: 12px;
}
.banner-widget-heading {
margin: 0 0 12px;
font-family: "Onest", sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
}
.banner-widget-cta {
width: 100%;
margin-top: 4px;
}
.cta-banner {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 960px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
padding: 40px 20px;
border-radius: 16px;
color: var(--light);
}
@media (min-width: 768px) {
.cta-banner {
padding: 40px 60px;
}
}
@media (min-width: 1024px) {
.cta-banner {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 40px;
margin-top: 60px;
margin-bottom: 60px;
padding: 40px 120px;
}
}
.cta-banner__content {
flex: 1;
min-width: min-content;
}
.cta-banner__title {
margin: 0 0 10px;
font-size: 28px;
line-height: 1.2;
font-weight: 400;
color: var(--light);
}
.cta-banner__subtitle {
margin: 0;
font-size: 32px;
line-height: 1.1;
font-weight: 700;
}
@media (min-width: 768px) {
.cta-banner__subtitle {
font-size: 46px;
}
}
.cta-banner__action {
flex-shrink: 0;
width: auto;
margin-top: 20px;
}
.cta-banner--with-media .cta-banner__content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cta-banner__media {
flex-shrink: 0;
display: flex;
justify-content: center;
}
.cta-banner__video {
display: block;
width: 100%;
max-width: 416px;
border-radius: 8px;
}
.cta-banner__picture {
display: block;
max-height: 240px;
width: auto;
height: auto;
max-width: 100%;
border-radius: 8px;
}
@media (min-width: 1024px) {
.cta-banner--with-media {
padding: 40px 60px;
}
.cta-banner--with-media .cta-banner__content,
.cta-banner--with-media .cta-banner__media {
flex: 1 1 0;
min-width: 0;
}
}
@media (min-width: 1280px) {
.cta-banner--with-media {
padding-left: 30px;
padding-right: 30px;
}
}
.cta-banner--magenta {
background: var(--magenta-gradient);
}
.cta-banner--purple-blue {
background: linear-gradient(319.59deg, #4cc3c5 11.62%, #35b3e0 55.71%, #61a1d4 73.45%);
}
.cta-banner--orange-pink {
background: linear-gradient(321.7deg, #e78354 15.24%, #bf5998 85.63%);
}
.cta-banner--pink {
background: linear-gradient(224.17deg, #e17587 7.37%, #ac76d2 83.25%);
}
.cta-banner--primary-gradient {
background: var(--primary-gradient);
}
.faq-panel {
padding: 30px;
border-radius: 16px;
background-color: var(--gray-200);
}
.faq-panel-show-active {
display: none;
}
.is-active .faq-panel-show-active {
display: block;
}
.faq-panel-hide-active {
display: block;
}
.is-active .faq-panel-hide-active {
display: none;
}
.faq-panel-content {
font-size: 20px;
padding: 20px 30px 0;
}
.faq-panel-content-md {
font-size: 17px;
padding: 20px 30px 0;
}
.faq-2026 {
margin: 56px 0;
}
@media (min-width: 768px) {
.faq-2026 {
margin: 72px 0;
}
}
@media (min-width: 1280px) {
.faq-2026 {
margin: 120px 0;
}
}
.faq-2026-title {
text-align: center;
margin: 0 0 32px;
}
@media (min-width: 1024px) {
.faq-2026-title {
margin-bottom: 48px;
}
}
.faq-2026-list {
max-width: 860px;
margin: 0 auto;
}
.faq-2026-list > .relative {
margin-bottom: 24px;
border-radius: 16px;
overflow: hidden;
background-color: var(--surface-card-soft, #f3f3f4);
}
.faq-2026-list > .relative:last-child {
margin-bottom: 0;
}
.faq-2026-list .faq-panel[data-tabs-toggle] {
padding: 22px 28px;
}
.faq-2026-list .faq-panel h4 {
margin: 0;
font-family: "Onest", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.2px;
color: var(--text-default);
}
@media (min-width: 1024px) {
.faq-2026-list .faq-panel h4 {
font-size: 20px;
}
}
.faq-2026-list .faq-panel-content,
.faq-2026-list .faq-panel-content-md {
padding: 0 28px 24px;
line-height: 1.55;
color: var(--text-muted);
}
.faq-2026-list .faq-panel-content a,
.faq-2026-list .faq-panel-content-md a {
text-decoration: underline;
}
.faq-2026-list .faq-panel-content ol,
.faq-2026-list .faq-panel-content ul,
.faq-2026-list .faq-panel-content-md ol,
.faq-2026-list .faq-panel-content-md ul {
margin: 0;
padding-left: 20px;
}
.results-band-2026 {
position: relative;
overflow: hidden;
background-color: #f6f6f6;
padding: 64px 0;
@media (min-width: 768px) {
padding: 80px 0;
}
@media (min-width: 1280px) {
padding: 120px 0;
}
}
.results-band-2026::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("/images/business/v2/hero-bg.svg");
background-repeat: no-repeat;
background-position: center top;
opacity: 0.6;
mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.results-band-2026-bg {
position: absolute;
z-index: 0;
right: -8%;
top: 8%;
width: 70%;
height: 88%;
pointer-events: none;
background: linear-gradient(304.64deg, #ffd086 25%, #f4a3a3 60%, #da72ac 92%);
opacity: 0.1;
filter: blur(160px);
}
.results-band-2026 .page-container {
position: relative;
z-index: 1;
}
.results-band-2026-title {
text-align: center;
margin: 0 0 16px;
@media (min-width: 1280px) {
margin-bottom: 20px;
}
}
.results-band-2026-subtitle {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
@media (min-width: 1024px) {
margin-bottom: 64px;
}
}
.results-band-2026-grid {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
@media (min-width: 576px) {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
@media (min-width: 1024px) {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
}
.results-band-2026-item {
text-align: center;
}
.results-band-2026-value {
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 44px;
line-height: 1;
letter-spacing: -0.88px;
margin-bottom: 14px;
background: linear-gradient(140.15deg, #ffd086 3.48%, #da72ac 59.54%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
@media (min-width: 1280px) {
font-size: 50px;
letter-spacing: -1px;
}
}
.results-band-2026-prefix {
font-size: 0.7em;
font-weight: 800;
}
.results-band-2026-label {
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.35;
color: #222;
margin-bottom: 10px;
}
.results-band-2026-desc {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--text-muted);
}
.info-cards-2026 {
--info-cards-icon-h: 64px;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
@media (min-width: 576px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (min-width: 1280px) {
--info-cards-icon-h: 72px;
}
}
.info-cards-2026--2up {
@media (min-width: 1024px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.info-cards-2026--4up {
@media (min-width: 1024px) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.info-cards-2026-card {
display: flex;
flex-direction: column;
background: var(--brand-white);
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 16px;
padding: 24px;
@media (min-width: 768px) {
padding: 28px;
border-radius: 20px;
}
@media (min-width: 1280px) {
padding: 32px;
}
}
.info-cards-2026-title {
margin: 0 0 12px;
}
.info-cards-2026-text {
margin: 0;
color: var(--text-muted);
}
.blog-post {
font-size: 19px;
line-height: 30px;
}
@media (min-width: 768px) {
.blog-post {
font-size: 18px;
line-height: 26px;
}
}
.blog-hero-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.blog-toc {
font-style: normal;
}
.blog-meta {
display: flex;
align-items: center;
gap: 24px;
font-size: 12px;
line-height: 16px;
font-weight: normal;
}
.blog-meta__author {
display: flex;
align-items: center;
gap: 12px;
color: inherit;
text-decoration: none;
}
.blog-meta__author:hover .blog-meta__author-name {
text-decoration: underline;
}
.blog-meta__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--gray-300);
flex-shrink: 0;
}
.blog-meta__date {
color: var(--gray-600);
}
.blog-meta__reading-time {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--gray-600);
}
.blog-meta__reading-time .i {
font-size: 14px;
}
.blog-post img:not(.blog-meta__avatar) {
border-radius: 16px;
}
.blog-post b {
font-weight: 700;
}
.blog-post .p-list {
margin: 12px 0;
}
.blog-quote {
font-style: italic;
padding: 20px 60px;
border-radius: 16px;
position: relative;
background-color: var(--gray-200);
margin: 0;
}
.blog-quote:before {
content: "\e917";
position: absolute;
left: 20px;
top: 20px;
color: var(--primary);
font-family: "glabix-iconset" !important;
}
.blog-quote:after {
content: "\e918";
position: absolute;
right: 20px;
bottom: 20px;
color: var(--primary);
font-family: "glabix-iconset" !important;
}
.blog-progress {
display: flex;
overflow: hidden;
}
.blog-progress .bar {
height: 100%;
padding: 5px;
}
.blog-diagram-1 {
--left-width: auto;
}
.blog-diagram-1 .text-hg {
font-size: 100px;
line-height: 1.15;
font-weight: 700;
}
.blog-diagram-1-l {
background-color: #323232;
flex-basis: var(--left-width);
border-radius: 16px 16px 0 0;
padding: 30px;
font-size: 30px;
line-height: 1.15;
display: flex;
justify-content: center;
align-items: center;
}
.blog-diagram-1-r {
border-radius: 0 0 16px 16px;
padding: 30px;
flex-basis: calc(100% - var(--left-width));
font-size: 22px;
background: linear-gradient(0deg, #21bf60, #21bf60 48%, #007c55 48%, #007c55);
}
.blog-diagram-1-r .text {
display: inline-block;
max-width: 100%;
font-weight: 500;
}
@media (min-width: 880px) {
.blog-diagram-1 {
--left-width: 375px;
display: flex;
flex-wrap: wrap;
}
.blog-diagram-1-r .text {
max-width: 60%;
}
.blog-diagram-1-l {
border-radius: 16px 0 0 16px;
}
.blog-diagram-1-r {
border-radius: 0 16px 16px 0;
background: linear-gradient(141.5deg, #21bf60, #21bf60 50%, #007c55 50%, #007c55);
}
}
@media (min-width: 1024px) {
.blog-diagram-1-l {
padding: 40px;
}
.blog-diagram-1-r {
padding: 40px;
}
}
.blog-diagram-2 {
--left-width: auto;
border-radius: 16px;
background-color: #f8f8fa;
}
.blog-diagram-2 .text-hg {
font-size: 100px;
line-height: 1.15;
font-weight: 700;
}
.blog-diagram-2-l {
background-color: #323232;
flex-basis: var(--left-width);
border-radius: 16px 16px 0 0;
padding: 30px;
font-size: 22px;
line-height: 1.15;
display: flex;
justify-content: center;
align-items: center;
}
.blog-diagram-2-r {
border-radius: 0 0 16px 16px;
padding: 30px;
flex-basis: calc(100% - var(--left-width));
font-size: 14px;
line-height: 1.2;
}
@media (min-width: 880px) {
.blog-diagram-2 {
--left-width: 340px;
display: flex;
flex-wrap: wrap;
}
.blog-diagram-2-l {
border-radius: 16px 0 0 16px;
background-color: transparent;
overflow: hidden;
position: relative;
}
.blog-diagram-2-l:before {
content: "";
display: block;
position: absolute;
width: 800px;
height: 800px;
border-radius: 50%;
background-color: #323232;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.blog-diagram-2-r {
border-radius: 0 16px 16px 0;
}
}
@media (min-width: 1024px) {
.blog-diagram-2-l {
padding: 40px;
}
.blog-diagram-2-r {
padding: 40px;
}
}
.blog-diagram-2-r .blog-diagram-row {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 20px;
}
.blog-diagram-2-r .blog-diagram-row > * {
flex: 1 1 100%;
min-width: 0;
}
@media (min-width: 768px) {
.blog-diagram-2-r .blog-diagram-row > * {
flex: 1 1 0;
}
}
.blog-diagram-3 {
--left-width: auto;
border-radius: 16px;
background-color: #f8f8fa;
}
.blog-diagram-3 .blog-progress {
margin-left: -30px;
}
.blog-diagram-3 .blog-progress .bar {
padding-left: 30px;
}
.blog-diagram-3-l {
background-color: #007c55;
flex-basis: var(--left-width);
border-radius: 16px 16px 0 0;
padding: 30px;
font-size: 26px;
line-height: 1.15;
display: flex;
justify-content: center;
align-items: center;
}
.blog-diagram-3--negative .blog-diagram-3-l {
background-color: #7c1600;
}
.blog-diagram-3-l .text-primary {
color: #21bf60 !important;
}
.blog-diagram-3--negative .blog-diagram-3-l .text-primary {
color: #bf6d21 !important;
}
.blog-diagram-3-r {
border-radius: 0 0 16px 16px;
padding: 30px;
flex-basis: calc(100% - var(--left-width));
font-size: 16px;
line-height: 1.2;
}
@media (min-width: 880px) {
.blog-diagram-3 {
--left-width: 400px;
display: flex;
flex-wrap: wrap;
}
.blog-diagram-3.blog-diagram-3--negative .blog-progress {
margin-left: auto;
margin-right: -30px;
}
.blog-diagram-3.blog-diagram-3--negative {
flex-direction: row-reverse;
}
.blog-diagram-3.blog-diagram-3--negative .blog-progress {
flex-direction: row-reverse;
}
.blog-diagram-3-l {
border-radius: 16px 0 0 16px;
}
.blog-diagram-3--negative .blog-diagram-3-l {
border-radius: 0 16px 16px 0;
}
.blog-diagram-3-r {
border-radius: 0 16px 16px 0;
}
.blog-diagram-3--negative .blog-diagram-3-r {
border-radius: 16px 0 0 16px;
}
}
@media (min-width: 1024px) {
.blog-diagram-3-l {
padding: 40px;
}
.blog-diagram-3-r {
padding: 40px;
}
.blog-diagram-3 .blog-progress {
margin-left: -40px;
}
.blog-diagram-3--negative.blog-diagram-3 .blog-progress {
margin-left: auto;
margin-right: -40px;
}
.blog-diagram-3 .blog-progress .bar {
padding-left: 40px;
}
}
.office-big-number {
font-size: 50px;
line-height: 70px;
font-weight: 600;
}
@media (min-width: 1024px) {
.office-big-number {
font-size: 120px;
line-height: 146px;
font-weight: 600;
}
}
.manager-avatar {
width: 88px;
}
.office-card-description {
font-size: 22px;
font-weight: 600;
line-height: 28px;
}
@media (min-width: 1024px) {
.office-card-description {
font-size: 49px;
font-weight: 600;
line-height: 56px;
}
}
.office-card-image {
border-radius: 16px 16px 0 0 !important;
}
.office-card-text-wrapper {
padding: 10px 20px 10px 20px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
@media (min-width: 1024px) {
.office-card-text-wrapper {
padding: 10px 20px 10px 60px;
}
}
.blog-post .quote-block {
position: relative;
background-color: var(--gray-200);
background-repeat: no-repeat;
background-position: center left;
}
.blog-post .quote-block {
position: relative;
background-color: var(--gray-200);
background-repeat: no-repeat;
background-position: center left;
}
.blog-post .quote-block-1 {
background-image: url(/images/blog/47/blog-quote-bg.svg);
}
.blog-post .quote-block-2 {
background-image: url(/images/blog/49/blog-quote-bg.svg);
}
.faq-item {
background-color: var(--gray-200);
border-radius: 20px;
padding: 24px;
margin-bottom: 30px;
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-item h3 {
font-size: 18px;
line-height: 24px;
font-weight: 700;
margin-bottom: 12px;
}
.faq-item p {
font-size: 16px;
line-height: 24px;
}
.blog-index-card a {
color: inherit;
text-decoration: none;
}
.blog-index-card a:hover {
text-decoration: none;
}
.blog-index-card__image-wrapper {
display: block;
margin-bottom: 20px;
}
.blog-index-card__image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 4px;
}
.blog-index-card__tag {
display: inline-block;
font-size: 13px;
line-height: 1;
font-weight: 500;
padding: 6px 12px;
border: 1px solid var(--gray-500);
border-radius: 34px;
margin-bottom: 12px;
}
.blog-index-card__title {
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px;
width: fit-content;
}
.blog-index-card__title a {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-index-card__title a:hover {
text-decoration: underline;
}
.blog-index-card__author:hover .blog-index-card__author-name {
text-decoration: underline;
}
.blog-index-card__date {
white-space: nowrap;
}
.blog-index-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
font-size: 12px;
line-height: 16px;
}
.blog-index-card__author {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.blog-index-card__info {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.blog-index-card--featured .blog-index-card__info {
display: contents;
}
.blog-index-card__avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--gray-300);
flex-shrink: 0;
}
.blog-index-card__reading-time {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--gray-600);
}
.blog-index-card__reading-time .i {
font-size: 14px;
}
.blog-index-card__video {
display: inline-flex;
align-items: center;
color: var(--gray-600);
}
.blog-index-card__video .i {
font-size: 16px;
}
.media-about-us .media-info {
font-size: 14px;
height: 38px;
}
.media-about-us .media-info img {
height: auto;
max-height: 38px;
width: auto;
max-width: 65%;
}
.media-about-us .media-item-header {
font-size: 18px;
line-height: 22px;
}
.media-about-us a:hover {
text-decoration: none;
}
.media-about-us a:hover .underline {
text-decoration: underline;
}
.media-about-us .panel-primary {
padding: 60px 48px;
}
.media-about-us .panel-primary h3 {
font-size: 27px;
line-height: 32px;
}
.media-about-us .logo-height-30 {
height: 30px !important;
}
.media-about-us .logo-height-36 {
height: 36px !important;
}
.media-about-us .logo-height-34{
height: 34px !important;
}
.user-cases .lh-32 {
line-height: 32px;
}
.hero {
background-color: var(--primary-200);
padding: 40px 20px;
}
@media (min-width: 768px) {
.hero {
padding: 60px;
}
}
@media (min-width: 1024px) {
.hero {
padding: 60px 20px 120px calc(100% * (1 / 12));
position: relative;
}
}
@media (min-width: 1024px) {
.hero h1 {
font-size: 40px;
line-height: 48px;
}
}
.pricing-price-sales-tag {
font-weight: 500;
font-size: 16px;
line-height: 30px;
color: var(--light);
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
background-color: var(--primary);
border-radius: 28px;
}
.plan-item .pricing-price-sales-tag {
font-size: 13px;
line-height: 16px;
padding: 0.25rem 0.5rem;
}
.error-wrapper {
display: flex;
width: 100%;
padding: 100px 20px;
align-items: center;
justify-content: center;
flex-direction: column;
}
.error-wrapper h1 {
font-weight: 700;
font-size: 27px;
line-height: 26px;
}
.error-wrapper h3 {
font-weight: 400;
font-size: 17px;
line-height: 26px;
}
.error-wrapper img {
max-width: 85%;
}
.error-wrapper .code {
font-size: 11.25rem;
line-height: 13.25rem;
font-weight: 700;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--dark);
}
.panel-primary{
padding: 20px;
border-radius: 16px;
}
.panel-primary {
background-color: var(--primary-200);
color: var(--dark);
}
.panel-primary-gradient-green {
background: var(--gradient-secondary);
color: var(--light);
}
@media (min-width: 1024px) {
.panel-primary{
padding: 32px;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.swiper-button-next,
.swiper-button-prev {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--light);
color: var(--dark);
border-radius: 100%;
box-shadow: 0px 4px 24px 0px #565ADD33;
}
.swiper-button-next::after, .swiper-button-prev::after {
content: "";
}
.glabix-screen {
color: var(--dark) !important;
}
.glabix-screen .card {
min-width: 248px;
max-width: 380px;
}
@media (min-width: 1024px) {
.glabix-screen .text-lg {
font-size: 24px;
line-height: 30px;
}
}
.glabix-screen .text-sm {
font-size: 16px;
line-height: 20px;
}
.block {
display: block;
}
.w-full {
width: 100% !important;
}
.max-w-500 {
max-width: 500px;
}
.w-auto {
width: auto !important;
}
.h-10 {
height: 10px;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.pointer-events-none {
pointer-events: none !important;
}
.cursor-pointer {
cursor: pointer !important;
}
.bg-primary-100 {
background-color: var(--primary-100) !important;
}
.bg-gray-300 {
background-color: var(--gray-300);
}
.bg-transparent {
background-color: transparent !important;
}
.text-gray-600 {
color: var(--gray-600) !important;
}
.text-primary {
color: var(--primary) !important;
}
.text-error {
color: var(--error) !important;
}
.text-right {
text-align: right;
}
.border-none {
border: none !important;
}
.border-b {
border-bottom-width: 1px !important;
}
.border-gray-400 {
border-color: var(--gray-400) !important;
}
.video-holder iframe {
aspect-ratio: 16 / 9;
}
.invisible {
visibility: hidden;
}
.rounded-none {
border-radius: 0 !important;
}
.rounded-2xl {
border-radius: 8px;
@media (min-width: 1024px) {
border-radius: 16px;
}
}
.rounded-16 {
border-radius: 16px;
}
.rounded-32 {
border-radius: 32px;
}
.vertical-middle {
vertical-align: middle;
}
.fade-in-left {
animation-duration: 1s;
animation-name: fadeInLeft;
}
.fade-in-up {
animation-duration: 1s;
animation-name: fadeInUp;
}
.video-box-shadow {
box-shadow: 0 0 54px 0 rgba(0, 153, 102, 0.5);
}
.text-32 {
font-size: 32px;
}
.italic {
font-style: italic;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.ml-auto {
margin-left: auto !important;
}
.m-0 {
margin: 0 !important;
}
.p-0 {
padding: 0 !important;
}
.p-20 {
padding: 20px !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mr-10 {
margin-right: 10px !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.pt-10 {
padding-top: 10px !important;
}
.pr-10 {
padding-right: 10px !important;
}
.pb-10 {
padding-bottom: 10px !important;
}
.pl-10 {
padding-left: 10px !important;
}
.mt-16 {
margin-top: 16px !important;
}
.pb-16 {
padding-bottom: 16px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.ml-20 {
margin-left: 20px !important;
}
.pr-20 {
padding-right: 20px !important;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pl-20 {
padding-left: 20px !important;
}
.mt-24 {
margin-top: 24px !important;
}
.mb-24 {
margin-bottom: 24px !important;
}
.pb-24 {
padding-bottom: 24px !important;
}
.mt-32 {
margin-top: 32px !important;
}
.mb-32 {
margin-bottom: 32px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.pt-40 {
padding-top: 40px !important;
}
.pb-40 {
padding-bottom: 40px !important;
}
.pb-50 {
padding-bottom: 50px !important;
}
.mt-60 {
margin-top: 60px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.pb-60 {
padding-bottom: 60px !important;
}
.mb-72 {
margin-bottom: 72px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
@media (min-width: 768px) {
.mt-md-20 {
margin-top: 20px !important;
}
.mt-md-40 {
margin-top: 40px !important;
}
.mb-md-40 {
margin-bottom: 40px !important;
}
.mt-md-60 {
margin-top: 60px !important;
}
.mb-md-80 {
margin-bottom: 80px !important;
}
.pb-md-80 {
padding-bottom: 80px !important;
}
.pr-md-120 {
padding-right: 120px !important;
}
.pl-md-120 {
padding-left: 120px !important;
}
}
@media (min-width: 1024px) {
.pl-lg-0 {
padding-left: 0 !important;
}
.pr-lg-0 {
padding-right: 0 !important;
}
.mb-lg-60 {
margin-bottom: 60px !important;
}
.pr-lg-60 {
padding-right: 60px !important;
}
.pl-lg-60 {
padding-left: 60px !important;
}
.mb-lg-80 {
margin-bottom: 80px !important;
}
.pb-lg-100 {
padding-bottom: 100px !important;
}
.mb-lg-120 {
margin-bottom: 120px !important;
}
}