@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200..800&display=swap);
.hero{align-items:center;color:#fff;display:flex;flex-direction:row;position:relative}

.hero::before{background-color:#1a2226;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}

[dir="rtl"] .hero::before{left:auto;right:0}

.hero::after{background:radial-gradient(farthest-corner at 100% 100%, #3DF2B6 0%, rgba(0, 0, 0, 0) 100%);bottom:0;content:"";display:block;filter:blur(100px);height:724px;opacity:.6;position:absolute;right:0;width:50%;z-index:-1}

[dir="rtl"] .hero::after{right:auto;left:0}

.hero .container{overflow-x:hidden;padding:142px 60px;position:relative}

.hero .container>div{flex:0 0 50%;padding:0 8px}

.hero h1{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:56px;font-weight:800;line-height:120%}

@media(width <= 768px){
.hero h1{font-size:30px}}

.hero ul{list-style:disc;padding-left:24px}

[dir="rtl"] .hero ul{padding-left:0;padding-right:24px}

.hero ul li{text-wrap:pretty}

.hero h1,.hero p,.hero ul{margin-bottom:30px}

.hero .install-buttons-holder{align-items:center;display:flex;flex-direction:row;gap:30px;justify-content:center;margin-bottom:30px}

.hero .install-buttons-holder .install-mobile-button{height:55px;width:168px}

.hero .install-buttons-holder .ms-button{box-shadow:2px 4px 6px 0 rgba(0,35,128,.45);font-size:14px;padding:24px 20px;white-space:nowrap;width:400px}

[dir="rtl"] .hero .install-buttons-holder .ms-button{box-shadow:-2px 4px 6px 0 rgba(0,35,128,.45)}

.hero .hero-image img{width:635px}

.hero .hero-badges-container{display:flex;gap:30px;margin-top:30px}

.hero .hero-badge{height:70px}

.hero.clipped-img .container .hero-image.top,.hero.mini .container .hero-image.top{background-position-y:top}

.hero.clipped-img .container .hero-image.bottom,.hero.mini .container .hero-image.bottom{background-position-y:bottom}

.hero.clipped-img .container .hero-image.left,.hero.mini .container .hero-image.left{background-position-x:left}

[dir="rtl"] .hero.clipped-img .container .hero-image.left,[dir="rtl"] .hero.mini .container .hero-image.left{background-position-x:right}

.hero.clipped-img .container .hero-image.right,.hero.mini .container .hero-image.right{background-position-x:right}

[dir="rtl"] .hero.clipped-img .container .hero-image.right,[dir="rtl"] .hero.mini .container .hero-image.right{background-position-x:left}

.hero.clipped-img .container .hero-image{background-position:center;background-repeat:no-repeat;background-size:cover;clip-path:url("#clip-hero");height:100%;left:calc(50% + 12px);position:absolute;right:0;top:0}

[dir="rtl"] .hero.clipped-img .container .hero-image{right:calc(50% + 12px);left:0}

.hero.mini .container{padding:120px}

.hero.mini .container .hero-image{background-position:center;background-repeat:no-repeat;background-size:cover;clip-path:url("#clip-hero-mini");height:100%;left:calc(50% + 12px);position:absolute;right:0;top:0}

[dir="rtl"] .hero.mini .container .hero-image{right:calc(50% + 12px);left:0}

.hero.mini .container .hero-text h1{font-size:40px}

.hero.mini .install-buttons-holder .ms-button{font-size:10px;padding:12px 20px}

.hero.mini-light{background-color:#ececf9;color:#010921;padding:112px 120px}

.hero.mini-light .hero-text{margin:0 auto;text-align:center}

.hero.mini-light .hero-text .install-buttons-holder{justify-content:center}

.hero.mini-light .hero-badges-container{justify-content:center}

@media screen and (width <= 992px){
.hero{flex-direction:column-reverse}

.hero .container{padding:60px 30px}

.hero .container>div{max-width:100%}

.hero .container .hero-text{align-items:center;display:flex;flex-direction:column}

.hero .install-buttons-holder{margin-bottom:30px;max-width:100%}

.hero .install-buttons-holder .ms-button{font-size:10px}

.hero .hero-image img{max-width:100%;width:368px}

.hero .hero-badges-container{display:grid;gap:24px;grid-template-columns:repeat(2, 1fr)}

.hero.clipped-img .container{padding-bottom:440px}

.hero.clipped-img .container .hero-image{bottom:0;clip-path:url("#clip-hero-mobile");height:420px;left:0;top:auto;width:auto}

[dir="rtl"] .hero.clipped-img .container .hero-image{left:auto;right:0}

.hero.mini .container{padding:60px 30px 440px}

.hero.mini .container .hero-image{background-position:top;bottom:0;clip-path:url("#clip-hero-mini-mobile");height:420px;left:0;top:auto;width:auto}

[dir="rtl"] .hero.mini .container .hero-image{left:auto;right:0}

.hero.mini-light{padding:60px 30px}}

main{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:150%;background-color:#fff;color:#1a2226}

@media(width <= 768px){
main{font-size:14px}}

main .hero .ms-button.download::after{background:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/9021147b/bundles/mailtrackfrontend/img/branding/icon_download.svg") no-repeat center;content:"";display:inline-block;height:12px;margin-left:4px;width:12px}

[dir="rtl"] main .hero .ms-button.download::after{margin-left:0;margin-right:4px}

main section{padding:96px 40px 48px}

main section+section{padding-top:48px}

main section p{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:150%}

@media(width <= 768px){
main section p{font-size:14px}}

main section h3{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:40px;font-weight:700;line-height:125%}

@media(width <= 768px){
main section h3{font-size:24px}}

main section h4{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:16px;font-weight:600;line-height:150%;text-transform:uppercase;padding:22px 0}

@media(width <= 768px){
main section h4{font-size:14px}}

main section h5{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:20px;font-weight:600;line-height:24px}

@media(width <= 768px){
main section h5{font-size:16px}}

main section .title{align-items:start;display:flex;flex-direction:column;gap:16px;padding-bottom:60px}

main section figure{align-items:center;background-color:#fff;border:1px solid #b8b8b8;border-radius:24px;display:flex;height:320px;justify-content:center}

main section figure img{max-height:100%;max-width:100%}

main section figure.inverted-background{background-color:#6964ce;border-color:#6964ce}

main section figure.black-background{background-color:#000;border-color:#000}

main section figure.gray-background{background-color:#333;border-color:#333}

main section figure.light-gray-background{background-color:#f6f6f6;border-color:#f6f6f6}

main section figure.green-background{background-color:#00b878;border-color:#00b878}

main section figure.red-background{background-color:#f50404;border-color:#f50404}

@media screen and (width < 480px){
main section figure{height:auto}}

main section .grid-two-columns{display:grid;gap:60px;grid-template-columns:1fr 1fr}

main section .grid-two-columns li figure{padding:40px 26px}

main section .grid-two-columns p+ul{margin-top:32px}

@media screen and (width < 480px){
main section .grid-two-columns{grid-template-columns:1fr}}

main section .grid-auto-columns{display:grid;gap:26px;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}

main section .grid-auto-columns li figure{height:200px;padding:40px 26px}

@media screen and (width < 480px){
main section .grid-auto-columns{grid-template-columns:1fr}}

main section .grid-two-columns li,main section .grid-auto-columns li{display:flex;flex-direction:column;gap:12px}

main section .grid-two-columns li figure,main section .grid-auto-columns li figure{margin-bottom:20px}

main section .colors-grid{display:grid;grid-template-areas:"a1 a2 a3 a4 a4 a5 a5" "a1 a2 a3 a6 a6 a7 a7" "a1 a2 a3 a8 a8 a8 a8" "a1 a2 a3 a9 a9 a9 a9"}

main section .colors-grid li:nth-child(1){grid-area:a1}

main section .colors-grid li:nth-child(2){grid-area:a2}

main section .colors-grid li:nth-child(3){grid-area:a3}

main section .colors-grid li:nth-child(4){grid-area:a4}

main section .colors-grid li:nth-child(5){grid-area:a5}

main section .colors-grid li:nth-child(6){grid-area:a6}

main section .colors-grid li:nth-child(7){grid-area:a7}

main section .colors-grid li:nth-child(8){grid-area:a8}

main section .colors-grid li:nth-child(9){grid-area:a9}

main section .colors-grid li{background-color:var(--bg);border:1px solid var(--border);color:var(--fg);padding:20px}

main section .colors-grid li h4{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:16px;font-weight:700;line-height:150%;padding:0 0 10px}

@media(width <= 768px){
main section .colors-grid li h4{font-size:14px}}

main section .colors-grid li dl{display:grid;gap:0 14px;grid-template-columns:auto 1fr}

@media screen and (width < 768px){
main section .colors-grid{grid-template-areas:"a1 a1" "a2 a2" "a3 a3" "a4 a5" "a6 a7" "a8 a8" "a9 a9"}}

main section .good-practices li,main section .bad-practices li{padding-bottom:40px}

main section .good-practices li figure,main section .bad-practices li figure{position:relative}

main section .good-practices li figure::after,main section .bad-practices li figure::after{content:"";display:block;height:43px;position:absolute;right:10px;top:10px;width:42px}

[dir="rtl"] main section .good-practices li figure::after,[dir="rtl"] main section .bad-practices li figure::after{right:auto;left:10px}

main section .good-practices li figure::after{background-image:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/9021147b/bundles/mailtrackfrontend/img/branding/icon_ok.svg")}

main section .bad-practices li figure::after{background-image:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/9021147b/bundles/mailtrackfrontend/img/branding/icon_wrong.svg")}

main section .typography{background-color:#f6f6f6;border-radius:20px;display:flex;flex-direction:column;gap:32px;padding:48px}

@media screen and (width < 768px){
main section .typography{padding:28px}}

main section .typography h4{font-size:30px;font-weight:600;line-height:125%;padding:0;text-transform:none}

main section .typography ul{column-count:2}

@media screen and (width < 768px){
main section .typography ul{column-count:1}}

main section .typography .bold{font-weight:700}

main section .typography .semibold{font-weight:600}

main section .typography .regular{font-weight:500}

main section .typography .medium{font-weight:400}

main section .typography .light{font-weight:300}

main section .typography .extralight{font-weight:200}

main section .typography .big{font-size:40px;font-weight:400;letter-spacing:1.2px;line-height:100%}

main section .typography .big span{font-weight:300}

main section .typography strong{font-weight:600}

main section .typography p+ul{margin-top:0}

main section.press{align-items:center;background:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/9021147b/bundles/mailtrackfrontend/img/branding/envelope_bg.svg") #bfe4fe no-repeat center right;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:96px 120px}

[dir="rtl"] main section.press{background:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/9021147b/bundles/mailtrackfrontend/img/branding/envelope_bg.svg") #bfe4fe no-repeat center left}

main section.press .container{max-width:800px}

main section.press h3{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:40px;font-weight:700;line-height:125%}

@media(width <= 768px){
main section.press h3{font-size:24px}}

main section.press p{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:24px;font-weight:400;line-height:135%}

@media(width <= 768px){
main section.press p{font-size:18px}}

main section.press p a{color:#008df2;font-weight:500}

@media screen and (width < 768px){
main section.press{padding:60px 32px}}