@layer components {
    :root.marketing {
        --color--brand--black: var(--color--brand--20);
    }

    section.join-membership {

        & header.plan {
            & hgroup {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;

                & span.price {
                    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);

                    font-size: var(--font--title--size--medium);

                    &.referred {
                        text-decoration: line-through;
                        text-decoration-color: var(--color--loud);
                        text-decoration-thickness: 2px;

                        &::before,
                        &::after {
                            content: "\00a0";
                        }
                    }
                }
            }
        }

        & p.referral-confirmation {
            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);

            color: var(--color--loud);
        }

        & article.grid {
            color: var(--color--brand);
            padding-inline: var(--space-xl) var(--space-l);
            border-inline: none;
            margin-inline: calc(var(--space-s) * -1);

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

            & p {
                color: black;
                font-family: var(--font--family--sans-serif);
            }

            & ol {
                list-style-type: none;
                counter-reset: ol;

                li {
                    position: relative;
                    counter-increment: ol;

                    &::before {
                        content: counter(ol) ".";
                        position: absolute;
                        left: -2rem;

                        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);
                    }

                    & h2 {
                        border-bottom: solid var(--size--border) var(--color--border);
                        padding-bottom: var(--space-s);

                        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.bottom-cta {
        text-align: center;

        & h3 {
            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);
        }
    }

    @media screen and (min-width: 600px) {
        section.join-membership {
            & article.grid {
                padding: var(--space-2xl) var(--space-3xl);
            }
        }
    }

    @media screen and (min-width: 1000px) {
        section.join-membership {
            & article.grid {
                margin-inline: 0;
                border-inline: solid var(--size--border) var(--color--border);
            }
        }
    }
}