/* ==================================================
   ROOT VARIABLES
================================================== */

:root {
    --navy: black;
    --navy-dark: black;
    --maroon: black;
    --rose: #871145;
    --gold: #e7c471;
    --orange: #B8860B;
    --light-grey: #f7f7f7;
    --mid-grey: #eaeaea;
    --text: #333333;
    --header-height: 100px;
}


/* ==================================================
   RESET AND BASE
================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    min-width: 0;

    overflow-x: hidden;

    background-color: #ffffff;
    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;
}

img {
    display: block;

    max-width: 100%;
}

a {
    color: inherit;
}

button {
    font: inherit;
}

address {
    font-style: normal;
}


/* ==================================================
   REUSABLE CONTAINERS
================================================== */

.wide-container {
    width: min(
        1248px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}

.narrow-container {
    width: min(
        800px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}

.text-center {
    text-align: center;
}


/* ==================================================
   GENERAL SECTION TITLES
================================================== */

.section-eyebrow {
    margin-bottom: 4px;

    color: var(--maroon);

    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.5;

    text-transform: uppercase;
}

.section-title {
    color: var(--maroon);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.2rem,
            5vw,
            3.75rem
        );

    font-weight: 400;
    line-height: 1;
}

.compact-title {
    font-size:
        clamp(
            2rem,
            4vw,
            2.5rem
        );
}

.section-separator {
    width: 20%;
    max-width: 160px;
    height: 1px;

    margin: 24px auto;

    background-color: var(--rose);
}


/* ==================================================
   GENERAL BUTTONS
================================================== */

.primary-button,
.footer-button {
    display: inline-block;

    padding: 12px 28px;

    background-color: var(--orange);

    color: var(--light-grey);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.primary-button:hover,
.footer-button:hover {
    opacity: 0.88;

    transform: translateY(-1px);
}

.primary-button:focus-visible,
.footer-button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}


/* ==================================================
   MEMBERSHIP PAGE
================================================== */

.membership-page {
    position: relative;
    z-index: 3;

    min-height: 100vh;
    padding-top: 0;

    background-color: var(--navy);
}


/* ==================================================
   MEMBERSHIP PAGE HERO
================================================== */

.membership-page-hero {
    position: relative;

    min-height:
        calc(
            315px +
            var(--header-height)
        );

    padding:
        calc(
            58px +
            var(--header-height)
        )
        20px
        58px;

    overflow: hidden;

    background-color: var(--navy);

    border-top:
        6px solid
        var(--orange);

    text-align: center;

    transform: translateZ(0);

    backface-visibility: hidden;
}

.membership-page-hero::before {
    content: "";

    position: absolute;
    inset: -4px;
    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(
                231,
                196,
                113,
                0.08
            ),
            transparent 42%
        );

    pointer-events: none;
}

.membership-page-hero::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    z-index: 0;

    height: 16px;

    background-color: var(--navy);

    pointer-events: none;
}

.membership-page-hero-inner {
    position: relative;
    z-index: 1;
}

.membership-page-kicker {
    margin-bottom: 5px;

    color: var(--light-grey);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;

    text-transform: uppercase;
}

.membership-page-hero h1 {
    color: var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.6rem,
            6vw,
            4.25rem
        );

    font-weight: 400;
    line-height: 1.05;
}


/* ==================================================
   MEMBERSHIP INTRODUCTION
================================================== */

.membership-introduction {
    position: relative;
    z-index: 3;

    margin-top: -4px;

    padding:
        92px 0 88px;

    background-color: #ffffff;
}

.membership-introduction::before {
    content: "";

    position: absolute;
    top: -8px;
    right: 0;
    left: 0;

    height: 10px;

    background-color: #ffffff;

    pointer-events: none;
}

.membership-introduction
p:not(.section-eyebrow) {
    margin-bottom: 17px;

    color: var(--text);

    font-size: 17px;
    line-height: 1.8;
}

.membership-introduction
p:last-child {
    margin-bottom: 0;
}

.membership-introduction-lead {
    font-size: 19px !important;
}


/* ==================================================
   MEMBERSHIP TYPES
================================================== */

