@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}.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}.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}.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;width:400px}.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}.hero.clipped-img .container .hero-image.right,.hero.mini .container .hero-image.right{background-position-x:right}.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}.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}.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}.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}.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/6b6f57e1/bundles/mailtrackfrontend/img/branding/icon_download.svg") no-repeat center;content:"";display:inline-block;height:12px;margin-left:4px;width:12px}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}main section .good-practices li figure::after{background-image:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/6b6f57e1/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/6b6f57e1/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/6b6f57e1/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}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}}
