a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
img { display: block; vertical-align: middle; }
*, *:before, *:after { box-sizing: border-box;  }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; scroll-behavior: smooth; } 

@font-face {
	font-family:'BentonSans';
	src:url("../fonts/BentonSansRegular.woff") format("woff");
	font-weight: 400;
}

@font-face{
	font-family:'BentonSans';
	src:url("../fonts/BentonSansMedium.woff") format("woff");
	font-weight: 500;
}

@font-face{
	font-family:'BentonSans';
	src:url("../fonts/BentonSansBold.woff") format("woff");
	font-weight: 700;
}

@font-face {
	font-family: 'Guardian Egyptian Web';
	src: url('../fonts/GuardianEgyp-Light-Web.woff') format('woff');
	font-weight:  300;
	font-style:   normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'Guardian Egyptian Web';
	src: url('../fonts/GuardianEgyp-Regular-Web.woff') format('woff');
	font-weight:  400;
	font-style:   normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'Guardian Egyptian Web';
	src: url('../fonts/GuardianEgyp-Medium-Web.woff') format('woff');
	font-weight:  500;
	font-style:   normal;
	font-stretch: normal;
}

:root {
	--color-black: #000;
	--color-white: #fff;
	--color-gray-1: #f8f8f8;
	--color-gray-2: #ecedee;
	--color-gray-3: #c8c9c7;
	--color-gray-4: #8e9092;
	--color-gray-5: #53565a;
	--color-gray-6: #333;
	--color-blue-dark: #00175a;
	--color-blue: #006fcf;
	--color-blue-light: #66a9e3;
	--color-error: #fdc228;
	--font-primary: 'BentonSans', 'Helvetica Neue', Helvetica, sans-serif;
	--font-secondary: 'Guardian Egyptian Web', serif;
	--padding-top: 80px;
	--padding-bottom: 80px;
}

.sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.inav-header [class^="axp-global-header__dls-module__module___"] [class*="axp-global-header__dls-module__navSticky"]  {
	top: -61px !important;
	left: 0 !important;
	position: relative !important;
}

.inav-header { height: 60px; font-size: 0; }
.inav-header:empty { height: 0;}

a[href="#mainContent"] { font-size: calc(1.4rem * .625) !important; }
#mainContent:focus {
	outline: 5px auto -webkit-focus-ring-color !important;
}

body {
	background-color: var(--color-gray-1);
	color: var(--color-gray-6);
	font-size: calc(1.6rem * .625);
	font-family: var(--font-primary);
	font-weight: 400;
	line-height: 1.4;
	margin: 0; 
}

h1 {
	color: var(--color-white);
	font-family: var(--font-secondary);
	font-size:  clamp(calc(2.5rem * .625), 4.5vw, calc(5rem * .625));
	font-weight: 400;
	letter-spacing: .5px;
	line-height: 1.2;
}

h2 {
	font-family: var(--font-secondary);
	font-size: clamp(calc(2.2rem * .625), 4.5vw, calc(3.2rem * .625));
	font-weight: 400;
	letter-spacing: .3px;
	line-height: 1.2;
	margin-bottom: 25px;
}

h3 {
	font-family: var(--font-secondary);
	font-size: clamp(calc(1.6rem * .625), 3.5vw, calc(2.5rem * .625));
	font-weight: 300;
	letter-spacing: .3px;
	line-height: 1.2;
	margin-bottom: 15px;
}

a {
	color: var(--color-blue);
	position: relative;
	text-decoration: none;
}

	a:focus, a:hover { color: var(--color-blue); text-decoration: underline; }

sup {
	display: inline-block;
	font-size: 66%;
	font-weight: 400;
	height: 0;
	line-height: 1;
	position: relative;
	top: -1ex;
	vertical-align: baseline;
}

strong, .strong { font-weight: 700; }

.overlay {
	background: rgba(255, 255, 255, 0.61);
	height: 100%;
	display: none;
	left: 0;
	position: fixed;
	top: 0;
	transition: all .3s ease-out;
	width: 100%;
	z-index: 2;
}

