/* =========================================================
   Fonde Investimi — matches mockup fonde-investimi-v1.html
   Hero comes from the shared HeroSlider partial (styled by digitalWallet.css),
   so no hero rules live here.
   ========================================================= */

.hp-bg-canvas-funds {
    position: relative;
    background: #111111;
    color: #ffffff;
    font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Anchor the hero copy from the top (instead of centring it) so the eyebrow sits at the
   same distance from the header on every funds page, however tall the slides are. */
@media (min-width: 769px) {
    .hp-bg-canvas.hp-bg-canvas-funds > .if-hero.dw-hero .dw-hero__copy {
        top: 37.5%;
        transform: translateX(-50%);
    }
}

    /* ---------- Section (paper background) ---------- */

    .hp-bg-canvas-funds > .if-funds-services {
        max-width: none;
        margin: 0;
        background: #EDEEEF;
        color: #111111;
        font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
        padding-block: clamp(64px, 10vh, 130px) clamp(72px, 11vh, 140px);
        /* keeps content centred at 1560px like the mockup */
        padding-inline: max(clamp(20px, 4.5vw, 72px), calc((100% - 1560px) / 2));
    }

.if-funds-services [data-anim="rise"] {
    transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s cubic-bezier(.16, 1, .3, 1);
}

.if-reveal-ready [data-anim="rise"] {
    opacity: 0;
    transform: translateY(22px);
}

    .if-reveal-ready [data-anim="rise"].is-revealed {
        opacity: 1;
        transform: none;
    }

/* ---------- Head: eyebrow, title, description, intro ---------- */

.if-funds-services .dw-services__head {
    max-width: none;
    margin: 0 0 clamp(32px, 4.6vh, 56px);
    padding: 0;
    text-align: left;
}

.if-funds-services__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: rgba(17, 17, 17, .5);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1.4;
    text-transform: uppercase;
}

    .if-funds-services__eyebrow span {
        display: block;
        width: 26px;
        height: 1px;
        flex: none;
        background: var(--color-brand);
    }

.if-funds-services .dw-services__title {
    margin: clamp(16px, 2.2vh, 24px) 0 0;
    color: #111111;
    font-size: clamp(26px, 3.4vw, 50px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.04em;
    text-align: left;
}

.if-funds-services__description {
    max-width: 96ch;
    margin-top: clamp(22px, 3vh, 34px);
    color: rgba(17, 17, 17, .72);
    font-size: clamp(14.5px, 1.15vw, 16px);
    line-height: 1.74;
    text-wrap: pretty;
}

    .if-funds-services__description p {
        margin: 0 0 clamp(14px, 1.8vh, 20px);
        color: inherit;
    }

        .if-funds-services__description p:last-child {
            margin-bottom: 0;
        }
.if-offer-card:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}
.if-funds-services__description.if-funds-services__introduction {
    margin: clamp(28px, 3.6vh, 44px) 0px 0px;
    max-width: 96ch;
    padding-top: clamp(20px, 2.6vh, 28px);
    border-top: 1px solid rgba(17, 17, 17, 0.14);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.018em;
    color: rgb(87, 28, 42);
    text-wrap: pretty;
    opacity: 1;
    transform: none;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 180ms, opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.if-funds-services__note {
    max-width: 96ch;
    margin: clamp(30px, 4vh, 48px) 0 0;
    color: rgba(17, 17, 17, .6);
    font-size: 12.5px;
    line-height: 1.7;
    text-align: left;
    text-wrap: pretty;
}

    /* rich text: don't let the global paragraph colour / size leak in */
    .if-funds-services__note p {
        margin: 0;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }


/* ---------- Grid ---------- */

.hp-bg-canvas-funds .if-funds-services .dw-grid.if-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(16px, 1.6vw, 22px);
    margin: 0;
    max-width: none;
}

