/* Afripay funnel growth sections — Brainbox, Business OS, ladder (launch + USD themes) */

.fgrowth {
    --fgrowth-ink: #0f172a;
    --fgrowth-muted: #64748b;
    --fgrowth-accent: #4f46e5;
    --fgrowth-accent-2: #1e3a5f;
    --fgrowth-card: #ffffff;
    --fgrowth-line: #e2e8f0;
    --fgrowth-soft: #f8fafc;
    --fgrowth-glow: rgba(79, 70, 229, 0.12);
    color: var(--fgrowth-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fgrowth--usd {
    --fgrowth-accent: #eab308;
    --fgrowth-accent-2: #0f172a;
    --fgrowth-glow: rgba(234, 179, 8, 0.15);
}

.fgrowth__wrap {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.fgrowth__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fgrowth-accent);
}

.fgrowth__title {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--fgrowth-ink);
}

.fgrowth__lead {
    margin: 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fgrowth-muted);
}

.fgrowth__section {
    padding: 56px 0;
}

.fgrowth__section--soft {
    background: var(--fgrowth-soft);
    border-block: 1px solid var(--fgrowth-line);
}

.fgrowth__section--dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #312e81 100%);
    color: #fff;
}

.fgrowth__section--dark .fgrowth__lead,
.fgrowth__section--dark .fgrowth__eyebrow {
    color: rgba(226, 232, 240, 0.88);
}

.fgrowth__section--dark .fgrowth__eyebrow {
    color: #fde68a;
}

.fgrowth--usd .fgrowth__section--dark .fgrowth__eyebrow {
    color: #facc15;
}

.fgrowth__section--dark .fgrowth__title {
    color: #fff;
}

.fgrowth__grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
    margin-top: 28px;
}

.fgrowth__list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.fgrowth__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fgrowth-muted);
}

.fgrowth__section--dark .fgrowth__list li {
    color: rgba(226, 232, 240, 0.9);
}

.fgrowth__list li::before {
    content: "✓";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--fgrowth-glow);
    color: var(--fgrowth-accent);
    font-size: 11px;
    font-weight: 800;
}

.fgrowth__section--dark .fgrowth__list li::before {
    background: rgba(255, 255, 255, 0.14);
    color: #fde68a;
}

/* Brainbox mock */
.fgrowth-brainbox-mock {
    border: 1px solid var(--fgrowth-line);
    border-radius: 18px;
    background: var(--fgrowth-card);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.fgrowth-brainbox-mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    color: #fff;
}

.fgrowth-brainbox-mock__head strong {
    font-size: 15px;
}

.fgrowth-brainbox-mock__head span {
    display: block;
    font-size: 11px;
    color: rgba(226, 232, 240, 0.75);
    font-weight: 500;
}

.fgrowth-brainbox-mock__body {
    padding: 14px 16px 16px;
    display: grid;
    gap: 10px;
}

.fgrowth-brainbox-mock__msg {
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
}

.fgrowth-brainbox-mock__msg--user {
    justify-self: end;
    background: linear-gradient(135deg, #1e3a5f, #4f46e5);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.fgrowth-brainbox-mock__msg--bot {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid var(--fgrowth-line);
    border-bottom-left-radius: 4px;
}

.fgrowth-brainbox-mock__composer {
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 12px;
    font-size: 12px;
    color: #94a3b8;
    background: #f8fafc;
}

/* Business OS metrics */
.fgrowth-bsi-card {
    border: 1px solid var(--fgrowth-line);
    border-radius: 16px;
    background: var(--fgrowth-card);
    padding: 18px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.fgrowth-bsi-card__ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--fgrowth-accent) 72%, #e2e8f0 0);
    position: relative;
    margin-bottom: 16px;
}

.fgrowth-bsi-card__ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #fff;
}

.fgrowth-bsi-card__ring strong {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: var(--fgrowth-ink);
}

.fgrowth-bsi-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fgrowth-bsi-metrics article {
    padding: 10px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 10px;
    background: var(--fgrowth-soft);
}

.fgrowth-bsi-metrics span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fgrowth-muted);
}

.fgrowth-bsi-metrics strong {
    display: block;
    margin-top: 4px;
    font-size: 1.1rem;
    color: var(--fgrowth-ink);
}