.membership-types {
    position: relative;
    z-index: 3;

    padding:
        78px 0 96px;

    overflow: hidden;

    background-color: var(--mid-grey);
}

.membership-section-heading {
    margin-bottom: 48px;

    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);
}

.membership-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 38px;

    width: min(
        1020px,
        100%
    );

    margin: 0 auto;
}


/* ==================================================
   MEMBERSHIP OPTIONS
   HIDDEN STARTING STATES
================================================== */

.js-enabled
.membership-types.reveal-ready:not(.animate-in)
.membership-section-heading {
    opacity: 0;

    filter: blur(4px);

    transform:
        translateY(30px)
        scale(0.98);
}

.js-enabled
.membership-types.reveal-ready:not(.animate-in)
.membership-card {
    opacity: 0;

    transform:
        translateY(55px)
        scale(0.92);
}


/* ==================================================
   MEMBERSHIP OPTIONS
   REVEAL ANIMATIONS
================================================== */

.membership-types.animate-in
.membership-section-heading {
    animation:
        membership-heading-reveal
        1.65s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        backwards;
}

.membership-types.animate-in
.membership-card:nth-child(1) {
    animation:
        membership-card-reveal
        1.85s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        0.35s
        backwards;
}

.membership-types.animate-in
.membership-card:nth-child(2) {
    animation:
        membership-card-reveal
        1.85s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        0.55s
        backwards;
}


/* ==================================================
   MEMBERSHIP KEYFRAMES
================================================== */

