/* Footer */
.v2-site-footer {
    margin-top: var(--space-14);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);

    font-family: var(--font-body);
}

.v2-site-footer .v2-container {
    width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-max-wide));
    margin-inline: auto;
}


/* Grid */
.v2-footer-grid {
    display: grid;

    grid-template-columns:
        1.15fr
        .95fr
        .9fr
        1.05fr
        1.05fr
        1.55fr;

    gap: clamp(1.3rem, 2.2vw, 2.4rem);

    align-items: start;

    padding:
        var(--space-10)
        0
        var(--space-8);
}

.v2-footer-brand,
.v2-footer-column,
.v2-footer-app-card {
    min-width: 0;
}


/* Brand */
.v2-footer-brand-link {
    display: inline-flex;
    margin-bottom: .9rem;
}

.v2-footer-logo {
    display: block;

    width: min(100%, 11.5rem);
    height: auto;
}

.v2-footer-brand > p {
    max-width: 18rem;

    margin: 0;

    color: var(--text-soft);

    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: var(--line-height-body);
}


/* Heading */
.v2-footer-column h3,
.v2-footer-social h3,
.v2-footer-app-card h3 {
    position: relative;

    margin:
        0
        0
        .95rem;

    color: var(--color-brand-700);

    font-size: .8rem;
    font-weight: 800;
    line-height: 1.35;
}

.v2-footer-column h3::after,
.v2-footer-social h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -.4rem;

    width: 1rem;
    height: 2px;

    border-radius: 999px;

    background: var(--color-brand-300);
}


/* Links */
.v2-footer-links,
.v2-footer-info-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-footer-links {
    display: grid;
    gap: .75rem;
}

.v2-footer-links a {
    display: inline-flex;
    align-items: center;

    gap: .5rem;

    color: var(--text-soft);

    font-size: .76rem;
    font-weight: 550;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color .15s ease,
        transform .15s ease;
}

.v2-footer-links a::before {
    content: "›";

    color: #6f91d6;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.v2-footer-links a:hover {
    color: #244e96;

    transform: translateX(2px);
}


/* Info */
.v2-footer-info-list {
    display: grid;
    gap: .85rem;
}

.v2-footer-info-list li {
    display: flex;
    align-items: flex-start;

    gap: .65rem;

    color: #5d6f89;

    font-size: .75rem;
    font-weight: 550;
    line-height: 1.55;
}

.v2-footer-info-list i {
    flex: 0 0 auto;

    margin-top: .04rem;

    color: #3c63aa;

    font-size: .95rem;
}

.v2-footer-info-list a,
.v2-footer-info-list span {
    color: inherit;

    text-decoration: none;
}

.v2-footer-info-list a:hover {
    color: #244e96;
}


/* Social */
.v2-footer-social {
    margin-top: 1.1rem;
}

.v2-footer-social-list {
    display: flex;
    flex-wrap: wrap;

    gap: .58rem;
}

.v2-footer-social-list a {
    display: grid;
    place-items: center;

    width: 2.08rem;
    height: 2.08rem;

    border: 1px solid #d7e2f2;
    border-radius: 50%;

    background: #fff;

    color: #3159a3;

    font-size: .8rem;

    text-decoration: none;

    transition:
        color .15s ease,
        border-color .15s ease,
        background-color .15s ease,
        transform .15s ease;
}

.v2-footer-social-list a:hover {
    color: #1f4b9d;

    border-color: #b9cce8;

    background: #f7faff;

    transform: translateY(-2px);
}


/* App card */
.v2-footer-app-card {
    justify-self: end;
    grid-column: span 2;

    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.v2-footer-app-banner {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: transparent;
    cursor: pointer;
    box-shadow: 0 .8rem 1.8rem rgba(36, 69, 122, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}

.v2-footer-app-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.v2-footer-app-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.1rem 2.1rem rgba(36, 69, 122, .16);
}


/* App copy */
.v2-footer-app-copy {
    position: relative;
    z-index: 3;

    max-width: 18rem;
    min-width: 0;
}

.v2-footer-app-card h3 {
    margin:
        0
        0
        .8rem;

    max-width: 16rem;

    color: #173f8d;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.v2-footer-app-card h3::after {
    display: none;
}

.v2-footer-app-card p {
    max-width: 15.5rem;

    margin:
        0
        0
        .95rem;

    color: #61738f;

    font-size: .8rem;
    font-weight: 500;
    line-height: 1.75;
}


/* Google Play */
.v2-footer-store-badge {
    display: inline-flex;

    width: 100%;
    max-width: 10.6rem;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.v2-footer-store-badge:hover {
    transform: translateY(-1px);

    opacity: .95;
}

.v2-footer-store-badge img {
    display: block;

    width: 100%;
    height: auto;
}


/* App preview */
.v2-footer-app-preview {
    position: relative;

    align-self: stretch;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    min-height: 12rem;
    width: 100%;

    margin:
        -.6rem
        -.55rem
        -1.2rem
        0;
}


/* Background blob */
.v2-footer-app-preview-blob {
    position: absolute;

    top: 2rem;
    right: -1.2rem;

    width: 9.1rem;
    height: 9.1rem;

    border-radius: 50%;

    background:
        rgba(108, 146, 232, .09);
}


/* Glow */
.v2-footer-app-preview-glow {
    position: absolute;

    right: 1.2rem;
    bottom: 1.1rem;

    width: 4.2rem;
    height: 4.2rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(92, 135, 229, .17),
            transparent 70%
        );
}


/* Leaves */
.v2-footer-app-preview-leaf {
    position: absolute;

    bottom: .25rem;

    width: 1.6rem;
    height: 3rem;

    border-radius:
        100%
        0
        100%
        0;

    background:
        rgba(126, 158, 236, .2);
}

.v2-footer-app-preview-leaf--left {
    left: .2rem;

    transform: rotate(-28deg);
}

.v2-footer-app-preview-leaf--right {
    right: 0;

    transform: rotate(24deg);
}

.v2-footer-app-preview-leaf::before,
.v2-footer-app-preview-leaf::after {
    display: none;
}


/* Phone */
.v2-footer-app-preview-image {
    position: relative;
    z-index: 2;
    top: -.4rem;

    display: block;

    width: auto;
    height: 12.3rem;
    max-width: 10.2rem;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            12px
            20px
            rgba(33, 55, 94, .15)
        );
}


