/* =====================================================================
   Partner Programme
   One page, one action: Become a partner. Everything above the first
   button exists to get somebody to press it, and everything below is
   for the ones who need the money explained first.

   Built on the same dark palette as the Sacco Pro page, so the two
   read as the same company. The tokens are redeclared rather than
   shared because the pages are loaded independently and a stylesheet
   that depends on another being present is a page that breaks when
   somebody reorders an include.
   ===================================================================== */

.pp-page {
    --pp-ink:     #0b1220;
    --pp-ink-2:   #111c2f;
    --pp-ink-3:   #16233a;
    --pp-line:    rgba(255, 255, 255, .09);
    --pp-line-2:  rgba(255, 255, 255, .16);
    --pp-text:    #e6edf7;
    --pp-muted:   #93a4bd;
    --pp-green:   #16a34a;
    --pp-green-2: #22c55e;

    background: var(--pp-ink);
    color: var(--pp-text);
}

.pp-page .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* The site's global stylesheet colours every heading near-black, which
   on a dark page is a heading nobody can read. Said once here rather
   than on each rule, so the next heading added to this page does not
   quietly go dark. */
.pp-page h1,
.pp-page h2,
.pp-page h3,
.pp-page h4 { color: var(--pp-text); }

.pp-page p { color: var(--pp-muted); }

/* ── Shared bits ──────────────────────────────────────────────────── */
.pp-tag,
.pp-label {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-green-2);
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .26);
    border-radius: 999px;
    padding: 6px 14px;
}

.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.pp-btn--primary { background: var(--pp-green); color: #fff; }
.pp-btn--primary:hover { background: var(--pp-green-2); transform: translateY(-1px); color: #fff; }

.pp-btn--ghost {
    background: transparent;
    color: var(--pp-text);
    border-color: var(--pp-line-2);
}
.pp-btn--ghost:hover { border-color: var(--pp-green-2); color: var(--pp-green-2); }

.pp-btn--light { background: #fff; color: #0b1220; }
.pp-btn--light:hover { background: #eef5ff; transform: translateY(-1px); color: #0b1220; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.pp-hero {
    position: relative;
    padding: 104px 0 84px;
    overflow: hidden;
    border-bottom: 1px solid var(--pp-line);
}

/* One soft pool of light behind the heading. The rest of the page is
   flat — this is the only place it earns its keep. */
.pp-hero__glow {
    position: absolute;
    top: -230px; left: 50%;
    width: 900px; height: 640px;
    margin-left: -620px;
    background: radial-gradient(circle, rgba(34, 197, 94, .17), transparent 68%);
    pointer-events: none;
}

.pp-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
}

.pp-hero h1 {
    margin: 20px 0 18px;
    font-size: clamp(2.1rem, 4.4vw, 3.35rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 800;
}

.pp-hero h1 span { color: var(--pp-green-2); }

.pp-hero__text > p {
    font-size: 1.07rem;
    line-height: 1.7;
    max-width: 44ch;
    margin: 0 0 30px;
}

.pp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pp-hero__reassure {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--pp-muted);
}

.pp-hero__reassure li { display: flex; align-items: center; gap: 8px; }

.pp-hero__reassure li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pp-green-2);
}

/* The three numbers somebody is weighing up, given room rather than
   squeezed into the paragraph above them. */
.pp-hero__figures { display: grid; gap: 14px; }

.pp-fig {
    background: var(--pp-ink-2);
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    padding: 22px 24px;
}

.pp-fig strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--pp-green-2);
    line-height: 1.1;
}

.pp-fig span {
    display: block;
    margin-top: 6px;
    font-size: .86rem;
    color: var(--pp-muted);
}

/* ── Where our partners are ───────────────────────────────────────── */
.pp-markets {
    border-bottom: 1px solid var(--pp-line);
    padding: 26px 0;
    background: var(--pp-ink-2);
}

.pp-markets .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

.pp-markets__label {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-muted);
}