.site-header {
	background: var(--color-blue);
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	position: sticky;
	top: 0;
	z-index: 3;
}

	.site-header--container {
		display: flex;
		height: 50px;
		justify-content: space-between;
		margin: 0 auto;
		max-width: 1200px;
		position: relative;
		width: 100%;
	}

	.site-header--overlay {
		background: var(--color-blue);
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.site-header--logo-container {
		align-items: center;
		display: flex;
		height: 50px;
		margin-left: -10px;
		max-width: 50%;
		position: relative;
		z-index: 2;
	}

	.logo-animation {
		display: none;
	}

	.homepage .logo-static {
		display: none;
	}

	.homepage .logo-animation {
		display: block;
	}

	.site-header--card {
		display: block;
		height: auto;
		left: 0;
		max-width: 48px;
		position: absolute;
		top: 5px;
		width: 100%;
	}

	.site-header--logo {
		display: block;
		height: auto;
		max-width: 101px;
		width: 100%;
		}

	.nav--toggle-open,
	.nav--toggle-close {
		align-items: center;
		border-radius: 3px;
		cursor: pointer;
		display: flex;
		font-size: calc(1.5rem * .625);
		font-weight: 400;
		justify-content: center;
		margin: 5px 0;
		padding: 10px;
		position: relative;
		text-align: center;
		text-decoration: none;
		width: 160px;
		z-index: 2;
	}

	.nav--toggle-open:focus, .nav--toggle-open:hover, .nav--toggle-close:focus, .nav--toggle-close:hover { text-decoration: none; }

	.nav--toggle-open {
		background-color: var(--color-white);
		border: 1px solid rgba(255, 255, 255, 0.20);
		color: var(--color-blue);
	}

	.nav--toggle-close {
		background-color: var(--color-blue);
		border: 1px solid var(--color-white);
		color: var(--color-white);
		display: none;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 5;
	}

	.nav--toggle-open::after,
	.nav--toggle-close::after {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		content: '';
		display: block;
		height: 13px;
		margin-left: 8px;
		width: 13px;
	}

	.nav--toggle-open::after {
		background-image: url(../img/icon-arrow-nav.svg?v=0);
	}

	.nav--toggle-close::after {
		background-image: url(../img/icon-close-white.svg?v=0);
	}

	.nav--toggle-open:focus,
	.nav--toggle-close:focus {
		outline: 5px auto Highlight;
		outline: 5px auto -webkit-focus-ring-color;
	}

	.nav--links {
		background: var(--color-white);
		max-width: 400px;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		text-align: left;
		top: 3px;
		transform: translateY(-100%);
		width: 100%;
		z-index: 0;
	}

	.nav--link {
		align-items: center;
		background: var(--color-blue) url(../img/icon-arrow-nav-white.svg?v=0) no-repeat calc(100% - 20px) 50%;
		color: var(--color-white);
		display: flex;
		font-size: calc(1.5rem * .625);
		height: 50px;
		padding: 0 25px 0 15px;
		position: relative;
		text-decoration: none;
	}

		.nav--link:focus, .nav--link:hover { color: var(--color-white); }

	.nav--link-external {
		color: var(--color-gray-6);
		height: 45px;
		background: url(../img/icon-external-link.svg?v=0) no-repeat calc(100% - 20px) 50%;
		background-size: 15px;
		font-size: calc(1.3rem * .625);
	}

		.nav--link-external:focus, .nav--link-external:hover { color: var(--color-gray-6); }

	.nav--link::after,
	.nav--link-external::after {
		background-color: rgba(255, 255, 255, 0.20);
		bottom: 0;
		content: '';
		display: block;
		height: 1px;
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		width: 95%;
	}

	.nav--link::after { background-color: rgba(255, 255, 255, 0.20); }
	.nav--link-external::after { background-color: rgba(51, 51, 51, 0.20); }

	.nav--link.nav--link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
	.nav--link-external:hover { text-decoration: underline; }

	.nav--open {
		box-shadow: 0 3px 5px rgba(0,0,0,.15);
		opacity: 1;
		pointer-events: auto;
		transform: translateY(50px);
		transition: transform .25s;
	}

.section-container {
	margin: 0 auto;
	max-width: 1440px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

	.section-content {
		margin: 0 auto;
		max-width: 1200px;
		position: relative;
		padding: var(--padding-top) 0 var(--padding-bottom);
		width: 90%;
	}

.bg-white { background-color: var(--color-white); }	
.bg-blue { background-color: var(--color-blue-dark); }
.bg-blue-light { background-color: var(--color-blue); }
.bg-gray-light { background-color: var(--color-gray-2); }
.bg-pattern-blue { background-image: url(../img/bg-pattern-blue.svg?v=0); background-position: center 20px; background-size: 20%; background-repeat: repeat; }
.bg-pattern-gray { background-image: url(../img/bg-pattern-gray.svg?v=0); background-position: center 20px; background-size: 25%; background-repeat: repeat; border-top: 1px solid var(--color-gray-2) }

.bg-flourish-gray::after,
.bg-flourish-white::after {
	background-position: 10% 0;
	background-repeat: no-repeat; 
	background-size: 175%; 
	bottom: 0; 
	content: ''; 
	display: block;
	height: 545px; 
	left: 0; 
	position: absolute; 
	width: 100%; 
	z-index: 0;
}

	.bg-flourish-gray::after { background-image: url(../img/flourish-gray.svg?v=1); background-position: 100% -250%; background-size: auto; bottom: inherit; height: 585px; top: 0; }
	.bg-flourish-white::after { background-image: url(../img/flourish-white.svg?v=0); }
	.bg-flourish-reverse::after { background-position: 100% 80px; bottom: 0; top: inherit; transform: scaleX(-1); } 

.legal-note {
	color: var(--color-white);
	font-size: calc(1.2rem * .625);
}

	.legal-note-alt { color: var(--color-gray-5); }

.hero--container {
	margin: 0 auto;
	max-width: 1200px;
	position: relative;
	width: 90%;
}

.hero--rectangle {
	background-color: var(--color-blue);
	position: absolute;
	z-index: -1;
}

.hero--flourish {
	left: -120px;
	margin: 0 auto;
	position: absolute;
	top: -130px;
}

.hero--media {
	height: auto;
	position: absolute;
}

.hero--card {
	position: absolute;
	right: 235px;
	top: 100px;
}

.hero--device {
	height: auto;
	width: 100%;
}

.hero--subheadline {
	color: var(--color-white);
	font-size: calc(1.5rem * .625);
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.hero--description {
	color: var(--color-white);
	font-size: clamp(calc(1.6rem * .625), 3.5vw, calc(2rem * .625));
	font-weight: 500;
	margin-top: 10px;
}

.hero-0 { 
	/* background-image: url(../img/flourish.svg?v=0); */
	background-repeat: no-repeat;
	background-position: top center;
	padding: 80px 0 60px;
}

	.hero-0--rectangle {
		height: 1128px;
		left: -220px;
		top: -550px;
		transform: rotate(-5deg);
		width: 1300px;
	}

	.hero-0--media {
		right: -20px;
		transform: rotate(-5deg);
		top: -80px;
	}

	.hero-0--device {
		max-width: 270px;
	}

	.hero-0--legal-note {
		margin-left: 30px;
		transform: rotate(-5deg);
	}

	.hero-0--card {
		height: auto;
		max-width: 214px;
		width: 100%;
	}

	.hero-0--logo {
		display: block;
		height: auto;
		margin-bottom: 80px;
		max-width: 185px;
		margin-left: 70px;
		position: relative;
		width: 100%;
	}

	.hero-0--content {
		margin-bottom: 125px;
		max-width: 600px;
		margin: 85px;
		position: relative;
		text-wrap: balance;
		width: 100%;
	}

	.hero-0--headline { font-size: clamp(calc(3.2rem * .625), 4.5vw, calc(5rem * .625)); margin-bottom: 15px; }
	.hero-0--text { color: var(--color-white); font-size: clamp(calc(1.8rem * .625), 4.5vw, calc(2rem * .625)); font-weight: 500; line-height: 1.4; }
	
.hero-1 {  
	padding: 80px 0 255px;
}

	.faqs .hero-1 { margin-bottom: 0; }

	.hero-1--rectangle {
		height: 1130px;
		left: -205px;
		top: -820px;
		transform: rotate(5deg);
		width: 1300px;
	}

	.hero-1--media {
		align-items: flex-end;
		display: inline-grid;
		gap: 5px;
		grid-template-columns: repeat(2, auto);
		position: absolute;
		right: 20px;
		top: -75px;
		transform: rotate(4.7deg);
		z-index: 1;
	}

	.using-your-business-debit-card .hero-1--media,.faqs .hero-1--media { top: -20px; }

	.hero-1--device {
		max-width: 250px;
	}

	.faqs .hero-1--device { max-width: 180px; position: absolute; right: -105px; top: -80px; z-index: 1; }

	.hero-1--card {
		height: auto;
		max-width: 250px;
		width: 100%;
	}

	.hero-1--legal-note {
		margin-bottom: 30%;
	}

	.hero-1--content {
		max-width: 785px;
		position: relative;
		width: 100%;
		z-index: 1;
	}

.category-container {
	max-width: 1175px;
	padding: 0 85px;
	width: 100%;
}

	.category--title {
		color: var(--color-white);
		font-size: clamp(calc(1.6rem * .625), 3.5vw, calc(2.5rem * .625));;
		margin-bottom: 20px;
	} 

	.category--row {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.category--col {
		width: 49%;
	}

	.category--item {
		background-color: var(--color-white);
		border-radius: 3px;
		border: 1px solid var(--color-gray-2);
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10);
		display: block;
		height: calc(100% - 20px);
		margin-bottom: 20px;
		padding: 0 4px;
		text-decoration: none;
		transition: all .25s ease;
	}

	.category--item:focus,
	.category--item:hover {
		box-shadow: 0 13px 26px 0 rgb(0 0 0 / 20%);
		text-decoration: none;
		transform: translateY(-10px);
	}

	.category--item-header {
		align-items: center;
		border-bottom: 1px solid var(--color-blue);
		display: flex;
		padding: 20px 10px;
		position: relative;
	}

	.category--item-header::after {
		background-image: url(../img/icon-arrow-light-blue.svg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		display: block;
		height: 20px;
		position: absolute;
		right: 20px;
		width: 10px;
	}

	.category--item-icon {
		display: block;
		height: 34px;
		margin-right: 15px;
		width: 34px;
	}

	.category--item-title {
		color: var(--color-blue);
		font-family: var(--font-primary);
		font-size: calc(1.8rem * .625);
		font-weight: 500;
		margin: 0;
	}

	.category--item-content {
		background-color: var(--color-gray-1);
		color: var(--color-gray-6);
		height: calc(100% - 80px);
		line-height: 1.6;
		margin-bottom: 5px;
		padding: 15px 10px;
	}

.bbp-app .col--2:first-child {
	position: relative;
	top: 100px;
}

	.managing-your-account .bbp-app .col--2:first-child { top: 0; }

	.bbp-app--screen-0 {
		height: auto;
		margin: 0 auto;
		max-width: 430px;
		width: 100%;
	}

	.bbp-app--screen-1 {
		height: auto;
		margin: 0 auto;
		max-width: 320px;
		width: 100%;
	}

	.bbp-app--legal-note {
		color: var(--color-gray-5);
	}

	.bbp-app--content {
		color: var(--color-white);
		max-width: 580px;
		width: 100%;
	}

	.managing-your-account .bbp-app--content {
		color: var(--color-gray-6);
		margin-bottom: 0;
	}

	.bbp-app--logo {
		margin-bottom: 30px;
		margin-left: -17px;
		max-width: 225px;
		width: 100%;
	}

	.bbp-app--content > h2 { color: var(--color-white); margin-bottom: 25px; }
	.bbp-app--content > p { font-size: calc(1.8rem * .625); font-weight: 500; margin-bottom: 20px; }
	.bbp-app--content .link-arrow { color: var(--color-white); display: inline-block; margin-bottom: 45px; }
	.bbp-app--content .link-arrow:focus, .bbp-app--content .link-arrow:hover { color: var(--color-white); }

	.managing-your-account .bbp-app--content > h2 { color: var(--color-gray-6); }
	.managing-your-account .link-arrow { margin-bottom: 30px; }
	.managing-your-account .link-arrow, .managing-your-account .bbp-app--content .link-arrow:focus, .managing-your-account .bbp-app--content .link-arrow:hover { color: var(--color-blue); }

	.bbp-app--item {
		align-items: center;
		display: flex;
		font-size: calc(1.8rem * .625);
		line-height: 1.3;
		margin-bottom: 25px;
		max-width: 540px;
		width: 100%;
	}

	.managing-your-account .bbp-app--item-text { color: var(--color-blue-dark); }
	
	.bbp-app--item-icon {
		height: auto;
		margin-right: 25px;
		max-width: 48px;
		width: 48px;
	}

	.bbp-app--download {
		display: grid;
		gap: 35px;
		grid-template-columns: repeat(2, 33% 70%);
		max-width: 400px;
		width: 100%;
	}

	.managing-your-account .bbp-app--download { display: block; max-width: 100%; }
	.managing-your-account .bbp-app--download p { margin-bottom: 15px; }
	
	.bp-app--download-logo {
		max-width: 125px;
		height: auto;
		width: 100%;
	}

	.bbp-app--links {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.bbp-app--title {
		margin-bottom: 40px;
	}

	.managing-your-account .bbp-app--links { 
		max-width: 270px;
		width: 100%;
	}

	.bbp-app--link:first-child {
		margin-right: 15px;
	}

.amex-app {
	color: var(--color-white);		
	
	.subheadline {
			color: var(--color-white);
			margin-bottom: 8px;
	}

	.legal-note {
		color: inherit;
	}
}

	.amex-app__light {
		color: var(--color-gray-6);

		.subheadline {
			color: var(--color-gray-6);
		}
	}

	.amex-app--columns {
		align-items: center;
	}

	.amex-app--content {
		max-width: 580px;

		> p.text-font-medium {
			font-size: clamp(calc(1.6rem * .625), 3.5vw, calc(1.8rem * .625));
			font-weight: 500;
			margin-bottom: 4px;
		}

		p {
			line-height: 1.5;
		}
	}

	.amex-app--features {
		display: grid;
		gap: 20px;
		margin-block: 30px;

		@media (width >= 768px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
		}
	}
	.amex-app--feature {
		display: flex;
		flex-flow: row;
		gap: 15px;
		font-weight: 400;
		text-wrap: balance;

		@media (width >= 768px) {
			flex-flow: column;
		}
	}
	.amex-app--feature-icon {
		width: 45px;
	}

	.amex-app--download {
		display: grid;
		grid-template-columns: 77px 1fr;
		column-gap: 32px;
		row-gap: 20px;
		align-items: center;
		margin-bottom: 40px;

		@media (width > 1160px) {
			grid-template-columns: 88px 1fr;
			row-gap: 14px;
		}


	}
		.amex-app--title {
			grid-column: 1 / -1;
			grid-row: 1;

			@media (width > 1160px) {
				grid-column: 2;
			}
		}
		.amex-app--download-logo {
			width: 77px;
			grid-row: 2;
			grid-column: 1;

			@media (width > 1160px) {
				grid-row: 1/ span 2;
			}
		}
		.amex-app--links {
			grid-row: 2;
			grid-column: 2;
			display: flex;
			flex-flow: column;
			gap: 12px;

			@media (width > 1160px) {
				flex-flow: row;
				gap: 15px;
				margin-right: auto;
			}
		}
			.bbp-app--link {
				margin-right: auto !important;
				&:first-child {
					margin-bottom: initial !important;
				}
			}

.support {
	margin-bottom: 1px;
	text-align: center;
}

	.support--text {
		font-size: clamp(calc(1.6rem * .625), 4.5vw, calc(2rem * .625));
		font-weight: 500;
		margin: 0 auto;
		max-width: 720px;
		width: 100%;
	}

.add-account--media {
	height: auto;
	margin: 0 auto 10px;
	max-width: 345px;
	width: 100%;
}

	.add-account--content {
		margin-bottom: 35px;
	}

	.add-account--content p { 
		font-size: clamp(calc(1.6rem * .625), 3.5vw, calc(1.8rem * .625));
		margin-bottom: 20px; 
	}

.funding-benefits {
	display: flex;
	justify-content: space-between;
}

	.funding-benefits--item {
		position: relative;
		text-align: center;
		width: 50%;
	}

	.funding-benefits--item:not(:last-child):after {
		background-color: rgba(255, 255, 255, 0.12);
		content: '';
		display: block;
		height: 148px;
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
	}

	.funding-benefits--icon {
		height: auto;
		margin: 0 auto 25px;
		max-width: 70px;
		width: 100%;
	}

	.funding-benefits--text {
		color: var(--color-white);
		font-size: calc(2rem * .625);
		font-weight: 500;
		margin: 0 auto;
		max-width: 305px;
		width: 100%;
	}


.faq-container {
	z-index: 1;
}

	.faq-container .faq {
		display: grid;
		gap: 65px;
		grid-template-columns: repeat(1, 30fr 70fr);
	}

	.faq--subheadline {
		font-size: calc(1.5rem * .625);
		font-style: normal;
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 10px;
		text-align: center;
		text-transform: uppercase;
	}

	.faq--headline {
		color: var(--color-gray-6);
		font-size: clamp(calc(2.2rem * .625), 4.5vw, calc(4rem * .625));
		text-align: center;
	}

	.faq-container .faq--headline { 
		font-size: calc(2.5rem * .625);
		font-weight: 400;
		text-align: left;
	}

	.faq--content {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		max-width: 790px;
		width: 100%;
	}

	.faq-container .faq--content {
		border-bottom: 1px solid var(--color-gray-3);
		margin-bottom: 65px;
		max-width: 100%;
		padding-bottom: 65px;
	}

	.faq--see-all {
		align-self: flex-end;
		display: inline-block;
		font-size: calc(1.5rem * .625);
		margin-top: 15px;
		text-decoration: underline;
	}

.accordion {
	margin-bottom: 8px;
}

	.accordion--trigger {
		appearance: none;
		background-color: var(--color-white);
		border-radius: 4px;
		border: 0;
		color: var(--color-gray-6);
		cursor: pointer;
		display: grid;
		font-family: var(--font-primary);
		font-size: calc(1.6rem * .625);
		font-weight: 500;
		gap: 13px;
		grid-template-columns: repeat(2, auto);
		justify-content: start;
		justify-items: center;
		line-height: 1.3;
		padding: 14px 15px;
		position: relative;
		text-align: left;
		transition: all 0.2s ease-out;
		width: 100%;
	}

	.accordion--trigger::before {
		background-image: url(../img/icon-arrow-gray.svg?v=0);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		display: block;
		height: 14px;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		transition: all 0.15s ease-out;
		width: 15px;
	}
  
	.is-active::before { height: 15px; transform: translateY(-50%) rotate(90deg); width: 14px; }

	.accordion--icon {
		height: auto;
		max-width: 34px;
		width: 100%;
	}

	.accordion--content {
		background-color: var(--color-white);
		color: var(--color-gray-5);
		max-height: 0;
		overflow: hidden;
		padding: 0 15px ;
		transition: max-height 0.2s ease-out;
	}

	.accordion--content p { margin-bottom: 15px; }

	.accordion--content ul { line-height: 1.6; list-style-type: decimal; list-style-position: inside; margin-bottom: 15px; }
	.accordion--content li { padding-bottom: 10px; }
	
.accordion-plus .accordion--trigger {
	align-items: center;
	font-size: calc(1.8rem * .625);
	gap: 15px;
	padding: 14px 45px 14px 15px;
}

	.accordion-plus .accordion--trigger::after,
	.accordion-plus .accordion--trigger::before {
		background-color: var(--color-blue);
		background-image: none;
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: all 0.2s ease-in;
	}

	.accordion-plus .accordion--trigger::after { height: 2px; right: 17px; width: 16px; }
	.accordion-plus .accordion--trigger::before { height: 16px; right: 24px; width: 2px; }

	.accordion-plus .is-active::before { opacity: 0; }	

	.accordion-plus .accordion--content  {
		background-color: var(--color-gray-1);
		border: 4px solid var(--color-white);
		border-top: var(--color-gray-2);
		color: var(--color-gray-6);
	}

	.accordion-plus .accordion--content > div  { margin: 15px 0; }

	.ways-to-redeem .accordion { border: 1px solid var(--color-gray-2); max-width: 430px; width: 100%; }
	.ways-to-redeem .accordion--trigger { background-color: var(--color-gray-2); color: var(--color-gray-5); font-size: calc(1.5rem * .625); font-weight: 700; padding: 8px 15px; text-transform: uppercase; }
	.ways-to-redeem .accordion-plus .accordion--trigger::after, .ways-to-redeem .accordion-plus .accordion--trigger::before { background-color: var(--color-gray-5); }
	.ways-to-redeem .accordion--content { border-color: var(--color-gray-2); }
	.ways-to-redeem .accordion--content p { font-size: calc(1.2rem * .625); margin-bottom: 20px; }

	.faq-container .accordion { box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10); }
	.faq-container .accordion--trigger {  background-color: var(--color-white); border-radius: 3px; }
	.faqs .accordion--content { background-color: var(--color-white); }

.making-payments {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 995px;
	padding: 0 0 var(--padding-bottom);
	position: relative;
}

	.making-payments--item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 29%;
	}

	.making-payments--icon {
		align-items: center;
		background-color: var(--color-blue);
		border-radius: 50%;
		display: flex;
		height: 80px;
		justify-content: center;
		margin-bottom: 20px;
		width: 80px;
	}

	.making-payments--content p { margin-bottom: 20px; }
	.making-payments--content p:last-child { margin-bottom: 25px; }
	.making-payments--headline { font-size: calc(2.5rem * .625); }
	.making-payments--text { font-size: calc(1.8rem * .625); }
	.making-payments--tip { position: relative; }
	
	.making-payments--tip span { 
		background-color: var(--color-gray-1); 
		color: var(--color-blue); 
		font-size: calc(1.5rem * .625); 
		font-weight: 700;
		padding-right: 10px;
		position: relative;
		text-transform: uppercase;
		z-index: 1; 
	}

	.making-payments--tip::before {
		background-color: var(--color-gray-3);
		bottom: 0;
		content: '';
		height: 1px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}
	

.way-to-pay {
	margin-bottom: 1px;
	z-index: 1;
}	

	.way-to-pay--headline {
		color: var(--color-white);
		font-size: calc(4rem * .625);
		margin-bottom: 10px;
		text-align: center;
	}

	.way-to-pay .text--big {
		color: var(--color-white);
		margin-bottom: 60px;
		text-align: center;
	}

	.way-to-pay--content {
		display: grid;
		gap: 25px;
		grid-template-columns: repeat(4, 1fr);
	}

	.way-to-pay--content:nth-child(2n) {
		align-items: flex-start;
		margin-bottom: 25px;
	}

	.way-to-pay--item {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border: 1px solid var(--color-gray-2);
		border-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.way-to-pay--content:nth-child(2n) .way-to-pay--item {
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-top: 0;
		border: 1px solid var(--color-gray-2);
	}

	.way-to-pay--item-description {
		background-color: var(--color-white);
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.18);
		flex-grow: 1;
		padding: 15px 15px 0;
	}

	.way-to-pay--item p {
		margin-bottom: 10px;
	}

	.way-to-pay--header {
		align-items: center;
		border-bottom: 1px solid var(--color-blue-dark);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20px;
		padding-bottom: 15px;
	}

	.way-to-pay--title {
		color: var(--color-blue-dark);
		margin: 0;
	}

	.way-to-pay--cost {
		color: var(--color-blue-dark);
		font-family: var(--font-secondary);
		font-size: calc(1.6rem * .625);
		font-weight: 700;
		text-transform: uppercase;
	}

	p.way-to-cost--description {
		margin-bottom: 20px;
	}

	.way-to-cost--icon { 
		display: inline-block;
		margin: 0 3px;
		vertical-align: bottom;
	}

	.way-to-pay--disclaimer {
		color: var(--color-white);
		font-size: calc(1.2rem * .625);
		margin: 0 auto;
		max-width: 700px;
		text-align: center;
		width: 100%;
	}

.banner--2-col {
	color: var(--color-white);
	display: grid;
	gap: 80px;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
	max-width: 995px;
}

	.banner--headline { color: var(--color-white); text-wrap: balance; }
	.banner--2-col p { margin-bottom: 20px; }
	.banner--2-col a { color: var(--color-white) ;}

.write-checks .col-1 { 
	padding: 0;  
}

	.write-checks--image {
		height: auto;
		margin: 0 auto -50px;
		max-width: 515px;
		width: 100%;
	}

	.write-checks--content { margin-bottom: 35px; }

	.write-checks p { margin-bottom: 20px; }
	.write-checks .link-arrow { display: inline-block; margin-bottom: 20px; }

.how-to-1,
.how-to-2 {
	max-width: 995px;
}
	
.how-to--media {
	height: auto;
	margin: 0 auto 10px;
	max-width: 345px;
	width: 100%;
}

.add-account .legal-note {
	color: var(--color-gray-5);
}
	.how-to h3 {
		font-family: var(--font-primary);
		font-size: calc(1.8rem * .625);
		font-weight: 500;
	}

	.how-to p {
		color: var(--color-gray-5);
		margin-bottom: 20px;
	}

	.how-to .list-disc {
		color: var(--color-gray-5);
		padding-left: 10px;
	}

	.setup-card {
		margin-bottom: 100px;
		max-width: 585px;
		position: relative;
		width: 100%;
	}

.use-card {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

	.use-card--image {
		padding-top: 75px;
		width: 40%;
	}

	.use-card--image--container {
		align-items: center;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.use-card--image-circle {
		background-color: var(--color-blue);
		border-radius: 50%;
		height: 322px;
		position: absolute;
		width: 322px;
	}

	.use-card--image img {
		height: auto;
		margin: 0 auto;
		max-width: 245px;
		position: relative;
		width: 100%;
		z-index: 1;
	} 

	.use-card--content {
		width: 55%;
	}

	.use-card--item {
		display: flex;
		margin-bottom: 55px;
		max-width: 590px;
	}

	.use-card--icon {
		flex: 1;
	}

	.use-card--icon img {
		height: auto;
		margin-right: 30px;
		width: 48px;
	 }

.use-with-confidence {
	padding: 80px 0 55px;
	z-index: 1;
}	 

	.use-with-confidence--headline {
		color: var(--color-gray-6);
		margin-bottom: 35px;
		text-align: center;
	}

	.use-with-confidence--rectangle {
		background-color: var(--color-blue-dark);
		width: 930px;
		height: 588px;
		transform: rotate(81.076deg);
		position: absolute;
		top: 280px;
		right: -540px;
		z-index: -1;
	}

.ways-to-earn {
	max-width: 1015px;
	padding-top: 0;
	text-align: center;
}

	.ways-to-earn--headline {
		font-size: clamp(calc(2.2rem * .625), 4.5vw, calc(4rem * .625));
		font-weight: 500;
		margin-bottom: 45px;
	}


	.ways-to-earn--media {
		height: auto;
		margin: 0 auto 35px;
		max-width: 335px;
		width: 100%;
	}

	.ways-to-earn .row--2 { 
		gap: 45px; grid-template-columns: repeat(2, 1fr); 
	}

	.ways-to-earn--content h3 { 
		font-size: clamp(calc(2rem * .625), 4.5vw, calc(3.2rem * .625)); 
		font-weight: 400; 
	}

	.ways-to-earn--content p { 
		font-size: clamp(calc(1.6rem * .625), 3.5vw, calc(2rem * .625)); 
		font-weight: 500; 
	}

.banner-blue-light {
	color: var(--color-white);
	margin: 0 auto;
	max-width: 790px;
	text-align: center;
	width: 90%;
}

	.banner-blue-light--headline {
		font-size: calc(2.5rem * .625);
	}

	.banner-blue-light p { margin-bottom: 25px; }
	.banner-blue-light a { color: var(--color-white); }

.ways-to-redeem {
	max-width: 1015px;
}

.digital-gift-cards {
	color: var(--color-white);
	margin: 0 auto;
	max-width: 762px;
	text-align: center;

	h2 {
		font-size: clamp(calc(2rem * .625), 4.5vw, calc(2.4rem * .625));
		margin-top: calc(2.3rem * .625);
		margin-bottom: calc(1.5rem * .625);
	}

	p {
		font-size: clamp(calc(1.8rem * .625), 3.5vw, calc(2rem * .625));
		margin-bottom: calc(2.5rem * .625);
		font-weight: 500;
	}
}

	.ways-to-redeem--headline {
		font-size: clamp(calc(2.2rem * .625), 4.5vw, calc(4rem * .625));
		font-weight: 500;
		margin-bottom: 10px;
		text-align: center;
	}

	.ways-to-redeem--description { 
		font-size: calc(2rem * .625); 
		font-weight: 500; 
		margin: 0 auto 125px; 
		max-width: 725px;
		text-align: center;
		width: 100%; 
	}

	.ways-to-redeem .row--2 { gap: 45px;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.ways-to-redeem--content h3 { 
		font-size: clamp(calc(2rem * .625), 4.5vw, calc(3.2rem * .625)); 
		font-weight: 400; 
		margin-bottom: 35px; 
	}
	
	.ways-to-redeem--content p { 
		font-size: calc(1.8rem * .625); 
		margin-bottom: 24px; 
	}

	.ways-to-redeem .step-progress--item {
		font-size: calc(1.8rem * .625);
	}

	.ways-to-redeem--media {
		height: auto;
		margin: 0 auto;
		max-width: 440px;
		width: 100%;
	}

	.ways-to-redeem--points {
		display: grid;
		gap: 8px;
		justify-content: center;
		padding: 30px 0;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

	.ways-to-redeem--points::after {
		background-color: var(--color-blue-light);
		border-radius: 50%;
		content: '';
		display: block;
		height: 345px;
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		top: 0;
		width: 345px;
		z-index: -1;
	}

.business-checking {
	background-color: var(--color-gray-1);
	border-radius: 3px;
	border: 4px solid var(--color-blue-dark);
	max-width: 430px;
	width: 100%;
}	

	.business-checking--head {
		background-color: var(--color-white);
		border-bottom: 1px solid var(--color-gray-2);
		color: var(--color-blue-dark);
		font-size: calc(1.5rem * .625);
		font-weight: 700;
		padding: 10px 15px;
		text-transform: uppercase;
	}

	.business-checking--content {
		display: grid;
		gap: 24px;
		grid-template-columns: repeat(1, 1fr auto 1fr);
		padding: 4px 15px 24px;
	}

	.business-checking--number {
		border-bottom: 1px solid var(--color-gray-3);
		color: var(--color-blue-dark);
		font-family: var(--font-secondary);
		font-size: clamp(calc(3rem * .625), 4.5vw, calc(4rem * .625));
		font-weight: 500;
		line-height: 1;
		margin-bottom: 10px;
		padding: 15px 0 20px;
	}

	.business-checking--number span {
		display: block;
		font-size: calc(2.5rem * .625);
		max-width: 125px;
		text-align: center;
		text-decoration: line-through;
		width: 100%;
	}

	.business-checking--description {
		color: var(--color-gray-5);
		font-size: clamp(calc(1.3rem * .625), 3.5vw, calc(1.5rem * .625));
		font-weight: 700;
		text-transform: uppercase;
		text-wrap: balance;
	}

	.business-checking--icon {
		align-self: center;
		height: auto;
		max-width: 18px;
		width: 100%;
	}

	.accordion .business-checking--number { color: var(--color-gray-5); }
	.accordion .business-checking--content { padding: 0; }
	.accordion .business-checking--conversion:nth-child(3) { margin-top: -25px; }

.tiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

	.tile {
		background-color: var(--color-white);
		border-radius: 3px;
		border: 1px solid var(--color-gray-2);
		border-bottom-color: var(--color-blue);
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.18);
		margin: 0 8px 15px;
		padding: 60px 30px;
		text-align: center;
		width: 31%;
	}

	.title--content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 80px);
	}

	.tile p {
		margin-bottom: 20px;
	}

	.tile--icon {
		height: auto;
		margin: 0 auto 25px;
		width: 55px;
	}

	.tile--title {
		font-weight: 400;
		text-wrap: balance;
	}

.tiles-container {
	margin: 0 auto;
	max-width: 1200px;
	padding: 25px 0 var(--padding-bottom);
	position: relative;
	width: 90%;
}

	.managing-your-account .tiles-container {
		padding-top: 0;
	}

	.tiles-container .tile {
		padding: 40px 30px 25px;
	}

.tagline-container {
	margin: 0 auto 60px;
	padding: 50px 0;
	width: 90%;
}

	.tagline {
		height: auto;
		display: block;
		margin: 0 auto;
		max-width: 475px;
		width: 100%;
	}

.terms {
	margin: 0 auto;
	max-width: 1000px;
}

	.terms > p {
		font-family: Helvetica, Arial, sans-serif;
		font-size: calc(1.3rem * .625);
		line-height: 1.3em;
		margin: 0 0 2em 1em;
	}

	.terms--content {
		list-style: decimal;
		padding-bottom: 50px;
	}

	.terms--link {
		background: url(../img/icon-arrow-gray.svg) no-repeat;
		background-position: 0 5px;
		background-size: 5px;
		color: var(--color-gray-6);
		display: block;
		font-weight: 500;
		margin-bottom: 1em;
		padding-left: 15px;
		text-decoration: none;
	}

	.terms--link:focus, .terms--link:hover { color: var(--color-gray-6); text-decoration: underline; }

	.terms--content li {
		font-family: Helvetica, Arial, sans-serif;
		font-size: calc(1.3rem * .625);
		line-height: 1.3em;
		margin: 0 0 1em 1em;
	}

	.terms--content p { font-size: calc(1.2rem * .625); margin-bottom: 1em;}
	.terms--content a { color: var(--color-blue); }

	.terms--content .list {
		list-style-position: inside;
		list-style-type: decimal;
		margin-bottom: 1em;
	}

	.terms--content .list li { font-size: calc(1.2rem * .625); margin-bottom: .5em;}

details summary::-webkit-details-marker {
	display: none;
}

details {
	background-color: var(--color-gray-1);
	width: 100%;
}

	details summary {
		align-items: center;
		border-top: 1px solid var(--color-gray-2);
		color: var(--color-blue);
		content: 'See requirements';
		cursor: pointer;
		display: flex;
		list-style: none;
		padding: 8px 15px;
		transition: all 0.2s ease-out;
		width: 100%;
	}

	details summary::before {
		color: var(--color-blue);
		content: 'See requirements';
	}

	details[open] summary::before {
		content: 'Hide requirements';
	}

	details summary::after {
		color: var(--color-blue);
		content: '+';
		font-size: calc(2.5rem * .625);
		line-height: 0;
		position: absolute;
		right: 15px;
		transform-origin: center;
		transition: 200ms linear;
	}

	details[open] summary::after {
		content: '-';
		font-size: calc(3rem * .625);
	}

	details[open] summary {
		background-color: var(--color-white);
		content: 'Hide requirements';
	}

	details[open] .way-to-cost--requirements {
		border-top: 1px solid var(--color-gray-2);
		padding: 25px 15px;
	}

.step-progress {
	list-style: none;
	margin-bottom: 30px;
	position: relative;
}

	.step-progress--item {
		align-items: center;
		counter-increment: list;
		display: grid;
		font-size: calc(1.6rem * .625);
		gap: 15px;
		grid-template-columns: repeat(2, auto);
		justify-content: flex-start;
		position: relative;
	}

	.step-progress--item:not(:last-child) {
		padding-bottom: 20px;
	}

	.step-progress--item::before {
		background-color: var(--color-blue-dark);
		border-radius: 50%;
		color: var(--color-white);
		content: counter(list);
		display: inline-block;
		font-size: calc(2rem * .625); 
		font-weight: 700;
		height: 39px;
		line-height: 1.9;
		text-align: center;
		width: 40px;
	}

.link-arrow {
	font-weight: 500;
}

	.link-arrow::after {
		background-image: url(../img/icon-arrow.svg?v=0);
		background-position-y: 1px;
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		display: inline-block;
		height: 14px;
		position: absolute;
		right: -20px;
		top: 2px;
		transition: all .125s ease;
		width: 14px;
	}
	.link-arrow--white { color: var(--color-white); }
	.link-arrow--white:hover { color: var(--color-white); }
	.link-arrow--white::after { background-image: url(../img/icon-arrow-white.svg?v=0); }

	.link-arrow:focus::after, .link-arrow:hover::after { right: -25px; }

	.link-arrow--big { font-size: calc(1.8rem * .625); }
	.link-arrow--big::after { top: 5px; }

.tab {
	z-index: 1;
}	

	.tab--headline {
		color: var(--color-gray-6);
		font-size: clamp(calc(2.2rem * .625), 4.5vw, calc(4rem * .625));
		font-weight: 400;
		margin-bottom: 40px;
		text-align: center;
	}

	.tab--container {
		background-color: var(--color-white);
		border-radius: 3px;
		border: 1px solid var(--color-gray-2);
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.18);
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0 auto;
		max-width: 995px;
		padding: 2px;
		width: 100%;
	}

	.tab--links {
		background-color: var(--color-gray-1);
		display: flex;
		flex-direction: column;
		width: 40%;
	}

	.tab button {
		align-items: center;
		background-color: inherit;
		border: none;
		color: var(--color-gray-6);
		cursor: pointer;
		display: flex;
		font-family: var(--font-secondary);
		font-size: calc(2.5rem * .625);
		font-weight: 400;
		line-height: 1.2;
		outline: none;
		padding: 47px 80px 47px 30px;
		position: relative;
		text-align: left;
		text-wrap: balance;
		transition: all 0.15s ease-out;
		width: 100%;
	}

	.tab button:not(:last-child) {
		border-bottom: 1px solid rgba(200, 201, 199, .5);
	}

	.tab button svg {
		fill: var(--color-blue);
		height: 48px;
		margin-right: 20px;
		width: 48px;
	}

	.tab button:hover {
		background-color: var(--color-blue);
	}

	.tab button:focus,
	.tab button:hover,
	.tab button.is-active {
		background-color: var(--color-blue);
		color: var(--color-white);
	}

	.tab button.is-active::after {
		border-bottom: 18px solid transparent;
		border-left: 20px solid var(--color-blue);
		border-top: 18px solid transparent;
		content: '';
		display: block;
		height: 0;
		position: absolute;
		right: -20px;
		transition: all 0.2s ease-out;
		top: calc(50% - 18px);
		width: 0;
	}

	.tab button:focus svg,
	.tab button:hover svg,
	.tab button.is-active svg {
		fill: var(--color-white);
	}

	.tab--content {
		align-self: center;
		padding: 30px 10px 30px 45px;
		width: 60%;
	}

	.tab--content h3 {
		color: var(--color-blue);
		display: inline-block;
		font-family: var(--font-primary);
		font-size: calc(1.5rem * .625);
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 15px;
		text-align: center;
		text-transform: uppercase;
	}

	.tab--content p {
		margin-bottom: 15px;
	}

	.tab--content .step-progress {
		margin-bottom: 15px;
	}

	.tab--content .step-progress--item:not(:last-child) {
		padding-bottom: 15px;
	}

	.tab--content .step-progress--item::before {
		font-size: calc(1.5rem * .625);
		height: 23px;
		line-height: 1.6;
		width: 24px;
	}
	

.download-app {
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
}

	.download-app--link:first-child {
		margin-right: 15px;
	}

.subheadline {
	color: var(--color-blue-dark);
	display: inline-block;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.row--2 {
	display: grid;
	gap: 110px;
	grid-template-columns: 40fr 60fr;
}

.row--2-reverse {
	grid-template-columns: 60fr 40fr;
}

.dividor {
	background-color: var(--color-gray-3);
	height: 1px;
	margin: 64px 0;
	width: 100%;
}

.text--big { font-size: calc(1.8rem * .625); font-weight: 400; }
.text--small { font-size: calc(1.2rem * .625); }
.text--blue { color: var(--color-blue-dark); }
.text--blue-light { color: var(--color-blue); }
.text-font-bold { font-weight: 700; }
.text-font-medium { font-weight: 500; }

.center { margin: 0 auto; text-align: center; }

.list-disc { list-style: disc; list-style-position: inside; margin-bottom: 15px; }
.list-disc li { text-indent: -22px; padding-left: 22px; }

.display-none { display: none; }
.display-block { display: block; }
.display-flex { display: flex; }

.no-border { border: 0 !important; }
.no-margin { margin: 0 !important; }
.margin-bottom-1 { margin-bottom: 1px; } 
.no-padding { padding: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }

.nowrap { white-space: nowrap; }

.hidden-mobile { display: grid; }
.hidden-tablet { display: grid; }
.hidden-desktop { display: none; }

em {
	font-style: normal;
	white-space: nowrap;
}


@media all and (max-width: 1400px) {
	.hero--flourish { width: 120%; }
}

@media all and (max-width: 1240px) {
	.hero-0--content { max-width: 570px; }
	.site-header--container { padding: 0 20px; }
	.nav--toggle-close { right: 20px; }
}

@media all and (max-width: 1160px) {
	.bg-flourish-gray::after, .bg-flourish-white::after { background-position: 10% 10%; }

	.hero--card { right: 85px; top: 105px; }

	.hero-0--media { right: -65px; top: -15px; }
	.hero-0--device { max-width: 180px; }
	.hero-0--card { max-width: 145px; }
	.hero-0--logo { margin-left: -10px; }
	.hero-0--content { margin-bottom: 40px; margin-left: 0; padding: 0; }

	.hero-1--content { padding: 0; width: 65%; }
	.hero-1--legal-note { color: var(--color-gray-5); margin-bottom: 20%; }

	.using-your-business-debit-card .hero-1--media, .faqs .hero-1--media { top: 60px; }

	.category-container { padding: 0; }
	.category--item-header { padding: 15px 10px; }

	.way-to-pay--content { display: flex; margin-bottom: 25px; margin-left: 50%; gap: 15px; overflow-x: scroll; scroll-snap-type: x mandatory; transform: translateX(-50%); width: 100vw; }
	.way-to-pay--item { scroll-snap-align: center; flex: 0 0 min(100%, 288px); margin: 0 10px; width: min(100%, 288px); }

	.banner--2-col { gap: 25px; grid-template-columns: repeat(1, 1fr); }
	
	.write-checks .col-1 { padding: 0 40px; }

	.use-card--image-circle { height: 222px; width: 222px; }
	.use-card--image img { max-width: 168px; }

	.use-with-confidence { padding-top: calc(var(--padding-top) - 30px); }

	.use-with-confidence--rectangle { display: none; }

	.bbp-app .col--2:first-child { top: 0; }
	.bbp-app--screen-0 { margin-bottom: -130px; }
	.bbp-app--screen-1 { bottom: -105px; left: -52px; width: 240px; }
	.bbp-app--content { margin-bottom: 60px; max-width: 100%; }
	.bbp-app--item { max-width: 100%; }
	
	.tile { width: 47%; }

	.tab--container { flex-direction: column; }
	.tab--links { display: flex; flex-direction: row; width: 100%; }
	.tab button { font-size: calc(1.8rem * .625); text-align: center; padding: 20px; width: 33.333%; }
	.tab button:not(:last-child) { border-bottom: 0; border-right:  1px solid rgba(200, 201, 199, .5); }
	.tab button.is-active::after { bottom: -22px; border-bottom-width: 15px; border-left-width: 15px; border-top-width: 15px; left: 0; margin: 0 auto; right: 0; top: initial; transform: rotate(90deg);  }
	.tab button svg { display: none; }
	.tab button { margin: 0 auto; }
	.tab--content { padding: 30px 20px; width: 100%; }

	.faq--headline { font-size: calc(3.2rem * .625); }
	.faq--text { padding-left: 0; padding-right: 20px; }

	.row--2, .ways-to-earn .row--2 { gap: 20px; grid-template-columns: repeat(1, 100%); }
	.col-reverse .col--2:first-child { order: 2; }
	.col-reverse  .col--2:last-child { order: 1; }

	.ways-to-redeem .row--2 { gap: 20px; grid-template-columns: repeat(1, 100%); }

	.hidden-tablet { display: none; }
	.way-to-pay .hidden-desktop { display: grid; }
}

@media all and (max-width: 767px) {
	.hero--flourish { left: -20px; top: 60px; width: 160%; }

	.site-header--card { max-width: 36px; }
	.site-header--logo { max-width: 80px; }

	.section-content { padding: calc(var(--padding-top) - 30px) 0 calc(var(--padding-bottom) - 30px); }

	.bg-flourish-gray::after, .bg-flourish-white::after { background-size: cover; height: 220px; background-position: center right; }

	.hero--card { right: -40px; top: 12px;  }

	.hero-0 { background: none; padding: 30px 0; }
	.hero-0--rectangle { left: initial; right: 49px; top: -680px; }
	.hero-0--media { display: none; }
	.hero-0--card { max-width: 110px; }
	.hero-0--content { margin: 0 0 40px; max-width: 300px; width: 100%; }
	.hero-0--legal-note { display: none; }
	.hero-0--logo { margin-bottom: 35px; max-width: 120px; }

	.hero-1 { padding: 55px 0 120px; }
	.hero-1--rectangle { left: initial; right: -20px; top: -980px; }
	.hero-1--media { right: -50px; top: 15px; }
	.hero-1--legal-note { margin-bottom: 5px; }
	.hero-1--device, .hero-1--card { max-width: 110px; }
	.hero-1--content { width: 85%; }

	.earning-and-redeeming-points .hero-1--rectangle { top: -950px; }
	.earning-and-redeeming-points .hero-1--media { top: 50px; }

	.faqs .hero-1--device { display: none; }

	.category--row { flex-direction: column; }
	.category--col { width: 100%; }
	.category--item { margin-bottom: 15px; }
	.category--item-header::after { right: 10px; }
	.category--item-icon { margin-right: 10px; }
	.category--item-content { display: none; }
	.category--item-title { font-size: calc(1.6rem * .625); }
	
	.bbp-app--logo { margin-left: 0; max-width: 160px; }
	.bbp-app--links { flex-direction: column; gap: 20px; justify-content: flex-start; }
	.bbp-app--link:first-child { margin-bottom: 15px; margin-right: 0; }

	.funding-benefits { flex-direction: column; }
	.funding-benefits--item { width: 100%; }
	.funding-benefits--item:not(:last-child) { margin-bottom: 40px; padding-bottom: 40px; }
	.funding-benefits--item:not(:last-child):after { bottom: 0; height: 1px; top: initial; width: 100%; }

	.making-payments { flex-direction: column; }
	.making-payments--item { width: 100%; }
	.making-payments--item:not(:last-child) { margin-bottom: 40px; }
	.making-payments--headline { font-size: calc(1.8rem * .625); }
	.making-payments--icon { height: 50px; width: 50px; }
	.making-payments--icon img { width: 35px; }

	.way-to-pay--headline { font-size: calc(2.5rem * .625); }
	.way-to-pay--title { font-size: calc(2.2rem * .625); }

	.setup-card { margin-bottom: 80px; }

	.use-card { flex-direction: column; }
	.use-card--image { margin-bottom: 60px; padding-top: 0; width: 100%; }
	.use-card--content { width: 100%; }
	.use-card--icon img { margin-right: 25px; }

	.use-with-confidence { padding: calc(var(--padding-top) - 30px) 0 25px; }

	.ways-to-redeem--description { font-size: calc(1.8rem * .625); margin-bottom: 60px; }
	.ways-to-redeem--content p, .ways-to-redeem .step-progress--item { font-size: calc(1.6rem * .625); }

	.dividor { margin: 40px 0; }
	
	.tiles{ flex-direction: column; }
	.tile { margin: 0 0 25px; padding: 50px 30px; width: 100%; }

	.link-arrow--big { font-size: calc(1.6rem * .625); }
	.link-arrow--big::after { top: 2px; }

	.tab--headline { font-size: calc(2.5rem * .625); }

	.faq-container .faq { display: block; margin-bottom: 30px; }
	.faq--headline { font-size: calc(2.5rem * .625); }
	.faq-container .faq--content { padding-bottom: 30px; }

	.tagline-container { padding: 30px 0; }

	.accordion-plus .accordion--trigger { font-size: calc(1.6rem * .625); }

	.justify-content-xs-around { justify-content: space-around;  }
	.flex-xs-column { flex-direction: column; }
	.flex-xs-column-reverse { flex-direction: column-reverse; }

	.text--big { font-size: calc(1.6rem * .625); }

	.hidden-mobile { display: none; }
	.hidden-desktop { display: grid; }
}

@media all and (max-width: 500px) {
	.nav--links { max-width: 100%; }
	.nav--toggle-open, .nav--toggle-close { width: 120px; }
}