/* ==========================================================================
   SOV-O brand override for the inner pages.
   Added 2026-08-31.

   Repaints the Appilo theme to match the new landing page: Poppins instead of
   Plus Jakarta Sans, #6633E6 instead of #6a49f2, and the mint accent. Layout
   and markup are left alone, this is colour and type only.

   Must load AFTER style.css and responsive.css.
   ========================================================================== */

/* --- 1. palette ---------------------------------------------------------
   The theme drives almost everything from these variables, so redefining
   them recolours the bulk of each page for free. */

:root {
    --primary: #6633E6;
    --secondary: #2A1160;
    --body-text: #5B5470;
    --white: #ffffff;
    --lighter1: #F7F5FE;
    --lighter2: #E3DCFA;
    --lighter3: #C3BADF;
    --purplishgray: #E4DCFF;
    --border: #E8E3F5;
    --slider-dots-color: #D4D2DD;
    --red-color: #ee6464;
    --green-color: #3EDEA0;

    /* landing page tokens, for the pieces the theme does not cover */
    --purple-deep: #4A1FBF;
    --purple-panel: #4023B4;
    --mint: #3EDEA0;
    --mint-deep: #22B77E;
}

/* --- 2. typography ------------------------------------------------------ */

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--body-text);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-nav .nav-link,
.btn,
button {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1,
h2,
h3 {
    letter-spacing: -.02em;
    font-weight: 800;
}

h4,
h5,
h6 {
    font-weight: 700;
}

/* --- 3. header, matching the landing bar -------------------------------- */

/* The theme positions the header absolutely so it floats over the first
   section. The old page banner carried enough top padding to hide that; the
   new banner bands do not, so the header sits in normal flow instead.
   :not(.fix_style) leaves the scroll-triggered sticky behaviour alone. */
header:not(.fix_style) {
    position: relative;
}

header {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

header .navbar-nav .nav-link {
    color: var(--body-text);
    font-size: .93rem;
    font-weight: 500;
}

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link.active {
    color: var(--primary);
}

/* the landing CTA is a mint outlined pill rather than a filled purple block */
header .navbar-nav .btn.puprple_btn {
    background: transparent;
    border: 2px solid var(--mint);
    color: var(--mint-deep);
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: none;
}

header .navbar-nav .btn.puprple_btn:hover {
    background: var(--mint);
    color: #0C3D2B;
    border-color: var(--mint);
}

header .navbar-nav .btn.puprple_btn::before,
header .navbar-nav .btn.puprple_btn::after {
    display: none;
}

/* --- 4. buttons --------------------------------------------------------- */
/* the landing page uses fully rounded pills throughout */

.btn.puprple_btn,
.btn.white_btn {
    border-radius: 999px;
}

.btn.puprple_btn {
    background: var(--primary);
}

.btn.puprple_btn:hover {
    background: var(--purple-deep);
}

/* --- 5. badges and accents ---------------------------------------------- */

.title_badge {
    background: var(--primary);
    border-radius: 999px;
}

.title_badge.lighter {
    background: var(--white);
    color: var(--primary);
}

/* --- 6. footer, the landing page's minimal bar --------------------------
   The theme's navy three-column footer is replaced in the markup by the same
   one-line footer the landing page uses, so every page ends the same way.
   None of these class names exist in style.css, so nothing collides. */

/* The theme pulls .cta_box down by -110px so it overlaps the old footer,
   which carried 210px of top padding to catch it. That footer is gone, so the
   overlap is cancelled here instead. */
.cta_section.new .cta_box {
    margin-bottom: 0;
}

.foot {
    border-top: 1px solid var(--border);
    padding: 28px 0 40px;
    margin-top: 60px;
    font-size: .85rem;
    color: var(--body-text);
    background: var(--white);
}

.foot .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.foot-in {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.foot-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.foot a {
    color: var(--body-text);
    text-decoration: none;
}

.foot a:hover {
    color: var(--primary);
}

.foot-credit a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.foot-credit a:hover {
    color: var(--purple-deep);
}

/* centred and evenly spaced on small screens, the row-wrap looked ragged */
@media (max-width: 760px) {
    .foot {
        padding: 24px 0 32px;
    }

    .foot-in {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .foot-links {
        justify-content: center;
        gap: 14px 20px;
        line-height: 2;
    }
}

/* --- 7. links and small accents ----------------------------------------- */

a {
    color: inherit;
}

.go_top span {
    background: var(--primary);
}

/* accordion plus/minus and other icon accents follow the primary */
.faq_section .accordion .card .card-header .btn i,
.accordion .btn-link i {
    color: var(--primary);
}

/* --- 8. page banner, closer to the landing headings --------------------- */

.bred_crumb .bred_text h1 {
    letter-spacing: -.02em;
    font-weight: 800;
}

.bred_crumb {
    background-image: none;
    background: var(--lighter1);
    min-height: 0;
    padding: 70px 0 60px;
}

/* the banner was sized around a badge and a breadcrumb that are now gone, so
   the heading and its paragraph sat far apart with dead space beneath */
.bred_crumb .bred_text h1 {
    margin-bottom: 14px;
}

.bred_crumb .bred_text h1 + p {
    margin-bottom: 0;
}

/* --- 9. drop the theme's page-dimming overlay ---------------------------
   main.js fades .purple_backdrop to full opacity whenever the download panel
   scrolls into view. That read as intentional behind the old navy footer, but
   it dims the new white one to muddy navy, and the landing page has no such
   effect. Hidden here rather than edited in main.js, which is shared. */

.purple_backdrop {
    display: none !important;
}

/* --- 10. large purple panels ---------------------------------------------
   The theme paints these in --primary (#6633E6), which is lighter than the
   #4023B4 the landing page uses for its full-width purple sections. The
   brand purple stays #6633E6 for buttons, links and badges; only the big
   panels are deepened so they match the homepage. */

.free_app_section .container .free_app_inner,
.cta_section.new .cta_box {
    background-color: var(--purple-panel);
}

/* the theme lays a warm gradient wash over the download panel, which the
   landing page has no equivalent of and which shifts the purple off-tone */
.free_app_section .container .free_app_inner:before {
    display: none;
}

/* --- 11. contact page banner bands --------------------------------------
   Added 2026-09-08. The contact page is built from flat banners like the
   homepage, with transparent hotspots over the buttons drawn into them.
   The message form and the map are real markup, kept between the bands. */

.cband {
    padding: 22px 0;
}

.cwrap {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* the banners already carry their own rounded card edge, so no extra radius
   here or it reads as a white border around the artwork */
.cwrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* the buttons are part of the artwork, so the clickable areas sit on top */
.chot {
    position: absolute;
    display: block;
    border-radius: 999px;
}

.chot:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* the map is gone until there is a location to show, so the form sits on its
   own, centred */
.contact_solo {
    max-width: 720px;
    margin: 0 auto;
}

.contact_solo .contact_form {
    margin: 0;
}

/* the theme constrains this paragraph for the old full-width column, which
   made it break one word per line in the narrower split. Left aligned so the
   heading and subtitle line up with the fields below. */
.contact_solo .contact_form .section_title {
    text-align: left;
    max-width: none;
    padding: 0;
    margin-bottom: 26px;
}

.contact_solo .contact_form .section_title h3 {
    text-align: left;
    margin-bottom: 8px;
}

.contact_solo .contact_form .section_title p {
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    text-align: left;
    white-space: normal;
}

@media (max-width: 767px) {
    .cband {
        padding: 14px 0;
    }

    .cwrap {
        padding: 0 16px;
    }

}

@media (max-width: 991px) {
}

/* the search lives in the hero banner, so anchored scrolling has to clear the
   sticky header */
#faqs {
    scroll-margin-top: 90px;
}

/* --- 12. FAQ help centre ------------------------------------------------
   Added 2026-09-08. The banners carry the artwork, but the questions, the
   category filter and the search are real markup so they actually work.

   Question set: the 27 answers already on the page, plus two written for
   payment protection and paying a seeker. Mapped into the five categories
   shown in the design. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The new hero leaves empty space under the subtitle instead of drawing a
   search box, so this is a real field styled to match rather than an input
   laid over a picture of one. */
.fq-search {
    position: absolute;
    left: 8%;
    top: 62%;
    width: 40%;
    height: 15%;
    min-height: 46px;
    margin: 0;
    display: block;
}

.fq-search input {
    width: 100%;
    height: 100%;
    border: 1px solid #ded6fb;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236633E6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 22px center;
    background-size: 20px 20px;
    border-radius: 999px;
    padding: 0 22px 0 58px;
    font-family: inherit;
    font-size: clamp(.8rem, 1.05vw, 1rem);
    color: var(--secondary);
    box-shadow: 0 4px 16px rgba(50, 35, 111, .08);
}

.fq-search input::placeholder {
    color: #9a93ad;
}

.fq-search input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-color: var(--primary);
}

/* suggestions under the search box, so you can see what you are typing
   instead of the page jumping to the results */
.fq-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(50, 35, 111, .18);
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
}

.fq-suggest[hidden] {
    display: none;
}

.fq-suggest button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 9px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--secondary);
    cursor: pointer;
}

