/* #region CSS Variables */

:root {
    /* Colors */
    --color-ink-fresh: #202020;
    --color-ink-washed: #303030;
    --color-ink-faded: #404040;
    --color-indigo: #6600FF;
    --color-paper: #FFFEFF;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --spacing-xl: 40px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;

    /* Breakpoints (for reference in JS if needed) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --breakpoint-3xl: 1920px;

    /* Typography */
    --font-family-base: "Montserrat", sans-serif;
    --font-family-display: "Montserrat Underline", sans-serif;

    /* Type scale */
    --font-size-sm: 0.75rem;
    /* 12px */
    --font-size-md: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.25rem;
    /* 20px */
    --font-size-xl: 1.5rem;
    /* 24px */
    --font-size-2xl: 1.75rem;
    /* 28px */
    --font-size-3xl: 2rem;
    /* 32px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 2.75rem;
    /* 44px */
    --font-size-6xl: 3.25rem;
    /* 52px */

    /* Line heights */
    --line-height-heading: 1.2;
    --line-height-body: 1.5;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Effects */
    --overlay-light: rgba(255, 255, 255, .08);
    --overlay-medium: rgba(255, 255, 255, .10);
    --overlay-strong: rgba(255, 255, 255, .16);

    /* Decorations */
    --underline-thickness: 2px;
    --underline-offset-sm: 2px;
    --underline-offset-md: 3px;

    /* Borders & Outlines */
    --outline-width: 2px;
    --outline-style: solid;

    /* Z-index layers */
    --z-toc: 1;
    --z-header: 8;
    --z-nav-main: 9;
    --z-nav-shortcuts: 10;
    --z-disclaimer: 11;
    --z-skip-link: 12;

    /* Patterns */
    --bg-pattern: url(../img/pattern.svg) 0 0 / 56px 97px repeat fixed;
}

/* #endregion */

/* #region Fonts */

/* montserrat-underline-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Underline';
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    src: url('../fonts/montserrat-underline-v3-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-underline-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Underline';
    font-style: normal;
    font-weight: var(--font-weight-bold);
    src: url('../fonts/montserrat-underline-v3-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: var(--font-weight-regular);
    src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: var(--font-weight-regular);
    src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: var(--font-weight-medium);
    src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: var(--font-weight-medium);
    src: url('../fonts/montserrat-v31-latin-500italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    src: url('../fonts/montserrat-v31-latin-600italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* #endregion */

/* #region CSS Reset */

* {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &::before,
    &::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    &:focus-visible {
        outline: var(--outline-width) var(--outline-style) var(--color-indigo);
        outline-offset: 0;

        &.site_header__logo,
        &.cta__card,
        &.cta__inline {
            outline: none;
        }
    }
}


html {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}


ul,
ol {
    list-style: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

button {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* #endregion */

/* #region Theme - Colors */

.bg-ink-fresh {
    background: var(--color-ink-fresh);
}

.bg-ink-washed {
    background: var(--color-ink-washed);
}

.bg-ink-faded {
    background: var(--color-ink-faded);
}

.bg-indigo {
    background: var(--color-indigo);
}

.bg-paper {
    background: var(--color-paper);
}

/* #endregion */

/* #region Theme - Fonts */

.font-display-lg {
    margin-bottom: 0.75rem;
    /* 12px */
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;

    @media (min-width: 1366px) {
        font-size: var(--font-size-3xl);
    }

    @media (min-width: 1536px) {
        font-size: var(--font-size-4xl);
    }

    @media (min-width: 1920px) {
        margin-bottom: 1.25rem;
        /* 20px */
        font-size: var(--font-size-5xl);
    }
}

.font-display-md {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);

    @media (min-width: 1366px) {
        font-size: var(--font-size-2xl);
    }

    @media (min-width: 1536px) {
        font-size: var(--font-size-3xl);
    }

    @media (min-width: 1920px) {
        font-size: var(--font-size-4xl);
    }
}

.font-display-sm {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);

    @media (min-width: 1920px) {
        font-size: var(--font-size-2xl);
    }
}

