.feature .subtitle,
body {
    font-weight: var(--font-weight-regular)
}

:root {
    --font-family-brand: "Montserrat", sans-serif;
    --font-family-default: "Lato", sans-serif;
    --font-family-code: "Consolas", sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-line-height-350: 14px;
    --font-line-height-400: 16px;
    --font-line-height-450: 18px;
    --font-line-height-500: 20px;
    --font-line-height-550: 22px;
    --font-line-height-600: 24px;
    --font-line-height-700: 28px;
    --font-line-height-800: 32px;
    --font-line-height-1000: 40px;
    --font-line-height-1300: 52px;
    --font-line-height-1800: 72px;
    --font-line-height-2600: 104px;
    --font-letter-spacing-default: 0px;
    --font-letter-spacing-regular: 1.2px;
    --font-size-300: 12px;
    --font-size-350: 14px;
    --font-size-400: 16px;
    --font-size-450: 18px;
    --font-size-500: 20px;
    --font-size-550: 22px;
    --font-size-600: 24px;
    --font-size-800: 32px;
    --font-size-1100: 44px;
    --font-size-1600: 64px;
    --font-size-2400: 96px;
    --color-brand-ow: #d34037;
    --color-brand-ow-hover: #f05c48;
    --color-brand-cf: #eb622b;
    --color-brand-cf-hover: #f18536;
    --color-brand-tb: #41c4c3;
    --color-brand-tb-hover: #5de3e2;
    --color-brand-el-1: #9feaf9;
    --color-brand-el-2: #69c5ea;
    --color-brand-nt: #b5df30;
    --color-brand-nt-hover: #c4e559;
    --color-brand-op: #e6004d;
    --color-brand-op-hover: #f53b6a;
    --color-brand-dsrd: #5865f2;
    --color-brand-dsrd-hover: rgba(88, 101, 242, 0.24);
    --color-brand-twch: #6441a5;
    --color-brand-twch-hover: rgba(100, 65, 165, 0.24);
    --color-neutral-0: #000000;
    --color-neutral-8: #101010;
    --color-neutral-16: #202020;
    --color-neutral-24: #303030;
    --color-neutral-32: #404040;
    --color-neutral-40: #505050;
    --color-neutral-48: #606060;
    --color-neutral-80: #9f9f9f;
    --color-neutral-88: #afafaf;
    --color-neutral-96: #bfbfbf;
    --color-neutral-104: #cfcfcf;
    --color-neutral-112: #dfdfdf;
    --color-neutral-120: #efefef;
    --color-neutral-128: #ffffff;
    --color-infographic-info-1: #004697;
    --color-infographic-info-2: #0063b5;
    --color-infographic-info-3: #0074c7;
    --color-infographic-info-4: #0c86d9;
    --color-infographic-info-5: #1593e7;
    --color-infographic-info-6: #3ea2ea;
    --color-infographic-info-7: #62b3ec;
    --color-infographic-info-8: #8ec8f2;
    --color-infographic-info-9: #b9ddf7;
    --color-infographic-info-10: #e2f2fb;
    --color-infographic-ow-1: var(--color-brand-ow);
    --color-infographic-ow-2: #942b27;
    --color-infographic-ow-3: #ffd2d0;
    --color-infographic-ow-4: #ffa4a1;
    --color-infographic-ow-5: #ec7068;
    --color-infographic-cf-1: var(--color-brand-cf);
    --color-infographic-cf-2: #a4491e;
    --color-infographic-cf-3: #ffdccb;
    --color-infographic-cf-4: #ffb897;
    --color-infographic-cf-5: #f8936d;
    --color-infographic-tb-1: var(--color-brand-tb);
    --color-infographic-tb-2: #2e8989;
    --color-infographic-tb-3: #d4ffff;
    --color-infographic-tb-4: #aff;
    --color-infographic-tb-5: #7ed5d6;
    --color-infographic-el-1: var(--color-brand-el-2);
    --color-functional-critical-bright: #fe3737;
    --color-functional-critical-deep: #d93025;
    --color-functional-warning-bright: #e07400;
    --color-functional-warning-deep: #c35404;
    --color-functional-success-bright: #32a100;
    --color-functional-success-deep: #018901;
    --color-functional-info-bright: #2690e7;
    --color-functional-info-deep: #0074c7;
    --color-transparent-brand: rgba(211, 64, 55, 0.64);
    --color-transparent-brand-ow-16: rgba(211, 64, 55, 0.16);
    --color-transparent-brand-ow-20: rgba(211, 64, 55, 0.2);
    --color-transparent-brand-ow-64: rgba(211, 64, 55, 0.64);
    --color-transparent-brand-cf-16: rgba(235, 98, 43, 0.16);
    --color-transparent-brand-cf-20: rgba(235, 98, 43, 0.2);
    --color-transparent-brand-cf-56: rgba(235, 98, 43, 0.56);
    --color-transparent-brand-cf-64: rgba(235, 98, 43, 0.64);
    --color-transparent-dark-8: rgba(255, 255, 255, 0.08);
    --color-transparent-dark-12: rgba(255, 255, 255, 0.12);
    --color-transparent-dark-16: rgba(255, 255, 255, 0.16);
    --color-transparent-dark-20: rgba(255, 255, 255, 0.2);
    --color-transparent-dark-24: rgba(255, 255, 255, 0.24);
    --color-transparent-dark-32: rgba(255, 255, 255, 0.32);
    --color-transparent-light-4: rgba(0, 0, 0, 0.04);
    --color-transparent-light-8: rgba(0, 0, 0, 0.08);
    --color-transparent-light-12: rgba(0, 0, 0, 0.12);
    --color-transparent-light-16: rgba(0, 0, 0, 0.16);
    --color-transparent-light-24: rgba(0, 0, 0, 0.24);
    --color-transparent-critical-8: rgba(217, 48, 37, 0.08);
    --color-transparent-critical-16: rgba(217, 48, 37, 0.16);
    --color-transparent-critical-56: rgba(217, 48, 37, 0.56);
    --color-transparent-critical-64: rgba(217, 48, 37, 0.64);
    --color-transparent-warning-8: rgba(195, 84, 4, 0.08);
    --color-transparent-warning-16: rgba(195, 84, 4, 0.16);
    --color-transparent-warning-56: rgba(195, 84, 4, 0.56);
    --color-transparent-warning-64: rgba(195, 84, 4, 0.64);
    --color-transparent-success-8: rgba(1, 137, 1, 0.08);
    --color-transparent-success-16: rgba(1, 137, 1, 0.16);
    --color-transparent-success-56: rgba(1, 137, 1, 0.56);
    --color-transparent-success-64: rgba(1, 137, 1, 0.64);
    --color-transparent-info-8: rgba(0, 116, 199, 0.08);
    --color-transparent-info-16: rgba(0, 116, 199, 0.16);
    --color-transparent-info-56: rgba(0, 116, 199, 0.56);
    --color-transparent-info-64: rgba(0, 116, 199, 0.64);
    --color-transparent-el-16: rgba(159, 234, 249, 0.16);
    --color-transparent-el-1-20: rgba(159, 234, 249, 0.2);
    --color-transparent-el-2-56: rgba(159, 234, 249, 0.56);
    --color-background-general: var(--color-neutral-0);
    --color-background-cf: var(--color-neutral-8);
    --color-surface-primary: var(--color-neutral-8);
    --color-surface-secondary: var(--color-neutral-16);
    --color-surface-tertiary: var(--color-neutral-24);
    --color-surface-quaternary: var(--color-neutral-32);
    --color-surface-invert: var(--color-neutral-128);
    --color-surface-brand-ow: var(--color-brand-ow);
    --color-surface-brand-ow-hover: var(--color-brand-ow-hover);
    --color-surface-brand-ow-focus: var(--color-transparent-brand-ow-20);
    --color-surface-brand-cf: var(--color-brand-cf);
    --color-surface-brand-cf-hover: var(--color-brand-cf-hover);
    --color-surface-brand-cf-focus: var(--color-transparent-brand-cf-16);
    --color-surface-brand-tb: var(--color-brand-tb);
    --color-surface-brand-tb-hover: var(--color-brand-tb-hover);
    --color-surface-brand-el: var(--color-brand-el);
    --color-surface-brand-el-focus: var(--color-transparent-el-1-16);
    --color-surface-brand-nt: var(--color-brand-nt);
    --color-surface-brand-nt-hover: var(--color-brand-nt-hover);
    --color-surface-brand-op: var(--color-brand-op);
    --color-surface-brand-op-hover: var(--color-brand-op-hover);
    --color-surface-brand-dsrd: var(--color-brand-dsrd);
    --color-surface-brand-dsrd-hover: var(--color-brand-dsrd-hover);
    --color-surface-brand-twch: var(--color-brand-twch);
    --color-surface-brand-twch-hover: var(--color-brand-twch-hover);
    --color-surface-critical-solid: var(--color-functional-critical-deep);
    --color-surface-critical-hover: var(--color-transparent-critical-16);
    --color-surface-critical-transparent: var(--color-transparent-critical-16);
    --color-surface-warning-solid: var(--color-functional-warning-deep);
    --color-surface-warning-transparent: var(--color-transparent-warning-16);
    --color-surface-success-solid: var(--color-functional-success-deep);
    --color-surface-success-transparent: var(--color-transparent-success-16);
    --color-surface-info-solid: var(--color-functional-info-deep);
    --color-surface-info-transparent: var(--color-transparent-info-16);
    --color-surface-note-transparent: var(--color-transparent-dark-12);
    --color-surface-focus-brand-ow: var(--color-transparent-brand-ow-20);
    --color-surface-focus-brand-el: var(--color-transparent-el-16);
    --color-surface-focus-brand-cf: var(--color-transparent-brand-cf-20);
    --color-surface-on-surface-primary: var(--color-transparent-dark-8);
    --color-surface-on-surface-primary-hover: var(--color-transparent-dark-16);
    --color-surface-on-surface-secondary: var(--color-transparent-dark-16);
    --color-surface-on-surface-secondary-hover: var(--color-transparent-dark-24);
    --color-surface-default-hover: var(--color-neutral-32);
    --color-surface-tooltip: var(--color-neutral-48);
    --color-text-invert: var(--color-neutral-0);
    --color-text-cta-tb: var(--color-neutral-0);
    --color-text-cta-nt: var(--color-neutral-0);
    --color-text-cta-ow: var(--color-neutral-128);
    --color-text-cta-cf: var(--color-neutral-128);
    --color-text-tertiary: var(--color-neutral-80);
    --color-text-secondary: var(--color-neutral-96);
    --color-text-primary: var(--color-neutral-112);
    --color-text-pure: var(--color-neutral-128);
    --color-text-brand-ow: var(--color-brand-ow);
    --color-text-brand-ow-hover: var(--color-brand-ow-hover);
    --color-text-brand-cf: var(--color-brand-cf);
    --color-text-brand-cf-hover: var(--color-brand-cf-hover);
    --color-text-brand-tb: var(--color-brand-tb);
    --color-text-brand-tb-hover: var(--color-brand-tb-hover);
    --color-text-brand-nt: var(--color-brand-nt);
    --color-text-brand-nt-hover: var(--color-brand-nt-hover);
    --color-text-brand-op: var(--color-brand-op);
    --color-text-brand-op-hover: var(--color-brand-op-hover);
    --color-text-warning: var(--color-functional-warning-bright);
    --color-text-success: var(--color-functional-success-bright);
    --color-text-info: var(--color-functional-info-bright);
    --color-text-critical: var(--color-functional-critiacl-bright);
    --color-icon-pure: var(--color-neutral-128);
    --color-icon-primary: var(--color-neutral-112);
    --color-icon-secondary: var(--color-neutral-80);
    --color-icon-cta-ow: var(--color-neutral-128);
    --color-icon-cta-cf: var(--color-neutral-128);
    --color-icon-cta-nt: var(--color-neutral-0);
    --color-icon-cta-tb-: var(--color-neutral-0);
    --color-icon-brand-ow: var(--color-brand-ow);
    --color-icon-brand-cf: var(--color-brand-cf);
    --color-icon-brand-tb: var(--color-brand-tb);
    --color-icon-brand-nt: var(--color-brand-nt);
    --color-icon-brand-op: var(--color-brand-op);
    --color-icon-critical: var(--color-functional-critical-bright);
    --color-icon-warning: var(--color-functional-warning-bright);
    --color-icon-success: var(--color-functional-success-bright);
    --color-icon-info: var(--color-functional-info-bright);
    --color-border-primary: var(--color-neutral-112);
    --color-border-secondary: var(--color-neutral-80);
    --color-border-tertiary: var(--color-neutral-48);
    --color-border-quaternary: var(--color-neutral-24);
    --color-border-brand-ow: var(--color-transparent-brand-ow-64);
    --color-border-brand-el: var(--color-transparent-el-2-56);
    --color-border-note: var(--color-transparent-dark-32);
    --color-border-critical: var(--color-transparent-critical-64);
    --color-border-warning: var(--color-transparent-warning-64);
    --color-border-error: var(--color-functional-critical-bright);
    --color-border-success: var(--color-transparent-success-64);
    --color-border-info: var(--color-transparent-info-64);
    --color-border-on-surface: var(--color-transparent-dark-20);
    --space-0: 0px;
    --space-50: 2px;
    --space-100: 4px;
    --space-200: 8px;
    --space-300: 12px;
    --space-400: 16px;
    --space-500: 20px;
    --space-600: 24px;
    --space-800: 32px;
    --space-1000: 40px;
    --space-1200: 48px;
    --space-1400: 56px;
    --space-1600: 64px;
    --space-1800: 72px;
    --space-2000: 80px;
    --space-2200: 88px;
    --space-2400: 96px;
    --space-2600: 104px;
    --space-3200: 128px;
    --space-4000: 160px;
    --space-4800: 192px;
    --space-5600: 224px;
    --space-6400: 256px
}

