.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.btn.btn-m {
    padding: 16px 40px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 83.333% */
}

@media (max-width: 989px) {
    .btn.btn-m {
        padding: 10px 40px;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
}

.btn.btn-l {
    padding: 20px 40px;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

@media (max-width: 1439px) {
    .btn.btn-l {
        padding: 16px 40px;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
}

.btn-s {
    padding: 10px 40px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

    /* Primary */
.btn--primary {
    color: var(--Base-White, #FFF);
    background: var(--Brand-Primary, #D5A944);
    box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.35) inset, 0 -4px 11px 0 rgba(0, 0, 0, 0.30) inset;
}

/* Ховеры — по Figma 207:44346 (BUTTONS): затемнённые 600-оттенки, outline заливается. */
.btn--primary:hover {
    background: var(--Brand-Primary-600, #CB9F3A);
}

/* Outline */
.btn--outline {
    border: 1px solid var(--Brand-Secondary, #454452);
    padding: 10px 20px;
    color: var(--Text-Primary, #1E2433);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}
.btn--outline:hover {
    background: var(--Brand-Secondary, #454452);
    border-color: var(--Brand-Secondary, #454452);
    color: var(--Base-White, #FFF);
}

/* Secondary */
.btn--secondary {
    color: var(--Base-White, #FFF);
    background: var(--Brand-Secondary, #454452);
    box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.35) inset, 0 -4px 11px 0 rgba(0, 0, 0, 0.30) inset;
}

.btn--secondary:hover {
    background: var(--Brand-Secondary-600, #31303E);
}