.font-headline-lg {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-medium);

    @media (min-width: 1920px) {
        font-size: var(--font-size-2xl);
    }
}

.font-headline-md {
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
    /* 4px */

    &:last-child {
        margin-bottom: 0;
    }

    @media (min-width: 1920px) {
        font-size: var(--font-size-xl);
    }
}

.font-headline-sm {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
    /* 4px */

    &.cta {
        align-self: flex-start;
        position: relative;
        padding-right: 1.5rem;
        /* 24px */
        font-weight: var(--font-weight-semibold);

        text-decoration: underline;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset-md);
    }

    &:last-child {
        margin-bottom: 0;
    }

    @media (min-width: 1920px) {
        font-size: var(--font-size-lg);
    }
}

.font-body-lg {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    margin-bottom: 0.5rem;
    /* 8px */

    &:last-child {
        margin-bottom: 0;
    }

    @media (min-width: 1920px) {
        font-size: var(--font-size-lg);
    }
}

.font-body-md {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);

    @media (min-width: 1920px) {
        font-size: var(--font-size-base);
    }
}

.font-body-sm {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);

    &.as_label {
        margin-bottom: 0.25rem;
    }
}

/* #endregion */

/* #region Layout */

.flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    &.align-bottom {
        justify-content: end;
    }

    &>* {
        flex-shrink: 0;
        flex-basis: 0;
    }

    &.column {
        flex-direction: column;
    }

    &.row {
        flex-direction: row;
    }
}

.grow-1 {
    flex-grow: 1;
}

.grow-2 {
    flex-grow: 2;
}

.grow-4 {
    flex-grow: 4;
}

.basis-one_third {
    flex-basis: 100%;

    @media (min-width: 1024px) {
        flex-basis: calc(100% / 3 * 1);
        min-width: calc(100% / 3 * 1);
    }
}

.basis-two_thirds {
    flex-basis: 100%;

    @media (min-width: 1024px) {
        flex-basis: calc(100% / 3 * 2);
        min-width: calc(100% / 3 * 2);
    }
}

.basis-half {
    flex-basis: 100%;

    @media (min-width: 768px) {
        flex-basis: 50%;
        min-width: 50%;
    }
}

.basis-full {
    flex-basis: 100%;

    @media (min-width: 768px) {
        flex-basis: 100%;
        min-width: 100%;
    }
}

.basis-auto {
    flex-basis: 100%;

    @media (min-width: 768px) {
        flex-basis: auto;
    }
}

/* #endregion */

/* #region Styles - Global */

.skip_link {
    position: fixed;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;

    &:focus-visible {
        top: 0;
        left: 0;
        z-index: var(--z-skip-link);
        width: auto;
        width: 100%;
        height: auto;
        min-height: 120px;
        padding: var(--spacing-lg);
        background: var(--color-indigo);
        color: var(--color-paper);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset-md);
    }
}

.disclaimer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-disclaimer);
    width: 100%;

    p {
        padding: var(--spacing-md);
        background: red;
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        line-height: var(--line-height-body);

        @media (min-width: 1280px) {
            font-size: var(--font-size-lg);
        }
    }
}

.tagline {
    display: flex;
    flex-flow: column nowrap;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-medium);

    .name {
        font-family: var(--font-family-display);
        font-size: var(--font-size-base);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;

        @media (min-width: 1280px) {
            font-size: var(--font-size-xl);
        }
    }
}