html[data-theme=light] {
    --color-background-general: var(--color-neutral-128);
    --color-background-cf: var(--color-neutral-128);
    --color-surface-primary: var(--color-neutral-120);
    --color-surface-secondary: var(--color-neutral-128);
    --color-surface-tertiary: var(--color-neutral-120);
    --color-surface-quaternary: var(--color-neutral-120);
    --color-surface-tooltip: var(--color-neutral-48);
    --color-surface-default-hover: var(--color-neutral-104);
    --color-surface-brand-ow-focus: var(--color-transparent-brand-ow-16);
    --color-surface-brand-el-focus: var(--color-transparent-el-1-20);
    --color-surface-critical-hover: var(--color-transparent-critical-8);
    --color-surface-on-surface-primary: var(--color-transparent-light-4);
    --color-surface-on-surface-primary-hover: var(--color-transparent-light-8);
    --color-surface-on-surface-secondary: var(--color-transparent-light-8);
    --color-surface-on-surface-secondary-hover: var(--color-transparent-light-24);
    --color-surface-note-transparent: var(--color-transparent-light-4);
    --color-surface-warning-transparent: var(--color-transparent-warning-8);
    --color-surface-success-transparent: var(--color-transparent-success-8);
    --color-surface-info-transparent: var(--color-transparent-info-8);
    --color-surface-critical-transparent: var(--color-transparent-critical-8);
    --color-text-pure: var(--color-neutral-0);
    --color-text-primary: var(--color-neutral-16);
    --color-text-secondary: var(--color-neutral-32);
    --color-text-tertiary: var(--color-neutral-48);
    --color-text-invert: var(--color-neutral-128);
    --color-text-critical: var(--color-functional-critical-deep);
    --color-text-warning: var(--color-functional-warning-deep);
    --color-text-success: var(--color-functional-success-deep);
    --color-text-info: var(--color-functional-info-deep);
    --color-icon-pure: var(--color-neutral-0);
    --color-icon-primary: var(--color-neutral-16);
    --color-icon-secondary: var(--color-neutral-48);
    --color-icon-critical: var(--color-functional-critical-deep);
    --color-icon-warning: var(--color-functional-warning-deep);
    --color-icon-success: var(--color-functional-success-deep);
    --color-icon-info: var(--color-functional-info-deep);
    --color-border-primary: var(--color-neutral-16);
    --color-border-secondary: var(--color-neutral-48);
    --color-border-tertiary: var(--color-neutral-80);
    --color-border-quaternary: var(--color-neutral-112);
    --color-border-note: var(--color-transparent-light-24);
    --color-border-on-surface: var(--color-transparent-light-12);
    --color-border-success: var(--color-transparent-success-56);
    --color-border-critical: var(--color-transparent-critical-56);
    --color-border-warning: var(--color-transparent-warning-56);
    --color-border-info: var(--color-transparent-info-56);
    --color-border-error: var(--color-functional-critical-deep)
}

