.closing {
    position: relative;
    padding: 110px 0;
    background-color: rgba(var(--terra-green), 1);
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-closing-band {
    max-width: none;
}

/* Background accent (None/Ring/Custom image, inc/blocks/closing-band/render.php): same
   --tt360-bg-accent-image mechanism as tt360/hero's own ::before (components/hero.css) — the
   default ring-arc.svg is the fallback, a Custom image sits in the exact same position/size/
   opacity instead, set inline only when one is actually chosen. */
.closing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tt360-bg-accent-image, url('../../images/ring-arc.svg')) no-repeat 50% calc(50% + 80px) / 413px 415px;
    opacity: 0.3;
    pointer-events: none;
}

.closing.tt360-closing-accent-none::before {
    content: none;
}

/* Brand background presets (tt360/closing-band's background attribute, a closed select, no
   free color picker). Plain .closing with neither modifier class is the original look
   (terra-green, byte-identical). Dark Green keeps the same cream heading/description as the
   default — footer-green is even darker than terra-green, so the existing cream colors pass AA
   there too (7.87/9.0) with no change needed. Cream can't reuse cream text on a cream
   background, so its heading/description get their own colors below; the button's own color
   change lives in render.php (a different cta-button modifier per preset), not here. */
.closing.tt360-closing-bg-dark-green {
    background-color: rgba(var(--footer-green), 1);
}

.closing.tt360-closing-bg-cream {
    background-color: rgba(var(--cream), 1);
}

.closing.tt360-closing-bg-cream .closing-content .headline {
    color: rgba(var(--terra-green), 1);
}

.closing.tt360-closing-bg-cream .closing-content .description {
    color: rgba(var(--charcoal), 1);
}

.closing .container {
    position: relative;
}

.closing .closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.closing .closing-content .headline {
    margin: 0;
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.96px;
    color: rgba(var(--cream), 1);
}

.closing .closing-content .description {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(var(--cream), 0.85);
}

/* md */
@media (max-width: 767.98px) {
    .closing .closing-content .headline {
        font-size: 40px;
    }

    .closing .closing-content .description {
        font-size: 16px;
    }
}

/* sm */
@media (max-width: 575.98px) {
    .closing {
        padding: 55px 0;
    }

    /* Same full-width-on-phone button convention as the Insights-family pages; applies
       sitewide since .closing is shared by every page. */
    .closing .cta-button {
        width: 100%;
    }
}