.button {
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    &.as_nav {
        display: block;
        width: var(--spacing-xl);
        height: var(--spacing-xl);
        background: var(--color-ink-washed);

        .icon {
            display: block;
            padding: var(--spacing-sm);
        }

        &.linkedin {
            background: #0A66C2;
        }

        &.hello {
            background: var(--color-indigo);
        }
    }

    &.as_link {
        display: block;
        padding: var(--spacing-xs) 0;
        font-family: var(--font-family-base);
        font-size: var(--font-size-md);
        line-height: var(--line-height-body);
        font-weight: var(--font-weight-semibold);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset-md);

        &:is(:hover, :focus-visible) {
            background: var(--color-indigo);
        }

        @media (min-width: 1280px) {
            padding: var(--spacing-xs) 0;
            font-size: var(--font-size-base);
        }
    }

    &.as_tag {
        display: block;
        height: var(--spacing-xl);
        padding: 0 var(--spacing-md);
        background: var(--overlay-light);
        font-family: var(--font-family-base);
        font-size: var(--font-size-md);
        line-height: var(--spacing-xl);
        /* Vertically center text in 40px container */
        font-weight: var(--font-weight-medium);
        color: var(--color-paper);

        &.is_active {
            background: var(--color-indigo);
        }
    }

    &:hover {
        &::before {
            background: var(--overlay-light);
        }
    }

    &:focus-visible {
        &::before {
            background: var(--overlay-medium);
        }
    }

    &:active {
        &::before {
            background: var(--overlay-strong);
        }
    }
}

.layout__padding {
    padding: var(--spacing-lg);

    @media (min-width: 1920px) {
        padding: var(--spacing-xl);
    }
}

.layout__margin_top {
    margin-top: var(--spacing-lg);
}

.cta__arrow {
    display: flex;
    position: absolute;
    bottom: -9px;
    left: calc(100% - 24px);
    width: 0;
    height: 24px;
    padding: 11px 0;
    overflow: hidden;
    transition: width .375s .125s, padding .5s;

    .mask {
        position: relative;
        width: 24px;
        height: 100%;
        overflow: hidden;

        svg {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            max-width: 24px;
            fill: var(--color-paper);
            shape-rendering: crispEdges;
        }
    }

    @media (min-width: 1920px) {
        bottom: -8px;
    }
}

.card {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    ul {
        margin-top: var(--spacing-xs);

        li {
            background: var(--overlay-light);
            padding: var(--spacing-sm);
            margin-bottom: var(--spacing-xs);

            &:last-child {
                margin: 0;
            }
        }

        &.inline {
            li {
                flex: 0 0 auto;
                padding: var(--spacing-xs) var(--spacing-sm);
                margin-right: var(--spacing-xs);
                text-wrap: nowrap;
            }
        }
    }

    >.align_end {
        padding-top: var(--spacing-sm);
        margin-top: auto;

        &:only-child {
            padding-top: 0;
        }
    }
}

.cta__card {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    >.align_end {
        padding-top: var(--spacing-sm);
        margin-top: auto;

        &:only-child {
            padding-top: 0;
        }
    }

    &:is(:hover, :focus-visible) {
        background: var(--color-indigo);

        .cta {
            .cta__arrow {
                width: 24px;
                padding: 0;
                transition: width .5s, padding .375s .125s;
            }
        }
    }

    &.indigo {
        background: var(--color-indigo);

        &:is(:hover, :focus-visible) {
            background: var(--color-paper);
            color: var(--color-ink-fresh);

            .cta {
                .cta__arrow {
                    .mask {
                        svg {
                            fill: var(--color-ink-fresh);
                        }
                    }
                }
            }
        }
    }
}

.cta__inline,
.breadcrumb__link {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset-sm);

    &:is(:hover, :focus-visible) {
        background: var(--color-indigo);
        outline: var(--outline-width) var(--outline-style) var(--color-indigo);
        outline-offset: 0;
    }
}

.bg-pattern {
    background: var(--bg-pattern);
}