@keyframes membership-heading-reveal {

    from {
        opacity: 0;

        filter: blur(4px);

        transform:
            translateY(30px)
            scale(0.98);
    }

    to {
        opacity: 1;

        filter: blur(0);

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes membership-card-reveal {

    from {
        opacity: 0;

        transform:
            translateY(55px)
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==================================================
   MEMBERSHIP CARDS
================================================== */

.membership-card {
    min-width: 0;

    overflow: hidden;

    opacity: 1;

    background-color: #ffffff;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.22
        );

    transform:
        translateY(0)
        scale(1);

    backface-visibility: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.membership-card:hover {
    border-color:
        var(--orange);

    box-shadow:
        0 18px 36px
        rgba(
            0,
            0,
            0,
            0.14
        );

    transform:
        translateY(-7px)
        scale(1);
}


/* ==================================================
   CARD HEADER
================================================== */

.membership-card-header {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 122px;

    padding: 24px;

    background-color:
        var(--navy);

    text-align: center;
}

.membership-card-header h3 {
    color: var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            2.75rem
        );

    font-weight: 400;
    line-height: 1.15;
}


/* ==================================================
   CARD PRICE
================================================== */

.membership-card-body {
    display: flex;

    align-items: flex-end;
    justify-content: center;

    gap: 6px;

    min-height: 220px;

    padding: 48px 20px;

    overflow: hidden;

    background-color:
        var(--light-grey);
}

.membership-card-term {
    color: var(--orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            5rem,
            9vw,
            7rem
        );

    font-weight: 700;
    line-height: 0.9;

    white-space: nowrap;
}

.membership-card-unit:first-child {
    align-self: flex-start;

    margin-top: 20px;

    color: #666666;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 3rem;
    font-style: normal;
    line-height: 1;

    white-space: nowrap;
}

.membership-card-unit:last-child {
    align-self: flex-end;

    margin-bottom: 12px;

    color: #777777;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;
    font-style: italic;
    line-height: 1;

    white-space: nowrap;
}


/* ==================================================
   CARD FOOTER
================================================== */

.membership-card-footer {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 110px;

    padding: 26px 32px;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

    text-align: center;
}

.membership-card-footer p {
    color: var(--text);

    font-size: 16px;
    line-height: 1.65;
}


/* ==================================================
   MEMBERSHIP APPLICATION
================================================== */

.membership-application {
    position: relative;
    z-index: 3;

    padding:
        90px 0 100px;

    background-color:
        #ffffff;
}

.membership-application-intro {
    color: #666666;

    font-size: 17px;
    line-height: 1.75;
}


/* ==================================================
   APPLICATION STEPS
================================================== */

.membership-steps {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;

    margin-bottom: 70px;
}

.membership-step {
    min-width: 0;

    padding:
        38px 30px 36px;

    background-color:
        var(--light-grey);

    border-top:
        4px solid
        var(--orange);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.membership-step:hover {
    box-shadow:
        0 15px 30px
        rgba(
            0,
            0,
            0,
            0.1
        );

    transform:
        translateY(-5px);
}

.membership-step-number {
    display: block;

    margin-bottom: 22px;

    color:
        rgba(
            184,
            134,
            11,
            0.28
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 58px;
    font-weight: 700;
    line-height: 1;
}

.membership-step h3 {
    margin-bottom: 11px;

    color: var(--maroon);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;
    font-weight: 400;
    line-height: 1.2;
}

.membership-step p {
    color: #666666;

    font-size: 15px;
    line-height: 1.7;
}


/* ==================================================
   DOWNLOAD PANEL
================================================== */

.membership-download-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 46px;

    padding: 50px 54px;

    background-color:
        var(--navy);

    border-left:
        6px solid
        var(--orange);

    opacity: 1;

    transform:
        translateY(0);
}


/* ==================================================
   DOWNLOAD PANEL REVEAL
================================================== */

.js-enabled
.membership-download-panel.reveal-ready:not(.animate-in) {
    opacity: 0;

    transform:
        translateY(45px);
}

.membership-download-panel.reveal-ready {
    transition:
        opacity 1.35s ease,
        transform 1.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.membership-download-panel.animate-in {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==================================================
   DOWNLOAD COPY
================================================== */

.membership-download-kicker {
    margin-bottom: 8px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.membership-download-copy {
    min-width: 0;
}

.membership-download-copy h2 {
    margin-bottom: 14px;

    color: var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight: 400;
    line-height: 1.15;
}

.membership-download-copy
p:not(.membership-download-kicker) {
    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size: 15px;
    line-height: 1.7;
}


/* ==================================================
   DOWNLOAD BUTTON
================================================== */

.membership-download-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    min-width: 270px;

    padding: 17px 26px;

    background-color:
        var(--orange);

    border:
        2px solid
        var(--orange);

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.membership-download-button svg {
    flex: 0 0 auto;

    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.membership-download-button:hover {
    background-color:
        var(--gold);

    border-color:
        var(--gold);

    color:
        var(--navy);

    transform:
        translateY(-2px);
}

.membership-download-button:focus-visible {
    outline:
        3px solid
        var(--gold);

    outline-offset: 4px;
}


/* ==================================================
   LARGE TABLET
   901px - 1100px
================================================== */

@media (
    max-width: 1100px
) {

    .wide-container {
        width: min(
            100% - 48px,
            1040px
        );
    }


    .narrow-container {
        width: min(
            760px,
            calc(100% - 48px)
        );
    }


    .membership-card-grid {
        width: min(
            900px,
            100%
        );

        gap: 28px;
    }


    .membership-card-header {
        min-height: 112px;

        padding:
            22px 18px;
    }


    .membership-card-header h3 {
        font-size:
            clamp(
                1.8rem,
                3.5vw,
                2.4rem
            );
    }


    .membership-card-body {
        min-height: 200px;

        padding:
            42px 14px;
    }


    .membership-card-term {
        font-size:
            clamp(
                4.6rem,
                9vw,
                6rem
            );
    }


    .membership-card-unit:first-child {
        font-size: 2.5rem;
    }


    .membership-card-unit:last-child {
        font-size: 23px;
    }


    .membership-step {
        padding:
            34px 24px 32px;
    }


    .membership-step h3 {
        font-size: 26px;
    }


    .membership-download-panel {
        gap: 32px;

        padding:
            46px 40px;
    }


    .membership-download-button {
        min-width: 245px;

        padding:
            16px 20px;
    }

}


/* ==================================================
   TABLET
   701px - 900px
================================================== */

@media (
    max-width: 900px
) {

    :root {
        --header-height: 78px;
    }


    .wide-container {
        width: min(
            100% - 36px,
            860px
        );
    }


    .narrow-container {
        width: min(
            720px,
            calc(100% - 36px)
        );
    }


    /* ==============================================
       HERO
    ============================================== */

    .membership-page-hero {
        min-height:
            calc(
                285px +
                var(--header-height)
            );

        padding:
            calc(
                54px +
                var(--header-height)
            )
            18px
            54px;
    }


    .membership-page-kicker {
        font-size: 11px;

        letter-spacing:
            0.2em;
    }


    /* ==============================================
       INTRODUCTION
    ============================================== */

    .membership-introduction {
        padding:
            78px 0 76px;
    }


    .membership-introduction
    p:not(.section-eyebrow) {
        font-size: 16px;

        line-height: 1.75;
    }


    .membership-introduction-lead {
        font-size:
            18px !important;
    }


    /* ==============================================
       MEMBERSHIP TYPES

       Keep the two-column desktop composition on
       normal tablets rather than immediately stacking.
    ============================================== */

    .membership-types {
        padding:
            70px 0 82px;
    }


    .membership-section-heading {
        margin-bottom: 42px;
    }


    .membership-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 22px;

        width: 100%;
    }


    .membership-card-header {
        min-height: 102px;

        padding:
            20px 14px;
    }


    .membership-card-header h3 {
        font-size:
            clamp(
                1.65rem,
                4.5vw,
                2.15rem
            );
    }


    .membership-card-body {
        min-height: 175px;

        padding:
            35px 10px;
    }


    .membership-card-term {
        font-size:
            clamp(
                4rem,
                10vw,
                5.2rem
            );
    }


    .membership-card-unit:first-child {
        margin-top: 12px;

        font-size: 2.1rem;
    }


    .membership-card-unit:last-child {
        margin-bottom: 7px;

        font-size: 18px;
    }


    .membership-card-footer {
        min-height: 105px;

        padding:
            22px 20px;
    }


    .membership-card-footer p {
        font-size: 14px;

        line-height: 1.6;
    }


    /* ==============================================
       APPLICATION

       Three steps remain side-by-side on larger
       tablets so the desktop structure is preserved.
    ============================================== */

    .membership-application {
        padding:
            78px 0 86px;
    }


    .membership-steps {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 18px;

        margin-bottom: 58px;
    }


    .membership-step {
        padding:
            30px 20px 28px;
    }


    .membership-step-number {
        margin-bottom: 18px;

        font-size: 48px;
    }


    .membership-step h3 {
        font-size: 23px;
    }


    .membership-step p {
        font-size: 13px;

        line-height: 1.65;
    }


    /* ==============================================
       DOWNLOAD PANEL
    ============================================== */

    .membership-download-panel {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 24px;

        padding:
            40px 30px;
    }


    .membership-download-copy h2 {
        font-size:
            clamp(
                1.8rem,
                4.5vw,
                2.5rem
            );
    }


    .membership-download-copy
    p:not(.membership-download-kicker) {
        font-size: 14px;
    }


    .membership-download-button {
        min-width: 210px;

        padding:
            15px 18px;

        font-size: 11px;
    }

}


/* ==================================================
   SMALL TABLET / LARGE MOBILE
   601px - 760px
================================================== */

@media (
    max-width: 760px
) {

    /* ==============================================
       MEMBERSHIP CARDS

       This is the point where two full pricing cards
       become too narrow, so they stack naturally.
    ============================================== */

    .membership-card-grid {
        grid-template-columns: 1fr;

        gap: 28px;

        width: min(
            600px,
            100%
        );
    }


    .membership-card {
        width: 100%;

        margin: 0 auto;
    }


    .membership-card-header {
        min-height: 108px;
    }


    .membership-card-body {
        min-height: 190px;
    }


    .membership-card-term {
        font-size:
            clamp(
                4.8rem,
                14vw,
                6rem
            );
    }


    .membership-card-unit:first-child {
        font-size: 2.4rem;
    }


    .membership-card-unit:last-child {
        font-size: 21px;
    }


    .membership-card-footer p {
        font-size: 15px;
    }


    /* ==============================================
       APPLICATION STEPS
    ============================================== */

    .membership-steps {
        grid-template-columns: 1fr;

        gap: 22px;

        width: min(
            600px,
            100%
        );

        margin-right: auto;
        margin-bottom: 55px;
        margin-left: auto;
    }


    .membership-step {
        padding:
            34px 28px 32px;
    }


    .membership-step-number {
        font-size: 52px;
    }


    .membership-step h3 {
        font-size: 27px;
    }


    .membership-step p {
        font-size: 14px;
    }


    /* ==============================================
       DOWNLOAD PANEL
    ============================================== */

    .membership-download-panel {
        grid-template-columns: 1fr;

        gap: 28px;

        padding:
            42px 34px;

        text-align: center;
    }


    .membership-download-button {
        justify-self: center;

        min-width: 260px;
    }

}


/* ==================================================
   MOBILE
   600px AND BELOW
================================================== */

@media (
    max-width: 600px
) {

    :root {
        --header-height: 78px;
    }


    .wide-container,
    .narrow-container {
        width:
            calc(
                100% - 28px
            );
    }


    /* ==============================================
       GENERAL TYPOGRAPHY
    ============================================== */

    .section-eyebrow {
        font-size: 13px;

        letter-spacing:
            0.09em;
    }


    .section-title {
        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }


    .compact-title {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.45rem
            );
    }


    .section-separator {
        width: 90px;

        margin:
            20px auto 23px;
    }


    /* ==============================================
       HERO
    ============================================== */

    .membership-page-hero {
        min-height:
            calc(
                245px +
                var(--header-height)
            );

        padding:
            calc(
                42px +
                var(--header-height)
            )
            14px
            44px;
    }


    .membership-page-kicker {
        margin-bottom: 8px;

        font-size: 10px;

        letter-spacing:
            0.18em;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(
                2.6rem,
                13vw,
                3.6rem
            );
    }


    /* ==============================================
       INTRODUCTION
    ============================================== */

    .membership-introduction {
        margin-top: -2px;

        padding:
            64px 0 66px;
    }


    .membership-introduction::before {
        top: -6px;

        height: 8px;
    }


    .membership-introduction
    p:not(.section-eyebrow) {
        margin-bottom: 15px;

        font-size: 15px;

        line-height: 1.72;
    }


    .membership-introduction-lead {
        font-size:
            17px !important;
    }


    /* ==============================================
       MEMBERSHIP TYPES
    ============================================== */

    .membership-types {
        padding:
            62px 0 68px;
    }


    .membership-section-heading {
        margin-bottom: 36px;
    }


    .membership-card-grid {
        gap: 24px;
    }


    /*
       Keep the exact same reveal style as desktop.
       Only the travel distance is reduced because
       mobile screens are physically smaller.
    */

    .js-enabled
    .membership-types.reveal-ready:not(.animate-in)
    .membership-card {
        opacity: 0;

        transform:
            translateY(42px)
            scale(0.94);
    }


    @keyframes membership-card-reveal {

        from {
            opacity: 0;

            transform:
                translateY(42px)
                scale(0.94);
        }

        to {
            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }

    }


    .membership-card-header {
        min-height: 96px;

        padding:
            20px 16px;
    }


    .membership-card-header h3 {
        font-size:
            clamp(
                1.75rem,
                9vw,
                2.3rem
            );
    }


    .membership-card-body {
        min-height: 170px;

        padding:
            34px 12px;
    }


    .membership-card-term {
        font-size:
            clamp(
                4.5rem,
                22vw,
                5.5rem
            );
    }


    .membership-card-unit:first-child {
        margin-top: 12px;

        font-size: 2.15rem;
    }


    .membership-card-unit:last-child {
        margin-bottom: 7px;

        font-size: 18px;
    }


    .membership-card-footer {
        min-height: 95px;

        padding:
            22px 20px;
    }


    .membership-card-footer p {
        font-size: 14px;
    }


    /* ==============================================
       TOUCH CARD FEEDBACK

       Real hover is retained for devices that support
       it. Touch devices get a subtle active state.
    ============================================== */

    .membership-card:active {
        border-color:
            var(--orange);

        transform:
            translateY(-2px);
    }


    /* ==============================================
       APPLICATION
    ============================================== */

    .membership-application {
        padding:
            64px 0 70px;
    }


    .membership-application-intro {
        font-size: 15px;

        line-height: 1.7;
    }


    .membership-steps {
        gap: 20px;

        margin-bottom: 48px;
    }


    .membership-step {
        padding:
            30px 24px 29px;
    }


    .membership-step-number {
        margin-bottom: 17px;

        font-size: 48px;
    }


    .membership-step h3 {
        margin-bottom: 9px;

        font-size: 25px;
    }


    .membership-step p {
        font-size: 14px;

        line-height: 1.65;
    }


    /* ==============================================
       DOWNLOAD PANEL
    ============================================== */

    .membership-download-panel {
        gap: 26px;

        padding:
            38px 22px;

        border-left-width: 4px;
    }


    .membership-download-kicker {
        font-size: 11px;

        letter-spacing:
            0.13em;
    }


    .membership-download-copy h2 {
        margin-bottom: 12px;

        font-size:
            clamp(
                1.9rem,
                10vw,
                2.5rem
            );
    }


    .membership-download-copy
    p:not(.membership-download-kicker) {
        font-size: 14px;

        line-height: 1.65;
    }


    .membership-download-button {
        width: 100%;
        min-width: 0;

        padding:
            15px 18px;

        font-size: 11px;
    }

}


/* ==================================================
   SMALL MOBILE
   430px AND BELOW
================================================== */

@media (
    max-width: 430px
) {

    .wide-container,
    .narrow-container {
        width:
            calc(
                100% - 24px
            );
    }


    .membership-page-hero {
        padding:
            calc(
                38px +
                var(--header-height)
            )
            12px
            40px;
    }


    .membership-introduction,
    .membership-types,
    .membership-application {
        padding-top: 56px;
        padding-bottom: 58px;
    }


    .membership-card-header {
        min-height: 90px;
    }


    .membership-card-body {
        min-height: 155px;

        gap: 4px;

        padding:
            30px 8px;
    }


    .membership-card-term {
        font-size:
            clamp(
                4rem,
                22vw,
                4.9rem
            );
    }


    .membership-card-unit:first-child {
        margin-top: 10px;

        font-size: 1.9rem;
    }


    .membership-card-unit:last-child {
        margin-bottom: 5px;

        font-size: 16px;
    }


    .membership-card-footer {
        min-height: 88px;

        padding:
            20px 16px;
    }


    .membership-step {
        padding:
            28px 20px;
    }


    .membership-download-panel {
        padding:
            34px 18px;
    }

}


/* ==================================================
   TOUCH DEVICES
================================================== */

@media (
    hover: none
) {

    /*
       Do not remove the desktop interactions from the
       design completely. Instead, prevent hover states
       from sticking after a user taps an element.
    */

    .membership-card:hover {
        border-color:
            rgba(
                0,
                0,
                0,
                0.22
            );

        box-shadow: none;

        transform:
            translateY(0)
            scale(1);
    }


    .membership-step:hover {
        box-shadow: none;

        transform:
            translateY(0);
    }


    .membership-download-button:hover {
        background-color:
            var(--orange);

        border-color:
            var(--orange);

        color: #ffffff;

        transform: none;
    }


    .membership-card:active {
        border-color:
            var(--orange);

        transform:
            translateY(-2px);
    }


    .membership-step:active {
        transform:
            translateY(-2px);
    }


    .membership-download-button:active {
        background-color:
            var(--gold);

        border-color:
            var(--gold);

        color:
            var(--navy);

        transform:
            translateY(-1px);
    }

}


/* ==================================================
   LANDSCAPE MOBILE
================================================== */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 520px
) {

    /*
       Keeps the hero proportional on shorter landscape
       mobile screens without removing its desktop look.
    */

    .membership-page-hero {
        min-height:
            calc(
                205px +
                var(--header-height)
            );

        padding:
            calc(
                28px +
                var(--header-height)
            )
            20px
            34px;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(
                2.3rem,
                8vw,
                3.2rem
            );
    }


    .membership-introduction {
        padding:
            55px 0;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

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

    .membership-section-heading,
    .membership-card,
    .membership-download-panel,

    .membership-types.reveal-ready:not(.animate-in)
    .membership-section-heading,

    .membership-types.reveal-ready:not(.animate-in)
    .membership-card,

    .membership-download-panel.reveal-ready:not(.animate-in) {

        opacity: 1;

        filter: none;

        transform: none;

        animation: none !important;

        transition: none !important;
    }

}