@media (max-width: 1319px) {
    .hp-bg-canvas-funds .if-funds-services .dw-grid.if-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 999px) {
    .hp-bg-canvas-funds .if-funds-services .dw-grid.if-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .hp-bg-canvas-funds .if-funds-services .dw-grid.if-cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Flip card: wrapper + inner ---------- */

.hp-bg-canvas-funds .if-fund-card-flipper {
    position: relative;
    grid-column: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 24px;
    background: transparent;
    cursor: pointer;
    perspective: 1600px;
    -webkit-perspective: 1600px;
    font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

    .hp-bg-canvas-funds .if-fund-card-flipper:focus-visible {
        outline: 2px solid var(--color-brand);
        outline-offset: 4px;
    }

    .hp-bg-canvas-funds .if-fund-card-flipper .if-card-flipper__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-height: 0;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transition: transform .8s cubic-bezier(.16, 1, .3, 1);
        cursor: pointer;
    }

.if-fund-card-flipper.is-flipped .if-card-flipper__inner {
    transform: rotateY(180deg);
}

/* ---------- Both faces ---------- */

.hp-bg-canvas-funds .if-fund-card-flipper .dw-card.if-card {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: clamp(22px, 2.2vw, 30px);
    border: 1px solid rgba(87, 28, 42, .3);
    border-radius: 24px;
    box-shadow: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color .4s ease, box-shadow .4s ease, background .4s ease;
}

.hp-bg-canvas-funds .if-fund-card-flipper .if-card--front {
    gap: clamp(16px, 2vh, 22px);
    color: var(--color-brand);
    background: #F7F5F6;
    transform: rotateY(0deg) translateZ(0);
    -webkit-transform: rotateY(0deg) translateZ(0);
}

.hp-bg-canvas-funds .if-fund-card-flipper .if-card--back {
    gap: clamp(12px, 1.6vh, 16px);
    color: #ffffff;
    background: var(--color-brand);
    transform: rotateY(180deg) translateZ(0);
    -webkit-transform: rotateY(180deg) translateZ(0);
}

.if-fund-card-flipper.is-flipped .if-card--front,
.if-fund-card-flipper:not(.is-flipped) .if-card--back {
    pointer-events: none;
}

/* ---------- Front face content ---------- */

.hp-bg-canvas-funds .if-fund-card-flipper .dw-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.hp-bg-canvas-funds .if-fund-card-flipper .dw-card__name {
    max-width: none;
    margin: 0;
    color: var(--color-brand);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.012em;
    text-transform: uppercase;
    text-wrap: balance;
}

.hp-bg-canvas-funds .if-fund-card-flipper .dw-card__logo {
    display: block;
    flex: none;
    width: auto;
    height: auto;
    max-width: 44px;
    max-height: 34px;
    object-fit: contain;
    object-position: center;
    opacity: .85;
}

.if-fund-card__list-wrap {
    color: rgba(87, 28, 42, .78);
}

.if-fund-card__list-title,
.if-fund-card__license-label {
    margin: 0 0 10px;
    color: rgba(87, 28, 42, .78);
    font-size: 13.5px;
    font-weight: 450;
    line-height: 1.4;
}

.if-fund-card__list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.if-fund-card__item,
.if-fund-card__license-date {
    margin: 0;
    color: var(--color-brand);
    font-size: 13.5px;
    line-height: 1.48;
    text-wrap: pretty;
}

/* description cards (e.g. Tituj Shtetërorë): sentence + "Më i përshtatshëm për:" label + text */
.if-fund-card__list-wrap--text .if-fund-card__list-title {
    margin: 0 0 16px;
    color: rgba(17, 17, 17, .62);
    font-size: clamp(14.5px,1.15vw,16px);
    font-weight: 400;
    line-height: 1.7;
    text-wrap: pretty;
}

.if-fund-card__list-wrap--text .if-fund-card__list {
    gap: 0;
}

.if-fund-card__list-wrap--text .if-fund-card__item {
    color: rgba(87, 28, 42, .78);
    font-size: 15px;
    line-height: 1.7;
}

    .if-fund-card__list-wrap--text .if-fund-card__item.if-fund-card__item--label {
        color: var(--color-brand);
        font-weight: 600;
    }

.if-fund-card__license-block {
    margin: 0;
}

.if-fund-card__license-label {
    margin: 0;
}

.if-fund-card__license-date {
    margin-top: 3px;
}

/* ---------- Footer (front + back) ---------- */

.hp-bg-canvas-funds .if-fund-card-flipper .dw-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: auto 0 0;
    padding: clamp(16px, 2.2vh, 24px) 0 0;
    border: 0;
}

