/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#feature-links-screen{
    display: block;
}
#feature-homework-screen{
    display: block;
}
#feature-drive-screen{
    display: block;
}
#feature-summary-screen{
    display: block;
}
#feature-lvl-checker-screen{
    display: block;
}

/*--Feature Links Hero-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-hero{
    background-image: linear-gradient(-45deg, var(--accent-blue-2-old), var(--accent-blue-1-old), var(--accent-blue-4-old), var(--accent-blue-9-old));
    background-size:  200% 200%;
    padding-bottom:   5rem;
    padding-top:      3rem;
    position:         relative;
    overflow:         hidden;
}
.feature-links-hero-bg{
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size:  2rem 2rem;
    opacity:          0.4;
}
.feature-links-hero-inner{
    position:   relative;
    z-index:    2;
    max-width:  min(56rem, calc(100% - 4rem));
    margin:     0 auto;
    text-align: center;
}
.feature-links-hero-eyebrow{
    display:        inline-block;
    background:     rgba(255, 255, 255, 0.18);
    color:          var(--white);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  2rem;
    padding:        0.35rem 1rem;
    margin-bottom:  3rem;
}
.feature-links-hero h1{
    color:         var(--white);
    font-size:     2.5rem;
    font-weight:   700;
    line-height:   1.15;
    margin-bottom: 1.5rem;
}
.feature-links-hero p{
    color:       rgba(255, 255, 255, 0.88);
    font-size:   1.15rem;
    font-weight: 500;
    max-width:   44rem;
    margin:      0 auto 2.5rem;
    line-height: 1.7;
}
.feature-links-hero-cancel{
    color:          rgba(255, 255, 255, 0.7);
    font-size:      0.9rem;
    padding-top:    3rem;
    padding-bottom: 2rem;
    font-weight:    600;
}
#feature-links-hero-button{
    background-color: var(--background-main);
    border:           none !important;

    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  3rem;
    height:      4rem;
    width:       16rem;
}
#feature-links-hero-button:hover{
    background-color: rgb(245, 245, 245);
}
#feature-links-hero-button:active{
    background-color: rgb(235, 235, 235);
}

/*--Feature Links Shared-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-section-inner{
    max-width: min(56rem, calc(100% - 4rem));
    margin:    0 auto;
}
.feature-links-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-links-section-title{
    color:         var(--dark-blue);
    font-size:     2.1rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 1.25rem;
}
.feature-links-section-title .feature-links-accent{
    color: var(--accent-blue-3);
}
.feature-links-section-body{
    color:       var(--text-gray-light);
    font-size:   1.05rem;
    max-width:   46rem;
    line-height: 1.8;
    margin:      0;
}

/*--Feature Links Intro------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-intro-section{
    background: var(--background-white);
    padding:    5rem 2rem;
}
.feature-links-intro-inner{
    display:     flex;
    gap:         3rem;
    align-items: flex-start;
    flex-wrap:   wrap;
}
.feature-links-intro-text{
    flex:      1 1 28rem;
    min-width: 0;
}
.feature-links-intro-badge-col{
    flex:           0 0 auto;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    align-self:     center;
}
.feature-links-intro-badge{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.07);
    padding:       1rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    width:         14rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-links-intro-badge:hover{
    transform: translateY(-2px);
}
.feature-links-intro-badge-icon{
    color:       var(--accent-blue-3);
    flex-shrink: 0;
}
.feature-links-intro-badge-label{
    font-weight: 700;
    font-size:   1rem;
    color:       var(--dark-blue);
}

/*--Feature Links Problems---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-problems-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-links-section-inner{
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-links-problems-eyebrow{
    margin-top: 2rem;
}
.feature-links-problems-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap:                   0.75rem;
    margin-top:            2.5rem;
}
.feature-links-problem-item{
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-2);
    padding:       1rem 1.25rem;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
    transition:    transform ease-in-out 0.1s;
}
.feature-links-problem-item:hover{
    transform: translateY(-2px);
}
.feature-links-problem-dot{
    width:         0.5rem;
    height:        0.5rem;
    border-radius: 100%;
    background:    var(--accent-blue-3);
    flex-shrink:   0;
    opacity:       0.6;
}
.feature-links-problem-text{
    font-size: 1rem;
    color:     var(--text-gray);
}

/*--Feature Links Features---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-features-section{
    background: var(--background-white);
    position:   relative;
}
.feature-links-features-inner{
    max-width:      calc(100% - 4rem);
    width:          60rem;
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-links-features-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap:                   1rem;
    margin-top:            3rem;
}
.feature-links-feature-card{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    padding:       1.5rem;
    display:       flex;
    gap:           1.25rem;
    align-items:   flex-start;
    transition:    transform ease-in-out 0.1s;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
}
.feature-links-feature-card:hover{
    transform: translateY(-3px);
}
.feature-links-feature-icon{
    background:      var(--accent-blue-7-old);
    border-radius:   var(--border-radius-2);
    width:           3.5rem;
    height:          3.5rem;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-blue-3);
}
.feature-links-feature-text h3{
    color:         var(--text-gray);
    font-size:     1.1rem;
    font-weight:   600;
    margin-bottom: 0.4rem;
    margin-top:    0;
}
.feature-links-feature-text p{
    font-size:     0.9rem;
    color:         var(--text-gray-light);
    line-height:   1.7;
    margin-bottom: 0.5rem;
    margin-top:    0;
}
.feature-links-feature-outcome{
    color:       var(--accent-blue-3);
    font-size:   0.95rem;
    font-weight: 600;
    display:     inline-block;
}

/*--Feature Links Steps------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-steps-section{
    background:     var(--background-main);
    padding-bottom: 5rem;
    padding-top:    4rem;
}
.feature-links-steps-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align:     center;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-links-steps-title{
    max-width:    calc(100% - 2rem);
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
}
.feature-links-steps-subtitle{
    max-width:  calc(100% - 2rem);
    margin:     0 auto;
    text-align: center;
}
.feature-links-steps-holder{
    transform:       translate(-50%);
    width:           calc(100vw - 2rem);
    margin-left:     50%;
    display:         flex;
    flex-wrap:       wrap;
    gap:             1.5rem;
    margin-top:      3rem;
    justify-content: center;
}
.feature-links-step-card{
    background:    var(--background-white);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.09);
    padding:       1.5rem 1.5rem 1.5rem 2.25rem;
    flex:          0 1 300px;
    min-width:     260px;
    position:      relative;
    transition:    transform ease-in-out 0.1s;
}
.feature-links-step-card:hover{
    transform: translateY(-3px);
}
.feature-links-step-number{
    position:        absolute;
    top:             -1rem;
    left:            -1rem;
    background:      var(--accent-blue-3);
    color:           var(--white);
    border-radius:   100%;
    width:           2.25rem;
    height:          2.25rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1.1rem;
}
.feature-links-step-title{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
    margin-top:    0.5rem;
}
.feature-links-step-body{
    font-size:   0.9rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}
.feature-links-steps-tagline{
    text-align:  center;
    margin-top:  3rem;
    color:       var(--text-main-light);
    font-size:   1rem;
    font-weight: 600;
    font-style:  italic;
}

/*--Feature Links FAQ--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-faq-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-links-faq-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    padding-top:    3rem;
    opacity:        0.7;
}
.feature-links-faq-list{
    margin-top:     2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  3rem;
}
.feature-links-faq-item{
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-3);
    padding:       1.25rem 1.5rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-links-faq-item:hover{
    transform: translateY(-2px);
}
.feature-links-faq-q{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
}
.feature-links-faq-a{
    font-size:   0.92rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}

/*--Feature Links CTA--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-links-cta-section{
    background:  var(--background-white);
    text-align:  center;
    padding:     6rem 2rem 8rem;
}
.feature-links-cta-container{
    margin-top: 3rem;
}
.feature-links-cta-title{
    color:         var(--dark-blue);
    font-size:     2.2rem;
    font-weight:   700;
    margin-bottom: 2rem;
    line-height:   1.2;
}
.feature-links-cta-title span{
    color: var(--accent-blue-3);
}
#feature-links-cta-btn{
    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  4rem;
    height:      4rem;
    font-size:   1.25rem;
    width:       16rem;
}

/*--Feature Homework Hero----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-hero{
    background-image: linear-gradient(-45deg, var(--accent-blue-1-dark), var(--accent-blue-1), var(--accent-blue-2-dark), var(--accent-blue-2));
    background-size:  200% 200%;
    padding-bottom:   5rem;
    padding-top:      3rem;
    position:         relative;
    overflow:         hidden;
}
.feature-homework-hero-bg{
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size:  2rem 2rem;
    opacity:          0.4;
}
.feature-homework-hero-inner{
    position:   relative;
    z-index:    2;
    max-width:  min(56rem, calc(100% - 4rem));
    margin:     0 auto;
    text-align: center;
}
.feature-homework-hero-eyebrow{
    display:        inline-block;
    background:     rgba(255, 255, 255, 0.18);
    color:          var(--white);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  2rem;
    padding:        0.35rem 1rem;
    margin-bottom:  3rem;
}
.feature-homework-hero h1{
    color:         var(--white);
    font-size:     2.5rem;
    font-weight:   700;
    line-height:   1.15;
    margin-bottom: 1.5rem;
}
.feature-homework-hero p{
    color:       rgba(255, 255, 255, 0.88);
    font-size:   1.15rem;
    font-weight: 500;
    max-width:   44rem;
    margin:      0 auto 2.5rem;
    line-height: 1.7;
}
.feature-homework-hero-cancel{
    color:          rgba(255, 255, 255, 0.7);
    font-size:      0.9rem;
    padding-top:    3rem;
    padding-bottom: 2rem;
    font-weight:    600;
}
#feature-homework-hero-button{
    background-color: var(--background-main);
    border:           none !important;

    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  3rem;
    height:      4rem;
    width:       16rem;
}
#feature-homework-hero-button:hover{
    background-color: rgb(245, 245, 245);
}
#feature-homework-hero-button:active{
    background-color: rgb(235, 235, 235);
}

/*--Feature Homework Shared--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-section-inner{
    max-width: min(56rem, calc(100% - 4rem));
    margin:    0 auto;
}
.feature-homework-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-homework-section-title{
    color:         var(--dark-blue);
    font-size:     2.1rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 1.25rem;
}
.feature-homework-section-title .feature-homework-accent{
    color: var(--accent-blue-3);
}
.feature-homework-section-body{
    color:       var(--text-gray-light);
    font-size:   1.05rem;
    max-width:   46rem;
    line-height: 1.8;
    margin:      0;
}

/*--Feature Homework Intro---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-intro-section{
    background:  var(--background-white);
    padding:     5rem 2rem;
}
.feature-homework-intro-inner{
    display:         flex;
    gap:             3rem;
    align-items:     flex-start;
    flex-wrap:       wrap;
}
.feature-homework-intro-text{
    flex: 1 1 28rem;
    min-width: 0;
}
.feature-homework-intro-badge-col{
    flex:            0 0 auto;
    display:         flex;
    flex-direction:  column;
    gap:             1rem;
    align-self:      center;
}
.feature-homework-intro-badge{
    background:      var(--background-white);
    border:          1px solid var(--border-light);
    border-radius:   var(--border-radius-3);
    box-shadow:      0px 0px 1rem rgba(0, 0, 0, 0.07);
    padding:         1rem 1.5rem;
    display:         flex;
    align-items:     center;
    gap:             1rem;
    width:           14rem;
    transition:      transform ease-in-out 0.1s;
}
.feature-homework-intro-badge:hover{
    transform: translateY(-2px);
}
.feature-homework-intro-badge-icon{
    color:           var(--accent-blue-3);
    flex-shrink:     0;
}
.feature-homework-intro-badge-label{
    font-weight:  700;
    font-size:    1rem;
    color:        var(--dark-blue);
}

/*--Feature Homework Problems------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-problems-section{
    background:  var(--accent-blue-7-old);
    position:    relative;
}
.feature-homework-section-inner{
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-homework-problems-eyebrow{
    margin-top: 2rem;
}
.feature-homework-problems-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap:                   0.75rem;
    margin-top:            2.5rem;
}
.feature-homework-problem-item{
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-2);
    padding:       1rem 1.25rem;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
    transition:    transform ease-in-out 0.1s;
}
.feature-homework-problem-item:hover{
    transform: translateY(-2px);
}
.feature-homework-problem-dot{
    width:         0.5rem;
    height:        0.5rem;
    border-radius: 100%;
    background:    var(--accent-blue-3);
    flex-shrink:   0;
    opacity:       0.6;
}
.feature-homework-problem-text{
    font-size: 1rem;
    color:     var(--text-gray);
}

/*--Feature Homework Features------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-features-section{
    background: var(--background-white);
    position:   relative;
}
.feature-homework-features-inner{
    max-width:      calc(100% - 4rem);
    width:          60rem;
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-homework-features-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap:                   1rem;
    margin-top:            3rem;
}
.feature-homework-feature-card{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    padding:       1.5rem;
    display:       flex;
    gap:           1.25rem;
    align-items:   flex-start;
    transition:    transform ease-in-out 0.1s;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
}
.feature-homework-feature-card:hover{
    transform: translateY(-3px);
}
.feature-homework-feature-icon{
    background:      var(--accent-blue-7-old);
    border-radius:   var(--border-radius-2);
    width:           3.5rem;
    height:          3.5rem;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-blue-3);
}
.feature-homework-feature-text h3{
    color:         var(--text-gray);
    font-size:     1.1rem;
    font-weight:   600;
    margin-bottom: 0.4rem;
    margin-top:    0;
}
.feature-homework-feature-text p{
    font-size:     0.9rem;
    color:         var(--text-gray-light);
    line-height:   1.7;
    margin-bottom: 0.5rem;
    margin-top:    0;
}
.feature-homework-feature-outcome{
    color:       var(--accent-blue-3);
    font-size:   0.95rem;
    font-weight: 600;
    display:     inline-block;
}

/*--Feature Homework Steps---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-steps-section{
    background:     var(--background-main);
    padding-bottom: 5rem;
    padding-top:    4rem;
}
.feature-homework-steps-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align:     center;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-homework-steps-title{
    max-width:   calc(100% - 2rem);
    text-align:  center;
    margin-left: auto;
    margin-right: auto;
}
.feature-homework-steps-subtitle{
    max-width:   calc(100% - 2rem);
    margin:      0 auto;
    text-align:  center;
}
.feature-homework-steps-holder{
    transform:       translate(-50%);
    width:           calc(100vw - 2rem);
    margin-left:     50%;
    display:         flex;
    flex-wrap:       wrap;
    gap:             1.5rem;
    margin-top:      3rem;
    justify-content: center;
}
.feature-homework-step-card{
    background:    var(--background-white);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.09);
    padding:       1.5rem 1.5rem 1.5rem 2.25rem;
    flex:          0 1 300px;
    min-width:     260px;
    position:      relative;
    transition:    transform ease-in-out 0.1s;
}
.feature-homework-step-card:hover{
    transform: translateY(-3px);
}
.feature-homework-step-number{
    position:        absolute;
    top:             -1rem;
    left:            -1rem;
    background:      var(--accent-blue-3);
    color:           var(--white);
    border-radius:   100%;
    width:           2.25rem;
    height:          2.25rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1.1rem;
}
.feature-homework-step-title{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
    margin-top:    0.5rem;
}
.feature-homework-step-body{
    font-size:   0.9rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}
.feature-homework-steps-tagline{
    text-align:  center;
    margin-top:  3rem;
    color:       var(--text-main-light);
    font-size:   1rem;
    font-weight: 600;
    font-style:  italic;
}

/*--Feature Homework FAQ-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-faq-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-homework-faq-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    padding-top:    3rem;
    opacity:        0.7;
}
.feature-homework-faq-list{
    margin-top:     2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  3rem;
}
.feature-homework-faq-item{
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-3);
    padding:       1.25rem 1.5rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-homework-faq-item:hover{
    transform: translateY(-2px);
}
.feature-homework-faq-q{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
}
.feature-homework-faq-a{
    font-size:   0.92rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}

/*--Feature Homework CTA-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-homework-cta-section{
    background:  var(--background-white);
    text-align:  center;
    padding:     6rem 2rem 8rem;
}
.feature-homework-cta-container{
    margin-top: 3rem;
}
.feature-homework-cta-title{
    color:         var(--dark-blue);
    font-size:     2.2rem;
    font-weight:   700;
    margin-bottom: 2rem;
    line-height:   1.2;
}
.feature-homework-cta-title span{
    color: var(--accent-blue-3);
}
#feature-homework-cta-btn{
    transform:       translate(-50%);
    margin-left:     50%;
    margin-top:      4rem;
    height:          4rem;
    font-size:       1.25rem;
    width:           16rem;
}

/*--Feature Drive Hero-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-hero{
    background-image: linear-gradient(-45deg, var(--accent-blue-2-old), var(--accent-blue-1-old), var(--accent-blue-4-old), var(--accent-blue-9-old));
    background-size:  200% 200%;
    padding-bottom:   5rem;
    padding-top:      3rem;
    position:         relative;
    overflow:         hidden;
}
.feature-drive-hero-bg{
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size:  2rem 2rem;
    opacity:          0.4;
}
.feature-drive-hero-inner{
    position:   relative;
    z-index:    2;
    max-width:  min(56rem, calc(100% - 4rem));
    margin:     0 auto;
    text-align: center;
}
.feature-drive-hero-eyebrow{
    display:        inline-block;
    background:     rgba(255, 255, 255, 0.18);
    color:          var(--white);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  2rem;
    padding:        0.35rem 1rem;
    margin-bottom:  3rem;
}
.feature-drive-hero h1{
    color:         var(--white);
    font-size:     2.5rem;
    font-weight:   700;
    line-height:   1.15;
    margin-bottom: 1.5rem;
}
.feature-drive-hero p{
    color:       rgba(255, 255, 255, 0.88);
    font-size:   1.15rem;
    font-weight: 500;
    max-width:   44rem;
    margin:      0 auto 2.5rem;
    line-height: 1.7;
}
.feature-drive-hero-cancel{
    color:          rgba(255, 255, 255, 0.7);
    font-size:      0.9rem;
    padding-top:    3rem;
    padding-bottom: 2rem;
    font-weight:    600;
}
#feature-drive-hero-button{
    background-color: var(--background-main);
    border:           none !important;

    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  3rem;
    height:      4rem;
    width:       16rem;
}
#feature-drive-hero-button:hover{
    background-color: rgb(245, 245, 245);
}
#feature-drive-hero-button:active{
    background-color: rgb(235, 235, 235);
}

/*--Feature Drive Shared-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-section-inner{
    max-width: min(56rem, calc(100% - 4rem));
    margin:    0 auto;
}
.feature-drive-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-drive-section-title{
    color:         var(--dark-blue);
    font-size:     2.1rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 1.25rem;
}
.feature-drive-section-title .feature-drive-accent{
    color: var(--accent-blue-3);
}
.feature-drive-section-body{
    color:       var(--text-gray-light);
    font-size:   1.05rem;
    max-width:   46rem;
    line-height: 1.8;
    margin:      0;
}

/*--Feature Drive Intro------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-intro-section{
    background: var(--background-white);
    padding:    5rem 2rem;
}
.feature-drive-intro-inner{
    display:    flex;
    gap:        3rem;
    align-items: flex-start;
    flex-wrap:  wrap;
}
.feature-drive-intro-text{
    flex:      1 1 28rem;
    min-width: 0;
}
.feature-drive-intro-badge-col{
    flex:           0 0 auto;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    align-self:     center;
}
.feature-drive-intro-badge{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.07);
    padding:       1rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    width:         14rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-drive-intro-badge:hover{
    transform: translateY(-2px);
}
.feature-drive-intro-badge-icon{
    color:       var(--accent-blue-3);
    flex-shrink: 0;
}
.feature-drive-intro-badge-label{
    font-weight: 700;
    font-size:   1rem;
    color:       var(--dark-blue);
}

/*--Feature Drive Problems---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-problems-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-drive-section-inner{
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-drive-problems-eyebrow{
    margin-top: 2rem;
}
.feature-drive-problems-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap:                   0.75rem;
    margin-top:            2.5rem;
}
.feature-drive-problem-item{
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-2);
    padding:       1rem 1.25rem;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
    transition:    transform ease-in-out 0.1s;
}
.feature-drive-problem-item:hover{
    transform: translateY(-2px);
}
.feature-drive-problem-dot{
    width:         0.5rem;
    height:        0.5rem;
    border-radius: 100%;
    background:    var(--accent-blue-3);
    flex-shrink:   0;
    opacity:       0.6;
}
.feature-drive-problem-text{
    font-size: 1rem;
    color:     var(--text-gray);
}

/*--Feature Drive Features---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-features-section{
    background: var(--background-white);
    position:   relative;
}
.feature-drive-features-inner{
    max-width:      calc(100% - 4rem);
    width:          60rem;
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-drive-features-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap:                   1rem;
    margin-top:            3rem;
}
.feature-drive-feature-card{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    padding:       1.5rem;
    display:       flex;
    gap:           1.25rem;
    align-items:   flex-start;
    transition:    transform ease-in-out 0.1s;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
}
.feature-drive-feature-card:hover{
    transform: translateY(-3px);
}
.feature-drive-feature-icon{
    background:      var(--accent-blue-7-old);
    border-radius:   var(--border-radius-2);
    width:           3.5rem;
    height:          3.5rem;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-blue-3);
}
.feature-drive-feature-text h3{
    color:         var(--text-gray);
    font-size:     1.1rem;
    font-weight:   600;
    margin-bottom: 0.4rem;
    margin-top:    0;
}
.feature-drive-feature-text p{
    font-size:     0.9rem;
    color:         var(--text-gray-light);
    line-height:   1.7;
    margin-bottom: 0.5rem;
    margin-top:    0;
}
.feature-drive-feature-outcome{
    color:       var(--accent-blue-3);
    font-size:   0.95rem;
    font-weight: 600;
    display:     inline-block;
}

/*--Feature Drive Steps------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-steps-section{
    background:     var(--background-main);
    padding-bottom: 5rem;
    padding-top:    4rem;
}
.feature-drive-steps-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align:     center;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-drive-steps-title{
    max-width:    calc(100% - 2rem);
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
}
.feature-drive-steps-subtitle{
    max-width:   calc(100% - 2rem);
    margin:      0 auto;
    text-align:  center;
}
.feature-drive-steps-holder{
    transform:       translate(-50%);
    width:           calc(100vw - 2rem);
    margin-left:     50%;
    display:         flex;
    flex-wrap:       wrap;
    gap:             1.5rem;
    margin-top:      3rem;
    justify-content: center;
}
.feature-drive-step-card{
    background:    var(--background-white);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.09);
    padding:       1.5rem 1.5rem 1.5rem 2.25rem;
    flex:          0 1 300px;
    min-width:     260px;
    position:      relative;
    transition:    transform ease-in-out 0.1s;
}
.feature-drive-step-card:hover{
    transform: translateY(-3px);
}
.feature-drive-step-number{
    position:        absolute;
    top:             -1rem;
    left:            -1rem;
    background:      var(--accent-blue-3);
    color:           var(--white);
    border-radius:   100%;
    width:           2.25rem;
    height:          2.25rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1.1rem;
}
.feature-drive-step-title{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
    margin-top:    0.5rem;
}
.feature-drive-step-body{
    font-size:   0.9rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}
.feature-drive-steps-tagline{
    text-align:  center;
    margin-top:  3rem;
    color:       var(--text-main-light);
    font-size:   1rem;
    font-weight: 600;
    font-style:  italic;
}

/*--Feature Drive FAQ--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-faq-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-drive-faq-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    padding-top:    3rem;
    opacity:        0.7;
}
.feature-drive-faq-list{
    margin-top:     2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  3rem;
}
.feature-drive-faq-item{
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-3);
    padding:       1.25rem 1.5rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-drive-faq-item:hover{
    transform: translateY(-2px);
}
.feature-drive-faq-q{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
}
.feature-drive-faq-a{
    font-size:   0.92rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}

/*--Feature Drive CTA--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-drive-cta-section{
    background:  var(--background-white);
    text-align:  center;
    padding:     6rem 2rem 8rem;
}
.feature-drive-cta-container{
    margin-top: 3rem;
}
.feature-drive-cta-title{
    color:         var(--dark-blue);
    font-size:     2.2rem;
    font-weight:   700;
    margin-bottom: 2rem;
    line-height:   1.2;
}
.feature-drive-cta-title span{
    color: var(--accent-blue-3);
}
#feature-drive-cta-btn{
    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  4rem;
    height:      4rem;
    font-size:   1.25rem;
    width:       16rem;
}

/*--Feature Summary Hero-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-hero{
    background-image: linear-gradient(-45deg, var(--accent-blue-2-old), var(--accent-blue-1-old), var(--accent-blue-4-old), var(--accent-blue-9-old));
    background-size:  200% 200%;
    padding-bottom:   5rem;
    padding-top:      3rem;
    position:         relative;
    overflow:         hidden;
}
.feature-summary-hero-bg{
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size:  2rem 2rem;
    opacity:          0.4;
}
.feature-summary-hero-inner{
    position:   relative;
    z-index:    2;
    max-width:  min(56rem, calc(100% - 4rem));
    margin:     0 auto;
    text-align: center;
}
.feature-summary-hero-eyebrow{
    display:        inline-block;
    background:     rgba(255, 255, 255, 0.18);
    color:          var(--white);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  2rem;
    padding:        0.35rem 1rem;
    margin-bottom:  3rem;
}
.feature-summary-hero h1{
    color:         var(--white);
    font-size:     2.5rem;
    font-weight:   700;
    line-height:   1.15;
    margin-bottom: 1.5rem;
}
.feature-summary-hero p{
    color:       rgba(255, 255, 255, 0.88);
    font-size:   1.15rem;
    font-weight: 500;
    max-width:   44rem;
    margin:      0 auto 2.5rem;
    line-height: 1.7;
}
.feature-summary-hero-cancel{
    color:          rgba(255, 255, 255, 0.7);
    font-size:      0.9rem;
    padding-top:    3rem;
    padding-bottom: 2rem;
    font-weight:    600;
}
#feature-summary-hero-button{
    background-color: var(--background-main);
    border:           none !important;

    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  3rem;
    height:      4rem;
    width:       16rem;
}
#feature-summary-hero-button:hover{
    background-color: rgb(245, 245, 245);
}
#feature-summary-hero-button:active{
    background-color: rgb(235, 235, 235);
}

/*--Feature Summary Shared---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-section-inner{
    max-width: min(56rem, calc(100% - 4rem));
    margin:    0 auto;
}
.feature-summary-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-summary-section-title{
    color:         var(--dark-blue);
    font-size:     2.1rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 1.25rem;
}
.feature-summary-section-title .feature-summary-accent{
    color: var(--accent-blue-3);
}
.feature-summary-section-body{
    color:       var(--text-gray-light);
    font-size:   1.05rem;
    max-width:   46rem;
    line-height: 1.8;
    margin:      0;
}

/*--Feature Summary Intro----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-intro-section{
    background: var(--background-white);
    padding:    5rem 2rem;
}
.feature-summary-intro-inner{
    display:     flex;
    gap:         3rem;
    align-items: flex-start;
    flex-wrap:   wrap;
}
.feature-summary-intro-text{
    flex:      1 1 28rem;
    min-width: 0;
}
.feature-summary-intro-badge-col{
    flex:           0 0 auto;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    align-self:     center;
}
.feature-summary-intro-badge{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.07);
    padding:       1rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    width:         14rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-summary-intro-badge:hover{
    transform: translateY(-2px);
}
.feature-summary-intro-badge-icon{
    color:       var(--accent-blue-3);
    flex-shrink: 0;
}
.feature-summary-intro-badge-label{
    font-weight: 700;
    font-size:   1rem;
    color:       var(--dark-blue);
}

/*--Feature Summary Problems-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-problems-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-summary-section-inner{
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-summary-problems-eyebrow{
    margin-top: 2rem;
}
.feature-summary-problems-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap:                   0.75rem;
    margin-top:            2.5rem;
}
.feature-summary-problem-item{
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-2);
    padding:       1rem 1.25rem;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
    transition:    transform ease-in-out 0.1s;
}
.feature-summary-problem-item:hover{
    transform: translateY(-2px);
}
.feature-summary-problem-dot{
    width:         0.5rem;
    height:        0.5rem;
    border-radius: 100%;
    background:    var(--accent-blue-3);
    flex-shrink:   0;
    opacity:       0.6;
}
.feature-summary-problem-text{
    font-size: 1rem;
    color:     var(--text-gray);
}

/*--Feature Summary Features-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-features-section{
    background: var(--background-white);
    position:   relative;
}
.feature-summary-features-inner{
    max-width:      calc(100% - 4rem);
    width:          60rem;
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-summary-features-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap:                   1rem;
    margin-top:            3rem;
}
.feature-summary-feature-card{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    padding:       1.5rem;
    display:       flex;
    gap:           1.25rem;
    align-items:   flex-start;
    transition:    transform ease-in-out 0.1s;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
}
.feature-summary-feature-card:hover{
    transform: translateY(-3px);
}
.feature-summary-feature-icon{
    background:      var(--accent-blue-7-old);
    border-radius:   var(--border-radius-2);
    width:           3.5rem;
    height:          3.5rem;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-blue-3);
}
.feature-summary-feature-text h3{
    color:         var(--text-gray);
    font-size:     1.1rem;
    font-weight:   600;
    margin-bottom: 0.4rem;
    margin-top:    0;
}
.feature-summary-feature-text p{
    font-size:     0.9rem;
    color:         var(--text-gray-light);
    line-height:   1.7;
    margin-bottom: 0.5rem;
    margin-top:    0;
}
.feature-summary-feature-outcome{
    color:       var(--accent-blue-3);
    font-size:   0.95rem;
    font-weight: 600;
    display:     inline-block;
}

/*--Feature Summary Steps----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-steps-section{
    background:     var(--background-main);
    padding-bottom: 5rem;
    padding-top:    4rem;
}
.feature-summary-steps-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align:     center;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-summary-steps-title{
    max-width:    calc(100% - 2rem);
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
}
.feature-summary-steps-subtitle{
    max-width:  calc(100% - 2rem);
    margin:     0 auto;
    text-align: center;
}
.feature-summary-steps-holder{
    transform:       translate(-50%);
    width:           calc(100vw - 2rem);
    margin-left:     50%;
    display:         flex;
    flex-wrap:       wrap;
    gap:             1.5rem;
    margin-top:      3rem;
    justify-content: center;
}
.feature-summary-step-card{
    background:    var(--background-white);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.09);
    padding:       1.5rem 1.5rem 1.5rem 2.25rem;
    flex:          0 1 300px;
    min-width:     260px;
    position:      relative;
    transition:    transform ease-in-out 0.1s;
}
.feature-summary-step-card:hover{
    transform: translateY(-3px);
}
.feature-summary-step-number{
    position:        absolute;
    top:             -1rem;
    left:            -1rem;
    background:      var(--accent-blue-3);
    color:           var(--white);
    border-radius:   100%;
    width:           2.25rem;
    height:          2.25rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1.1rem;
}
.feature-summary-step-title{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
    margin-top:    0.5rem;
}
.feature-summary-step-body{
    font-size:   0.9rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}
.feature-summary-steps-tagline{
    text-align:  center;
    margin-top:  3rem;
    color:       var(--text-main-light);
    font-size:   1rem;
    font-weight: 600;
    font-style:  italic;
}

/*--Feature Summary FAQ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-faq-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-summary-faq-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    padding-top:    3rem;
    opacity:        0.7;
}
.feature-summary-faq-list{
    margin-top:     2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  3rem;
}
.feature-summary-faq-item{
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-3);
    padding:       1.25rem 1.5rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-summary-faq-item:hover{
    transform: translateY(-2px);
}
.feature-summary-faq-q{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
}
.feature-summary-faq-a{
    font-size:   0.92rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}

/*--Feature Summary CTA------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-summary-cta-section{
    background:  var(--background-white);
    text-align:  center;
    padding:     6rem 2rem 8rem;
}
.feature-summary-cta-container{
    margin-top: 3rem;
}
.feature-summary-cta-title{
    color:         var(--dark-blue);
    font-size:     2.2rem;
    font-weight:   700;
    margin-bottom: 2rem;
    line-height:   1.2;
}
.feature-summary-cta-title span{
    color: var(--accent-blue-3);
}
#feature-summary-cta-btn{
    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  4rem;
    height:      4rem;
    font-size:   1.25rem;
    width:       16rem;
}

/*--Feature Level Checker Hero-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-hero{
    background-image: linear-gradient(-45deg, var(--accent-blue-2-old), var(--accent-blue-1-old), var(--accent-blue-4-old), var(--accent-blue-9-old));
    background-size:  200% 200%;
    padding-bottom:   5rem;
    padding-top:      3rem;
    position:         relative;
    overflow:         hidden;
}
.feature-lvl-checker-hero-bg{
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size:  2rem 2rem;
    opacity:          0.4;
}
.feature-lvl-checker-hero-inner{
    position:   relative;
    z-index:    2;
    max-width:  min(56rem, calc(100% - 4rem));
    margin:     0 auto;
    text-align: center;
}
.feature-lvl-checker-hero-eyebrow{
    display:        inline-block;
    background:     rgba(255, 255, 255, 0.18);
    color:          var(--white);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  2rem;
    padding:        0.35rem 1rem;
    margin-bottom:  3rem;
}
.feature-lvl-checker-hero h1{
    color:         var(--white);
    font-size:     2.5rem;
    font-weight:   700;
    line-height:   1.15;
    margin-bottom: 1.5rem;
}
.feature-lvl-checker-hero p{
    color:       rgba(255, 255, 255, 0.88);
    font-size:   1.15rem;
    font-weight: 500;
    max-width:   44rem;
    margin:      0 auto 2.5rem;
    line-height: 1.7;
}
.feature-lvl-checker-hero-cancel{
    color:          rgba(255, 255, 255, 0.7);
    font-size:      0.9rem;
    padding-top:    3rem;
    padding-bottom: 2rem;
    font-weight:    600;
}
#feature-lvl-checker-hero-button{
    background-color: var(--background-main);
    border:           none !important;

    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  3rem;
    height:      4rem;
    width:       16rem;
}
#feature-lvl-checker-hero-button:hover{
    background-color: rgb(245, 245, 245);
}
#feature-lvl-checker-hero-button:active{
    background-color: rgb(235, 235, 235);
}

/*--Feature Level Checker Shared---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-section-inner{
    max-width: min(56rem, calc(100% - 4rem));
    margin:    0 auto;
}
.feature-lvl-checker-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-lvl-checker-section-title{
    color:         var(--dark-blue);
    font-size:     2.1rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 1.25rem;
}
.feature-lvl-checker-section-title .feature-lvl-checker-accent{
    color: var(--accent-blue-3);
}
.feature-lvl-checker-section-body{
    color:       var(--text-gray-light);
    font-size:   1.05rem;
    max-width:   46rem;
    line-height: 1.8;
    margin:      0;
}

/*--Feature Level Checker Intro----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-intro-section{
    background: var(--background-white);
    padding:    5rem 2rem;
}
.feature-lvl-checker-intro-inner{
    display:     flex;
    gap:         3rem;
    align-items: flex-start;
    flex-wrap:   wrap;
}
.feature-lvl-checker-intro-text{
    flex:      1 1 28rem;
    min-width: 0;
}
.feature-lvl-checker-intro-badge-col{
    flex:           0 0 auto;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    align-self:     center;
}
.feature-lvl-checker-intro-badge{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.07);
    padding:       1rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    width:         14rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-lvl-checker-intro-badge:hover{
    transform: translateY(-2px);
}
.feature-lvl-checker-intro-badge-icon{
    color:       var(--accent-blue-3);
    flex-shrink: 0;
}
.feature-lvl-checker-intro-badge-label{
    font-weight: 700;
    font-size:   1rem;
    color:       var(--dark-blue);
}

/*--Feature Level Checker Problems-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-problems-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-lvl-checker-section-inner{
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-lvl-checker-problems-eyebrow{
    margin-top: 2rem;
}
.feature-lvl-checker-problems-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap:                   0.75rem;
    margin-top:            2.5rem;
}
.feature-lvl-checker-problem-item{
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-2);
    padding:       1rem 1.25rem;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
    transition:    transform ease-in-out 0.1s;
}
.feature-lvl-checker-problem-item:hover{
    transform: translateY(-2px);
}
.feature-lvl-checker-problem-dot{
    width:         0.5rem;
    height:        0.5rem;
    border-radius: 100%;
    background:    var(--accent-blue-3);
    flex-shrink:   0;
    opacity:       0.6;
}
.feature-lvl-checker-problem-text{
    font-size: 1rem;
    color:     var(--text-gray);
}

/*--Feature Level Checker Features-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-features-section{
    background: var(--background-white);
    position:   relative;
}
.feature-lvl-checker-features-inner{
    max-width:      calc(100% - 4rem);
    width:          60rem;
    padding-bottom: 3rem;
    padding-top:    3rem;
}
.feature-lvl-checker-features-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap:                   1rem;
    margin-top:            3rem;
}
.feature-lvl-checker-feature-card{
    background:    var(--background-white);
    border:        1px solid var(--border-light);
    border-radius: var(--border-radius-3);
    padding:       1.5rem;
    display:       flex;
    gap:           1.25rem;
    align-items:   flex-start;
    transition:    transform ease-in-out 0.1s;
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.05);
}
.feature-lvl-checker-feature-card:hover{
    transform: translateY(-3px);
}
.feature-lvl-checker-feature-icon{
    background:      var(--accent-blue-7-old);
    border-radius:   var(--border-radius-2);
    width:           3.5rem;
    height:          3.5rem;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-blue-3);
}
.feature-lvl-checker-feature-text h3{
    color:         var(--text-gray);
    font-size:     1.1rem;
    font-weight:   600;
    margin-bottom: 0.4rem;
    margin-top:    0;
}
.feature-lvl-checker-feature-text p{
    font-size:     0.9rem;
    color:         var(--text-gray-light);
    line-height:   1.7;
    margin-bottom: 0.5rem;
    margin-top:    0;
}
.feature-lvl-checker-feature-outcome{
    color:       var(--accent-blue-3);
    font-size:   0.95rem;
    font-weight: 600;
    display:     inline-block;
}

/*--Feature Level Checker Steps----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-steps-section{
    background:     var(--background-main);
    padding-bottom: 5rem;
    padding-top:    4rem;
}
.feature-lvl-checker-steps-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align:     center;
    margin-bottom:  0.75rem;
    opacity:        0.7;
}
.feature-lvl-checker-steps-title{
    max-width:    calc(100% - 2rem);
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
}
.feature-lvl-checker-steps-subtitle{
    max-width:  calc(100% - 2rem);
    margin:     0 auto;
    text-align: center;
}
.feature-lvl-checker-steps-holder{
    transform:       translate(-50%);
    width:           calc(100vw - 2rem);
    margin-left:     50%;
    display:         flex;
    flex-wrap:       wrap;
    gap:             1.5rem;
    margin-top:      3rem;
    justify-content: center;
}
.feature-lvl-checker-step-card{
    background:    var(--background-white);
    border-radius: var(--border-radius-3);
    box-shadow:    0px 0px 1rem rgba(0, 0, 0, 0.09);
    padding:       1.5rem 1.5rem 1.5rem 2.25rem;
    flex:          0 1 300px;
    min-width:     260px;
    position:      relative;
    transition:    transform ease-in-out 0.1s;
}
.feature-lvl-checker-step-card:hover{
    transform: translateY(-3px);
}
.feature-lvl-checker-step-number{
    position:        absolute;
    top:             -1rem;
    left:            -1rem;
    background:      var(--accent-blue-3);
    color:           var(--white);
    border-radius:   100%;
    width:           2.25rem;
    height:          2.25rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1.1rem;
}
.feature-lvl-checker-step-title{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
    margin-top:    0.5rem;
}
.feature-lvl-checker-step-body{
    font-size:   0.9rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}
.feature-lvl-checker-steps-tagline{
    text-align:  center;
    margin-top:  3rem;
    color:       var(--text-main-light);
    font-size:   1rem;
    font-weight: 600;
    font-style:  italic;
}

/*--Feature Level Checker FAQ------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-faq-section{
    background: var(--accent-blue-7-old);
    position:   relative;
}
.feature-lvl-checker-faq-eyebrow{
    display:        block;
    color:          var(--text-main-light);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    padding-top:    3rem;
    opacity:        0.7;
}
.feature-lvl-checker-faq-list{
    margin-top:     2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  3rem;
}
.feature-lvl-checker-faq-item{
    background:    var(--background-white);
    border:        1px solid var(--accent-blue-8-old);
    border-radius: var(--border-radius-3);
    padding:       1.25rem 1.5rem;
    transition:    transform ease-in-out 0.1s;
}
.feature-lvl-checker-faq-item:hover{
    transform: translateY(-2px);
}
.feature-lvl-checker-faq-q{
    font-size:     1rem;
    font-weight:   700;
    color:         var(--dark-blue);
    margin-bottom: 0.6rem;
}
.feature-lvl-checker-faq-a{
    font-size:   0.92rem;
    color:       var(--text-gray-light);
    line-height: 1.7;
}

/*--Feature Level Checker CTA------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.feature-lvl-checker-cta-section{
    background:  var(--background-white);
    text-align:  center;
    padding:     6rem 2rem 8rem;
}
.feature-lvl-checker-cta-container{
    margin-top: 3rem;
}
.feature-lvl-checker-cta-title{
    color:         var(--dark-blue);
    font-size:     2.2rem;
    font-weight:   700;
    margin-bottom: 2rem;
    line-height:   1.2;
}
.feature-lvl-checker-cta-title span{
    color: var(--accent-blue-3);
}
#feature-lvl-checker-cta-btn{
    transform:   translate(-50%);
    margin-left: 50%;
    margin-top:  4rem;
    height:      4rem;
    font-size:   1.25rem;
    width:       16rem;
}

/*--Mobile Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 768px){
    .feature-links-intro-badge-col{
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
    }
    .feature-links-intro-badge{
        width: calc(100% - 0.5rem);
    }
    .feature-homework-intro-badge-col{
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
    }
    .feature-homework-intro-badge{
        width: calc(100% - 0.5rem);
    }
    .feature-drive-intro-badge-col{
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
    }
    .feature-drive-intro-badge{
        width: calc(100% - 0.5rem);
    }
    .feature-summary-intro-badge-col{
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
    }
    .feature-summary-intro-badge{
        width: calc(100% - 0.5rem);
    }
    .feature-lvl-checker-intro-badge-col{
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
    }
    .feature-lvl-checker-intro-badge{
        width: calc(100% - 0.5rem);
    }
}