#cde-hero {

}
#cde-hero .content-container .hero {
    position: relative;
    padding-right: 0;
    padding-left: 0;
}
#cde-hero .content-container .hero .logo {
    position: absolute;
    width: 70%;
    top: 30%;
    left: 15%;
}
#cde-build .cde-header, #cde-slides .cde-header {
    text-align: center;
    font-weight: 100;
    padding: 20px 0 10px 0;
    text-transform: uppercase;
}
#cde-build .rule, #cde-slides .rule {
    width: 50%;
    margin: 0 auto;
}
#cde-build .sub-header {
    text-align: center;
    padding: 20px 0 25px 0;
    width: 80%;
    display: block;
    margin: 0 auto;
    font-size: 18px;
}
#cde-build .instrument {
    text-align: center;
}
#cde-build .btn {
    font-weight: 100;
    color: #222;
}
#cde-build .col-xs-4 h4 {
    min-height: 2.8em;
}
#cde-finance {
    margin-top: 25px;
}
#cde-finance .content-container {
    color: #fff;
    position: relative;
}
#cde-finance .content-container .copy {
    position: absolute;
    width: 94.5%;
    top: 30%;
    text-align: center;
    color: #fff;
}
#cde-finance .content-container .copy h2,
#cde-finance .content-container .copy h3 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
#cde-finance .content-container .copy h2 {
    font-size: 40px;
    font-weight: 800;
}
#cde-finance .content-container .copy h3 {
    font-size: 15px;
    font-weight: 600;
}
#cde-process {
    padding-top: 25px;
}
#cde-process .cde-header {
    text-align: center;
    font-weight: 100;
    padding: 20px 0;
    text-transform: uppercase;
}
#cde-process .content {
    position: relative;
}
#cde-process .content h3 {
    color: #fff;
    position: absolute;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    width: calc(100% - 30px);
    top: 40%;
    text-transform: uppercase;
    font-size: 47px;
    font-weight: 600;
}
#cde-process .content p {
    margin: 25px 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
    font-weight: 200;
}
#cde-faq .cde-header {
    text-align: center;
    font-weight: 100;
    padding: 20px 0;
}
#cde-faq .question {
    font-weight: 600;
    font-size: 16px;
    color: #555;
}
#cde-faq .answer {
    color: #555;
}
#cde-slides {
    padding-top:25px;
}
@media only screen and (min-width: 767px) {
    #cde-hero .content-container .hero .logo {
        width: 46%;
        top: 30%;
        left: 27%;
    }
    #cde-finance .content-container .copy {
        top: 10%;
    }
    #cde-process .content h3 {
        top: 92px;
        font-size: 30px;
    }
    #cde-process .content p {
        margin: 25px 10px;
        font-size: 12px;
    }
}
@media only screen and (min-width: 991px) {
    #cde-build .sub-header {
        width: 60%;
    }
    #cde-finance .content-container .copy {
        top: 15%;
    }
    #cde-finance .content-container .copy h2 {
        font-size: 45px;
    }
    #cde-finance .content-container .copy h3 {
        font-size: 25px;
    }
    #cde-process .content h3 {
        top: 135px;
        font-size: 35px;
    }
}
@media only screen and (min-width: 1199px) {
    #cde-finance .content-container .copy {
        top: 20%;
    }
    #cde-finance .content-container .copy h2 {
        font-size: 50px;
    }
    #cde-finance .content-container .copy h3 {
        font-size: 30px;
    }
    #cde-process .content h3 {
        top: 165px;
    }
}
/* JO 2026-10-09: "Buy Now, Pay Over Time" (Affirm's approved banner copy) wraps to three
   lines at 40px on the narrowest phones and spilled past the banner image. */
@media only screen and (max-width: 400px) {
    #cde-finance .content-container .copy h2 {
        font-size: 30px;
    }
}

/* JO 2026-10-09: Affirm's white logo (hotlinked from Affirm's CDN, unaltered, per their
   Logos, Banners, and Buttons guidance) in place of the word in the banner subheading.
   The arch sits above the letters, so it rides a little above the cap line. */
#cde-finance .content-container .copy h3 .cde-affirm-logo {
    display: inline-block;
    height: 1.45em;
    width: auto;
    vertical-align: -0.12em;
    margin-left: 0.15em;
}