.fq-suggest button:hover,
.fq-suggest button.is-active {
    background: #F0EBFF;
    color: var(--primary);
}

.fq-suggest-none {
    margin: 0;
    padding: 12px 13px;
    font-size: .9rem;
    color: var(--body-text);
}

/* brief highlight on the question you picked */
.fq.is-found {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 51, 230, .16);
}

/* --- layout ------------------------------------------------------------- */

.fq_section {
    padding: 30px 0 40px;
}

.fq_split {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 34px;
    align-items: start;
}

.fq_split > * {
    min-width: 0;
}

/* --- browse topics ------------------------------------------------------ */

.fq_topics {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px 22px;
    box-shadow: 0 3px 18px rgba(50, 35, 111, .05);
}

.fq_topics h3 {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.fq_topics > p {
    font-size: .88rem;
    margin-bottom: 18px;
}

.ft-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--secondary);
    cursor: pointer;
    transition: .2s all;
}

.ft-item i {
    color: var(--primary);
    font-size: 1rem;
}

.ft-item:hover {
    border-color: #cbbcff;
}

.ft-item.is-active {
    background: #F0EBFF;
    border-color: #cbbcff;
    color: var(--primary);
}

.ft-all {
    margin-bottom: 0;
    font-weight: 500;
}

.fq_help {
    background: #E6F8EF;
    border: 1px solid #C6EBD8;
    border-radius: 20px;
    padding: 24px 22px;
    margin-top: 18px;
}

