/* Variables */
:root{
    --roboto: "Roboto", sans-serif;
    --helvetica: "helvetica-neue-lt-pro", sans-serif;
    --inter: "Inter", sans-serif;
    --primary: #0004EB;
    --primary-hover: #00007B;
    --primary-dark: #0C0C1A;
    --secondary: #848484;
    --secondary-hover: #404040;
    --dark: #1B1B1B;
    --light: #1E1E1E;
    --muted: #808080;
}

/* Typography */
h1, .h1, h2, .h2, h3, .h3 {
    line-height: 120%;
}

h1, .h1 {
    font-family: var(--inter);
    font-size: 56px;
    font-weight: 400;
}

h2, .h2 {
    font-family: var(--helvetica);
    font-size: 30px;
    font-weight: 700;
}

h3, .h3 {
    font-family: var(--inter);
    font-size: 25px;
    font-weight: 700;
}

h4, .h4 {
    font-family: var(--roboto);
    font-size: 20px;
}

p, .p {
    font-family: var(--inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;

    &.lg {
        font-size: 20px;
    }
    &.md {
        font-size: 18px;
    }
}

/* Classes */
.button {
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    padding: 12px 24px;
    border-width: 1px;
    border-style: solid;

    &.primary {
        color: white;
        background-color: var(--primary);
        border-color: var(--primary);
        &:hover {
            background-color: var(--primary-hover);
        }
    }
    &.secondary {
        color: white;
        background-color: var(--light);
        border-color: white;
        &:hover {
            background-color: var(--secondary);
        }
    }
    &.light {
        color: white;
        background-color: #7e7e80;
        border-color: white;
        &:hover {
            background-color: #646464;
        }
    }
    &.lg {
        font-size: 20px;
    }
}

.left-right {
    display: flex;
    align-items: center;
    
    @media(max-width: 768px) {
        flex-direction: column;
    }
    
    &.reverse {
        @media(max-width: 768px) {
            flex-direction: column-reverse;
        }
    }

    & > * { flex: 1; }
    
    & .copy {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.roboto { font-family: var(--roboto); }
.helvetica { font-family: var(--helvetica); }
.inter { font-family: var(--inter); }

.muted { color: var(--muted); }
.line { height: 1px; background: var(--muted); }
.bg-light { background-color: var(--light) !important; }
.balance { text-wrap-style: balance; }

.badge {
    font-family: var(--inter);
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    background: var(--primary);
    padding: 6px 8px;
    border-radius: 0;
}

/* Sections */
#integrations {
    display: flex;
    justify-content: center;
    gap: 64px;

    @media(max-width: 1026px) {
        flex-direction: column;
    }

    & > * {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 20px;
        
        @media(max-width: 1026px) {
            flex: 1;
        }

        & img {
            height: 114px;
            max-width: 100%;
            object-fit: contain;
        }

        & span {
            font-family: Roboto, sans-serif;
            font-size: 15px;
            text-align: center;
        }
    }
}