/* Floating product cards (home "How it works" and "Who can use").
   These replace flat PNGs whose English text could not be translated. Each
   card is authored in the pixel units of the artwork it replaces: --ow is the
   original artwork width, --w the width it is shown at, and --u one original
   pixel. Every size below is N * var(--u), so a card scales as one piece and
   keeps its proportions, while the words stay real text in every language. */

.float-card {
    --scale: 1;
    --u: calc(var(--w) * var(--scale) / var(--ow));
    width: calc(var(--w) * var(--scale));
    background: #FFFFFF;
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    color: #1B1B1B;
    font-family: var(--font-family, 'DM Sans', sans-serif);
    line-height: 1.4;
    text-align: left;
    overflow: hidden;
}

.float-card p {
    margin: 0;
    color: inherit;
}

/* Segment cards: icon, name, pitch, three outcomes ------------------------- */
.segment-card {
    --ow: 696;
    padding: calc(56 * var(--u)) calc(56 * var(--u)) calc(64 * var(--u));
    border: 1px solid #EDEDED;
}

.segment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(150 * var(--u));
    height: calc(150 * var(--u));
    border-radius: 50%;
    background: #EEF1EE;
    color: #1D4D30;
}

.segment-icon svg {
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
    stroke-width: 1.75;
}

.segment-title {
    margin-top: calc(56 * var(--u));
    font-size: calc(50 * var(--u));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #1D5B36;
}

.float-card .segment-desc {
    margin-top: calc(40 * var(--u));
    font-size: calc(34 * var(--u));
    line-height: 1.72;
    color: #222222;
}

.segment-list {
    display: grid;
    gap: calc(34 * var(--u));
    margin: calc(52 * var(--u)) 0 0;
    padding: 0;
    list-style: none;
}

.segment-list li {
    display: grid;
    grid-template-columns: calc(36 * var(--u)) minmax(0, 1fr);
    align-items: center;
    gap: calc(38 * var(--u));
    font-size: calc(34 * var(--u));
    line-height: 1.3;
    color: #1B1B1B;
}

.segment-list li::before {
    content: "";
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
    border-radius: 50%;
    background: #1F5A36 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* Loan repayment chart ------------------------------------------------------ */
.repay-card {
    --ow: 1306;
    padding: calc(40 * var(--u)) calc(46 * var(--u)) calc(34 * var(--u));
    border: 1px solid #E6E6E6;
}

.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(24 * var(--u));
}

.chart-title {
    font-size: calc(32 * var(--u));
    font-weight: 700;
    color: #0B2618;
    white-space: nowrap;
}

.chart-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--u));
    padding: calc(16 * var(--u)) calc(24 * var(--u));
    font-size: calc(23 * var(--u));
    color: #333333;
    white-space: nowrap;
    background: #FAFAFA;
    border: 1px solid #E3E3E3;
    border-radius: calc(14 * var(--u));
}

.chart-pill svg {
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
}

.chart-svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: calc(10 * var(--u));
    font-family: inherit;
}

/* Client credit risk gauge -------------------------------------------------- */
.risk-card {
    --ow: 648;
    padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
    border: 1px solid #E6E6E6;
}

.risk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(44 * var(--u));
}

.risk-head .chart-title {
    white-space: normal;
}

.risk-head svg {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    color: #555555;
}

.risk-gauge {
    display: block;
    width: 100%;
    height: auto;
    margin-top: calc(12 * var(--u));
}

.risk-level {
    display: flex;
    align-items: center;
    gap: calc(34 * var(--u));
    margin: calc(20 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u));
    padding: calc(24 * var(--u)) calc(40 * var(--u));
    background: #EEF7F1;
    border: 1px solid #DCEBE1;
    border-radius: calc(14 * var(--u));
}

.risk-level svg {
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
    flex-shrink: 0;
    color: #1A8F57;
}

.risk-level-label {
    display: block;
    font-size: calc(22 * var(--u));
    color: #666666;
}

.risk-level-value {
    display: block;
    font-size: calc(40 * var(--u));
    font-weight: 700;
    line-height: 1.1;
    color: #1A8F57;
}

.risk-rows {
    margin: 0 calc(44 * var(--u));
}

.risk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(20 * var(--u));
    padding: calc(34 * var(--u)) 0;
    font-size: calc(24 * var(--u));
    color: #333333;
    border-bottom: 1px solid #E3E3E3;
}

.risk-row:last-child {
    border-bottom: 0;
}

.risk-row strong {
    font-size: calc(28 * var(--u));
    color: #1A8F57;
    white-space: nowrap;
}

/* KPI stack ------------------------------------------------------------------ */
.kpi-stack {
    --ow: 750;
    display: grid;
    gap: calc(36 * var(--u));
    padding: calc(4 * var(--u));
}

.kpi-card {
    display: grid;
    grid-template-columns: calc(92 * var(--u)) minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(24 * var(--u));
    min-height: calc(200 * var(--u));
    padding: calc(28 * var(--u)) calc(34 * var(--u));
    border: 1px solid #E6E6E6;
    border-radius: calc(30 * var(--u));
}

.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(92 * var(--u));
    height: calc(92 * var(--u));
    border-radius: calc(22 * var(--u));
    background: #DDF0E4;
    color: #1A8F57;
}

.kpi-icon svg {
    width: calc(42 * var(--u));
    height: calc(42 * var(--u));
}

.kpi-label {
    display: block;
    font-size: calc(25 * var(--u));
    color: #555555;
}

.kpi-value {
    display: block;
    margin-top: calc(6 * var(--u));
    font-size: calc(44 * var(--u));
    font-weight: 700;
    line-height: 1.1;
    color: #0B2618;
    white-space: nowrap;
}

.kpi-trend {
    max-width: calc(250 * var(--u));
    text-align: right;
}

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--u));
    font-size: calc(25 * var(--u));
    font-weight: 700;
    color: #1A8F57;
    white-space: nowrap;
}

.kpi-delta::before {
    content: "";
    width: calc(18 * var(--u));
    height: calc(14 * var(--u));
    background: currentColor;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.kpi-delta.is-down::before {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.kpi-vs {
    display: block;
    margin-top: calc(8 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: 1.25;
    color: #8A8A8A;
}

/* Narrower screens ------------------------------------------------------------ */
/* The cards hang off the photos' edges. Below 1280px they shrink a little; at
   tablet widths there is no room beside the photos at all, so they step aside
   the same way the pages already hide them on phones. */
@media (max-width: 1280px) {
    .float-card {
        --scale: 0.85;
    }
}

@media (max-width: 1024px) {
    .parallax-element {
        display: none;
    }
}