@import url("/Styles/Library/vars.css");

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif);
}

[id] {
    scroll-margin-top: 2rem;
}

header {
    background-color: var(--bs-navbar-bg) !important;
}

.accordion {
    --bs-accordion-bg: var(--bs-card-bg);
}

.bg-lite {
    background: var(--bs-card-bg);
}

.bg-lite-trans {
    background: var(--color-bg-light-trans);
}

.bg-body {
    background: var(--bs-body-bg) !important;
}

.btn-brand {
    --_btn-bg: var(--bs-primary, var(--color-primary));
    --_btn-bg-hover: var(--bs-secondary, var(--color-secondary));
    background: var(--_btn-bg);
    border-color: var(--_btn-bg);
    color: #fff;
}

    .btn-brand:hover {
        background: var(--_btn-bg-hover);
        border-color: var(--_btn-bg-hover);
        filter: brightness(.97);
    }

.text-brand {
    color: var(--bs-link-color, var(--color-primary)) !important;
}

.bg-faint {
    background: color-mix(in oklab, var(--bs-body-bg), white 6%);
}

.shadow-soft {
    box-shadow: 0 10px 30px rgba(2, 6, 23, .08), 0 1px 2px rgba(2, 6, 23, .06);
}

.hero {
    background: linear-gradient( 180deg, color-mix(in oklab, var(--bs-body-bg), white 8%), color-mix(in oklab, var(--bs-body-bg), white 2%) );
}

.cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    background: var(--bs-card-bg, var(--color-bg-light));
    border: 1px solid var(--bs-card-border-color, #e5e7eb);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.05);
    transition: transform .35s ease, filter .35s ease;
}

    .card * {
        color: var(--bs-body-color, var(--color-text));
    }

    .card h3 {
        margin: .25rem 0 .5rem;
        font-size: 1.1rem;
    }

    .card p {
        margin: 0 0 .5rem;
    }

    .card ul {
        margin: .25rem 0 0 1rem;
    }

#pricing .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#tblPricing td {
    padding: 10px;
}

    #tblPricing td.btn-brand {
        padding: 0 1ch;
    }

    #tblPricing td:not(.btn-brand) {
        font-size: 18px;
        font-style: normal;
        border-bottom: 1px solid color-mix(in oklab, var(--bs-body-color), transparent 90%);
        text-align: left;
        background: var(--bs-card-bg);
        color: var(--bs-body-color);
    }

.btn {
    --bs-btn-border-radius: 0;
}

.pulse {
    animation: pulse 1s infinite;
}

.mcLogo {
    height: 1.5em;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}