@layer marketing {
    svg.invoice-template {
        & #Blue {
            stroke: var(--color--border);
        }

        & #Black {
            fill: var(--color--text--primary);
            stroke: var(--color--text--primary);
        }

        & .highlight {
            fill: var(--color--brand--highlight--soft);
        }
    }

    body.marketing {
        & main {
            & header {
                text-align: center;
                padding-bottom: var(--space-s);
            }
        }
    }

    :root:has(body#marketing) {
        --color--text--primary: var(--color--brand--black);
    }

    body#marketing {
        & header > nav > ul {
            display: flex;
        }

        & main {
            /* color: var(--color--brand--20); */
            padding: 0;

            & header {
                grid-column: span 1;

                & hgroup {
                    & h2 {
                        font-family: var(--font--title--family--xlarge);
                        font-size: var(--font--title--size--xlarge);
                        font-weight: var(--font--title--weight--xlarge);
                        line-height: var(--font--title--line-height--xlarge);
                        letter-spacing: var(--font--title--letter-spacing--xlarge);
                        text-transform: var(--font--title--casing--xlarge);
                        font-size: clamp(3.25rem, calc(2.77rem + 2.35vw), 4.25rem);
                        letter-spacing: -0.015em;
                        line-height: 0.8;
                        margin-bottom: var(--space-m-new);
                    }

                    & p {
                        font-family: var(--font--title--family--medium);
                        font-size: var(--font--title--size--medium);
                        font-weight: var(--font--title--weight--medium);
                        line-height: var(--font--title--line-height--medium);
                        letter-spacing: var(--font--title--letter-spacing--medium);
                        text-transform: var(--font--title--casing--medium);
                    }
                }
            }

            & section {
                margin-bottom: 0;
                padding: var(--space-xl) var(--space-l);
                max-width: 100%;
                width: 100%;

                & > div.wrapper {
                    max-width: 1400px;
                    width: 100%;
                    margin: auto;
                }
            }

            & div.highlight {
                background-color: var(--color--brand--highlight);
                padding: var(--space-m);
                margin-inline: calc(var(--space-m) * -1);
                border-block: solid var(--size--border) var(--color--border);

                &:not(:has(+ *)) {
                    border-bottom: none;
                }

                & section {
                    margin-bottom: 0;
                }
            }

            & section.highlight {
                background-color: var(--color--brand--highlight);
            }

            & span.highlight {
                padding-inline: var(--space-2xs);
                background-color: var(--color--brand--highlight);
            }

            & section#hero {
                max-width: 100%;
                padding: 0;
                background-color: var(--color--brand--97);
                position: relative;
                display: flow-root;
                overflow: hidden;
                display: flex;
                justify-content: center;

                & header {
                    text-align: center;
                }

                & div.section-content {
                    max-width: 50rem;
                    margin: 5rem 2rem;
                    position: relative;
                    z-index: 5;

                    & hgroup {
                        text-align: center;

                        & h1 {
                            font-size: clamp(3rem, 15vw, 8.5rem);
                            line-height: 0.8;
                            letter-spacing: -0.025em;
                            padding-bottom: 2rem;
                            font-weight: 500;
                        }

                        & p {
                            line-height: 1.2;
                        }
                    }

                    & > p {
                        margin-bottom: var(--space-xl);
                    }

                    & div:last-of-type {
                        display: flex;
                        justify-content: center;

                        & > a.button {
                            max-width: 15rem;
                            width: 100%;
                        }
                    }
                }

                & div.image-container {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    background-color: hsl(from var(--color--brand--90) h s calc(l + 5));
                    /* background-blend-mode: multiply; */
                    z-index: 0;
                }

                & div.image-container {
                    height: 100%;
                    margin: 0;
                    background-color: white;
                    isolation: isolate;

                    & img {
                        position: relative;
                        mix-blend-mode: multiply;
                        background-color: transparent;
                    }

                    & > div.b {
                        position: absolute;
                        inset: 0;
                        background-color: hsl(from var(--color--brand--50) h 50 70);
                        mix-blend-mode: multiply;
                    }

                    & > div.a {
                        position: absolute;
                        inset: 0;
                        background-color: var(--color--text--primary);
                        mix-blend-mode: screen;
                    }

                    & > div.fade {
                        position: absolute;
                        inset: 0;
                        background-color: white;
                        opacity: 0.85;
                    }
                }

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center center;
                    mix-blend-mode: soft-light;
                    mix-blend-mode: multiply;
                    background-color: var(--color--text--primary);
                    background-blend-mode: screen;
                }
            }

            & svg {
                max-width: 75vw;
                height: auto;
            }

            & section#templates {
                padding-block: var(--space-l);
                background-color: var(--color--brand--80);
                padding-inline: 0;
                padding-bottom: 0;

                & div.wrapper {
                    padding-inline: var(--space-l);
                }

                & div.template-gallery {
                    display: flex;
                    column-gap: var(--space-s);
                    overflow-x: auto;
                    margin-top: var(--space-l);
                    padding-bottom: var(--space-l);
                    scroll-margin-inline: var(--space-s);
                    padding-inline: var(--space-s);
                }

                & svg {
                    background-color: var(--color--brand--white);
                    width: 85vw;
                    height: auto;
                    flex-shrink: 0;
                    border: solid var(--size--border) var(--color--border);
                }
            }

            & section.wide {
                text-align: center;
                border-block: solid var(--size--border) var(--color--border);

                & div.wrapper {
                    padding-inline:
                }

                & h2 {
                    font-size: 1.625rem;
                    letter-spacing: -0.06rem;
                    font-family: var(--font--family--brand);
                    font-weight: 500;
                }
            }

            & section#colors {
                & div.wrapper {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    column-gap: var(--space-2xl);

                    & > div:first-child {
                        order: 2;
                    }
                }

                & svg {
                    display: none;
                    background-color: var(--color--brand--white);
                }

                & div.color-widget {
                    display: flex;
                    flex-direction: column;
                    flex-direction: row;
                    width: 100%;
                    column-gap: var(--space-xs);

                    & label.color-picker {
                        width: 0;
                        height: 0;
                        margin: 0;

                        & > input {
                            appearance: none;
                            visibility: visible;

                            &::-webkit-color-swatch,
                            &::-moz-color-swatch {
                                display: none;
                            }
                        }
                    }

                    & div.primary-color {
                        display: flex;
                        flex-direction: column;
                        flex-grow: 1;

                        & div.color-card {
                            margin-bottom: 0;

                            & > div > div {
                                border-right: none;
                                padding-right: var(--space-2xs);
                            }
                        }
                    }

                    & div.color-choices-container {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                    }
                }
            }

            & section#type {
                background-color: var(--color--brand--20);
                color: var(--color--brand--white);

                & div.wrapper {
                    display: flex;
                    flex-direction: column;
                    column-gap: var(--space-2xl);
                    align-items: center;
                    width: 100%;
                }

                & header {
                    border-color: var(--color--brand--highlight);

                    & hgroup p {
                        color: color(from var(--color--brand--white) srgb r g b / 0.7);
                    }
                }

                & dl.type-samples {
                    margin-bottom: 0;
                    column-gap: var(--space-2xl);
                    width: 100%;

                    & div {
                        display: flex;
                        flex-direction: column;
                        max-width: 900px;
                        row-gap: var(--space-l);
                        border-top: solid var(--size--border) var(--color--brand--highlight);
                        padding-block: var(--space-s) var(--space-2xl);
                        column-gap: inherit;
                        align-items: stretch;

                        &:last-of-type {
                            padding-bottom: 0;
                        }

                        & dt {
                            color: color(from var(--color--brand--white) srgb r g b / 0.7);
                            font-family: var(--font--title--family--small);
                            font-size: var(--font--title--size--small);
                            font-weight: var(--font--title--weight--small);
                            line-height: var(--font--title--line-height--small);
                            letter-spacing: var(--font--title--letter-spacing--small);
                            text-transform: var(--font--title--casing--small);
                        }

                        & dd {
                            align-self: center;
                            text-align: center;
                            padding-inline: var(--space-m);
                            max-width: 40rem;
                        }

                        &.large-headlines dd {
                            font-family: var(--font--title--family--xlarge);
                            font-size: var(--font--title--size--xlarge);
                            font-weight: var(--font--title--weight--xlarge);
                            line-height: var(--font--title--line-height--xlarge);
                            letter-spacing: var(--font--title--letter-spacing--xlarge);
                            text-transform: var(--font--title--casing--xlarge);
                        }

                        &.medium-headlines dd {
                            font-family: var(--font--title--family--medium);
                            font-size: var(--font--title--size--medium);
                            font-weight: var(--font--title--weight--medium);
                            line-height: var(--font--title--line-height--medium);
                            letter-spacing: var(--font--title--letter-spacing--medium);
                            text-transform: var(--font--title--casing--medium);
                        }

                        &.small-headlines dd {
                            font-family: var(--font--title--family--small);
                            font-size: var(--font--title--size--small);
                            font-weight: var(--font--title--weight--small);
                            line-height: var(--font--title--line-height--small);
                            letter-spacing: var(--font--title--letter-spacing--small);
                            text-transform: var(--font--title--casing--small);
                        }

                        &.small-text dd {
                            font-family: var(--font--text--family--medium);
                            font-size: var(--font--text--size--medium);
                            font-weight: var(--font--text--weight--medium);
                            line-height: var(--font--text--line-height--medium);
                            letter-spacing: var(--font--text--letter-spacing--medium);
                            text-transform: var(--font--text--casing--medium);
                        }

                        &.paragraphs dd {
                            text-align: left;
                            font-family: var(--font--text--family--large);
                            font-size: var(--font--text--size--large);
                            font-weight: var(--font--text--weight--large);
                            line-height: var(--font--text--line-height--large);
                            letter-spacing: var(--font--text--letter-spacing--large);
                            text-transform: var(--font--text--casing--large);
                        }

                        &.fields dd {
                            font-family: var(--font--input--family--medium);
                            font-size: var(--font--input--size--medium);
                            font-weight: var(--font--input--weight--medium);
                            line-height: var(--font--input--line-height--medium);
                            letter-spacing: var(--font--input--letter-spacing--medium);
                            text-transform: var(--font--input--casing--medium);
                        }
                    }
                }
            }

            & section#payments {
                text-align: center;
                padding: 0;

                & > div:first-child {
                    padding-inline: var(--space-l);
                }

                & h2 {
                    margin-top: var(--space-xl);
                }

                & p {
                    max-width: 900px;
                    margin: auto;
                }

                & div.payments-preview {
                    display: flex;
                    column-gap: var(--space-m);
                    margin: auto;
                    margin-top: var(--space-xl);
                    overflow-x: auto;
                    padding-inline: var(--space-l);
                    text-align: left;
                    max-width: calc(20rem * 4 + var(--space-m) * 3 + var(--space-l) * 2);

                    & div.sidebar.view {
                        flex-shrink: 0;
                        width: 20rem;
                        background-color: var(--color--brand--white);
                        border: solid var(--size--border) var(--color--border);
                        border-bottom: none;
                    }
                }
            }

            & section#use-cases {
                display: flex;
                flex-direction: column;
                align-items: center;
                /* padding-block: var(--space-3xl); */
                justify-content: center;

                & h2 {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    line-height: 1;
                    margin-bottom: 0;
                    font-size: 2.75rem;
                    font-family: var(--font--family--brand);
                    font-weight: 500;
                    margin-bottom: var(--space-l);
                    padding-block: var(--space-m);
                }

                & span.small {
                    font-size: 1.75rem;
                    font-family: var(--font--family--serif);
                    font-weight: 400;
                    font-style: italic;
                    letter-spacing: 0;
                    margin-top: 12px;
                }

                & ul {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    list-style-type: none;
                    margin-bottom: 0;
                    height: 100%;
                    font-size: 1.5rem;
                    font-weight: 300;
                    font-style: italic;

                    li {
                        text-align: left;
                        margin-bottom: 0.75rem;
                    }
                }

                & span.highlight {
                    background-color: var(--color--brand--white);
                }
            }
        }
    }

    @media (min-width: 600px) {
        body#marketing {
            & main {
                & div.highlight {
                    margin-inline: calc(var(--space-xl) * -1);
                }

                & section#colors {
                    & div.color-widget {
                        flex-direction: row;
                        column-gap: var(--space-s);

                        & div.primary-color {
                            & label.color-picker {
                                display: block;
                                width: 2.3rem;
                                height: 2.3rem;
                                margin: var(--space-2xs);
                            }

                            & div.color-card > div > div {
                                border-right: solid var(--size--border) var(--color--border);
                                padding-right: 0;
                            }
                        }
                    }
                }
            }
        }

        @media screen and (min-width: 1000px) {
            body.marketing {
                & main {
                    & header {
                        text-align: left;
                    }
                }
            }

            body#marketing {
                & main {
                    & section {
                        & header.prominent {
                            display: block;
                            text-align: center;

                            & h1 {
                                margin-bottom: var(--space-s);
                            }

                            & h2 {
                                margin-bottom: 0;
                            }
                        }
                    }

                    & div.highlight {
                        padding: var(--space-l);
                        margin-inline: calc(var(--space-l) * -1);
                    }

                    & form {
                        display: flex;
                        flex-direction: column;
                        row-gap: var(--space-xs-new);
                    }

                    & section#hero {
                        display: grid;
                        grid-template-columns: 2fr 1fr;
                        margin-inline: var(--space-m);

                        & div.section-content {
                            margin: 15rem auto;

                            & > p {
                                font-size: 1.5rem;
                            }
                        }

                        & div.image-container {
                            position: relative;
                            height: 100%;
                            margin: 0;
                            background-color: white;
                            isolation: isolate;

                            & img {
                                position: relative;
                            }

                            & > div.fade {
                                display: none;
                            }
                        }
                    }

                    & section#templates {
                        padding-top: var(--space-xl);
                        background-color: var(--color--brand--80);

                        & div.template-gallery {
                            column-gap: var(--space-2xl);
                            margin-top: var(--space-2xl);
                            padding-bottom: var(--space-2xl);
                            scroll-margin-inline: var(--space-2xl);
                            padding-inline: var(--space-l);
                        }

                        & svg {
                            width: 40vw;
                            height: auto;
                            flex-shrink: 0;
                        }
                    }

                    & section#colors {
                        & div.wrapper {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                        }

                        & svg {
                            display: initial;
                            width: 100%;
                            height: auto;
                            order: 1;
                            border: solid var(--size--border) var(--color--border);
                        }
                    }

                    & section#type {
                        & div.wrapper {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            padding-block: 0;
                        }

                        & dl.type-samples {
                            & div {
                                display: grid;

                                & dd {
                                    text-align: right;
                                    max-width: none;
                                    padding-inline: 0;
                                }
                            }
                        }
                    }

                    & section#use-cases {
                        flex-direction: row;

                        & h2 {
                            flex-direction: row;
                            margin-bottom: 0;

                            &::after {
                                content: "{";
                                font-family: var(--font--family--serif);
                                color: var(--color--brand);
                                font-size: 50rem;
                                font-weight: 100;
                                line-height: 1;
                                margin-top: -90px;
                                display: block;
                            }
                        }
                    }

                    & section.wide {
                        text-align: center;
                        border-block: solid var(--size--border) var(--color--border);

                        & h2 {
                            font-size: 2.5rem;
                            letter-spacing: -0.06rem;
                            font-family: var(--font--family--brand);
                            font-weight: 500;
                        }
                    }
                }
            }

            body#marketing {
                max-height: none;
                height: auto;
                overflow-y: auto;

                & main {
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    grid-column: 1 / -1;
                    align-items: stretch;
                    justify-content: center;

                    & h1 {
                        font-size: 6rem;
                    }

                    & section {
                        flex-grow: 1;
                    }

                    & div.highlight {
                        margin-inline: calc(var(--space-2xl) * -1);
                        padding-block: var(--space-2xl);
                    }

                    & form {
                        flex-direction: row;
                        justify-content: center;
                    }

                    & section#use-cases {
                        & span.huge {
                            display: inline;
                        }
                    }
                }
            }
        }
    }
}