/* Footer bottom */
.v2-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    min-height: 4rem;

    padding:
        .8rem
        0;

    border-top: 1px solid #e5ebf3;
}


/* Payments */
.v2-footer-payments {
    display: flex;
    align-items: center;

    gap: 1.1rem;

    min-width: 0;
}

.v2-footer-payments > span {
    flex: 0 0 auto;

    color: #233d70;

    font-size: .72rem;
    font-weight: 750;
}

.v2-footer-payment-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .55rem .8rem;
}

.v2-footer-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.65rem;
    min-height: 1.7rem;

    padding: 0;

    border: 0;

    background: transparent;

    color: #37537c;

    font-size: .68rem;
    font-weight: 700;
}

.v2-footer-payment img {
    display: block;

    width: 100%;
    max-width: 3.65rem;
    max-height: 1.55rem;

    object-fit: contain;
}

/* Copyright */
.v2-footer-copyright {
    flex: 0 0 auto;

    margin: 0;

    color: #77879d;

    font-size: .7rem;
    font-weight: 550;

    text-align: right;

    white-space: nowrap;
}


/* Tablet */
@media (max-width: 1100px) {
    .v2-footer-grid {
        grid-template-columns:
            1.2fr
            repeat(3, 1fr);

        gap:
            1.8rem
            1.3rem;
    }

    .v2-footer-app-card {
        grid-column: span 2;
        justify-self: stretch;
        max-width: none;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(8rem, 8.8rem);
    }

    .v2-footer-app-copy,
    .v2-footer-app-card p {
        max-width: none;
    }

    .v2-footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: .9rem;

        padding:
            1rem
            0;
    }

    .v2-footer-payments {
        align-items: flex-start;
        flex-direction: column;

        gap: .65rem;
    }

    .v2-footer-copyright {
        text-align: left;
        white-space: normal;
    }
}


/* Mobile */
@media (max-width: 680px) {
    .v2-site-footer {
        margin-top: 2.4rem;
    }

    .v2-site-footer .v2-container {
        width: calc(100% - 2rem);
    }

    .v2-footer-grid {
        grid-template-columns: 1fr;

        gap: 1.55rem;

        padding:
            1.8rem
            0
            1.4rem;
    }

    .v2-footer-app-card {
        grid-column: auto;

        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "preview";

        align-items: start;

        min-height: 0;

        gap: .9rem;

        padding:
            1rem
            .95rem
            .95rem;

        border-radius: 1rem;

        justify-self: stretch;
        width: 100%;
        max-width: none;
    }

    .v2-footer-app-copy {
        grid-area: copy;
        max-width: none;
        width: 100%;
        padding-right: 0;
    }

    .v2-footer-app-card h3 {
        max-width: none;

        font-size: .92rem;
        line-height: 1.4;
    }

    .v2-footer-app-card p {
        max-width: none;
        width: 100%;

        margin-bottom: .8rem;

        font-size: .76rem;
        line-height: 1.7;
    }

    .v2-footer-store-badge {
        max-width: 9.1rem;
    }

    .v2-footer-app-preview {
        grid-area: preview;
        min-height: 9.6rem;

        align-self: auto;
        justify-content: center;
        width: 100%;

        margin:
            0
            -.3rem
            -.95rem;
    }

    .v2-footer-app-preview-blob {
        top: 1rem;
        right: 50%;

        width: 8.2rem;
        height: 8.2rem;

        transform: translateX(50%);
    }

    .v2-footer-app-preview-glow {
        right: 50%;
        bottom: .7rem;

        width: 3.4rem;
        height: 3.4rem;

        transform: translateX(75%);
    }

    .v2-footer-app-preview-image {
        display: block;
        top: -.3rem;
        height: 9.25rem;
        max-width: none;
        margin-inline: auto;
    }

    .v2-footer-app-preview-leaf {
        width: 1.1rem;
        height: 2.1rem;
    }

    .v2-footer-app-preview-leaf--left {
        left: .85rem;
    }

    .v2-footer-app-preview-leaf--right {
        right: .85rem;
    }

    .v2-footer-logo {
        width: 10rem;
    }

    .v2-footer-social {
        margin-top: 1rem;
    }

    .v2-footer-links {
        gap: .65rem;
    }

    .v2-footer-info-list {
        gap: .75rem;
    }

    .v2-footer-payments {
        width: 100%;
    }

    .v2-footer-payment-list {
        gap:
            .6rem
            .85rem;
    }
}