@scope (#hero) {

	h1 {
		padding-block: 80px;
		color: var(--__oj2_color_orange);
	}

	.breadcrumbs {
		padding-top: 8px;
		position: absolute;

		ol {
			flex-wrap: wrap;
			align-items: center;
			gap: 4px;
			display: flex;

			li {
				font-size: 14px;
				line-height: 20px;

				&.active { font-weight: 700 }

				a { color: inherit }

				&:not(:first-child) {
					padding-left: 26px;
					position: relative;

					&:before {
						content: "";
						background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75002 7.41632C9.9781 7.18824 9.9781 6.81957 9.75002 6.59149L5.08335 1.92482L4.25852 2.74965L8.51277 7.0039L4.25852 11.2582L5.08335 12.083L9.75002 7.41632Z' fill='%23A69F98'/%3E%3C/svg%3E") 50% / contain no-repeat;
						place-items: center;
						width: 14px;
						height: 14px;
						display: inline-grid;
						position: absolute;
						top: 3px;
						left: 4px;
					}
				}
			}
		}
	}

	.hero-feature-box {
		color: white;
		z-index: 1;
		background-color: var(--__oj2_color_maroon_100);
		border-radius: 16px;
		flex-direction: column;
		gap: 24px;
		padding: 32px;
		display: flex;
		position: absolute;
		transform: translateY(-120px);
		justify-self: flex-end;
		width: 386px;

		ul {
			display: flex;
			flex-direction: column;
			gap: 8px;

			li {
				display: flex;
				gap: 8px;

				h6 { font-weight: 500 }
			}
		}
	}

	.hero-img {
		min-height: 480px;
		background-image: url('/img/heros/md/couch-click2pay.webp');
		background-repeat: no-repeat;
		background-position: 50% 65%;
		background-size: 100%;
		scale: -1 1;
        animation: heroZoom ease-in-out both;
        animation-timeline: scroll();
        animation-range: 0 100vh;
	}

    @keyframes heroZoom {
        from {background-size: 100%}
        to {background-size: 108%}
    }


	@media (max-width: 980px) {

		.hero-feature-box { transform: translateY(-56px) }

	}

	@media (max-width: 768px) {

		.hero-feature-box {
			width: 100%;
			position: relative;
			transform: translateY(0);
			margin-block: -40px;
		}

		.hero-img { min-height: 234px }
	}
}

@scope (#cards) {

    padding-block: 96px;
    
    .card {
        border-radius: 16px;
        min-height: 272px;
        padding: 24px;
        overflow: hidden;
        transition: transform .3s;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        gap: 16px;

        video {
            margin-top: -100%;
            width: 100%;
            max-height: 100%;
            transform: translateY(160px) scale(1.5);
        }
    }

    .card-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "headline faster safe"
            "headline faster control"
        ;
        grid-template-rows: min-content;
    }

    .headline {
        grid-area: headline;
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
    }

    #faster {
        grid-area: faster;
        background-color: var(--__oj2_color_raspberry_10);

        .text {
            z-index: 1;
            gap: 16px;
            display: flex;
            flex-direction: column;
        }
    }

    #safe {
        grid-area: safe;
        background-color: var(--__oj2_color_sun_100);
    }

    #control {
        grid-area: control;
        background-color: var(--__oj2_color_violet_100);
        color: white;
    }

    @media (max-width: 980px) {
        
        .card-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-template-areas:
                "headline headline"
                "faster safe"
                "faster control"
            ;
        }
    }

    @media (max-width: 768px) {

        & {
            padding-block: 48px;
        }

        .card {
            padding: 24px 16px;
        }

        .card-grid {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "headline"
                "faster"
                "safe"
                "control"
            ;
        }
    }
}