.fgrowth-bsi-metrics em {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-style: normal;
    color: var(--fgrowth-muted);
}

/* Launch steps */
.fgrowth-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.fgrowth-steps article {
    padding: 18px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 14px;
    background: var(--fgrowth-card);
}

.fgrowth-steps__num {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--fgrowth-accent);
}

.fgrowth-steps h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--fgrowth-ink);
}

.fgrowth-steps p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fgrowth-muted);
}

/* Upgrade ladder */
.fgrowth-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.fgrowth-ladder__step {
    flex: 1 1 120px;
    min-width: 100px;
    padding: 12px 10px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 12px;
    background: var(--fgrowth-card);
    text-align: center;
}

.fgrowth-ladder__step.is-start {
    border-color: var(--fgrowth-accent);
    box-shadow: 0 0 0 2px var(--fgrowth-glow);
}

.fgrowth-ladder__step.is-fe {
    border-color: var(--fgrowth-accent);
    box-shadow: 0 0 0 2px var(--fgrowth-glow);
}

.fgrowth-ladder__short {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fgrowth-accent);
}

.fgrowth-ladder__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fgrowth-ink);
}

.fgrowth-ladder__step:not(:has(.fgrowth-ladder__short)) .fgrowth-ladder__title {
    margin-top: 0;
}

.fgrowth-ladder__bundle {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 14px;
    background: var(--fgrowth-card);
}

.fgrowth-ladder__bundle strong {
    display: block;
    margin-bottom: 6px;
    color: var(--fgrowth-ink);
}

.fgrowth-ladder__bundle p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fgrowth-muted);
}

.fgrowth-ladder__bonus {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px dashed #c7d2fe;
    border-radius: 14px;
    background: #eef2ff;
}

.fgrowth-ladder__bonus strong {
    display: block;
    margin-bottom: 6px;
    color: #312e81;
}

.fgrowth-ladder__bonus p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #4338ca;
}

/* Matrix */
.fgrowth-matrix {
    margin-top: 24px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--fgrowth-card);
}

.fgrowth-matrix__head,
.fgrowth-matrix__row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
}

.fgrowth-matrix__row {
    color: var(--fgrowth-ink);
}

.fgrowth-matrix__row span:first-child {
    color: var(--fgrowth-ink);
    font-weight: 600;
}

.fgrowth-matrix__head {
    background: var(--fgrowth-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fgrowth-muted);
}

.fgrowth-matrix__row + .fgrowth-matrix__row {
    border-top: 1px solid var(--fgrowth-line);
}

.fgrowth-matrix__yes {
    color: #047857;
    font-weight: 800;
}

.fgrowth-matrix__no {
    color: #94a3b8;
}

.fgrowth-matrix__upgrade {
    color: var(--fgrowth-muted);
    font-size: 12px;
}

/* Buyer portal cards */
.fgrowth-cards-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.fgrowth-cards-4 article {
    padding: 16px;
    border: 1px solid var(--fgrowth-line);
    border-radius: 14px;
    background: var(--fgrowth-card);
}

.fgrowth-cards-4 span {
    font-size: 1.4rem;
}

.fgrowth-cards-4 h3 {
    margin: 10px 0 6px;
    font-size: 14px;
    color: var(--fgrowth-ink);
}

.fgrowth-cards-4 p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fgrowth-muted);
}

/* Curiosity stats */
.fgrowth-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.fgrowth-stats article {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.fgrowth-stats strong {
    display: block;
    font-size: 1.5rem;
    color: #fde68a;
}

.fgrowth-stats span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.85);
}

.fgrowth__closing {
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.92);
    max-width: 720px;
}

/* Post purchase */
.fgrowth-post {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.fgrowth-post span {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--fgrowth-soft);
    border: 1px solid var(--fgrowth-line);
    font-size: 12px;
    font-weight: 700;
    color: var(--fgrowth-ink);
}

.fgrowth-post span::after {
    content: " →";
    color: var(--fgrowth-accent);
}

.fgrowth-post span:last-child::after {
    content: "";
}

@media (max-width: 900px) {
    .fgrowth__grid-2,
    .fgrowth-steps,
    .fgrowth-cards-4,
    .fgrowth-stats,
    .fgrowth-bsi-metrics {
        grid-template-columns: 1fr;
    }

    .fgrowth-matrix__head {
        display: none;
    }

    .fgrowth-matrix__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .fgrowth__section {
        padding: 40px 0;
    }
}