.if-fund-card__cta,
.if-fund-card__back-cta {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid rgba(87, 28, 42, .45);
    border-radius: 999px;
    color: var(--color-brand);
    background: transparent;
    font-size: 13.5px;
    font-weight: 450;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}

.if-fund-card__arrow {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(87, 28, 42, .28);
    border-radius: 50%;
    color: var(--color-brand);
    background: transparent;
    font-size: 16px;
    line-height: 1;
    transition: background .3s ease, color .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

/* front hover (class is-hovered is toggled by investmentFunds.js) */
.if-fund-card-flipper:not(.is-flipped).is-hovered .if-card--front,
.if-fund-card-flipper:not(.is-flipped):hover .if-card--front,
.if-fund-card-flipper:not(.is-flipped):focus-within .if-card--front {
    border-color: rgba(87, 28, 42, .55);
    background: #ffffff;
    box-shadow: 0 34px 64px -46px rgba(17, 17, 17, .45);
}

    .if-fund-card-flipper:not(.is-flipped).is-hovered .if-card--front .if-fund-card__cta,
    .if-fund-card-flipper:not(.is-flipped):hover .if-card--front .if-fund-card__cta,
    .if-fund-card-flipper:not(.is-flipped):focus-within .if-card--front .if-fund-card__cta {
        color: #ffffff;
        background: var(--color-brand);
    }

    .if-fund-card-flipper:not(.is-flipped).is-hovered .if-card--front .if-fund-card__arrow,
    .if-fund-card-flipper:not(.is-flipped):hover .if-card--front .if-fund-card__arrow,
    .if-fund-card-flipper:not(.is-flipped):focus-within .if-card--front .if-fund-card__arrow {
        color: #ffffff;
        background: var(--color-brand);
        transform: translateX(4px);
    }

/* ---------- Back face content ---------- */

.if-fund-card__back-title {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.if-fund-card-flipper .if-card__flip-text {
    flex: 0 1 auto;
    overflow: visible;
    color: rgba(255, 255, 255, .88);
    font-size: 12.5px;
    line-height: 1.62;
    text-wrap: pretty;
}

    .if-fund-card-flipper .if-card__flip-text p {
        margin: 0 0 clamp(12px, 1.6vh, 16px);
        color: inherit;
        font-size: 12.5px;
    }

        .if-fund-card-flipper .if-card__flip-text p:last-child {
            margin-bottom: 0;
        }

.if-fund-card__back-cta {
    border-color: rgba(255, 255, 255, .55);
    color: #ffffff;
}

    .if-fund-card__back-cta:hover,
    .if-fund-card__back-cta:focus-visible {
        color: var(--color-brand);
        background: #ffffff;
    }

.if-fund-card__arrow--back {
    border-color: rgba(255, 255, 255, .4);
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
}

/* ---------- Exactly 2 fund cards → each takes half the width ---------- */

@media (min-width: 640px) {
    .hp-bg-canvas-funds .if-funds-services .dw-grid.if-cards-grid:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Back face as a table (rich-text output) ----------
   The editor saves the table flat: an empty <div> (the row) followed by its
   four <p> cells. We turn the flip text into a 4-column grid, and each empty
   <div> becomes a full-width row separator, so the layout is rebuilt in CSS. */

.if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 10px;
    row-gap: 0;
    align-content: start;
    width: 100%;
}

    /* duplicate title inside the table (the card already shows it at the top) */
    .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) > p:first-child {
        display: none;
    }

    /* empty row <div> → thin line above the next row of cells */
    .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) > div {
        display: block !important;
        grid-column: 1 / -1;
        height: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
    }

        /* first div sits above the header labels: no line */
        .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) > div:nth-of-type(1) {
            border-top: 0 !important;
        }

        /* line under the header labels is a bit stronger */
        .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) > div:nth-of-type(2) {
            border-top: 1px solid rgba(255, 255, 255, .28) !important;
        }

    .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) > p {
        min-width: 0;
        margin: 0 !important;
        padding: 10px 0;
        overflow-wrap: anywhere;
    }

    /* closing line under the last row */
    .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"])::after {
        content: "";
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

