.elli-cta-banner {
    padding-block: var(--elli-cta-banner-spacing-y, 3.375rem);
}

.elli-cta-banner__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--elli-cta-banner-radius, 0.875rem);
    padding: var(--elli-cta-banner-card-padding-y, 2.75rem) var(--elli-cta-banner-card-padding-x, 1.5rem);
    color: var(--elli-cta-banner-color, rgba(255, 255, 255, 0.95));
    background:
        linear-gradient(
            180deg,
            var(--elli-cta-banner-surface-start, #787878),
            var(--elli-cta-banner-surface-end, #9f9f9f)
        );
    box-shadow: var(--elli-cta-banner-shadow, 0 1.125rem 2.5rem rgba(0, 0, 0, 0.18));
}

.elli-cta-banner--dark .elli-cta-banner__card {
    background:
        linear-gradient(
            180deg,
            var(--elli-cta-banner-dark-surface-start, #4a4a4a),
            var(--elli-cta-banner-dark-surface-end, #686868)
        );
}

.elli-cta-banner--light .elli-cta-banner__card {
    color: var(--elli-cta-banner-light-color, #282828);
    background:
        linear-gradient(
            180deg,
            var(--elli-cta-banner-light-surface-start, #f7f7f7),
            var(--elli-cta-banner-light-surface-end, #e8e8e8)
        );
}

.elli-cta-banner__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--elli-cta-banner-decor-opacity, 0.9);
}

.elli-cta-banner__content {
    position: relative;
    z-index: 1;
}

.elli-cta-banner__title {
    margin: 0 0 1rem;
    font-family: var(--font-display, "Inclusive Sans", system-ui, sans-serif);
    font-size: var(--elli-cta-banner-title-size, clamp(1.6rem, calc(1.1rem + 2vw), 2.35rem));
    line-height: var(--elli-cta-banner-title-line-height, 1.16);
    font-weight: var(--fw-bold, 700);
    letter-spacing: -0.015em;
}

.elli-cta-banner__text {
    max-width: var(--elli-cta-banner-text-width, 56ch);
    margin-inline: auto;
    margin-block-end: 1.5rem;
    color: var(--elli-cta-banner-muted-color, rgba(255, 255, 255, 0.88));
    font-size: var(--elli-cta-banner-text-size, var(--fs-cta-text, clamp(1.125rem, calc(1.05rem + 0.44vw), 1.5625rem)));
    line-height: var(--elli-cta-banner-text-line-height, 1.625);
}

.elli-cta-banner--light .elli-cta-banner__text {
    color: var(--elli-cta-banner-light-muted-color, rgba(40, 40, 40, 0.78));
}

.elli-cta-banner__text > :last-child {
    margin-bottom: 0;
}

.elli-cta-banner__actions {
    margin-top: 1.5rem;
}

.elli-cta-banner__button {
    min-width: var(--elli-cta-banner-button-min-width, 17.5rem);
    border-radius: var(--elli-cta-banner-button-radius, var(--radius, 0.625rem));
    padding: 0.85rem 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-weight: var(--fw-bold, 700);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.elli-cta-banner__button--primary {
    color: var(--elli-cta-banner-primary-button-color, #747474);
    background: var(--elli-cta-banner-primary-button-background, #ffffff);
    border: 0.125rem solid var(--elli-cta-banner-primary-button-border, #ffffff);
    box-shadow: var(--elli-cta-banner-button-shadow, 0 0.875rem 1.75rem rgba(0, 0, 0, 0.18));
}

.elli-cta-banner__button--secondary {
    color: var(--elli-cta-banner-secondary-button-color, #ffffff);
    background: transparent;
    border: 0.125rem solid var(--elli-cta-banner-secondary-button-border, rgba(255, 255, 255, 0.75));
}

.elli-cta-banner--light .elli-cta-banner__button--secondary {
    color: var(--elli-cta-banner-light-secondary-button-color, #424242);
    border-color: var(--elli-cta-banner-light-secondary-button-border, rgba(66, 66, 66, 0.45));
}

.elli-cta-banner__button:hover {
    color: var(--elli-cta-banner-button-hover-color, #575757);
    background: var(--elli-cta-banner-button-hover-background, rgba(255, 255, 255, 0.4));
    border-color: var(--elli-cta-banner-button-hover-border, rgba(255, 255, 255, 1));
    box-shadow: none;
}

.elli-cta-banner--light .elli-cta-banner__button:hover {
    color: var(--elli-cta-banner-light-button-hover-color, #ffffff);
    background: var(--elli-cta-banner-light-button-hover-background, #424242);
    border-color: var(--elli-cta-banner-light-button-hover-border, #424242);
}

.elli-cta-banner__button:focus-visible {
    outline: var(--jsd-elli-focus-ring-width, 3px) solid var(--jsd-elli-focus-ring-color, #000000);
    outline-offset: var(--jsd-elli-focus-ring-offset, 0.1875rem);
    box-shadow: var(--jsd-elli-focus-ring-shadow, 0 0 0 3px #ffffff);
}

.elli-cta-banner__button-icon-image {
    display: block;
    width: 1.4375rem;
    height: 1.4375rem;
}

@media (min-width: 768px) {
    .elli-cta-banner__card {
        padding: var(--elli-cta-banner-card-padding-y-md, 3.5rem) var(--elli-cta-banner-card-padding-x-md, 2.75rem);
    }
}

@media (min-width: 1200px) {
    .elli-cta-banner__button {
        min-width: var(--elli-cta-banner-button-min-width-xl, 20rem);
    }
}

@media (max-width: 575.98px) {
    .elli-cta-banner {
        padding-block: var(--elli-cta-banner-spacing-y-sm, 2.25rem);
    }

    .elli-cta-banner__button {
        inline-size: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elli-cta-banner,
    .elli-cta-banner * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}