.btn-emerald {
    /* Feed Bootstrap's .btn state variables so :hover/:active/:focus-visible never fall back to transparent */
    --bs-btn-color: var(--color-btn-primary-text);
    --bs-btn-bg: var(--color-btn-primary-bg);
    --bs-btn-border-color: var(--color-btn-primary-bg);
    --bs-btn-hover-color: var(--color-btn-primary-text);
    --bs-btn-hover-bg: var(--color-btn-primary-hover);
    --bs-btn-hover-border-color: var(--color-btn-primary-hover);
    --bs-btn-active-color: var(--color-btn-primary-text);
    --bs-btn-active-bg: var(--color-btn-primary-hover);
    --bs-btn-active-border-color: var(--color-btn-primary-hover);
    --bs-btn-focus-shadow-rgb: 52, 211, 153;
    background: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.1rem;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
}

.btn-emerald:hover {
    background: var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
    color: var(--color-btn-primary-text);
    transform: translateY(-1px);
}

.btn-emerald:focus-visible,
.btn-outline-emerald:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: none;
}

.btn-emerald:active {
    background: var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
    color: var(--color-btn-primary-text);
}

[data-theme="dark"] .btn-emerald:hover {
    box-shadow: 0 0 0 2px var(--color-emerald-400), 0 6px 18px rgba(52, 211, 153, 0.25);
}

.btn-outline-emerald {
    --bs-btn-color: var(--color-btn-outline-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-btn-outline-border);
    --bs-btn-hover-color: var(--color-btn-primary-text);
    --bs-btn-hover-bg: var(--color-btn-primary-bg);
    --bs-btn-hover-border-color: var(--color-btn-primary-bg);
    --bs-btn-active-color: var(--color-btn-primary-text);
    --bs-btn-active-bg: var(--color-btn-primary-hover);
    --bs-btn-active-border-color: var(--color-btn-primary-hover);
    border: 2px solid var(--color-btn-outline-border);
    color: var(--color-btn-outline-text);
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 0.55rem 1.5rem;
    background: transparent;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-outline-emerald:hover,
.btn-outline-emerald:active {
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.cta-banner .btn-emerald {
    --bs-btn-color: var(--color-emerald-800);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--color-emerald-800);
    --bs-btn-hover-bg: var(--color-emerald-50);
    --bs-btn-hover-border-color: var(--color-emerald-50);
    --bs-btn-active-color: var(--color-emerald-800);
    --bs-btn-active-bg: var(--color-emerald-100);
    --bs-btn-active-border-color: var(--color-emerald-100);
    background: #fff;
    color: var(--color-emerald-800);
    border-color: #fff;
    font-size: 1.05rem;
    padding: 0.65rem 2rem;
}

.cta-banner .btn-emerald:focus-visible,
.cta-banner .btn-outline-emerald:focus-visible {
    outline-color: #fff;
}

.cta-banner .btn-emerald:hover {
    background: var(--color-emerald-50);
    color: var(--color-emerald-800);
    box-shadow: none;
}

.cta-banner .btn-outline-emerald {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--color-emerald-800);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--color-emerald-800);
    --bs-btn-active-bg: var(--color-emerald-100);
    --bs-btn-active-border-color: var(--color-emerald-100);
    border-color: #fff;
    color: #fff;
}

.cta-banner .btn-outline-emerald:hover {
    background: #fff;
    color: var(--color-emerald-800);
}