.comparison_table {
    text-align: left;

    thead {
        tr {
            th {
                padding: var(--spacing-lg);

                @media (min-width: 1280px) {
                    padding: var(--spacing-xl);
                }
            }
        }
    }

    tbody {
        tr {
            td {
                padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);

                @media (min-width: 1280px) {
                    padding: var(--spacing-lg) var(--spacing-xl);
                }
            }

            &:first-child {
                td {
                    padding-top: var(--spacing-lg);

                    @media (min-width: 1280px) {
                        padding-top: var(--spacing-xl);
                    }
                }
            }

            &:last-child {
                td {
                    padding-bottom: var(--spacing-lg);

                    @media (min-width: 1280px) {
                        padding-bottom: var(--spacing-xl);
                    }
                }
            }
        }
    }
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.article {
    .article__intro {
        .wrapper {
            display: flex;
            flex-flow: column nowrap;

            .table_of_content {
                flex: 1 1 auto;
                width: 100%;
                padding-right: 20px;
                overflow-y: auto;

                >ol {
                    padding: var(--spacing-sm) 0;

                    >li {
                        margin-bottom: var(--spacing-sm);

                        a {
                            transition: padding-left .25s;

                            &.active {
                                background: var(--color-paper) !important;
                                padding-left: var(--spacing-md);
                                outline: 2px solid var(--color-paper);
                                color: var(--color-ink-fresh);
                            }
                        }
                    }
                }
            }

            @media (min-width: 1024px) {
                position: fixed;
                top: initial;
                left: initial;
                bottom: initial;
                z-index: var(--z-toc);
                width: calc(((100vw - var(--scrollbar-width, 0px) - 160px) / 3) - var(--spacing-xl));
                height: calc(100vh - 280px);
                padding: 0;
                background: transparent;
            }

            @media (min-width: 1280px) {
                width: calc(((100vw - var(--scrollbar-width, 0px) - 240px) / 3) - 40px);
                height: calc(100vh - 280px);

            }

            @media (min-width: 1920px) {
                width: calc(((100vw - var(--scrollbar-width, 0px) - 240px) / 3) - 80px);
                height: calc(100vh - 320px);

            }
        }

        &.is_open {
            height: calc(100% - 160px);
        }
    }

    .article__block {
        >* {
            margin-bottom: 32px;

            @media (min-width: 1920px) {
                margin-bottom: var(--spacing-xl);
            }
        }

        .article__items,
        .snapshot {

            li,
            .snapshot__item {
                background: var(--color-ink-faded);

                &:nth-child(2n + 1) {
                    background: var(--color-ink-washed);
                }

                @media (min-width: 768px) {
                    &:nth-child(4n + 1) {
                        background: var(--color-ink-washed);
                    }

                    &:nth-child(4n + 2) {
                        background: var(--color-ink-faded);
                    }

                    &:nth-child(4n + 3) {
                        background: var(--color-ink-faded);
                    }

                    &:nth-child(4n + 4) {
                        background: var(--color-ink-washed);
                    }
                }
            }
        }

        >ul {
            >li {
                padding: var(--spacing-sm);
                margin-bottom: var(--spacing-xs);
                background: var(--overlay-light);

                &:last-child {
                    margin: 0;
                }
            }
        }

        figure {
            width: 100%;
            margin-bottom: 32px;

            @media (min-width: 1920px) {
                margin-bottom: var(--spacing-xl);
            }

            img {
                width: 100%;
            }
        }

        blockquote {
            padding: var(--spacing-lg);
            margin: var(--spacing-lg) 0;
            background: var(--color-indigo);

            a {
                &:is(:hover, :focus) {
                    background: var(--color-paper);
                    outline: var(--outline-width) var(--outline-style) var(--color-paper);
                    color: var(--color-ink-fresh);
                }
            }

            @media (min-width: 1280px) {
                padding: var(--spacing-xl);
                margin: var(--spacing-xl) 0;
            }
        }
    }
}