@keyframes flickering-skull-eye {

    0%,
    100%,
    30%,
    35%,
    5%,
    80%,
    85% {
        opacity: 1
    }

    3%,
    33%,
    83% {
        opacity: .5
    }

    28%,
    78% {
        opacity: 0
    }
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body,
main {
    overflow-x: hidden
}

footer,
section {
    overflow: hidden
}

svg {
    width: auto;
    height: auto
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    background-color: var(--color-background-general);
    color: var(--color-text-pure);
    font-family: var(--font-family-brand);
    font-size: var(--font-size-400);
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

section {
    padding-inline: var(--space-500)
}

@media (min-width:576px) {
    .mob-only {
        display: none
    }

    section {
        padding: var(--space-1200) 0
    }
}

header.page-header {
    padding: var(--space-600) var(--space-500) var(--space-1200);
    display: flex;
    flex-direction: column;
    align-items: center
}

header.page-header .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1160px;
    text-align: center;
    gap: var(--space-500)
}

@media (min-width:576px) {
    header.page-header {
        padding: var(--space-1200) 0
    }

    header.page-header .inner {
        gap: 28px;
        padding-inline: var(--space-1000)
    }
}

@media (min-width:1024px) {
    header.page-header .inner {
        padding-inline: 0
    }
}

h1 {
    font-size: var(--font-size-600);
    line-height: var(--font-line-height-700)
}

@media (min-width:576px) {
    h1 {
        font-size: 72px;
        line-height: 1.1
    }
}

p {
    font-size: var(--space-400);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-700);
    color: var(--color-text-tertiary);
    text-wrap: balance
}