.fq_help h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.fq_help p {
    font-size: .88rem;
    margin-bottom: 16px;
}

.fq_help .btn.puprple_btn {
    padding: 10px 24px;
    font-size: .9rem;
}

/* --- questions ---------------------------------------------------------- */

.fq_main .section_title {
    text-align: left;
    max-width: none;
    padding: 0;
    margin-bottom: 22px;
}

.fq_main .section_title h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    text-align: left;
}

.fq_main .section_title p {
    max-width: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: .95rem;
}

.fq_count {
    font-size: .9rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 14px;
}

.fq_empty {
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 20px;
    font-size: .95rem;
}

.fq_empty a {
    color: var(--primary);
    text-decoration: underline;
}

/* two across, and the open one spans the full width as in the design */
.fq_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.fq {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.fq[hidden] {
    display: none;
}

/* open spans both columns but keeps the same white card as the closed ones */
.fq.is-open {
    grid-column: 1 / -1;
}

.fq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 17px 18px;
    font-family: inherit;
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--secondary);
    cursor: pointer;
}

/* the marker leads the question, so wrapped titles stay aligned and the
   answer below lines up under the text rather than the icon */
.fq-q > span {
    order: 2;
    flex: 1 1 auto;
}

.fq-q i {
    order: 1;
}

.fq-q i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: .68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}

.fq.is-open .fq-q i {
    transform: rotate(45deg);
}

.fq-a {
    padding: 0 18px 20px 56px;
    font-size: .93rem;
    line-height: 1.75;
    color: var(--body-text);
}

.fq:not(.is-open) .fq-a {
    display: none;
}

.fq-a p {
    margin-bottom: 12px;
}

.fq-a p:last-child,
.fq-a ul:last-child,
.fq-a ol:last-child {
    margin-bottom: 0;
}

.fq-a ul,
.fq-a ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.fq-a li {
    margin-bottom: 8px;
}

.fq-a li:last-child {
    margin-bottom: 0;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 991px) {
    .fq_split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fq-a {
        padding-left: 18px;
    }

    .fq_list {
        grid-template-columns: 1fr;
    }

    .fq.is-open {
        grid-column: auto;
    }
}

@media (max-width: 767px) {

    /* too small to type in at phone size, so it drops below the banner */
    .fq-search {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 14px;
    }

    .fq-search input {
        height: 50px;
        padding: 0 18px 0 52px;
    }

    .fq_main .section_title h2 {
        font-size: 1.6rem;
    }
}

/* --- 13. business partnership page --------------------------------------
   Added 2026-09-12. Built as real markup rather than flat banners, so the
   partner details stay editable and the text stays sharp. Only the three
   strips at the foot of the page are artwork. */

/* --- three value cards --- */

.bp_values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bp_values > * {
    min-width: 0;
}

.bp_value {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 3px 18px rgba(50, 35, 111, .05);
}

.bp_value:nth-child(2) {
    background: #EAF9F1;
    border-color: #C9EBDA;
}

.bp_value_icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0EBFF;
    color: var(--primary);
    font-size: 1.4rem;
}

.bp_value:nth-child(2) .bp_value_icon {
    background: #D8F4E7;
    color: #17A46C;
}

.bp_value h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.bp_value p {
    font-size: .93rem;
    line-height: 1.65;
    margin: 0;
}

/* --- partner cards --- */

.bp_partners_sec {
    background: var(--lighter1);
}

.bp_partner {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 28px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px 30px;
    margin-bottom: 18px;
}

.bp_partner > * {
    min-width: 0;
}

.bp_partner:last-child {
    margin-bottom: 0;
}

.bp_logo img {
    max-width: 100%;
    max-height: 84px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.bp_body h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.bp_body > p {
    font-size: .93rem;
    line-height: 1.7;
    margin-bottom: 14px;
}

.bp_meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    font-size: .88rem;
}

.bp_meta li {
    color: var(--body-text);
}

.bp_meta span {
    font-weight: 700;
    color: var(--secondary);
    margin-right: 5px;
}

.bp_meta a {
    color: var(--primary);
}

.bp_meta a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {

    .bp_values {
        grid-template-columns: repeat(2, 1fr);
    }

    .bp_partner {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }

    .bp_meta {
        justify-content: center;
    }
}

@media (max-width: 575px) {

    .bp_values {
        grid-template-columns: 1fr;
    }
}