@media (max-width: 480px) {
    .if-fund-card-flipper .if-card__flip-text:has(> div[style*="grid-template-columns"]) {
        column-gap: 8px;
    }
}

/* =========================================================
   Offer cards — image cards in their own grid (3 columns,
   or 2 columns when there are exactly 2 offers)
   ========================================================= */

.if-offers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 2vw, 28px);
    margin: clamp(34px, 5vh, 64px) 0 0;
}

/* exactly 2 offers → each takes half of the row */
.if-offers-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.if-funds-services .if-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 26px;
    background: #17171A;
    color: #ffffff;
    box-shadow: none;
}

    /* keeps the "rise" reveal AND the hover transitions working together */
    .if-funds-services .if-offer-card[data-anim="rise"] {
        transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s cubic-bezier(.16, 1, .3, 1), border-color .45s ease, box-shadow .45s ease;
    }

.if-offers-grid--two .if-offer-card {
    aspect-ratio: 16 / 11;
}

.if-funds-services .if-offer-card:hover,
.if-funds-services .if-offer-card:focus-within {
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8);
}

.if-offer-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /*filter: grayscale(1) contrast(1.04);*/
    transform: scale(1.04);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}

.if-offer-card:hover .if-offer-card__image,
.if-offer-card:focus-within .if-offer-card__image {
    /*filter: grayscale(1) contrast(1.04);*/
    transform: scale(1.09);
}

.if-offer-card__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 10, 12, .15) 0%, rgba(10, 10, 12, .45) 46%, rgba(10, 10, 12, .9) 100%);
}

.if-offer-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.4vh, 14px);
    padding: clamp(22px, 2.4vw, 32px);
}

.if-offer-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}

    .if-offer-card__eyebrow span {
        width: 22px;
        height: 1px;
        flex: none;
        background: var(--color-brand);
    }

.if-offer-card__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.032em;
    text-wrap: pretty;
}

/* reveal on hover / keyboard focus */
.if-offer-card__reveal {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .55s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}

.if-offer-card:hover .if-offer-card__reveal,
.if-offer-card:focus-within .if-offer-card__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
}

.if-offer-card__reveal-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 1.6vh, 18px);
    min-height: 0;
}

.if-offer-card__text {
    margin-top: clamp(10px, 1.4vh, 14px);
    color: rgba(255, 255, 255, .84);
    font-size: 14.5px;
    line-height: 1.68;
    text-wrap: pretty;
}

    .if-offer-card__text p {
        margin: 0 0 .6em;
        color: inherit;
    }

        .if-offer-card__text p:last-child {
            margin-bottom: 0;
        }

.if-offer-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, background .3s;
}

    .if-offer-card__btn:hover,
    .if-offer-card__btn:focus-visible {
        transform: translateY(-2px);
        border-color: #ffffff;
        background: rgba(255, 255, 255, .16);
    }