@media (min-width:576px) {
    p {
        font-size: var(--font-size-450);
        max-width: 500px
    }
}

.highlight {
    color: var(--color-text-primary)
}

.star-review {
    display: inline-flex;
    align-items: center;
    transform: translateY(var(--space-100));
    margin-right: var(--space-200)
}

button.download {
    display: flex;
    height: var(--space-1200);
    padding: var(--space-400) var(--space-800);
    justify-content: center;
    align-items: center;
    gap: 9px;
    background-color: var(--color-text-brand-op);
    border: none;
    color: var(--color-text-pure);
    font-family: var(--core-font-family-brand, Montserrat);
    font-size: var(--core-font-size-400);
    font-style: normal;
    font-weight: var(--core-font-weight-medium);
    line-height: var(--core-font-line-height-600);
    letter-spacing: var(--core-font-letter-spacing-regular);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .1s ease-out
}

.feature .subtitle,
section.breakdown .details,
ul.stats-list li {
    font-family: var(--font-family-default)
}

footer.page-footer .title,
section.breakdown .details,
section.breakdown .title,
section.efficient .subtitle {
    font-style: normal;
    letter-spacing: var(--font-letter-spacing-default)
}

button.download:hover {
    background-color: var(--color-text-brand-op-hover)
}

button.download .button-icon {
    transform: translateY(1px)
}

