/* Pre-footer CTA — presentation borrowed from uppromote.com homepage
   (.footer-cta-r11): light surface, centered column, gradient eyebrow,
   big heading, description, black pill button. Ported verbatim from
   MKT-342 mockup CSS.

   Selectors are scoped under #cb__footer-cta rather than bare .footer-cta:
   template-parts/Round11/homepage/assets/homepage.css already defines its
   own, differently-styled .footer-cta class (used on the actual homepage).
   That stylesheet only loads on is_front_page(), a separate gate from this
   page's is_page_template() — normally never both at once, but if this
   template were ever assigned to the site's front page, an unscoped
   .footer-cta here would collide with it. */
#cb__footer-cta.footer-cta {
    background: var(--color-1st-bg);
    padding: var(--var-80) var(--var-24);
}

@media (min-width: 1024px) {
    #cb__footer-cta.footer-cta {
        padding: var(--space-section-lg) var(--var-32) var(--space-section-sm);
    }
}

#cb__footer-cta .footer-cta__container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--var-28);
}

#cb__footer-cta .footer-cta__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--label-md);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--color-1st-brd) 0%, var(--color-2nd-brd) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (min-width: 1024px) {
    #cb__footer-cta .footer-cta__eyebrow {
        font-size: var(--label-lg);
    }
}

#cb__footer-cta .footer-cta__heading {
    margin: 0;
    max-width: 800px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--h4);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}

@media (min-width: 1024px) {
    #cb__footer-cta .footer-cta__heading {
        font-size: var(--h2);
    }
}

#cb__footer-cta .footer-cta__heading span {
    display: block;
}

#cb__footer-cta .footer-cta__desc {
    margin: 0;
    max-width: 600px;
    font-size: var(--label-lg);
    line-height: 1.4;
    color: var(--color-body);
}

/* Button matches the homepage .footer-cta-r11__btn exactly. */
#cb__footer-cta .footer-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--var-14) var(--var-28);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-1st-btn-bg);
    color: var(--color-1st-btn-fg);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--label-md);
    line-height: 1;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

#cb__footer-cta .footer-cta__btn:hover {
    opacity: 0.9;
}

#cb__footer-cta .footer-cta__btn:focus-visible {
    outline: var(--var-2) solid var(--color-1st-brd);
    outline-offset: var(--var-4);
}