body.landing {

    .mast .hello h1 {
        .sub {
            display: block;
            font-size: var(--font-size-s);
            font-weight: 400;
            letter-spacing: 0;
            margin-block-start: .125em;
        }

        @media (width >= 1000px) {
            margin-block-start: .25em;
            
            .wave {
                transform: translateY(calc(-42% - .125em));
            }
            .sub {
                font-size: var(--font-size-m);
                margin-block-start: .25em;
            }
        }
    }
    .mast .hello h2.stack {
        --stack-gap: 0;
    }

    .mob-hero .hero-wrap {
        top: calc(var(--header-height) + 75px);
    }
    .intro .mob-hero .hero-wrap {
        top: 0;
    }

}

body.page-welcome {

    main {
        height: 100vh;
        padding: min(5%, 24px);
        text-align: center;
        
        > .stack {
            background: var(--color-bg-light);
            border-radius: 21px;
            height: 100%;
            text-align: center;
        }

        .logo {
            background: rgb(var(--color-green-500));
            height: 4.20rem;
        }
        .wave {
            --wave-color: var(--color-bg);

            margin-block-start: 2rem;
            margin-block-end: 1rem;
        }

        h2 {
            padding-inline: 48px;
        }
        h2 + .btn {
            margin-block-start: 1rem;
        }
    }

}