@scope (#steps) {
    padding-block: 96px 160px;
    background-color: var(--__oj2_color_maroon_100);
    overflow: hidden;

    h3 {
        margin-bottom: 40px;
    }

    *:not(.badge):not(.badge *) {
        color: white;
    }

    .headline {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .step-card {
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        display: flex;
    }

    .step-num {
        background-color: var(--__oj2_color_orange);
        border-radius: 48px;
        place-items: center;
        width: 48px;
        height: 48px;
        font-family: ING Display;
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        display: inline-grid;
    }

    .click-to-pay-icon {
        background-color: white;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 700;
    }

    .btn--carousel {
        background-color: black;
        border: 0;
        border-radius: 48px;
        place-items: center;
        width: 48px;
        height: 48px;
        display: grid;

        &:focus:not(.slick-disabled),
        &:focus-visible:not(.slick-disabled) {
            outline-offset: 2px;
            outline: 2px solid black;
        }

        &:disabled,
        &.disabled,
        &.slick-disabled,
        &[aria-disabled=true] {
            cursor: not-allowed;
            pointer-events: none;
            background-color: var(--__oj2_color_grey_20);
        }

        &:hover:not(:disabled) {
            background-color: var(--__oj2_color_grey_50);
        }

        &:active:not(:disabled) {
            background-color: var(--__oj2_color_grey_60);
        }
    }

    .step-card-module .module-grid {
        flex-wrap: wrap;
        gap: 48px;
        display: flex;

        > .cell {
            flex: 1;
            width: auto;
            position: relative;

            &:nth-child(odd):before {
                content: "";
                aspect-ratio: 300 / 150;
                z-index: 10;
                pointer-events: none;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150'%3E%3Cpath d='M15 130 C80 10 220 10 285 130' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-dasharray='7 5' stroke-linecap='round'/%3E%3C/svg%3E") top / contain no-repeat;
                width: calc(100% + 48px);
                display: block;
                position: absolute;
                bottom: calc(100% - 20px);
                left: 50%;
            }

            &:nth-child(2n):before {
                content: "";
                aspect-ratio: 300 / 150;
                z-index: 10;
                pointer-events: none;
                transform-origin: 50%;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150'%3E%3Cpath d='M15 130 C80 10 220 10 285 130' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-dasharray='7 5' stroke-linecap='round'/%3E%3C/svg%3E") top / contain no-repeat;
                width: calc(100% + 48px);
                display: block;
                position: absolute;
                top: calc(100% - 20px);
                left: 50%;
                transform: translate(0) scaleY(-1);
            }

            &:last-child:before {
                content: none;
            }
        }
    }

    .step-card-module .step-carousel-controls {
        display: none;
    }

    @media (max-width: 768px) {
        & {
            padding-block: 40px;
        }

        .step-card-module .module-grid {
            > .cell {
                flex: initial;
                width: 100%;
            }

            &.step-carousel-down-sm {
                display: block;

                .slick-list {
                    /* padding + matching negative margin lets the connector arcs paint outside the clipped list */
                    padding-block: 60px;
                    margin-block: -20px -60px;
                }

                .slick-slide > .cell:before {
                    content: none;
                }

                .slick-track {
                    gap: 16px;
                    display: flex;
                }

                .slick-slide {
                    position: relative;

                    &:nth-child(odd):before {
                        content: "";
                        aspect-ratio: 300 / 90;
                        z-index: 10;
                        pointer-events: none;
                        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M20 100 C110 0 290 0 380 100' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-dasharray='12 8' stroke-linecap='round'/%3E%3C/svg%3E") top / contain no-repeat;
                        width: calc(100% + 16px);
                        display: block;
                        position: absolute;
                        bottom: calc(100% - 20px);
                        left: 50%;
                    }

                    &:nth-child(2n):before {
                        content: "";
                        aspect-ratio: 300 / 90;
                        z-index: 10;
                        pointer-events: none;
                        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M20 20 C110 120 290 120 380 20' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-dasharray='12 8' stroke-linecap='round'/%3E%3C/svg%3E") bottom / contain no-repeat;
                        width: calc(100% + 48px);
                        display: block;
                        position: absolute;
                        top: calc(100% - 20px);
                        left: 50%;
                    }

                    &:last-child:before {
                        content: none;
                    }
                }

                + .step-carousel-controls {
                    justify-content: center;
                    gap: 24px;
                    margin-top: 48px;
                    display: flex;
                    position: relative;
                }
            }
        }
    }
}


@scope (#online-banking) {
	background-color: var(--__oj2_color_sky_10);
    padding-block: 144px 96px;

    h6 {
        max-width: 329px;
    }

    h3 {
        margin-block: 8px 24px;
        max-width: 480px;
        text-align: center;
    }

    .container {
        display: flex;
        justify-content: space-between;
        gap: 48px;
    }

    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        a {
            margin-top: 16px;
        }
    }

    .login-button {
        background-color: black;
        color:white;
        border-radius: 999px;
        width: 83px;
        height: 36px;
        font-size: 16px;
        font-weight: 600;
        display: grid;
        place-items: center;

        &:hover {
            background-color: var(--__oj2_color_grey_50);
        }
    }

    .media {
        width: 120%;
    }

    .backsplash {
        background-color: var(--__oj2_color_sky_100);
        height: 286px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        border-radius: 24px;
        padding-inline: 32px;

        img,
        video {
            width: 100%;
            height: 334px;
            object-fit: cover;
            object-position: top;
            border-radius: 8px 8px 0 0;
        }
    }

    video {
        display: none;
    }

    @media (max-width: 768px) {

        & {
            padding-block: 48px;
        }

        img {
            display: none;
        }

        video {
            display: block;
            height: 381px;
        }

        .container {
            flex-direction: column;
            gap: 120px;
        }

        .media {
            width: 100%;
        }
    
    }

}