.pp-markets__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-markets__list li {
    font-size: .88rem;
    font-weight: 600;
    color: var(--pp-text);
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    padding: 5px 14px;
}

/* ── Sections ─────────────────────────────────────────────────────── */
.pp-section { padding: 84px 0; border-bottom: 1px solid var(--pp-line); }
.pp-section--alt { background: var(--pp-ink-2); }

.pp-head { max-width: 62ch; margin: 0 0 46px; }

.pp-head h2 {
    margin: 18px 0 14px;
    font-size: clamp(1.6rem, 2.9vw, 2.15rem);
    line-height: 1.22;
    letter-spacing: -.015em;
    font-weight: 800;
}

.pp-head p { margin: 0; font-size: 1.02rem; line-height: 1.72; }

/* ── The arrangement ──────────────────────────────────────────────── */
.pp-deal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

.pp-deal__item {
    background: var(--pp-ink-2);
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    padding: 30px 28px;
}

.pp-section--alt .pp-deal__item { background: var(--pp-ink-3); }

.pp-deal__icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .26);
    color: var(--pp-green-2);
    margin-bottom: 18px;
}

.pp-deal__icon svg { width: 22px; height: 22px; }

.pp-deal__item h3 {
    margin: 0 0 10px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
}

.pp-deal__item p { margin: 0; font-size: .94rem; line-height: 1.72; }

/* ── Ways to partner ──────────────────────────────────────────────── */
.pp-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.pp-kind {
    background: var(--pp-ink-3);
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.pp-kind h3 {
    margin: 0 0 10px;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--pp-green-2);
}

.pp-kind p { margin: 0 0 16px; font-size: .93rem; line-height: 1.68; }

.pp-kind__for {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--pp-line);
    font-size: .8rem;
    color: var(--pp-muted);
}

/* ── Tiers ────────────────────────────────────────────────────────── */
.pp-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.pp-tier {
    position: relative;
    background: var(--pp-ink-2);
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
}

/* The top tier is marked, not enlarged. Growing one card in a row of
   four leaves the other three looking broken at the tablet width where
   they wrap two-and-two. */
.pp-tier--top { border-color: rgba(34, 197, 94, .45); }

.pp-tier__flag {
    position: absolute;
    top: -11px; left: 26px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #06240f;
    background: var(--pp-green-2);
    border-radius: 999px;
    padding: 4px 11px;
}

.pp-tier h3 {
    margin: 0 0 14px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.pp-tier__rate { display: flex; align-items: baseline; gap: 8px; }

.pp-tier__rate strong {
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pp-green-2);
    line-height: 1;
}

.pp-tier__rate span { font-size: .84rem; color: var(--pp-muted); }

.pp-tier__from {
    margin: 12px 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pp-line);
    font-size: .84rem;
    line-height: 1.55;
}

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

.pp-tier__list li {
    position: relative;
    padding-left: 22px;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--pp-muted);
}

.pp-tier__list li::before {
    content: "";
    position: absolute;
    left: 2px; top: .52em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--pp-green-2);
    border-bottom: 2px solid var(--pp-green-2);
    transform: rotate(-45deg);
}

.pp-tiers__note {
    margin: 26px 0 0;
    font-size: .86rem;
    max-width: 70ch;
}

/* ── What there is to sell ────────────────────────────────────────── */
.pp-sell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.pp-sell__item {
    background: var(--pp-ink-3);
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    padding: 30px 28px;
}

.pp-sell__item h3 { margin: 0 0 10px; font-size: 1.08rem; font-weight: 700; }
.pp-sell__item p  { margin: 0 0 16px; font-size: .94rem; line-height: 1.72; }

.pp-sell__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--pp-green-2);
    text-decoration: none;
}

.pp-sell__link:hover { gap: 11px; color: var(--pp-green-2); }

/* ── Steps ────────────────────────────────────────────────────────── */
.pp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pp-step {
    border-top: 2px solid var(--pp-line-2);
    padding-top: 20px;
}

