/* =======================
   HERO + CTA
   ======================= */
.hero-cta .btn-sm {
    padding: .42rem .7rem;
    font-size: .9rem;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 9rem;
    max-width: 10rem
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start
}

@media (min-width:992px) {
    .hero-cta {
        gap: .6rem
    }
}

.hero-heading {
    margin: 0 0 .25rem 0;
    line-height: 1.15
}

.hero-heading__main {
    display: block;
    font-weight: 700;
    letter-spacing: -.015em;
    font-size: clamp(1.75rem,2.2rem + .6vw,2.6rem);
    color: #198754
}

.hero-heading__tagline {
    display: block;
    font-weight: 600;
    color: var(--bs-body-color);
    opacity: .9;
    letter-spacing: -.01em;
    font-size: clamp(1.25rem,1.4rem + .4vw,2rem)
}

.hero-box {
    position: relative;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    padding: 1.25rem 1.5rem 1.75rem 1.75rem;
    overflow: hidden
}

    .hero-box::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: #198754;
        border-radius: 4px 0 0 4px
    }

    .hero-box h1 {
        margin: 0 0 .25rem 0 !important;
        font-size: calc(1.5rem + 1vw);
        line-height: 1.2
    }

    .hero-box p.lead {
        margin: .35rem 0 1rem
    }

@media (min-width:992px) {
    .hero-box {
        padding: 2rem 2rem 2rem 2.5rem
    }

        .hero-box h1 {
            font-size: 2.25rem
        }
}

/* =======================
   TITLES / CARDS
   ======================= */
.kp-card h2, .kp-title {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -.005em;
    color: #157347;
    margin: 0 0 .75rem 0;
    line-height: 1.2
}

.hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem .75rem;
    margin-top: .75rem
}

    .hero-meta .meta {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        padding: .55rem .9rem;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 999px;
        background: #f8f9fa;
        color: #212529;
        font-size: .95rem;
        line-height: 1.2;
        white-space: normal;
        box-shadow: 0 1px 2px rgba(0,0,0,.03);
        transition: transform .12s,box-shadow .15s,background .15s,border-color .15s
    }

        .hero-meta .meta i {
            color: #198754;
            font-size: 1rem;
            transition: transform .15s,color .15s,opacity .15s
        }

        .hero-meta .meta:hover {
            background: #fff;
            border-color: rgba(25,135,84,.28);
            box-shadow: 0 6px 18px rgba(25,135,84,.10);
            transform: translateY(-1px)
        }

            .hero-meta .meta:hover i {
                transform: translateY(-1px) scale(1.06);
                color: #157347
            }

        .hero-meta .meta:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(25,135,84,.10)
        }

        .hero-meta .meta:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 .2rem rgba(25,135,84,.2)
        }

@media (min-width:576px) {
    .hero-meta {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .hero-meta .meta {
            white-space: nowrap
        }
}

@media (min-width:768px) {
    .hero-meta {
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr))
    }
}

@media (prefers-reduced-motion:reduce) {
    .hero-meta .meta, .hero-meta .meta i {
        transition: none
    }
}

.hero-box .btn {
    min-width: 12rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

    .hero-box .btn i {
        margin-right: .4rem;
        font-size: 1.05rem
    }

.kp-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 6px 20px rgba(0,0,0,.06)
}

.pill-btn {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: .75rem;
    align-items: center;
    padding: .65rem .75rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform .08s,box-shadow .15s,background .15s
}

    .pill-btn:hover {
        background: #fff;
        box-shadow: 0 6px 18px rgba(25,135,84,.12);
        transform: translateY(-1px);
        color: inherit
    }

.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(25,135,84,.12);
    color: #157347;
    border: 1px solid rgba(25,135,84,.25);
    font-size: 1.1rem
}

.tile {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    transition: transform .08s,box-shadow .15s,border-color .15s
}

    .tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0,0,0,.08);
        border-color: rgba(25,135,84,.35)
    }

.icon-lg {
    font-size: 1.6rem;
    color: #198754
}