.gallery__card {

    .gallery__card__header {
        .gallery__card__category {
            font-family: var(--font-family-base);
            font-size: var(--font-size-md);
            line-height: var(--line-height-body);
        }

        .gallery__card__title {
            font-family: var(--font-family-base);
            font-size: var(--font-size-xl);
            line-height: var(--line-height-heading);
            font-weight: var(--font-weight-medium);
        }
    }

    .gallery__card__body {
        padding: var(--spacing-lg) 0;

        .gallery__card__excerpt {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
        }
    }

    .gallery__card__footer {
        >* {
            flex-basis: auto;
            /* padding: 0 var(--spacing-xs); */
            margin-right: var(--spacing-xs);
            /* background: var(--overlay-light); */
            font-family: var(--font-family-base);
            font-size: var(--font-size-sm);
            line-height: var(--line-height-body);
            text-transform: uppercase;

            &:last-child {
                margin: 0;
            }

            @media (min-width: 1280px) {
                font-size: var(--font-size-md);
            }
        }

        .align_end {
            margin-left: auto;
        }
    }
}

.line_top,
.line_mid,
.line_bot {
    stroke-dasharray: 18;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s ease;
}

.toggle__nav_main.is_open .line_top {
    stroke-dashoffset: 18;
}

.toggle__nav_main.is_open .line_bot {
    stroke-dashoffset: -18;
}

/* #endregion */

/* #region Styles - Nested */

