/* Become an Affiliate & White Label VPN — partner/business pages. */
.become-an-affiliate,
.white-label-vpn {

    /* header.css scopes its rules as #header #title-container (two IDs) —
       match that weight or the padding loses the specificity war. */
    #header #title-container {
        padding-bottom: 32px;

        @media screen and (min-width: 876px) {
            padding-bottom: 48px;
        }
    }

    .partner-content {
        &>.box {
            border: 1px solid #F3F3F3;

            h2,
            p {
                text-align: start;
            }

            h2 {
                font-weight: 700;
            }

            @media screen and (min-width: 1200px) {
                padding: 60px 90px;

                h2 {
                    font-size: 36px;
                    line-height: 54px;
                }
            }
        }
    }

    .checklist {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-self: stretch;

        @media screen and (min-width: 876px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 24px;
        }

        li {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #0A011A;
            font-size: 16px;
            line-height: normal;

            &:before {
                content: "";
                display: block;
                flex: 0 0 auto;
                width: 16px;
                height: 16px;
                background: url("../images/check-green-square-m9tlVFY.svg") no-repeat;
            }
        }
    }

    .steps {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-self: stretch;

        @media screen and (min-width: 876px) {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .box {
            margin: 0;
            gap: 12px;
            align-self: stretch;

            h3,
            p {
                text-align: start;
            }

            h3 {
                font-size: 20px;
                line-height: 30px;
            }

            p {
                font-size: 15px;
                line-height: 24px;
            }
        }
    }

    /* Prohibited-marketing list — replace the green checkmarks #faq puts on ul li. */
    #faq .box.white ul.banned li:before {
        background: none;
        content: "🚫";
        width: auto;
        height: auto;
        font-size: 14px;
        line-height: normal;
    }

    #partner-cta {
        p {
            color: #C3B8D8;
            max-width: 1000px;
        }
    }

    /* The CTA band is the last thing before the footer — kill the footer's
       top margin (mt-4/mt-lg-6 are !important utilities) so the dark band
       meets the footer with no white gap. */
    footer {
        margin-top: 0 !important;
    }
}