.hub-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 3px 12px rgba(0,0,0,.04);
    transition: transform .08s,box-shadow .15s
}

    .hub-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(25,135,84,.08)
    }

    .hub-card h3 {
        display: flex;
        align-items: center;
        font-weight: 500;
        color: #0d6efd;
        letter-spacing: -.01em;
        margin-bottom: .4rem
    }

    .hub-card i {
        font-size: 1.1rem;
        color: #198754
    }

    .hub-card p {
        margin-bottom: .5rem;
        color: var(--bs-body-color)
    }

    .hub-card .btn-sm {
        margin-top: .25rem;
        background: #198754;
        border-color: #198754;
        color: #fff
    }

        .hub-card .btn-sm:hover {
            background: #157347;
            border-color: #146c43;
            color: #fff
        }

/* =======================
   SEO SECTION (final single source)
   ======================= */
.seo-section--inline {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.03);
    position: relative;
}

    .seo-section--inline::before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: var(--bs-border-color);
        margin-bottom: 1rem
    }

@media (min-width:768px) {
    .seo-section--inline {
        padding: 1.25rem 1.5rem
    }
}

.seo-title {
    margin: 0 0 .6rem 0;
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 600;
    color: #0d6efd
}

.seo-section--inline p {
    margin: .45rem 0;
    line-height: 1.55;
    color: rgba(33, 37, 41, .9);
    font-weight: 400;
    width: 100%;
    max-width: none; /* allow full container width */
}


.seo-section--inline strong {
    font-weight: 500
}

.seo-section--inline + #faq,
.seo-section--inline + #faqIndex {
    margin-top: 2rem !important
}

/* =======================
   FAQ
   ======================= */
.faq-title {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 600;
    color: #0d6efd
}

@media (min-width:768px) {
    .faq-title {
        margin-top: 2.25rem
    }
}

#faq {
    margin-top: .75rem
}

#faqIndex .accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: #fff;
    margin-bottom: .5rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.03)
}

#faqIndex .accordion-button {
    font-weight: 600;
    padding: .7rem 1rem;
    background: #f8fafc;
    color: var(--bs-body-color)
}
    /* fixed selector */
    #faqIndex .accordion-button:not(.collapsed) {
        background: #eef6ff;
        color: #0d6efd
    }

#faqIndex .accordion-body {
    padding: .85rem 1rem 1rem;
    line-height: 1.55
}

/* =======================
   PAGE BACKGROUND
   ======================= */
body {
    background: #f9fafb
}

/* =======================
   "Everything in one place"
   ======================= */
#everything {
    margin-top: .5rem;
    margin-bottom: 0 !important
}

    #everything .section-title, #everything h2 {
        margin: 0 0 .5rem 0;
        font-size: 1.3rem;
        line-height: 1.2
    }

    #everything .row {
        --bs-gutter-x: .6rem;
        --bs-gutter-y: .6rem;
        row-gap: 1rem
    }

@media (min-width:768px) {
    #everything .row {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .7rem;
        row-gap: 1rem
    }
}

#everything .hub-card {
    padding: .9rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.04)
}

@media (min-width:992px) {
    #everything .hub-card {
        padding: 1rem 1.1rem
    }
}

#everything .hub-card h3 {
    margin: 0 0 .3rem 0;
    font-size: 1.03rem;
    line-height: 1.15
}

#everything .hub-card p {
    margin-bottom: .35rem;
    line-height: 1.4
}

#everything .hub-card ul {
    margin: .2rem 0 0 0
}

#everything .hub-card li {
    margin-bottom: .22rem
}

#everything .hub-card .btn-sm {
    padding: .28rem .55rem;
    font-size: .88rem;
    line-height: 1.15
}

#learn-and-faq {
    margin-bottom: .75rem
}

section.mb-5 {
    margin-bottom: 1rem !important
}

/* =======================
   CTA LAYOUT (3/2/1 responsive)
   ======================= */
.hero-cta {
    --cta-gap: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cta-gap)
}

    .hero-cta .btn {
        min-width: 0 !important;
        white-space: nowrap;
        padding: .5rem .85rem;
        font-size: .95rem;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        box-sizing: border-box
    }

        .hero-cta .btn i {
            margin-right: 0
        }

@media (min-width:1200px) {
    .hero-cta .btn {
        flex: 1 0 calc((100% - 2 * var(--cta-gap)) / 3)
    }
}

@media (min-width:768px) and (max-width:1199.98px) {
    .hero-cta .btn {
        flex: 1 0 calc((100% - var(--cta-gap)) / 2)
    }
}

@media (max-width:767.98px) {
    .hero-cta .btn {
        flex: 1 0 100%
    }
}

@media (max-width:420px) {
    .hero-cta .btn i {
        display: none
    }
}