/* === cta-dark ===
 * Dark gradient bg with grid pattern overlay (::before).
 * Centered heading + body + button + secondary text link.
 *
 * @updated 3.5.54 — paint font-family (was hardcoded Montserrat), gold-accent support
 */
.ssla-section[data-ssla-type="cta-dark"] {
    background: var(--ssla-bg-color, linear-gradient(135deg, var(--shell-bg-dark-cool, var(--preset-primary-dark, #0f1b2e)) 0%, var(--shell-bg-dark-cool-end, var(--preset-primary, #1a2a45)) 100%));
    padding: var(--paint-section-padding, 120px) 48px;
    position: relative;
    overflow: hidden;
}
.ssla-section[data-ssla-type="cta-dark"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3C/svg%3E");
    pointer-events: none;
}

.ctd-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.ctd-center {
    text-align: center;
}

.ctd-heading {
    font-family: var(--paint-font-family, "Montserrat", sans-serif);
    font-size: var(--paint-h2-size, clamp(28px, 4vw, 44px));
    font-weight: var(--paint-heading-weight, 800);
    letter-spacing: var(--paint-heading-letter-spacing-h2, -0.5px);
    text-transform: var(--paint-heading-case-h2, none);
    color: #fff;
    line-height: 1.15;
    margin: 0 0 24px;
}
.ctd-heading em {
    font-style: italic;
    color: var(--shell-accent, var(--preset-accent, currentColor));
}
.ctd-heading .gold,
.ctd-heading .ssla-accent {
    color: var(--shell-accent, var(--preset-accent, currentColor));
}

.ctd-desc {
    font-family: var(--paint-font-family, "Montserrat", sans-serif);
    font-size: var(--paint-body-size, 17px);
    color: var(--cta-dark-desc-color, rgba(255, 255, 255, 0.78));
    line-height: var(--paint-body-line-height, 1.7);
    max-width: 560px;
    margin: 0 auto 36px;
}
.ctd-desc p {
    margin: 0 0 0.6em;
}
.ctd-desc p:last-child {
    margin-bottom: 0;
}

.ctd-btn {
    display: inline-block;
    background: var(--paint-button-primary-fill, var(--shell-accent, var(--preset-accent, currentColor)));
    color: var(--paint-button-primary-text, #fff);
    padding: 18px 48px;
    font-family: var(--paint-font-family, "Montserrat", sans-serif);
    font-size: var(--paint-button-size, 0.85rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: var(--paint-button-radius, 0);
    transition: all var(--paint-motion-timing, 0.25s);
    margin-bottom: 20px;
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ctd-btn:hover {
 *     filter: brightness(1.06);
 *     transform: translateY(var(--paint-hover-lift, -2px));
 *     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
 * }
 */
.ctd-btn:hover{
    transform: translateY(var(--paint-hover-lift, -2px));
}
.ctd-btn:empty {
    display: none;
}

.ctd-link {
    display: block;
    font-family: var(--paint-font-family, "Montserrat", sans-serif);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color var(--paint-motion-timing, 0.2s);
}
.ctd-link:hover {
    color: var(--shell-accent, var(--preset-accent, #E2A03F));
}
.ctd-link:empty {
    display: none;
}

@media (max-width: 640px) {
    .ssla-section[data-ssla-type="cta-dark"] {
        padding: 80px 24px;
    }
    .ctd-heading {
        font-size: 28px;
    }
}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .ctd-heading{color: #ffffff}
.ssla-tone-dark .ctd-desc{color: rgba(255, 255, 255, 0.78)}
.ssla-tone-light .ctd-heading{color: var(--shell-h, #1a1d21)}
.ssla-tone-light .ctd-desc{color: var(--shell-t, #4a5568)}