@media (max-width: 1024px) {
    .if-offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .if-offers-grid--two .if-offer-card {
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 640px) {
    .if-offers-grid,
    .if-offers-grid--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (hover: none) {
    .if-funds-services .if-offer-card,
    .if-offers-grid--two .if-offer-card {
        aspect-ratio: auto;
        min-height: 420px;
    }

    .if-offer-card__reveal {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

/* =========================================================
   FAQ — dark accordion, same as Digital Wallet
   ========================================================= */



    body.investmentFunds .hp-faq h2 {
        margin: 0 0 32px;
        color: #fff;
        font-size: clamp(24px, 2.8vw, 40px);
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: -.04em;
    }


    body.investmentFunds .hp-faq__list details {
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

        body.investmentFunds .hp-faq__list details:last-child {
            border-bottom: 1px solid rgba(255, 255, 255, .16);
        }


    body.investmentFunds .hp-faq__question::-webkit-details-marker,
    body.investmentFunds .hp-faq__icon--chevron {
        display: none;
    }

body.investmentFunds .hp-faq__icon--plus {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: rgba(255, 255, 255, .65);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

    /* Centred with inset + margin rather than a translate: transforms skip pixel snapping, so the 1px bars
       landed on half pixels in some rows and rendered thinner. The 15px (odd) box keeps both bars centred on whole pixels,
       and no border-radius: on a 1px bar it dims one end only, which makes the cross look off-centre. */
    body.investmentFunds .hp-faq__icon--plus::before,
    body.investmentFunds .hp-faq__icon--plus::after {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 9px;
        height: 1px;
        background: currentColor;
        content: "";
    }

    body.investmentFunds .hp-faq__icon--plus::after {
        width: 1px;
        height: 9px;
    }
/* Offers sit on white; the text uses the same dark tones as the funds page. */
.hp-bg-canvas-funds > .if-funds-services.if-offers-page {
    background-color: #ffffff;
}
body.investmentFunds details[open] .hp-faq__icon--plus {
    transform: rotate(45deg);
}

body.investmentFunds .hp-faq__answer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 36px 24px 0;
    color: rgba(255, 255, 255, .72);
    line-height: 1.7;
}

    body.investmentFunds .hp-faq__answer p {
        margin: 0;
        color: inherit;
        font-size: 15px;
    }

        /* The partial wraps rich text in a <p>, which leaves empty paragraphs behind. */
        body.investmentFunds .hp-faq__answer p:empty {
            display: none;
        }

@media (max-width: 700px) {
    body.investmentFunds .hp-cta {
        padding: 64px 20px 76px;
    }

    body.investmentFunds .hp-faq__question {
        padding: 20px 0;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .if-funds-services [data-anim="rise"],
    .hp-bg-canvas-funds .if-card-flipper__inner,
    .hp-bg-canvas-funds .dw-card.if-card,
    .if-funds-services .if-offer-card,
    .if-offer-card__image,
    .if-offer-card__reveal,
    .if-offer-card__btn,
    .if-fund-card__arrow,
    .if-fund-card__cta,
    .if-fund-card__back-cta {
        transition: none;
    }
}
.hp-bg-canvas-funds > .if-funds-services.if-offers-page .dw-services__title {
    color: #111111;
    max-width: 26ch;
    margin: clamp(16px, 2.2vh, 24px) 0 0;
    font-size: clamp(26px, 3.4vw, 50px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.04em;
    max-width: 26ch;
    text-wrap: balance;
}
.if-offers-description-highlight {
    color: #111111;
    font-weight: 500;
}
.hp-bg-canvas-funds > .if-funds-services.if-offers-page .if-funds-services__description {
    color: rgba(17, 17, 17, .72);
}
.hp-bg-canvas-funds > .if-funds-services.if-offers-page .if-funds-services__eyebrow {
    color: rgba(17, 17, 17, .5);
}
.hp-bg-canvas-funds > .if-funds-services.if-offers-page .if-funds-services__description p {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: rgba(17, 17, 17, .72);
    max-width: 76ch;
}
.hp-bg-canvas-funds > .if-funds-services.if-offers-page .if-funds-services__note {
    color: rgba(17, 17, 17, .6);
}
@media (min-width: 640px) {
    .hp-bg-canvas-funds .if-funds-services .dw-grid.if-cards-grid:has(> :nth-child(2):last-child)
    .if-fund-card-flipper .dw-card__name {
        font-size: clamp(18px, 1.8vw, 26px);
    }
}