/* ==========================================================================
   Keeper / gateway-partner program page (/join).
   Loaded AFTER invest.css (which supplies the .puncak / .pk-* design system +
   tokens) via a plain <link>; NOT part of web.assets_frontend. Only the pieces
   unique to this page live here (.kp-*), all scoped under .puncak so they reuse
   the same --ink / --cta / --green / --line tokens and read as one site.
   ========================================================================== */

/* ---- Card icon badge (FontAwesome <i>, unlike invest's svg-only variant) -- */
.puncak .kp-card-ico {
    width: 48px; height: 48px; border-radius: 13px; display: inline-flex;
    align-items: center; justify-content: center; margin-bottom: .9rem;
    background: rgba(44, 95, 45, .1); color: var(--green); font-size: 20px;
}
.puncak .kp-tool .kp-card-ico { background: rgba(241, 165, 1, .14); color: #b9791a; }

/* ---- "How to register" numbered steps --------------------------------- */
.puncak .kp-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.puncak .kp-step {
    display: flex; gap: 1.1rem; align-items: flex-start; background: #fff;
    border: 1px solid var(--line); border-radius: 16px; padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow);
}
.puncak .kp-step-num {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Volkhov', serif; font-weight: 700; font-size: 1.15rem;
    background: var(--ink); color: #fff;
}
.puncak .kp-step h3 { font-size: 1.06rem; margin: .15rem 0 .35rem; }
.puncak .kp-step p { font-size: .92rem; color: var(--text); margin: 0; }
.puncak .kp-step b { color: var(--ink); }

/* ---- Earnings: example build-up + waterfall side by side --------------- */
.puncak .kp-earn-grid {
    display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.25rem; margin: 2rem 0 0;
    align-items: start;
}
@media (max-width: 860px) { .puncak .kp-earn-grid { grid-template-columns: 1fr; } }
.puncak .kp-block-title { font-size: 1.15rem; margin: 0 0 1rem; }

.puncak .kp-lines { width: 100%; border-collapse: collapse; font-size: .95rem; }
.puncak .kp-lines td { padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
.puncak .kp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.puncak .kp-lines-total td { border-bottom: none; border-top: 2px solid var(--ink); padding-top: .8rem; font-weight: 700; color: var(--ink); }
.puncak .kp-note { font-size: .82rem; color: var(--text-2); margin: 1rem 0 0; line-height: 1.6; }

/* ---- The waterfall ---------------------------------------------------- */
.puncak .kp-wf { display: grid; gap: .95rem; }
.puncak .kp-wf-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .35rem; color: var(--ink); }
.puncak .kp-wf-head .kp-num { font-weight: 700; }
.puncak .kp-wf-row.is-deduct .kp-wf-head { color: var(--text); }
.puncak .kp-wf-row.is-deduct .kp-wf-head .kp-num { color: var(--accent); }
.puncak .kp-wf-track { height: 30px; border-radius: 8px; background: var(--off-2); overflow: hidden; }
.puncak .kp-wf-fill {
    height: 100%; border-radius: 8px; display: flex; align-items: center;
    justify-content: flex-end; padding: 0 .6rem; min-width: 2.75rem;
    color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap;
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.puncak .kp-wf-fill.is-gross  { background: linear-gradient(90deg, #3a4a86, var(--ink)); }
.puncak .kp-wf-fill.is-app    { background: linear-gradient(90deg, var(--cta-soft), var(--cta)); }
.puncak .kp-wf-fill.is-tax    { background: var(--accent); }
.puncak .kp-wf-fill.is-fee    { background: var(--text-2); }
.puncak .kp-wf-fill.is-keeper { background: linear-gradient(90deg, var(--green-soft), var(--green)); }
.puncak .kp-wf-row.is-result .kp-wf-head { font-weight: 700; }
.puncak .kp-wf-row.is-result .kp-wf-head span:first-child { color: var(--green); }
.puncak .kp-wf-row.is-result .kp-wf-head .kp-num { color: var(--green); }

/* ---- Three takers ----------------------------------------------------- */
.puncak .kp-takers { margin-top: 1.6rem; }
.puncak .kp-taker { border-top: 4px solid var(--line); }
.puncak .kp-taker.is-gateway { border-top-color: var(--ink); }
.puncak .kp-taker.is-app { border-top-color: var(--cta); }
.puncak .kp-taker.is-keeper { border-top-color: var(--green); }
.puncak .kp-taker-role { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--text); }
.puncak .kp-taker-role .fa { opacity: .8; }
.puncak .kp-taker-amt { font-family: 'Volkhov', serif; font-weight: 700; font-size: 1.9rem; color: var(--ink); margin: .5rem 0 .35rem; line-height: 1; }
.puncak .kp-taker.is-app .kp-taker-amt { color: var(--cta); }
.puncak .kp-taker.is-keeper .kp-taker-amt { color: var(--green); }
.puncak .kp-taker-sub { font-size: .85rem; color: var(--text-2); line-height: 1.55; }

/* ---- Monthly projection band ------------------------------------------ */
.puncak .kp-month { margin-top: 2rem; background: var(--ink); border-radius: 20px; padding: 2rem clamp(1.4rem, 3vw, 2.4rem); color: #fff; box-shadow: var(--shadow); }
.puncak .kp-month .pk-eyebrow { color: var(--cta-soft); }
.puncak .kp-month-head h3 { color: #fff; }
.puncak .kp-month-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.25rem; margin-top: 1.4rem; }
@media (max-width: 640px) { .puncak .kp-month-grid { grid-template-columns: 1fr; } }
.puncak .kp-month-cell { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 1.15rem 1.3rem; }
.puncak .kp-month-cell.is-hero { background: rgba(241, 165, 1, .16); border-color: rgba(241, 165, 1, .4); }
.puncak .kp-month-label { font-size: .82rem; color: rgba(255, 255, 255, .7); }
.puncak .kp-month-amt { font-family: 'Volkhov', serif; font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.1; margin-top: .3rem; }
.puncak .kp-month-cell.is-hero .kp-month-amt { color: var(--cta-soft); }

/* ---- FAQ -------------------------------------------------------------- */
.puncak .kp-faq { margin-top: 2rem; display: grid; gap: .75rem; }
.puncak .kp-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .3rem 1.3rem; box-shadow: var(--shadow); }
.puncak .kp-faq-item summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--ink); list-style: none; position: relative; padding-right: 2rem; }
.puncak .kp-faq-item summary::-webkit-details-marker { display: none; }
.puncak .kp-faq-item summary::after { content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--cta); font-weight: 400; }
.puncak .kp-faq-item[open] summary::after { content: '−'; }
.puncak .kp-faq-item p { font-size: .92rem; color: var(--text); margin: 0 0 1rem; line-height: 1.65; }