button.download>* {
    pointer-events: none
}

ul.stats-list {
    --stats-font-size: 13px;
    display: inline-block
}

ul.stats-list li {
    display: block;
    margin-bottom: var(--space-200);
    color: var(--color-text-tertiary);
    font-size: var(--stats-font-size)
}

@media (min-width:576px) {
    ul.stats-list li {
        display: inline-block;
        margin-bottom: 0
    }

    ul.stats-list li:not(:first-of-type):before {
        background-image: url(../assets/images/dot.svg);
        background-repeat: no-repeat;
        content: "";
        width: 30px;
        height: 10px;
        display: inline-block;
        background-position: center
    }
}

.no-break {
    white-space: nowrap
}

.gradient-top {
    background-image: url(../assets/images/glow-blue.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 200%
}

section.sessions {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (min-width:768px) {
    .gradient-top {
        background-size: 90%
    }

    section.sessions {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url(../assets/images/tile.webp);
        min-height: 668px
    }
}

.sessions-video-container {
    --video-container-bar: 21px;
    background-image: url(../assets/images/hero_mob.png);
    background-image: -webkit-image-set(url(../assets/images/hero_mob@1x.webp) type("image/webp") 1x, url(../assets/images/hero_mob@2x.webp) type("image/webp") 2x, url(../assets/images/hero_mob.png) type("image/png") 1x);
    background-image: image-set(url(../assets/images/hero_mob@1x.webp) type("image/webp") 1x, url(../assets/images/hero_mob@2x.webp) type("image/webp") 2x, url(../assets/images/hero_mob.png) type("image/png") 1x);
    width: 100%;
    aspect-ratio: 1/.79;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
}

.sessions-video-container>.video-crop {
    top: 194px;
    left: var(--space-500);
    z-index: 10;
    position: relative;
    max-width: calc(100% - 2 * var(--video-container-bar));
    height: 290px;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center
}

@media (min-width:768px) {
    .sessions-video-container {
        width: 770px;
        aspect-ratio: 1/1.025;
        background-size: contain;
        background-image: url(../assets/images/sessions-box.webp)
    }

    .sessions-video-container>.video-crop {
        display: flex
    }
}

.sessions-video-container .video {
    position: relative;
    z-index: 20;
    height: 100%;
    width: 100%
}

.sessions-video-container .sessions-mob-poster {
    display: block
}

@media (min-width:768px) {
    .sessions-video-container .sessions-mob-poster {
        display: none
    }
}

.features {
    display: flex;
    justify-content: center;
    padding-top: var(--space-2000);
    padding-bottom: var(--space-2400)
}

@media (min-width:576px) {
    .features {
        padding-right: var(--space-1000);
        padding-left: var(--space-1000)
    }
}

@media (min-width:768px) {
    .features {
        padding-top: 100px;
        padding-bottom: 200px
    }
}

.features-list {
    display: inline-flex;
    gap: var(--space-1200);
    margin: 0 auto;
    flex-direction: column;
    justify-content: center
}

@media (min-width:1024px) {
    .features-list {
        flex-direction: row;
        width: 100%
    }
}

.feature {
    width: 100%;
    background-color: var(--color-surface-primary);
    display: flex;
    flex-direction: column
}

@media (min-width:1024px) {
    .feature {
        height: 430px;
        width: 338px
    }

    .feature .feature-video {
        height: 114px
    }
}

.feature .content {
    padding: var(--space-600) var(--space-600) var(--space-1200);
    display: flex;
    flex-direction: column;
    gap: var(--space-600)
}

.feature .title {
    color: var(--color-text-primary);
    font-size: var(--font-size-600)
}

.feature .subtitle {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-400);
    line-height: var(--font-line-height-600)
}

.feature .feature-video {
    width: 100%;
    margin-top: auto;
    overflow: hidden
}

.feature .feature-video>video {
    width: calc(100% + 2px);
    left: -2px;
    position: relative;
    top: 0
}

section.breakdown {
    background-color: var(--color-surface-invert);
    display: flex;
    justify-content: center;
    padding-top: var(--space-2400);
    padding-bottom: var(--space-2400)
}

section.breakdown .cards {
    max-width: 100%
}

@media (min-width:1024px) {
    section.breakdown {
        padding-top: 200px;
        padding-bottom: 200px
    }

    section.breakdown .cards {
        max-width: 1112px
    }
}

section.breakdown .card {
    display: flex;
    gap: var(--space-600);
    margin-bottom: var(--space-1200);
    flex-direction: column
}

@media (min-width:1280px) {
    section.breakdown .card {
        flex-direction: row-reverse
    }

    section.breakdown .card:not(:last-of-type) {
        margin-bottom: var(--space-3200)
    }

    section.breakdown .card.b2,
    section.breakdown .card.b4 {
        flex-direction: row
    }
}

section.breakdown .card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (min-width:768px) {
    section.breakdown .card {
        gap: var(--space-1600)
    }

    section.breakdown .card .card-content {
        width: 506px
    }
}

section.breakdown .title {
    color: var(--color-text-invert);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-line-height-1000);
    font-size: var(--font-size-500);
    margin-bottom: var(--space-400)
}