@scope (#faq) {
    padding-block: 96px;

    .collapse {
        display: none;

        &.in {
            display: block;
        }
    }

    .collapsing {
        height: 0;
        overflow: hidden;
        -webkit-transition-property: height, visibility;
        transition-property: height, visibility;
        -webkit-transition-duration: .35s;
        transition-duration: .35s
    }

    .accordion-item {
        border-bottom: 1px solid var(--__oj2_color_grey_20);
        
        &:first-child {
            padding-top: 0;
        }
    }

    .accordion-button {
        color: black;
        cursor: pointer;
        padding-right: 100px;
        font-family: ING Me;
        font-weight: 700;
        display: block;
        position: relative;
        padding: 24px;

        &:after {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.414 0.29325C9.023-0.09775 8.391-0.09775 8 0.29325L0 8.29325L1.414 9.70725L8.707 2.41425L16 9.70725L17.414 8.29325L9.414 0.29325Z' fill='%23ff6200'/%3E%3C/svg%3E");
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            place-items: center;
            width: 18px;
            height: 10px;
            margin-top: auto;
            margin-bottom: auto;
            transition: transform .3s;
            display: grid;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 7px;
        }

        &.collapsed:after {
            transform: rotate(180deg);
        }
    }

    .accordion-content { 

        p:not(:first-child) {
            margin-top: 8px;
        }

        p a {
            color: var(--__oj2_color_violet_100);
            text-decoration: underline;
        }
    }

    .well {
        padding: 24px;
        padding-top: 0;
    }

    .container {
        display: flex;
        flex-direction: row;
        gap: 40px 56px;

        .title-cell {
            width: min(50%, 431px);
        }

        .body-cell {
            flex: 1;
        }
    }

    @media (max-width: 980px) {
        .title-cell {
            width: 212px;
        }
    }

    @media (max-width: 768px) {
        
        & {
            padding-block: 48px;
        }

        .container {
            flex-direction: column;
            gap: 16px;
        }

        .title-cell {
            width: 100%;
            margin-bottom: 8px;
        }

        .accordion-item, .accordion-button, .well {
            padding-inline: 0;
        }
    }
}


@scope (#disclaimer) {
    background-color: var(--__oj2_color_grey_10);
    padding-block: 100px;

    .container {
        display: flex;
        flex-direction: row;
        gap: 144px;
        font-size: 14px;
    }

    p {
        color: var(--__oj2_color_grey_40);
    }

    @media (max-width: 768px) {
        
        & {
            padding-block: 48px;
        }

        .container {
            flex-direction: column;
            gap: 16px;
        }
    }
}