/* ---------------- SECTION BREAKUP / BACKGROUNDS ---------------- */
.pp-page {
    background: #ffffff;
}

/* Full-width bands (backgrounds) */
.pp-band {
    width: 100%;
}

.pp-band--white {
    background: #ffffff;
}

.pp-band--alt {
    background: #f8f9fb; /* subtle off-white */
}

.pp-band--soft {
    background: #f3f6fa; /* slightly stronger off-white */
}

/* Vertical rhythm per section */
.pp-band-pad {
    padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}

/* Optional: subtle divider edge between bands */
.pp-band--alt,
.pp-band--soft {
    border-top: 1px solid rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
}

/* If a section uses a band background, cards should still pop */
.pp-on-band {
    /* tiny lift for cards on gray backgrounds */
}

/* Scoped helpers only — keeps shared app look */
.pp-hero-title {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.06;
    margin-bottom: .75rem;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
}

.pp-hero-sub {
    color: rgba(0,0,0,.62);
    font-size: 1.1rem;
    max-width: 62ch;
    margin-bottom: 1rem;
}

/* Pills — mirror Start page (light green, trust feel) */
.pp-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .75rem;
}

.ez-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 9999px;
    padding: .35rem .75rem;
    font-size: .85rem;
    font-weight: 700;
    border: 1px solid #b7e4c7;
    background: #eaf7f0;
    color: #1b7f5c;
    white-space: nowrap;
}

/* Calm QBO note */
.pp-qbo-note {
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(13,110,253,.04);
    border-left: 4px solid rgba(13,110,253,.35);
    border-radius: 14px;
    padding: .85rem 1rem;
    margin-top: .85rem;
}

    .pp-qbo-note .title {
        font-weight: 800;
        margin-bottom: .15rem;
    }

    .pp-qbo-note .small {
        color: rgba(0,0,0,.62);
        margin: 0;
    }

.pp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1rem;
}

    .pp-cta-row .btn {
        border-radius: 14px;
        padding: .75rem 1.05rem;
        font-weight: 800;
    }

.pp-mini {
    color: rgba(0,0,0,.60);
    font-size: .95rem;
}

.pp-panel {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.05);
    background: #fff;
}

    .pp-panel .panel-hd {
        padding: 1.1rem 1.1rem .65rem 1.1rem;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    .pp-panel .panel-bd {
        padding: 1rem 1.1rem 1.1rem 1.1rem;
    }

.pp-panel-title {
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 0 0 .25rem 0;
}

.pp-panel-sub {
    margin: 0;
    color: rgba(0,0,0,.60);
}

/* Mirror Start page: secondary auth buttons (neutral, blue only on hover) */
.pp-auth-btn {
    width: 100%;
    border-radius: 14px;
    padding: .72rem 1rem;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.14);
    background: #fff;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: #1f2a37;
    transition: box-shadow .15s ease, transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

    .pp-auth-btn:link,
    .pp-auth-btn:visited {
        color: #1f2a37;
    }

    .pp-auth-btn:hover {
        background: rgba(0,0,0,.015);
        border-color: rgba(0,0,0,.22);
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
        transform: translateY(-1px);
        color: #0d6efd;
    }

    .pp-auth-btn:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px rgba(0,0,0,.05);
    }

    .pp-auth-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.18), 0 6px 18px rgba(0,0,0,.06);
    }

/* Mirror Start page: primary warm-gold CTA */
.pp-primary-btn {
    width: 100%;
    border-radius: 14px;
    padding: .85rem 1rem;
    font-weight: 900;
    border: 1px solid rgba(0,0,0,.16);
    background: linear-gradient(180deg, #f6d36a 0%, #f2c24a 100%);
    color: #1f2a37;
    box-shadow: 0 10px 18px rgba(242, 194, 74, .22);
    transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

    .pp-primary-btn:hover {
        filter: brightness(.985);
        box-shadow: 0 12px 22px rgba(242, 194, 74, .26);
        transform: translateY(-1px);
        color: #111827;
    }

    .pp-primary-btn:active {
        transform: translateY(0);
        box-shadow: 0 8px 14px rgba(242, 194, 74, .20);
    }

    .pp-primary-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(242, 194, 74, .32), 0 10px 18px rgba(242, 194, 74, .22);
    }

/* NOTE: .pp-section previously controlled spacing; bands do that now.
               Keep for any internal sub-spacing only. */
.pp-section {
    margin-top: 0;
}

    .pp-section h2 {
        font-weight: 900;
        letter-spacing: -.01em;
        margin-bottom: .25rem;
    }

.pp-feature {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 1rem 1rem;
    background: #fff;
    height: 100%;
    box-shadow: 0 6px 18px rgba(0,0,0,.03); /* tiny lift on band backgrounds */
}

    .pp-feature .t {
        font-weight: 900;
        margin-bottom: .15rem;
    }

    .pp-feature .d {
        margin: 0;
        color: rgba(0,0,0,.60);
    }

.pp-sticky {
    position: sticky;
    top: 88px;
}

@@media (max-width: 991.98px) {
    .pp-sticky {
        position: static;
        top: auto;
    }
}

/* Trust strip */
.pp-trust {
    margin-top: .85rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: rgba(0,0,0,.012);
    padding: .75rem .9rem;
}

.pp-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: 1rem;
    color: rgba(0,0,0,.62);
    font-size: .92rem;
}