.pp-step__n {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--pp-green-2);
    margin-bottom: 10px;
}

.pp-step h3 { margin: 0 0 8px; font-size: 1.04rem; font-weight: 700; }
.pp-step p  { margin: 0; font-size: .92rem; line-height: 1.68; }

/* ── Outside Kenya ────────────────────────────────────────────────── */
.pp-intl__text { max-width: 62ch; margin-bottom: 40px; }

.pp-intl__text h2 {
    margin: 18px 0 14px;
    font-size: clamp(1.6rem, 2.9vw, 2.15rem);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.015em;
}

.pp-intl__text p { margin: 0; font-size: 1.02rem; line-height: 1.72; }

.pp-intl__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.pp-intl__card {
    background: var(--pp-ink-3);
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    padding: 26px 24px;
}

.pp-intl__card h3 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; }
.pp-intl__card p  { margin: 0; font-size: .92rem; line-height: 1.7; }

/* ── Questions ────────────────────────────────────────────────────── */
.pp-faq { display: grid; gap: 12px; max-width: 860px; }

.pp-faq__item {
    background: var(--pp-ink-2);
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    overflow: hidden;
}

.pp-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-size: .98rem;
    font-weight: 700;
    color: var(--pp-text);
    list-style: none;
}

.pp-faq__item summary::-webkit-details-marker { display: none; }

.pp-faq__item summary svg {
    flex: 0 0 auto;
    color: var(--pp-muted);
    transition: transform .18s ease;
}

.pp-faq__item[open] summary svg { transform: rotate(180deg); }
.pp-faq__item[open] summary { color: var(--pp-green-2); }

.pp-faq__item p {
    margin: 0;
    padding: 0 22px 20px;
    font-size: .94rem;
    line-height: 1.75;
}

.pp-terms {
    margin: 28px 0 0;
    max-width: 860px;
    padding: 16px 20px;
    border-left: 3px solid var(--pp-green-2);
    background: var(--pp-ink-2);
    border-radius: 0 10px 10px 0;
    font-size: .92rem;
    line-height: 1.7;
}

.pp-terms strong { color: var(--pp-text); }

/* ── Last word ────────────────────────────────────────────────────── */
.pp-final {
    padding: 86px 0;
    text-align: center;
    background: var(--pp-green);
}

.pp-final h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.pp-final p {
    margin: 0 auto 28px;
    max-width: 56ch;
    color: rgba(255, 255, 255, .92);
    font-size: 1.02rem;
    line-height: 1.7;
}

.pp-final__note {
    margin: 20px auto 0;
    font-size: .86rem;
    color: rgba(255, 255, 255, .82);
}

.pp-final__note a { color: #fff; text-decoration: underline; }

/* ── Narrower ─────────────────────────────────────────────────────── */
/* 1180 rather than 1024: the site's navbar hands over to its drawer at
   1180, and a page that reflows at a different width from the header
   above it looks like two pages. */
@media (max-width: 1180px) {
    .pp-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .pp-hero { padding: 76px 0 64px; }
    .pp-hero__text > p { max-width: none; }

    /* Side by side rather than stacked: three short figures in a column
       push the whole page down for no gain. */
    .pp-hero__figures { grid-template-columns: repeat(3, 1fr); }
    .pp-fig { padding: 18px 18px; }
    .pp-fig strong { font-size: 1.4rem; }
}

@media (max-width: 760px) {
    .pp-section { padding: 62px 0; }
    .pp-hero__figures { grid-template-columns: 1fr; }
    .pp-fig strong { font-size: 1.65rem; }
    .pp-hero__actions .pp-btn { flex: 1 1 100%; justify-content: center; }
    .pp-final { padding: 64px 0; }
    .pp-faq__item summary { padding: 16px 18px; font-size: .94rem; }
    .pp-faq__item p { padding: 0 18px 18px; }
}