/* ── Theme isolation: beat al-funnel-public / wp-home global text colors ── */
body.al-funnel-public .fgrowth,
body.wp-home .fgrowth {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--dark,
body.wp-home .fgrowth .fgrowth__section--dark {
    color: #f8fafc !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--soft,
body.wp-home .fgrowth .fgrowth__section--soft {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--soft .fgrowth__title,
body.al-funnel-public .fgrowth .fgrowth__section--soft h2,
body.al-funnel-public .fgrowth .fgrowth__section--soft h3,
body.wp-home .fgrowth .fgrowth__section--soft .fgrowth__title,
body.wp-home .fgrowth .fgrowth__section--soft h2,
body.wp-home .fgrowth .fgrowth__section--soft h3 {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--soft .fgrowth__lead,
body.al-funnel-public .fgrowth .fgrowth__section--soft .fgrowth__list li,
body.wp-home .fgrowth .fgrowth__section--soft .fgrowth__lead,
body.wp-home .fgrowth .fgrowth__section--soft .fgrowth__list li {
    color: var(--fgrowth-muted) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--soft .fgrowth__eyebrow,
body.wp-home .fgrowth .fgrowth__section--soft .fgrowth__eyebrow {
    color: var(--fgrowth-accent) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--dark .fgrowth__title,
body.al-funnel-public .fgrowth .fgrowth__section--dark h2,
body.al-funnel-public .fgrowth .fgrowth__section--dark h3,
body.wp-home .fgrowth .fgrowth__section--dark .fgrowth__title,
body.wp-home .fgrowth .fgrowth__section--dark h2,
body.wp-home .fgrowth .fgrowth__section--dark h3 {
    color: #ffffff !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--dark .fgrowth__lead,
body.al-funnel-public .fgrowth .fgrowth__section--dark .fgrowth__list li,
body.wp-home .fgrowth .fgrowth__section--dark .fgrowth__lead,
body.wp-home .fgrowth .fgrowth__section--dark .fgrowth__list li {
    color: rgba(226, 232, 240, 0.92) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--dark .fgrowth__eyebrow,
body.wp-home .fgrowth .fgrowth__section--dark .fgrowth__eyebrow {
    color: #fde68a !important;
}

body.al-funnel-public .fgrowth .fgrowth--usd .fgrowth__section--dark .fgrowth__eyebrow,
body.wp-home .fgrowth .fgrowth--usd .fgrowth__section--dark .fgrowth__eyebrow {
    color: #facc15 !important;
}

body.al-funnel-public .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__title,
body.al-funnel-public .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) h2,
body.wp-home .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__title,
body.wp-home .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) h2 {
    color: #f8fafc !important;
}

body.al-funnel-public .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__lead,
body.al-funnel-public .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__eyebrow,
body.wp-home .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__lead,
body.wp-home .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__eyebrow {
    color: var(--fgrowth-accent) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__lead,
body.wp-home .fgrowth .fgrowth__section:not(.fgrowth__section--dark):not(.fgrowth__section--soft) .fgrowth__lead {
    color: #94a3b8 !important;
}

/* Brainbox mock — always a light card on dark hero */
body.al-funnel-public .fgrowth .fgrowth-brainbox-mock,
body.wp-home .fgrowth .fgrowth-brainbox-mock {
    color: var(--fgrowth-ink) !important;
    background: #ffffff !important;
}

body.al-funnel-public .fgrowth .fgrowth-brainbox-mock__head,
body.wp-home .fgrowth .fgrowth-brainbox-mock__head {
    color: #ffffff !important;
}

body.al-funnel-public .fgrowth .fgrowth-brainbox-mock__head span,
body.wp-home .fgrowth .fgrowth-brainbox-mock__head span {
    color: rgba(226, 232, 240, 0.82) !important;
}

body.al-funnel-public .fgrowth .fgrowth-brainbox-mock__msg--user,
body.wp-home .fgrowth .fgrowth-brainbox-mock__msg--user {
    color: #ffffff !important;
}

body.al-funnel-public .fgrowth .fgrowth-brainbox-mock__msg--bot,
body.wp-home .fgrowth .fgrowth-brainbox-mock__msg--bot {
    color: #334155 !important;
    background: #f1f5f9 !important;
}

body.al-funnel-public .fgrowth .fgrowth-brainbox-mock__composer,
body.wp-home .fgrowth .fgrowth-brainbox-mock__composer {
    color: #64748b !important;
    background: #f8fafc !important;
}

/* White cards — always dark text regardless of page theme */
body.al-funnel-public .fgrowth .fgrowth-bsi-card,
body.al-funnel-public .fgrowth .fgrowth-steps article,
body.al-funnel-public .fgrowth .fgrowth-ladder__step,
body.al-funnel-public .fgrowth .fgrowth-ladder__bundle,
body.al-funnel-public .fgrowth .fgrowth-matrix,
body.al-funnel-public .fgrowth .fgrowth-cards-4 article,
body.wp-home .fgrowth .fgrowth-bsi-card,
body.wp-home .fgrowth .fgrowth-steps article,
body.wp-home .fgrowth .fgrowth-ladder__step,
body.wp-home .fgrowth .fgrowth-ladder__bundle,
body.wp-home .fgrowth .fgrowth-matrix,
body.wp-home .fgrowth .fgrowth-cards-4 article {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth-bsi-card strong,
body.al-funnel-public .fgrowth .fgrowth-steps h3,
body.al-funnel-public .fgrowth .fgrowth-ladder__title,
body.al-funnel-public .fgrowth .fgrowth-cards-4 h3,
body.al-funnel-public .fgrowth .fgrowth-matrix__row span:first-child,
body.wp-home .fgrowth .fgrowth-bsi-card strong,
body.wp-home .fgrowth .fgrowth-steps h3,
body.wp-home .fgrowth .fgrowth-ladder__title,
body.wp-home .fgrowth .fgrowth-cards-4 h3,
body.wp-home .fgrowth .fgrowth-matrix__row span:first-child {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth-bsi-metrics span,
body.al-funnel-public .fgrowth .fgrowth-bsi-metrics em,
body.al-funnel-public .fgrowth .fgrowth-steps p,
body.al-funnel-public .fgrowth .fgrowth-cards-4 p,
body.al-funnel-public .fgrowth .fgrowth-matrix__upgrade,
body.wp-home .fgrowth .fgrowth-bsi-metrics span,
body.wp-home .fgrowth .fgrowth-bsi-metrics em,
body.wp-home .fgrowth .fgrowth-steps p,
body.wp-home .fgrowth .fgrowth-cards-4 p,
body.wp-home .fgrowth .fgrowth-matrix__upgrade {
    color: var(--fgrowth-muted) !important;
}

body.al-funnel-public .fgrowth .fgrowth-ladder__bundle strong,
body.wp-home .fgrowth .fgrowth-ladder__bundle strong {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth-ladder__bundle p,
body.wp-home .fgrowth .fgrowth-ladder__bundle p {
    color: var(--fgrowth-muted) !important;
}

body.al-funnel-public .fgrowth .fgrowth-ladder__bonus,
body.wp-home .fgrowth .fgrowth-ladder__bonus {
    color: #312e81 !important;
}

body.al-funnel-public .fgrowth .fgrowth-ladder__bonus strong,
body.wp-home .fgrowth .fgrowth-ladder__bonus strong {
    color: #312e81 !important;
}

body.al-funnel-public .fgrowth .fgrowth-ladder__bonus p,
body.wp-home .fgrowth .fgrowth-ladder__bonus p {
    color: #4338ca !important;
}

body.al-funnel-public .fgrowth .fgrowth-post span,
body.wp-home .fgrowth .fgrowth-post span {
    color: var(--fgrowth-ink) !important;
}

body.al-funnel-public .fgrowth .fgrowth__section--dark .fgrowth__closing,
body.wp-home .fgrowth .fgrowth__section--dark .fgrowth__closing {
    color: rgba(226, 232, 240, 0.92) !important;
}

body.al-funnel-public .fgrowth .fgrowth-stats span,
body.wp-home .fgrowth .fgrowth-stats span {
    color: rgba(226, 232, 240, 0.88) !important;
}

body.al-funnel-public .fgrowth .fgrowth-stats strong,
body.wp-home .fgrowth .fgrowth-stats strong {
    color: #fde68a !important;
}