@media (min-width:576px) {
    section.breakdown .title {
        font-size: var(--font-size-800)
    }
}

section.breakdown .details {
    color: #0c133d;
    font-weight: var(--font-weight-regular);
    line-height: var(--font-line-height-700);
    list-style: disc;
    padding-left: var(--space-600);
    font-size: var(--font-size-350)
}

section.breakdown .details li a {
    color: var(--color-text-brand-op)
}

section.breakdown .details li a:hover {
    color: var(--color-text-brand-op-hover)
}

.card-image {
    width: 100%;
    border-radius: var(--space-500);
    aspect-ratio: 1.69;
    background-position: center;
    background-size: cover
}

.card.b1 .card-image {
    background-image: url(../assets/images/breakdown-1.webp)
}

.card.b2 .card-image {
    background-image: url(../assets/images/breakdown-2.webp)
}

.card.b3 .card-image {
    background-image: url(../assets/images/breakdown-3.webp)
}

.card.b4 .card-image {
    background-image: url(../assets/images/breakdown-4.webp)
}

section.efficient {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2400) 0;
    padding-inline: var(--space-500)
}

section.efficient .text {
    padding-inline: var(--space-500)
}

@media (min-width:576px) {
    section.breakdown .details {
        font-size: var(--font-size-450)
    }

    .card-image {
        width: 542px;
        aspect-ratio: 1.64
    }

    section.efficient {
        padding: 180px 0 84px;
        text-align: center
    }
}