.pp-callout {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: rgba(13,110,253,.03);
    padding: 1rem 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.03);
}

/* Modal */
.pp-modal-title {
    font-weight: 900;
    letter-spacing: -.01em;
}

.pp-modal-sub {
    color: rgba(0,0,0,.60);
}

.pp-search {
    border-radius: 9999px;
}

.pp-bank-help {
    color: rgba(0,0,0,.55);
}

.pp-bank-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    column-count: 2;
    column-gap: 1.25rem;
}

@@media (max-width: 575.98px) {
    .pp-bank-list {
        column-count: 1;
    }
}

.pp-bank-item {
    break-inside: avoid;
    margin: 0 0 .45rem 0;
}

.pp-bank-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
}

    .pp-bank-link:hover {
        background: rgba(13,110,253,.06);
        border-color: rgba(13,110,253,.12);
    }

.pp-bank-left {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.pp-bank-name {
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
}

.pp-bank-meta {
    font-size: .8rem;
    color: rgba(0,0,0,.55);
    font-weight: 700;
}

.pp-bank-right {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    color: rgba(0,0,0,.55);
    font-size: .8rem;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,.10);
    padding: .2rem .55rem;
    border-radius: 9999px;
    background: rgba(0,0,0,.02);
    white-space: nowrap;
}

/* FAQ */
.pp-faq .accordion-button {
    font-weight: 900;
    border-radius: 12px !important;
}

.pp-faq .accordion-item {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: .75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.03);
}

.pp-bottom-cta {
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

/* Anchor offset for sticky header */
#howitworks, #faq, #trust {
    scroll-margin-top: 100px;
}

/* ---------------- MOBILE-FIRST CONVERSION TUNING ---------------- */
@@media (max-width: 991.98px) {
    .pp-cta-row {
        gap: .6rem;
    }

        .pp-cta-row .btn {
            width: 100%;
        }

        .pp-cta-row .btn-link {
            width: auto;
            padding-left: 0;
        }

    .pp-hero-title {
        font-size: clamp(1.9rem, 6vw, 2.4rem);
    }

    .pp-trust {
        padding: .65rem .75rem;
    }
}

/* Mobile sticky bottom CTA */
.pp-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: .65rem .75rem;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.08);
    display: none;
}

@@media (max-width: 991.98px) {
    .pp-mobile-cta {
        display: block;
    }

    body {
        padding-bottom: 84px;
    }
}

/* IMPORTANT: Override bootstrap blue for the sticky primary button so it's warm-gold */
.pp-mobile-cta .btn-primary {
    border-radius: 14px;
    font-weight: 900;
    padding: .7rem .9rem;
    border: 1px solid rgba(0,0,0,.16);
    background: linear-gradient(180deg, #f6d36a 0%, #f2c24a 100%);
    color: #1f2a37;
    box-shadow: 0 10px 18px rgba(242, 194, 74, .22);
    transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}

    .pp-mobile-cta .btn-primary:hover {
        filter: brightness(.985);
        box-shadow: 0 12px 22px rgba(242, 194, 74, .26);
        transform: translateY(-1px);
        color: #111827;
    }

    .pp-mobile-cta .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 8px 14px rgba(242, 194, 74, .20);
    }

    .pp-mobile-cta .btn-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(242, 194, 74, .32), 0 10px 18px rgba(242, 194, 74, .22);
    }

.pp-mobile-cta .btn-outline-secondary {
    border-radius: 14px;
    font-weight: 800;
    padding: .7rem .9rem;
}