/* ══════════════════════════════════════════════
   ROHO — FAQ Page Styles
   css/faq.css   (extends landing.css tokens)
   ══════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body, html {
    font-family: 'Source Sans Pro', sans-serif;
    background: #f2f5ff;
    min-height: 100vh;
    color: #2c2c2a;
}

/* ── NAV ── */
.nav {
    background: #1a3a6b;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
}
.nav-logo {
    font-family: 'Libre Baskerville', serif;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.nav-badge {
    background: #f0a500;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a3a6b;
    font-size: 16px;
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
    color: #aac4f0;
    font-size: 12px;
    padding: 6px 11px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
.nav-links a:hover, .nav-links a.act { background: #2a5298; color: #fff; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.btn-mpesa {
    background: #00a651;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Source Sans Pro', sans-serif;
}
.btn-login {
    background: #2a5298;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── HERO ── */
.hero {
    background: #1a3a6b;
    padding: 48px 24px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 0%,  rgba(240,165,0,.14), transparent 55%),
        radial-gradient(ellipse at 20% 110%, rgba(153,53,86,.13), transparent 55%);
    pointer-events: none;
}
.hero-icon {
    width: 68px;
    height: 68px;
    background: #f0a500;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #1a3a6b;
    margin: 0 auto 18px;
    box-shadow: 0 0 0 12px rgba(240,165,0,.12);
    position: relative;
}
.hero h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.25;
    position: relative;
}
.hero h1 span { color: #f0a500; }
.hero p {
    font-size: 13px;
    color: #aac4f0;
    max-width: 540px;
    margin: 0 auto 26px;
    line-height: 1.75;
    position: relative;
}

/* search bar */
.faq-search-wrap { max-width: 520px; margin: 0 auto; position: relative; }
.faq-search-wrap input {
    width: 100%;
    padding: 13px 48px 13px 18px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #2c2c2a;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.faq-search-wrap .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #993556;
    font-size: 18px;
    pointer-events: none;
}
.faq-search-wrap .search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #888780;
    font-size: 15px;
    cursor: pointer;
    display: none;
    background: none;
    border: none;
}
.faq-search-wrap.has-query .search-icon { display: none; }
.faq-search-wrap.has-query .search-clear { display: block; }

/* live-search dropdown */
.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(26,58,107,.14);
    display: none;
    z-index: 300;
    max-height: 340px;
    overflow-y: auto;
}
.search-dropdown.open { display: block; }
.sd-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 0.5px solid #f0f4ff;
    text-align: left;
}
.sd-item:last-child { border-bottom: none; }
.sd-item:hover { background: #f2f5ff; }
.sd-item .sd-q { font-size: 12px; font-weight: 700; color: #1a3a6b; margin-bottom: 2px; }
.sd-item .sd-cat {
    font-size: 10px;
    color: #993556;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sd-item .sd-excerpt { font-size: 11px; color: #5f5e5a; margin-top: 2px; line-height: 1.4; }
.sd-empty { padding: 20px; text-align: center; font-size: 12px; color: #888780; }

/* hero stats */
.faq-stats { display: flex; gap: 28px; justify-content: center; margin-top: 20px; }
.fs .fv { font-family: 'Libre Baskerville', serif; font-size: 20px; font-weight: 700; color: #f0a500; }
.fs .fl { font-size: 10px; color: #6b8fc7; }

/* ── CATEGORY TABS ── */
.cat-tabs {
    background: #fff;
    border-bottom: 0.5px solid #dde8f8;
    padding: 0 24px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    position: sticky;
    top: 56px;
    z-index: 100;
    justify-content: center;
}
.cat-tabs::-webkit-scrollbar { height: 0; }
.ctab {
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 700;
    color: #888780;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .15s;
    border-top: none;
    border-left: none;
    border-right: none;
    background: none;
    font-family: 'Source Sans Pro', sans-serif;
}
.ctab i { font-size: 15px; }
.ctab:hover { color: #1a3a6b; }
.ctab.active { color: #993556; border-bottom-color: #993556; }
.ctab .ct-count {
    font-size: 9px;
    background: #f2f5ff;
    color: #993556;
    border-radius: 10px;
    padding: 1px 6px;
    font-weight: 700;
}

/* ── LAYOUT ── */
.faq-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
    align-items: start;
}

/* ── SIDEBAR ── */
.faq-sidebar { position: sticky; top: 110px; }
.fsb-title {
    font-size: 10px;
    font-weight: 700;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.fsb-list { display: flex; flex-direction: column; gap: 2px; }
.fsb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #5f5e5a;
    font-weight: 600;
    border: none;
    background: none;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
    width: 100%;
    transition: background .12s;
}
.fsb-item i { font-size: 14px; flex-shrink: 0; }
.fsb-item:hover { background: #f2f5ff; color: #1a3a6b; }
.fsb-item.active { background: #fbeaf0; color: #993556; }
.fsb-item .fsb-count {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    background: #f2f5ff;
    color: #888780;
    border-radius: 8px;
    padding: 1px 6px;
}
.fsb-item.active .fsb-count { background: #fbeaf0; color: #993556; }
.fsb-contact {
    background: #1a3a6b;
    border-radius: 12px;
    padding: 14px;
    margin-top: 20px;
}
.fsb-contact h4 {
    font-family: 'Libre Baskerville', serif;
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 6px;
}
.fsb-contact p { font-size: 10px; color: #6b8fc7; line-height: 1.5; margin-bottom: 10px; }
.fsb-contact-btn {
    background: #00a651;
    color: #fff;
    border: none;
    width: 100%;
    padding: 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: 6px;
    text-decoration: none;
}
.fsb-contact-btn2 {
    background: #2a5298;
    color: #fff;
    border: none;
    width: 100%;
    padding: 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Source Sans Pro', sans-serif;
    text-decoration: none;
}

/* ── FAQ MAIN ── */
.faq-main { min-width: 0; }
.faq-section { margin-bottom: 36px; }
.faq-section-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f4ff;
}
.faq-section-hdr .sh-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.shi-green  { background: #e1f5ee; } .shi-green  i { color: #085041; }
.shi-pink   { background: #fbeaf0; } .shi-pink   i { color: #72243e; }
.shi-amber  { background: #faeeda; } .shi-amber  i { color: #633806; }
.shi-purple { background: #eeedfe; } .shi-purple i { color: #3c3489; }
.shi-blue   { background: #e6f1fb; } .shi-blue   i { color: #0c447c; }
.shi-teal   { background: #eaf3de; } .shi-teal   i { color: #27500a; }
.shi-coral  { background: #faece7; } .shi-coral  i { color: #712b13; }

.faq-section-hdr h3 {
    font-family: 'Libre Baskerville', serif;
    font-size: 17px;
    font-weight: 700;
    color: #1a3a6b;
}
.faq-section-hdr .sh-count {
    font-size: 10px;
    font-weight: 700;
    background: #f2f5ff;
    color: #993556;
    border-radius: 10px;
    padding: 2px 8px;
    margin-left: auto;
}

/* ── FAQ ITEM ── */
.faq-item {
    background: #fff;
    border-radius: 11px;
    border: 0.5px solid #dde8f8;
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.faq-item:hover { box-shadow: 0 2px 12px rgba(26,58,107,.07); }
.faq-item.open  { border-color: #c4d7f0; box-shadow: 0 2px 12px rgba(26,58,107,.08); }
.faq-q {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.faq-q-text { font-size: 13px; font-weight: 700; color: #1a3a6b; line-height: 1.4; flex: 1; }
.faq-arr {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f2f5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #993556;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform .25s, background .2s;
}
.faq-item.open .faq-arr { transform: rotate(90deg); background: #fbeaf0; }
.faq-a {
    padding: 0 16px 16px;
    font-size: 12px;
    color: #5f5e5a;
    line-height: 1.75;
    display: none;
    border-top: 0.5px solid #f7faff;
}
.faq-item.open .faq-a { display: block; padding-top: 12px; }

/* answer callouts */
.faq-a .fa-highlight {
    background: #f0faf5;
    border-left: 3px solid #1d9e75;
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 11px;
    color: #085041;
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.faq-a .fa-warning {
    background: #fcebeb;
    border-left: 3px solid #f0997b;
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 11px;
    color: #712b13;
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.faq-a .fa-tip {
    background: #faeeda;
    border-left: 3px solid #fac775;
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 11px;
    color: #633806;
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.faq-a .fa-steps { list-style: none; margin: 8px 0; display: flex; flex-direction: column; gap: 5px; }
.faq-a .fa-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: #3c3c3a; }
.faq-a .fa-steps li i { color: #1d9e75; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.faq-a p { margin-bottom: 6px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a .fa-link { color: #993556; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* helpful votes */
.faq-vote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid #f0f4ff;
}
.faq-vote .vote-label { font-size: 10px; color: #888780; }
.vote-btn {
    background: #f2f5ff;
    border: 1px solid #dde8f8;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    color: #5f5e5a;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Source Sans Pro', sans-serif;
    transition: background .12s;
}
.vote-btn:hover { background: #e1f5ee; color: #085041; border-color: #5dcaa5; }
.vote-btn.voted { background: #e1f5ee; color: #085041; border-color: #5dcaa5; }
.vote-btn:disabled { cursor: default; opacity: .85; }
.vote-count { font-size: 10px; color: #888780; }

/* ── NO RESULTS ── */
.no-results { text-align: center; padding: 48px 24px; display: none; }
.no-results i { font-size: 40px; color: #dde8f8; display: block; margin-bottom: 12px; }
.no-results h4 { font-size: 14px; font-weight: 700; color: #1a3a6b; margin-bottom: 6px; }
.no-results p { font-size: 12px; color: #888780; }

/* ── NO-REFUND ALERT ── */
.no-refund-alert {
    background: #fcebeb;
    border: 1.5px solid #f0997b;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 24px 32px;
    max-width: 1052px;
    margin-left: auto;
    margin-right: auto;
}
.nr-title { font-size: 13px; font-weight: 700; color: #791f1f; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.no-refund-alert p { font-size: 12px; color: #712b13; line-height: 1.6; }

/* ── STILL HAVE QUESTIONS ── */
.still-questions { background: #1a3a6b; padding: 48px; text-align: center; margin-top: 16px; width: 100%; }
.sq-inner { max-width: 100%; margin: 0 auto; }
.sq-inner h2 { font-family: 'Libre Baskerville', serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.sq-inner h2 span { color: #f0a500; }
.sq-inner p { font-size: 13px; color: #aac4f0; line-height: 1.7; margin-bottom: 28px; }
.sq-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; width: 100%; }
.sq-card { background: #223d75; border-radius: 14px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sq-card i { font-size: 32px; color: #f0a500; display: block; margin-bottom: 12px; }
.sq-card h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.sq-card p { font-size: 12px; color: #6b8fc7; line-height: 1.55; margin-bottom: 14px; flex: 1; }
.sq-card button, .sq-card a.sq-btn {
    background: #f0a500;
    color: #1a3a6b;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    text-decoration: none;
    display: block;
}
.sq-card .b-green { background: #1d9e75; color: #fff; }
.sq-card .b-blue  { background: #2a5298; color: #fff; }

/* ── MODALS ── */
.modal-bg {
    background: rgba(26,58,107,.6);
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 20px;
}
.modal-bg.show { display: flex; }
.modal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    max-height: 92vh;
    overflow-y: auto;
}
.modal-hdr {
    background: #1a3a6b;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-hdr-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
}
.modal-close { color: #aac4f0; font-size: 18px; cursor: pointer; background: none; border: none; }
.modal-body { padding: 20px; }
.modal-tier-select { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 12px; }
.mts-card { border: 2px solid #dde8f8; border-radius: 9px; padding: 9px 10px; cursor: pointer; text-align: center; }
.mts-card.active { border-color: #1a3a6b; background: #f2f5ff; }
.mts-card .mts-name { font-size: 10px; font-weight: 700; color: #1a3a6b; margin-bottom: 1px; }
.mts-card .mts-price { font-family: 'Libre Baskerville', serif; font-size: 16px; font-weight: 700; color: #1d9e75; }
.mts-card .mts-dur { font-size: 9px; color: #888780; }
.modal-unlock-list { background: #f0faf5; border: 1.5px solid #9fe1cb; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.mul-title { font-size: 10px; font-weight: 700; color: #085041; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.modal-unlock-list ul { list-style: none; }
.modal-unlock-list li { font-size: 11px; color: #0f6e56; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.modal-unlock-list li i { color: #1d9e75; font-size: 12px; }
.modal-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-price { font-family: 'Libre Baskerville', serif; font-size: 26px; font-weight: 700; color: #1d9e75; }
.modal-price-label { font-size: 11px; color: #0f6e56; margin-top: 2px; }
.price-note { font-size: 10px; color: #5f5e5a; background: #f1efe8; border-radius: 6px; padding: 4px 9px; display: flex; align-items: center; gap: 4px; }
.modal-steps { display: flex; gap: 8px; margin-bottom: 12px; }
.mstep { flex: 1; background: #f7faff; border-radius: 8px; padding: 8px 5px; text-align: center; border: 0.5px solid #dde8f8; }
.mstep-num { width: 20px; height: 20px; border-radius: 50%; background: #1a3a6b; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; }
.mstep-txt { font-size: 9px; color: #1a3a6b; font-weight: 600; line-height: 1.3; }
.modal-phone-grp { margin-bottom: 12px; }
.modal-phone-grp label { font-size: 11px; font-weight: 700; color: #1a3a6b; display: block; margin-bottom: 5px; }
.phone-input { display: flex; align-items: center; border: 1.5px solid #c4d7f0; border-radius: 8px; overflow: hidden; }
.phone-prefix { background: #e6f1fb; color: #0c447c; font-size: 12px; font-weight: 700; padding: 9px 10px; border-right: 1.5px solid #c4d7f0; white-space: nowrap; }
.phone-input input { border: none; outline: none; padding: 9px 10px; font-size: 13px; font-family: 'Source Sans Pro', sans-serif; flex: 1; color: #2c2c2a; }
.mpesa-pay-btn { background: #00a651; color: #fff; border: none; width: 100%; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 10px; font-family: 'Source Sans Pro', sans-serif; }
.secure-note { font-size: 10px; color: #888780; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* login modal */
.login-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 400px; overflow: hidden; }
.login-tabs { display: flex; border-bottom: 1.5px solid #dde8f8; }
.ltab { flex: 1; padding: 12px; text-align: center; font-size: 12px; font-weight: 700; color: #888780; cursor: pointer; background: none; border: none; font-family: 'Source Sans Pro', sans-serif; }
.ltab.active { color: #1a3a6b; border-bottom: 2px solid #f0a500; background: #f7faff; }
.login-body { padding: 18px 20px; }
.lform-grp { margin-bottom: 12px; }
.lform-grp label { font-size: 11px; font-weight: 700; color: #1a3a6b; display: block; margin-bottom: 5px; }
.lform-grp input { width: 100%; padding: 9px 11px; border: 1.5px solid #c4d7f0; border-radius: 8px; font-size: 13px; font-family: 'Source Sans Pro', sans-serif; color: #2c2c2a; background: #f7faff; outline: none; }
.lform-grp input:focus { border-color: #993556; }
.role-select { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.role-card { border: 2px solid #dde8f8; border-radius: 9px; padding: 11px; text-align: center; cursor: pointer; }
.role-card.active { border-color: #993556; background: #fbeaf0; }
.role-card i { font-size: 20px; color: #993556; display: block; margin-bottom: 4px; }
.role-card .rc-name { font-size: 11px; font-weight: 700; color: #72243e; }
.role-card .rc-desc { font-size: 9px; color: #993556; }
.login-btn { background: #993556; color: #fff; border: none; width: 100%; padding: 11px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 10px; font-family: 'Source Sans Pro', sans-serif; }
.login-footer-note { font-size: 10px; color: #888780; text-align: center; line-height: 1.5; }

/* ── FOOTER ── */
.footer { background: #1a3a6b; padding: 24px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.ft-col .ft-title { font-family: 'Libre Baskerville', serif; font-size: 13px; color: #fff; font-weight: 700; margin-bottom: 10px; }
.ft-col a { display: block; font-size: 11px; color: #6b8fc7; margin-bottom: 5px; text-decoration: none; cursor: pointer; }
.ft-col a:hover { color: #aac4f0; }
.footer-bottom { background: #162f59; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fb-text { font-size: 10px; color: #5a7fc0; }
.fb-mpesa-badge { background: #00a651; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; display: flex; align-items: center; gap: 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    .faq-layout { grid-template-columns: 1fr; }
    .faq-sidebar { position: static; margin-bottom: 20px; }
    .sq-cards { grid-template-columns: 1fr; }
    .footer { grid-template-columns: repeat(2,1fr); }
    .nav-links { display: none; }
}
@media (max-width: 560px) {
    .faq-stats { gap: 16px; }
    .hero h1 { font-size: 22px; }
    .modal-tier-select { grid-template-columns: 1fr; }
    .still-questions { padding: 32px 20px; }
}