section.efficient .title {
    color: var(--color-text-pure);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--space-2000);
    margin-bottom: var(--space-600);
    font-size: var(--font-size-600);
    text-align: left;
    width: 100%
}

@media (min-width:576px) {
    section.efficient .title {
        font-size: 72px;
        text-align: center
    }
}

section.efficient .subtitle {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-450);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-700);
    max-width: 900px;
    margin-bottom: var(--space-1200)
}

@media (min-width:576px) {
    section.efficient .subtitle {
        margin-bottom: var(--space-2600)
    }
}

section.efficient .logo-animation {
    position: relative
}

section.efficient .skull-eye {
    position: absolute;
    z-index: 3;
    top: 328px;
    left: 329px;
    transition: opacity .1s;
    animation: flickering-skull-eye 3.5s infinite
}

section.efficient .efficient-animation {
    width: calc(100% + var(--space-1000));
    position: relative
}

@media (min-width:1024px) {
    section.efficient .efficient-animation {
        width: initial
    }

    section.efficient .efficient-animation>.skull-img-mob {
        display: none
    }
}

footer.page-footer .inner,
section.efficient .efficient-animation>.skull-img-mob,
section.efficient .efficient-animation>.skull-img-mob>img {
    width: 100%
}

section.efficient .efficient-animation>.skull-img {
    display: none
}

@media (min-width:1024px) {
    section.efficient .efficient-animation>.skull-img {
        display: block
    }
}

section.efficient .efficient-animation>.skull-eye {
    display: none
}

@media (min-width:1024px) {
    section.efficient .efficient-animation>.skull-eye {
        display: block;
        top: 533px;
        left: 430px
    }
}

footer.page-footer {
    background-image: url(../assets/images/film.webp);
    background-position: bottom right;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    padding-inline: var(--space-500);
    padding-bottom: 412px;
    background-size: 175%
}

@media (min-width:1280px) {
    footer.page-footer {
        padding-inline: initial
    }
}

@media (min-width:768px) {
    footer.page-footer {
        background-size: contain;
        height: -moz-fit-content;
        height: fit-content;
        padding-bottom: 240px
    }

    footer.page-footer .inner {
        width: 1112px
    }
}

footer.page-footer .logo {
    width: 200px;
    margin-bottom: var(--space-300)
}

@media (min-width:768px) {
    footer.page-footer .logo {
        margin-bottom: var(--space-1200)
    }
}

footer.page-footer .title {
    font-size: var(--font-size-800);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-line-height-1000);
    margin-bottom: var(--space-500)
}

@media (min-width:768px) {
    footer.page-footer .title {
        font-size: 116px;
        line-height: 108px;
        margin-bottom: var(--space-1200)
    }
}

footer.page-footer button.download {
    margin-bottom: var(--space-500)
}

@media (min-width:768px) {
    footer.page-footer button.download {
        margin-bottom: var(--space-300)
    }
}

.modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, .5);
    z-index: 4;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.modal .modal-content {
    position: absolute;
    margin: auto;
    margin: 79px var(--space-2000);
    padding: 33px 31px 34px;
    max-width: 520px;
    max-height: 335px;
    overflow: hidden;
    background: #0C131F;
    background-size: cover;
    box-sizing: border-box;
    width: calc(100vw - var(--space-2000))
}

.modal .modal-logo {
    margin-bottom: 20px
}

.modal .modal-block {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: flex-start
}

.modal .icon-close {
    position: absolute;
    top: var(--space-400);
    right: var(--space-400);
    width: var(--space-600);
    height: var(--space-600);
    cursor: pointer
}

.modal .fallback-download-button {
    color: var(--color-brand-op)
}

.modal .fallback-download-button:hover {
    color: var(--color-brand-op-hover)
}

.modal .modal-info-text {
    color: var(--color-text-pure);
    margin-bottom: var(--space-100)
}

body.download-modal {
    overflow-y: hidden
}

body.download-modal .modal {
    display: flex
}

/*# sourceMappingURL=styles.min.css.map */