body {
    min-height: 100vh;
    background: var(--color-ink-fresh);
    overflow-x: hidden;
    font-family: var(--font-family-base);
    font-optical-sizing: auto;
    font-style: normal;
    line-height: var(--line-height-body);
    color: var(--color-paper);

    .site_header {
        width: 100%;
        padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
        background: var(--color-ink-fresh);

        .wrapper {

            .site_header__logo {
                flex: 0 0 auto;
                display: block;
                width: var(--spacing-2xl);
                height: var(--spacing-2xl);
                padding: var(--spacing-lg);

                &:is(:hover, :focus-visible) {
                    background: var(--color-indigo);
                }

                @media (min-width: 1024px) {
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: var(--z-nav-shortcuts);
                }

                @media (min-width: 1280px) {
                    width: var(--spacing-3xl);
                    height: var(--spacing-3xl);
                    padding: 30px;
                }
            }

            .tagline {
                height: var(--spacing-2xl);
                padding: var(--spacing-lg) var(--spacing-lg);

                @media (min-width: 1024px) {
                    height: var(--spacing-2xl);
                    padding: var(--spacing-lg);
                }

                @media (min-width: 1280px) {
                    height: var(--spacing-3xl);
                    padding: var(--spacing-xl) var(--spacing-lg);
                    font-size: var(--font-size-base);
                }

                @media (min-width: 1920px) {
                    padding: var(--spacing-xl);
                }
            }

            .controls {
                .breadcrumb {
                    /* height: var(--spacing-xl); */

                    li {
                        display: flex;
                        flex-direction: flow nowrap;
                        font-family: var(--font-family-base);
                        font-size: var(--font-size-md);
                        line-height: var(--line-height-body);

                        &:not(:last-child)::after {
                            content: "/";
                            padding: 0 var(--spacing-xs);
                        }
                    }
                }

                @media (min-width: 1280px) {
                    padding: var(--spacing-xl) var(--spacing-lg);
                }

                @media (min-width: 1920px) {
                    padding: var(--spacing-xl);
                }
            }

            .nav_shortcuts {
                position: fixed;
                top: 0;
                right: 0;
                z-index: var(--z-nav-shortcuts);
                display: flex;
                flex-direction: column;
                width: var(--spacing-xl);
                padding: 0;

                @media (min-width: 1024px) {
                    width: var(--spacing-2xl);
                    padding: var(--spacing-lg);
                }

                @media (min-width: 1280px) {
                    width: var(--spacing-3xl);
                    padding: var(--spacing-xl);
                }
            }

            .nav_main {
                position: fixed;
                top: 0;
                right: 0;
                z-index: var(--z-nav-main);
                display: flex;
                overflow: hidden;
                width: var(--spacing-xl);
                height: var(--spacing-xl);
                background: var(--bg-pattern), var(--color-ink-fresh);
                background: var(--color-ink-washed);
                transition: .5s;

                .wrapper {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: calc(100vw - var(--scrollbar-width, 0px));
                    transition: .5s;

                    .nav_main__header {
                        padding: 0 var(--spacing-lg);

                        .nav_main__logo {
                            display: block;
                            width: var(--spacing-2xl);
                            height: var(--spacing-2xl);
                            padding: var(--spacing-lg);

                            &:is(:hover, :focus-visible) {
                                background: var(--color-indigo);
                            }

                            @media (min-width: 1024px) {
                                position: absolute;
                                top: 0;
                                left: 0;
                            }

                            @media (min-width: 1280px) {
                                width: var(--spacing-3xl);
                                height: var(--spacing-3xl);
                                padding: 30px;
                            }
                        }

                        .tagline {
                            height: 80px;

                            @media (min-width: 1280px) {
                                height: 120px;
                                font-size: var(--font-size-base);
                            }
                        }

                        @media (min-width: 768px) {
                            padding: 0 40px;
                        }

                        @media (min-width: 1024px) {
                            padding: 0 80px;
                        }

                        @media (min-width: 1280px) {
                            padding: 0 120px;
                        }
                    }

                    .nav_main__body {
                        padding: 0 var(--spacing-lg);

                        @media (min-width: 768px) {
                            padding: 0 var(--spacing-xl);
                        }

                        @media (min-width: 1024px) {
                            padding: 0 var(--spacing-2xl);
                        }

                        @media (min-width: 1280px) {
                            padding: 0 var(--spacing-3xl);
                        }
                    }

                    @media (min-width: 1024px) {
                        top: -20px;
                        right: -20px;
                        width: calc(100vw - var(--scrollbar-width, 0px));
                    }

                    @media (min-width: 1280px) {
                        top: -40px;
                        right: -40px;
                        width: calc(100vw - var(--scrollbar-width, 0px));
                    }
                }

                &.is_open {
                    top: 0;
                    right: 0;
                    width: calc(100vw - var(--scrollbar-width, 0px));
                    height: 100%;

                    .wrapper {
                        top: 0;
                        right: 0;
                    }

                    @media (min-width: 1280px) {
                        width: calc(100vw - var(--scrollbar-width, 0px));
                    }
                }

                @media (min-width: 1024px) {
                    top: var(--spacing-lg);
                    right: var(--spacing-lg);
                }

                @media (min-width: 1280px) {
                    top: var(--spacing-xl);
                    right: var(--spacing-xl);
                }
            }
        }


        &.fixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: var(--z-header);
        }

        @media (min-width: 640px) {
            padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);
        }

        @media (min-width: 1024px) {
            padding: 0 var(--spacing-2xl);
        }

        @media (min-width: 1280px) {
            padding: 0 var(--spacing-3xl);
        }
    }

    main {
        >section {
            padding: var(--spacing-lg);

            @media (min-width: 640px) {
                padding: var(--spacing-xl);
            }

            @media (min-width: 1024px) {
                padding: var(--spacing-2xl);
            }

            @media (min-width: 1280px) {
                padding: var(--spacing-3xl);
            }
        }

        .hero {
            padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);

            .hero__content {
                align-items: stretch;

                .hero__card {
                    flex-basis: 100%;
                    min-width: 100%;

                    @media (min-width: 768px) {
                        flex-basis: 50%;
                        min-width: 50%;
                    }

                    &.grow-1 {
                        @media (min-width: 1536px) {
                            flex-basis: 25%;
                            min-width: 25%;
                        }
                    }

                    &.grow-2 {
                        @media (min-width: 1536px) {
                            flex-basis: 50%;
                            min-width: 50%;
                        }
                    }
                }

                .layout__spacer {
                    display: none;

                    @media (min-width: 1536px) {
                        display: flex;
                    }
                }

                .hero__prompt {
                    +.layout__spacer {
                        display: flex;

                        @media (min-width: 1536px) {
                            display: none;
                        }
                    }
                }

                .hero__alternatives {
                    flex-basis: 100%;
                    min-width: 100%;
                    background: var(--color-ink-faded);

                    @media (min-width: 1024px) {
                        flex-basis: 50%;
                        min-width: 50%;
                    }
                }

                .hero__testimonial {
                    flex-basis: 100%;
                    min-width: 100%;
                    background: var(--color-indigo);

                    @media (min-width: 1024px) {
                        flex-basis: 50%;
                        min-width: 50%;
                    }
                }
            }

            &.fixed {
                position: fixed;
                top: var(--spacing-2xl);

                @media (min-width: 1280px) {
                    top: var(--spacing-3xl);
                }

                +* {
                    padding-top: var(--spacing-2xl);

                    @media (min-width: 1280px) {
                        padding-top: var(--spacing-3xl);
                    }
                }
            }

            @media (min-width: 640px) {
                padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
            }

            @media (min-width: 1024px) {
                padding: 0 var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl);
            }

            @media (min-width: 1280px) {
                padding: 0 var(--spacing-3xl) var(--spacing-3xl) var(--spacing-3xl);
            }
        }

        .article {
            padding: var(--spacing-lg);
            padding-top: 280px;

            @media (min-width: 768px) {
                padding: var(--spacing-xl);
                padding-top: 280px;
            }

            @media (min-width: 1024px) {
                padding: var(--spacing-2xl);
            }

            @media (min-width: 1280px) {
                padding: var(--spacing-3xl);
            }
        }
    }

    .footer {
        padding: var(--spacing-lg);

        .footer__links {
            flex-basis: 100%;
            min-width: 100%;

            @media (min-width: 768px) {
                flex-basis: 50%;
                min-width: 50%;
            }

            @media (min-width: 1024px) {
                flex-basis: 25%;
                min-width: 25%;
            }
        }

        .footer__subheadline {
            text-align: left;

            @media (min-width: 640px) {
                text-align: right;
            }
        }

        @media (min-width: 640px) {
            padding: var(--spacing-xl);
        }

        @media (min-width: 1024px) {
            padding: var(--spacing-2xl);
        }

        @media (min-width: 1280px) {
            padding: var(--spacing-3xl);
        }
    }
}

/* #endregion */

/* #region Scrollbar Styling */

/* Global HTML scrollbar - harmonized with design dimensions */
html {
    scrollbar-width: 20px;
    scrollbar-color: var(--color-paper) var(--color-ink-washed);
}

/* TOC scrollbar - thin variant for compact space */
.table_of_content {
    scrollbar-width: 20px;
    scrollbar-color: var(--color-paper) var(--color-ink-washed);
}

/* Webkit fallback for older browsers */
html::-webkit-scrollbar {
    width: 20px;
}

html::-webkit-scrollbar-track {
    background: var(--color-ink-washed);
}

html::-webkit-scrollbar-thumb {
    background: var(--color-paper);
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--color-paper);
}

.table_of_content::-webkit-scrollbar {
    width: 20px;
}

.table_of_content::-webkit-scrollbar-track {
    background: var(--color-ink-washed);
}

.table_of_content::-webkit-scrollbar-thumb {
    background: var(--color-paper);
}

.table_of_content::-webkit-scrollbar-thumb:hover {
    background: var(--color-paper);
}

/* #endregion */

/* #region Accessibility - Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .cta__arrow,
    .line_top,
    .line_mid,
    .line_bot {
        transition: none !important;
    }
}

/* #endregion */