
:root {
	--color-nav: #1c2841;
	--vertical-space: clamp(40px, 7vw, 120px);
}

html {
	height: 100%;
}

body {
	background-color: var(--color-dark-blue);
	color: var(--color-white);
	font-size: calc(1.5rem * .625);
	font-family: var(--font-primary);
	line-height: 1.4;
	margin: 0; 
}

h1 {
	color: var(--color-white);
	font-family: var(--font-secondary-amex);
	font-size: clamp(calc(4rem * .625), 3.5vw, calc(5rem * .625));
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
}

h2 {
	font-family: var(--font-secondary-amex);
	font-size: clamp(calc(3.2rem * .625), 3.5vw, calc(4rem * .625));
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	margin-bottom: 1em;
}

h3 {
	font-size: calc(1.6rem * .625);
	font-weight: var(--font-weight-medium);
	margin-bottom: 1em;
}

h4 {
	font-size: calc(1.8rem * .625);
	font-weight: var(--font-weight-medium);
}

a,
p a {
	color: var(--color-white);
	text-decoration: none;
}
	p a:focus,
	p a:hover {
		color: var(--color-white);
		text-decoration: underline;
	}

[hidden]{
	visibility: hidden;
}

.axp-global-header__dls-module__module___1_EeR .axp-global-header__dls-module__widthFull___3ApM9 {
	background-color: var(--color-white);
}

/* Global */
.display-block {
	display: block;
}

.sr-only {
	display: block;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: fixed;
	width: 1px;
}

.text-center {
	text-align: center;
}

.align-headline {
	text-align: center;
}

.text-gold {
	color: var(--color-gold);
}

.fineprint {
	font-family: var(--font-primary-amex);
	font-size: calc(1.2rem * .625);
}

.cta-text {
	background: url(../gold/img/icon-arrow-horizontal.svg?v=0) no-repeat 100% 50%;
	background-size: 6px;
	color: var(--color-white);
	font-size: calc(1.5rem * .625);
}

	.cta-text:focus,
	.cta-text:hover {
		text-decoration: none;
	}

.btn {
	padding: 1.25em 2em;
	text-align: center;
	transition: color .2s, background-color .2s, border-color .2s, opacity .2s;
	width: 239px;
}

.btn:active,
.btn:focus,
.btn:hover {
	text-decoration: none;
}

.eyebrow {
	color: var(--color-gold);
	display: block;
	font-family: var(--font-primary);
	font-size: calc(1.4rem * .625);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

.bg-pattern {
	background: url(../gold/img/wspattern-gold.svg?v=0), linear-gradient(0deg, rgba(0, 16, 46, 0.95) 0%, rgba(0, 16, 46, 0.95) 100%), var(--color-white);
	background-position: center -39%, 0 0;
	background-size: 77%;
	margin-bottom: var(--vertical-space);
}

.no-margin {
	margin: 0 !important;
}

.margin-bottom-space {
	margin-bottom: var(--vertical-space);
}

.show-mobile { 
	display: none; 
}

.flag {
	border: 1px solid var(--color-gold);
	border-radius: 17px;
	color: var(--color-gold);
	font-size: calc(1.3rem * .625);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	padding: 4px 9px;
	text-align: center;
	text-transform: uppercase;
}

/* Navigation */
.card-nav--container {
	position: sticky;
	top: 0;
	z-index: 3;
}

	.card-nav {
		align-items: center;
		background-color: var(--color-nav);
		border-radius: 2px;
		height: 45px;
		margin-top: 10px;
		padding: 0 15px 0 5px;
		width: 90%;
	}

	.cn-card { 
		background-image: url(../gold/img/card-nav.png?v=1);
		color: var(--color-white);
		font-family: var(--font-primary-amex);
		font-size: calc(1.4rem * .625);
		font-weight: var(--font-weight-medium);
		height: 45px;
		max-width: 70%;
	}

	.cn-card:active,
	.cn-card:focus,
	.cn-card:hover {
		color: var(--color-white);
		text-decoration: none;
	}

	.nav-container { 
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: space-between;
		max-width: 550px;
		transform: translateX(-110px);
		position: relative;
	}

	.nav-link-applyNow { position: absolute !important; right: -105px; }

	.nav-links { 
		align-items: center; 
		align-self: center; 
		display: flex;
		flex: 1;
		justify-content: space-between;
		margin-right: 40px;
		position: relative; 
		z-index: 6; 
	} 

	.nav-link { 
		color: var(--color-white); 
		display: flex; 
		flex-direction: column; 
		font-size: calc(1.5rem * .625); 
		font-weight: var(--font-weight-medium); 
		height: 45px; 
		justify-content: center; 
		line-height: 1.3em; 
		position: relative; 
		text-decoration: none; 
	}

	.cn-explore {
		background: none;
		color: var(--color-white); 
		font-size: calc(1.5rem * .625); 
		font-weight: var(--font-weight-medium);
		padding: 0;
	}

	.cn-explore, 
	.nav-close { 
		text-transform: capitalize;
	}

	.explore-close {
		background: none;
		border-radius: 5px;
		color: var(--color-white); 
		font-weight: var(--font-weight-medium);
		height: 45px;
		justify-content: flex-end;
	}

	.nav-close {
		cursor: pointer;
		font-size: calc(1.5rem * .625); 
		height: 45px;
		margin-right: 15px;
		transition: transform .35s ease-in-out; 
	}

	.nav-link:focus,
	.nav-link:hover,
	.cn-explore:focus,
	.cn-explore:hover {
		color: inherit;
		text-decoration: none;
	}

	.explore-links {
		display: none;
		max-width: 355px;
		overflow-y: auto;
		transform: translateY(0);
		transition: opacity .2s, display .2s;
		z-index: -1;
		width: 300px;
		top: -7px;
	}

	.explore-links-open {
		border: 0;
		display: block;
		transform: translateY(50px);
	}

	.explore-link:nth-child(-n+4) {
		background-color: var(--color-nav);
		background-image: none;
		border-color: var(--color-gold);
		font-family: var(--font-primary);
		font-size: calc(1.5rem * .625);
		font-weight: var(--font-weight-medium);
		position: relative;
	}

	.explore-link:nth-child(-n+4)::after {
		background-color: var(--color-gold);
		bottom: 0;
		content: '';
		display: inline-block;
		height: 12px;
		margin: auto;
		-webkit-mask: url(../gold/img/icon-arrow-horizontal.svg?v=0) no-repeat center;
		mask: url(../gold/img/icon-arrow-horizontal.svg?v=0) no-repeat center;
		position: absolute;
		right: 20px;
		top: 0;
		width: 10px;
	}

	.explore-link-external {
		background-size: 15px;
		height: 44px
	}

/* Homepage */
.hero {
	display: grid;
	margin-block: clamp(10px, 4.5vw, 75px) clamp(20px, 5.4vw, 100px);
	position: relative;
}

	.hero--bg {	
		aspect-ratio: 1440/650;
		background-color: var(--color-dark-blue);
		background-image: url(../gold/img/hero-home-d.jpg?v=1);
		background-position: 100% 0;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		max-width: 1800px;
		width: 100vw;
	}

	.hero--content {
		align-self: center;
		position: absolute;
		z-index: 2;
	}

	.hero--image {
		height: auto;
		margin-bottom: 20px;
		max-width: 300px;
		width: 100%;
	}

	.hero--headline {
		font-size: clamp(calc(4rem * .625), 3.5vw, calc(6.5rem * .625));
		margin-bottom: .4em;
	}

	.hero--text {
		font-size: clamp(calc(1.8rem * .625), 1.5vw, calc(2.5rem * .625));
		line-height: 1.3;
		max-width: 385px;
		text-wrap: balance;
		width: 100%;
	}

	.hero--disclaimer {
		font-size: calc(1.2rem * .625);
	}

.card-benefits {
	display: grid;
	gap: clamp(20px, 2.4vw, 40px);
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: var(--vertical-space);
}

	.card-benefit {
		outline: 1px solid var(--color-gold);
		cursor: pointer;
		position: relative;
	}

	.card-benefit:focus,
	.card-benefit:hover {
		outline-width: 4px;
		text-decoration: none;
	}

	.card-benefit--container { 
		background: linear-gradient(0deg, rgba(0, 16, 46, 0.95) 0%, rgba(0, 16, 46, 0.95) 100%), var(--color-white);
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		text-decoration: none;
	}

	.card-benefit--image {
		padding-bottom: 55%;
		position: relative;
	}

	.card-benefit--image img {
		height: 100%;
		object-fit: cover;
		position: absolute;
		width: 100%;
	}

	.card-benefit--content {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.card-benefit--head {
		border-bottom: 1px solid var(--color-gold);
		font-size: calc(2rem * .625);
		font-weight: var(--font-weight-medium);
		line-height: 1.1;
		padding: 15px 20px;
		position: relative;
		width: 100%;
	}

	.card-benefit--head::after {
		content: '';
		display: inline-block;
		background-image: url(../gold/img/icon-arrow-filled.svg?v=0);
		background-position: center;
		background-repeat: no-repeat;
		bottom: 0;
		height: 25px;
		margin: auto;
		position: absolute;
		right: 20px;
		top: 0;
		width: 25px;
	}

	.card-benefit--footer {
		background-color: var(--color-gray-lighter);
		font-weight: var(--font-weight-default);
		padding: 20px;
	}

.quick-steps--container {
	display: grid;
	gap: clamp(40px, 3.5vw, 80px);
	grid-template-columns: repeat(2, 1fr);
	margin-block: var(--vertical-space);
	width: 100%;
}

	.quick-steps--image {
		background-image: url(../gold/img/quick-steps-d.jpg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.quick-steps--subheadline {
		display: block;
		font-family: var(--font-primary-amex);
		font-size: calc(1.8rem * .625);
	}

	.quick-steps {
		display: grid;
		margin-inline: auto;
		max-width: 400px;
		position: relative;
		width: 100%;
	}
	
	.quick-steps::after,
	.quick-steps::before {
		background: linear-gradient(0deg, rgba(0, 16, 46, 0.90) 0%, rgba(0, 16, 46, 0.90) 100%), var(--color-white);
		content: '';
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 0;
	}
	
	.quick-steps::after {
		bottom: 0;
		height: 90%;
		width: 2px;
	}
	
	.quick-steps::before {
		height: 2px;
		max-width: 300px;
		width: 100%;
	}
	
	.quick-step {
		background: linear-gradient(0deg, rgba(0, 16, 46, 0.90) 0%, rgba(0, 16, 46, 0.90) 100%), var(--color-white);
		outline: 2px solid var(--color-gold);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
		color: var(--color-black-light);
		cursor: pointer;
		display: block;
		padding: 20px 10px 35px;
		position: relative;
		text-align: center;
		text-wrap: balance;
		transition: all .2s ease-in-out;
		z-index: 1;
	}
	
	.quick-step::after,
	.quick-step::before {
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		position: absolute;
	}
	
	.quick-step::before {
		background-image: url(../gold/img/icon-external-link.svg?v=0);
		height: 16px;
		right: 10px;
		top: 10px;
		width: 16px;
	}
	
	.quick-step::after {
		background-image: url(../gold/img/icon-check-circle.svg?v=0);
		bottom: -24px;
		height: 48px;
		left: 0;
		margin: 0 auto;
		right: 0;
		width: 48px;
	}

	.quick-step--alt::before {
		display: none;
	}
	
	.quick-step h3 {
		font-family: var(--font-primary);
		font-weight: var(--font-weight-bold);
		margin-bottom: .3em;
	}

	.quick-step p {
		font-size: calc(1.4rem * .625);
	}
	
	.quick-step:not(:last-child) {
		margin-bottom: 65px;
	}
	
	.quick-step:focus,
	.quick-step:hover {
		outline-width: 3px;
		color: inherit;
		text-decoration: none;
	}

.not-member {
	background: url(../gold/img/wspattern-gold.svg?v=0), linear-gradient(0deg, rgba(0, 16, 46, 0.95) 0%, rgba(0, 16, 46, 0.95) 100%), var(--color-white);
	background-position: center, 0 0;
	margin-top: 60px;
	padding-bottom: 25px;
} 

	.not-member--container { 
		align-items: center;
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
	}

	.not-member--cards {
		height: auto;
		margin-top: -60px;
		max-width: 300px;
		width: 100%;
	}

	.not-member--headline {
		margin-bottom: 0;
	}

	.not-member--text {
		font-size: clamp(calc(1.8rem * .625), 4vw, calc(2.5rem * .625));
	}

/* Explore Benefits */
.benefits {
	margin-bottom: clamp(40px, 3.5vw, 60px);
}

	.benefits--alt {
		margin-bottom: var(--vertical-space);
	}

	.benefits--tiles {
		display: grid;
		gap: 60px;
		grid-template-columns: repeat(2, 1fr);
		margin-top: 18%;
	}

	.benefits--tile {
		background: linear-gradient(0deg, rgba(0, 16, 46, 0.95) 0%, rgba(0, 16, 46, 0.95) 100%), var(--color-white);
		border: 1px solid var(--color-gold);
		display: grid;
		grid-template-columns: 1fr;
		justify-content: space-between;
	}

	.benefits--tile-alt {
		padding-bottom: 30px;
	}

	.benefits--content {
		margin-top: -30%;
		padding-inline: 20px;
	}

	.benefits--content-image {
		aspect-ratio: 398/248;
		background-repeat: no-repeat;
		background-size: contain;
		margin-bottom: 30px;
	}

	.benefits--content-txt {
		padding-inline: 20px;
	}

	.benefits--content-txt h3 {
		align-items: center;
		display: grid;
		font-size: clamp(calc(2rem * .625), 2.1vw, calc(2.2rem * .625));
		gap: 10px;
		grid-template-columns: repeat(2, auto);
		justify-content: flex-start;
		margin-bottom: .6em;
	}

	.benefits--content-txt p {
		font-weight: var(--font-weight-default);
	}

	.benefits--footer {
		align-self: flex-end;
		background: none;
		background-color: var(--color-gold);
		color: var(--color-dark-blue);
		font-size: calc(1.5rem * .625);
		height: 50px;
		margin-top: 30px;
		padding-inline: 40px;
		width: 100%;
	}

	.benefits--footer::after {
		content: '';
		display: inline-block;
		background-image: url(../gold/img/icon-arrow-horizontal-dark.svg?v=0);
		background-repeat: no-repeat;
		width: 6px;
		height: 10px;
		margin-left: 10px;
	}

	.benefits--footer:focus,
	.benefits--footer:hover {
		color: var(--color-dark-blue);
		text-decoration: underline;
	}

.benefits--tile-large .benefits--content {
	display: grid;
	/* grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0; */
}

	.benefits--tile--logos {
		height: auto;
		margin-bottom: 25px;
		max-width: 550px;
		width: 100%;
	}

	.benefits--tile-large .benefits--content-image {
		aspect-ratio: 398/278;
	}

.benefits-keep-coming {
	margin-bottom: var(--vertical-space);
}

	.tab-accordion--container {
		align-items: flex-start;
		display: grid;
		gap: 64px;
		grid-template-columns: 30fr 70fr;
		justify-content: space-between;
		position: relative;
	}

	.tab-controls {
		display: none;
	}

	.tab-controls .tab-item {
		width: 100%;
	}
	
	.tab-section {
		display: block;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
	}

	.tab-item {
		display: block;
		position: relative;
		width: 100%;
	}

	.tab-item .tab-title {
		background-color: var(--color-transparent);
		border: none;
		border-left: 1px solid transparent;
		color: var(--color-white);
		cursor: pointer;
		display: block;
		font-size: calc(1.8rem * .625);
		font-weight: var(--font-weight-medium);
		padding: 10px 16px;
		position: relative;
		text-align: left;
		width: 100%;
	}

	.tab-item .tab-title::after {
		background-image: url(../gold/img/icon-arrow-horizontal.svg?v=0);
		background-repeat: no-repeat;
		content: '';
		display: inline-block;
		height: 13px;
		margin-left: 10px;
		transition: all .125s ease;
		width: 10px;
	}

	div.all-terms.hideMe .terms-link::before {
		transform: rotate(-90deg);
	}

	.tab-item .tab-title:hover, .tab-item .tab-title.is-active {
		background: linear-gradient(0deg, rgba(0, 16, 46, 0.90) 0%, rgba(0, 16, 46, 0.90) 100%), var(--color-white);
		border-left: 1px solid var(--color-gold);
		/* background: #5A616D; */
		color: var(--color-white);
		text-decoration: none;
	}

	.tab-item .tab-title:hover {
		border-left: 1px solid transparent;
	}


	.tab-item .tab-title.is-active:hover {
		border-left: 1px solid var(--color-gold);
	}

	.tab-item .tab-content {
		box-sizing: border-box;
		display: none;
		height: 0;
		left: 0;
		max-width: 650px;
		opacity: 0;
		position: relative;
		transition: 0.4s ease;
		visibility: hidden;
		width: 100%;
	}

	.tab-item .tab-content.is-active {
		display: block;
		height: auto;
		opacity: 1;
		visibility: visible;
	}

	.tab-content--group h3 {
		font-size: clamp(calc(1.8rem * .625), 2.1vw, calc(2.2rem * .625));
	}

	.tab-content--group p { 
		font-weight: var(--font-weight-default);
	}

	.sidebar {
		left: 0;
		position: sticky;
		top: 10%;
	}

/* Earn Rewards */
.earn-points {
	display: inline-grid;
	gap: 20px;
	grid-template-columns: repeat(2, calc(50% - 20px));
	justify-content: space-between;
	margin-bottom: var(--vertical-space);
	width: 100%;
}

	.earn-points-alt {
		align-items: center;
		margin-bottom: var(--vertical-space);
	}

	.earn-points--image {
		aspect-ratio: 1/1;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.earn-points h3 {
		font-size: calc(5.5rem * .625);
		font-weight: var(--font-weight-bold);
		margin-bottom: .5em;
	}

	.earn-points h3 .text-small {
		font-size: calc(3.5rem * .625)
	}

	.earn-points--item h3 .text-smaller {
		display: block;
		font-size: calc(1.8rem * .625);
		font-weight: var(--font-weight-medium);
		line-height: 1;
	}

	.earn-points p {
		font-weight: var(--font-weight-default);
	}

	.earn-points p a {
		font-weight: var(--font-weight-medium);
		text-decoration: underline;
	}

	.earn-points--item:not(:first-of-type) {
		padding-top: 25px;
	}

	.earn-points--item:not(:last-child) {
		border-bottom: 1px solid var(--color-gold);
		padding-bottom: 35px;
	}

.know-rewards {
	align-items: center;
	display: inline-grid;
	gap: 20px;
	grid-template-columns: repeat(2, calc(50% - 20px));
	justify-content: space-between;
	margin-bottom: var(--vertical-space);
	width: 100%;
}

	.know-rewards--item:not(:last-child) {
		border-bottom: 1px solid var(--color-gold);
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

	.know-rewards--content h3 {
		margin-bottom: 0;
	}

	.know-rewards--title {
		font-size: calc(1.8rem * .625);
		font-weight: var(--font-weight-medium);
		margin-bottom: 1em;
	}

	.know-rewards--content {
		font-weight: var(--font-weight-default);
	}

	.know-rewards--image {
		aspect-ratio: 1/1;
		background-image: url(../gold/img/know-rewards.jpg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
	}

/* Use Card Features */
.payment-options {
	margin-bottom: var(--vertical-space);
}

.payment-options--items {
	display: grid;
	gap: 80px;
	grid-template-columns: repeat(3, 1fr);
}

	.payment-options--image {
		aspect-ratio: 345/245;
		background-repeat: no-repeat;
		background-size: contain;
		margin-bottom: 40px;
	}

	.payment-options--content {
		height: calc(95% - 245px);
		position: relative;
	}

	.payment-options--content h3 {
		font-size: calc(1.8rem * .625);
	}

	.payment-options--content p {
		font-weight: var(--font-weight-default);
	}

	.payment-options--content a {
		font-weight: var(--font-weight-medium);
		text-decoration: underline;
	}

	.payment-options--content- p:not(:last-child) {
		margin-bottom: 1em;
	}

.send-and-split {
	align-items: center;
	display: grid;
	gap: clamp(40px, 3.5vw, 50px);
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: var(--vertical-space);
	width: 100%;
}

	.send-and-split--image {
		aspect-ratio: 1/1;
		background-image: url(../gold/img/send-and-split-d.jpg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.send-and-split--content {
		max-width: 520px;
		width: 100%;
	}

	.send-and-split--logos {
		background-image: url(../img/send-split-gray.png?v=0);
		background-repeat: no-repeat;
		background-size: cover;
		height: 90px;
		width: 360px;
	}

	.send-and-split--head {
		align-items: center;
		display: grid;
		font-size: calc(2rem * .625);
		font-weight: var(--font-weight-medium);
		gap: 8px;
		grid-template-columns: repeat(2, auto);
		justify-content: flex-start;
		margin-bottom: 15px;
	}

	.send-and-split--content .fineprint {
		margin-bottom: 15px;
	}

	.sas-item {
		background-position: 0 0;
		background-size: 42px;
		margin-top: 25px;
		padding-left: 62px;
	}

	.sas-item p {
		font-weight: var(--font-weight-default);
	}

	.icon-send {
		background-image: url(../gold/img/icon-send.svg?v=0);
	}

	.icon-split {
		background-image: url(../gold/img/icon-split.svg?v=0);
	}

.card-features {
	color: var(--color-white);
	margin-bottom: var(--vertical-space);
	padding-block: clamp(40px, 3.5vw, 80px);
	text-align: center;
}

	.card-features--container {
		display: grid;
		gap: 40px;
		grid-template-columns: repeat(3, 1fr);
		padding-bottom: 40px;
		text-align: left;
	}

	.card-features--headline {
		margin-bottom: 40px;
		text-align: center;
	}

	.card-features--item img {
		height: auto;
		margin-bottom: 10px;
		max-width: 42px;
		width: 100%;
	}

	.card-features--item h3 {
		font-size: calc(1.8rem * .625);
		font-weight: var(--font-weight-medium);
		margin-bottom: 15px;
	}

	.card-features--item p:not(:last-child){
		margin-bottom: 10px;
	}

.add-card-member {
	align-items: center;
	display: grid;
	gap: 50px;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: var(--vertical-space);
	width: 100%;
}

	.add-card-member--image {
		aspect-ratio: 1/1;
		background-image: url(../gold/img/add-card-member-d.jpg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.add-card-member--content {
		max-width: 520px;
		width: 100%;
	}

	.add-card-member--cards {
		height: auto;
		margin-bottom: 40px;
		max-width: 200px;
		width: 100%;
	}

	.add-card-membr--headline {
		max-width: 470px;
		width: 100%;
	}

	.add-card-membr--description {
		margin-bottom: 2em;
	}

/* Componentes */
.the-app {
	display: grid;
	gap: clamp(40px, 3.5vw, 80px);
	grid-template-columns: repeat(2, 1fr);
	justify-content: space-between;
	margin-bottom: var(--vertical-space);
	width: 100%;
}

	.the-app--image {
		background-image: url(../gold/img/membership-d.jpg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.the-app--content {
		max-width: 545px;
	}

	.the-app--headline {
		margin-bottom: .5em;
	}

	.the-app--description {
		font-size: calc(1.4rem * .625);
		margin-bottom: 2em;
		max-width: 500px;
		width: 100%;
	}

	.the-app--item {
		display: grid;
		gap: 35px;
		grid-template-columns: 8% 75%;
		margin-bottom: 25px;
	}

	.the-app--icon {
		height: 42px;
		width: 42px;
	}

	.the-app h3 {
		font-family: var(--font-primary-amex);
		font-size: calc(1.6rem * .625);
		font-weight: var(--font-weight-medium);
		margin-bottom: .2em;
	}

	.the-app p {
		font-weight: var(--font-weight-default);
	}

.header {
	border-bottom: 2px solid var(--color-gold);
	margin: 0 auto clamp(40px, 4.5vw, 60px);
	padding-block: clamp(20px, 4.5vw, 30px) 15px;
	width: 90%;
    max-width: 1200px;
}

	.header--headline {
		color: var(--color-gold);
		display: block;
		font-family: var(--font-primary);
		font-size: clamp(calc(1.5rem * .625), 1.2vw, calc(2rem * .625));
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
	}

	.header--desc {
		color: var(--color-white);
		font-family: var(--font-secondary-amex);
		font-size: clamp(calc(4rem * .625), 3.5vw, calc(5rem * .625));
		font-weight: var(--font-weight-medium);
		line-height: 1.2;
	}

	.header--text {
		font-size: calc(1.6rem * .625);
		font-weight: var(--font-weight-medium);
	}

	.homepage .header {
		border: 0;
		margin: 0 auto;
		padding: 0;
	}

.cta-banner {
	align-items: center;
	display: inline-grid;
	gap: clamp(40px, 4.5vw, 80px);
	grid-template-columns: repeat(2, auto);
	justify-content: space-between;
	padding-block: 40px;
	width: 100%;
}

	.cta-banner--headline,
	.cta-banner--title {
		font-family: var(--font-secondary-amex);
		font-size: clamp(calc(3.2rem* .625), 3.5vw, calc(4rem* .625));
		font-weight: var(--font-weight-medium);
		line-height: 1.2;
		margin: 0;
	}

	.cta-banner--description {
		font-weight: var(--font-weight-default);
		max-width: 850px;
		width: 100%;
	}

	.cta-banner--points {
		font-size: calc(5.5rem * .625);
		font-weight: var(--font-weight-bold);
		line-height: 1.2;
		text-align: center;
	}

	.cta-banner--points .text-small {
		font-size: calc(3.5rem * .625);
	}

	.cta-banner--points-description {
		font-size: calc(1.8rem * .625);
	}

.banner-feature {
	border: 2px solid var(--color-gold);
	display: inline-block;
	margin-block: 20px var(--vertical-space);
	padding: 50px 20px;
	text-align: center;
	width: 100%;
}

	.banner-feature--image {
		margin: -80px auto 30px;
		max-width: 320px;
		width: 100%;
	}

	.banner-feature--headline {
		font-size: clamp(calc(3.2rem * .625), 2.1vw, calc(4rem * .625));
		margin-bottom: .2em;
	}

	.banner-feature--description {
		margin-bottom: 1em;
		margin-inline: auto;
		max-width: 550px;
		width: 100%;
	}

	.banner-feature .btn {
		margin-bottom: 0;
	}

/* Footer */
.footer-banner {
	border-top: 20px solid var(--color-gold);
	padding-block: 25px;
}

	.footer-banner-inner {
		align-items: center;
		display: flex;
		flex-flow: column;
		gap: 24px;
		justify-content: center;
		margin: 0 auto;
		max-width: 1200px;
		width: 90%;
	}

	.footer-banner-img-container {
		min-width: 420px;
		padding-block: 30px;
	}

	.footer-dll {
		height: auto;
		max-width: 420px;
		width: 100%;
	}

	.footer-banner-nav {
		display: flex;
		flex: 1 0 auto;
		gap: 40px;
		justify-content: flex-start;
	}

	.footer-banner-nav a {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		font-weight: var(--font-weight-medium);
		gap: 8px;
		line-height: 1.2;
		text-decoration: none;
		text-wrap: nowrap;
		/* Need links to be 44px tall to pass accessibility */
		/* Adding padding to increase height */
		padding-block: 13px;
	}

	.footer-banner-nav a:focus,
	.footer-banner-nav a:hover {
		text-decoration: underline;
	}

	.footer-banner-nav a:not(:last-child) {
		border-right:  1px solid var(--color-gold);
		padding-right: 40px;
	}

.terms {
	max-width: none;
	width: 100%;
}

	.terms-head {
		background: linear-gradient(0deg, rgba(0, 16, 46, 0.95) 0%, rgba(0, 16, 46, 0.95) 100%), var(--color-white);
	}

	.terms-link {
		background: none;
		color: var(--color-white);
		font-size: inherit;
		font-weight: var(--font-weight-medium);
		margin: 0 auto;
		max-width: 1200px;
		padding-left: 20px;
		position: relative;
		width: 90%;
	}

	.terms-link::before {
		background-color: var(--color-gold);
		-webkit-mask: url(../gold/img/icon-arrow-vertical.svg?v=0) no-repeat center;
		mask: url(../gold/img/icon-arrow-vertical.svg?v=0) no-repeat center;
		bottom: 0;
		content: '';
		display: block;
		height: 20px;
		left: 0;
		margin: auto;
		position: absolute;
		top: 0;
		transform: rotate(90deg);
		transition: all .125s ease;
		width: 15px;
	}
	
	.terms-link:focus,
	.terms-link:hover {
		color: inherit;
	}

	.terms-link.is-active::before {
		transform: rotate(180deg);
	}

	.terms-content {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
	}

	.all-terms {
		margin-block: 40px;
	}

@media all and (min-width: 1024px) {
	/* Navigation */
	.cn-card { padding-left: 65px; }
	.nav-link:focus::after, .nav-link:hover::after, .nav-link.is-active::after, .cn-explore:focus::before, .cn-explore:hover::before {  background-color: var(--color-gold); bottom: 0; content: ''; display: block; height: 4px; position: absolute; width: 100%; }	
	.nav-close { margin-right: 15px; }
	.cn-explore, .nav-close { background-color: var(--color-nav); background-image: none; border: 0; padding: 0; position: relative; width: 65px; }
	.cn-explore::after, .nav-close::after { content: ''; background-color: var(--color-gold); display: inline-block; height: 10px; margin-left: 8px; -webkit-mask: url(../gold/img/icon-arrow-vertical.svg?v=0) no-repeat center; mask: url(../gold/img/icon-arrow-vertical.svg?v=0) no-repeat center; width: 15px; }
	.cn-explore::after { transform: rotate(180deg); }
	.nav-close::before { background-color: var(--color-gold); bottom: 0; content: ''; display: block; height: 4px; position: absolute; width: 100%; }
	.nav-link-arrow { display: none; }
	.explore-links { max-height: 220px; }

	/* Homepage */
	.card-benefits { margin-inline: auto; max-width: 1190px; width: 100%; }

	.not-member--content { padding-top: 35px; }

	/* Explore Benefits */
	.tab-controls { display: block; }
	.tab-section .tab-item .tab-title { display: none; }
	.tab-item .tab-title { width: 100%; }
	.tab-content--group:not(:last-child) { border-bottom: 1px solid var(--color-gold); margin-bottom: 50px; padding-bottom: 50px; }
}

@media all and (max-width: 1023px) {
	/* Navigation */
	.card-nav { padding: 0 5px; }
	.nav-container { align-items: center; transform: translateX(0);}
	.nav-link { display: none; }
	.explore-close { bottom: 0; height: 40px; margin: auto; }
	.cn-explore { transform: rotate(180deg); }
	.nav-close { margin-right: 5px;  }
	.cn-explore, .nav-close { background-color: var(--color-gold); background-image: url(../gold/img/icon-arrow-vertical.svg?v=0); background-position: center; background-repeat: no-repeat; background-size: 35% 35%; border: 1px solid rgba(255, 255, 255, .5); border-radius: 3px; height: 40px; width: 50px; }
	.cn-explore span, .nav-close span { height: 1px; position: absolute; overflow: hidden; top: -10px; width: 1px; }
	.explore-links-open { 
		max-height: calc(100vh - 120px); 
		overflow-y: auto;
		overscroll-behavior: contain; 
	}

	/* Homepage */
	.hero--image { max-width: 175px; }

	.quick-step { padding: 16px 10px 40px; }

	.not-member { background-position: 0 -15%, 0 0; background-size: 200%; margin-top: 120px; }
	.not-member--cards { margin-inline: auto; }
	.not-member--container { gap: 30px; grid-template-columns: 1fr; text-align: center; }
	.not-member--container  .btn { margin-inline: auto; }

	/* Explore Benefits */
	.tab-accordion--container { gap: 0; grid-template-columns: 1fr; }
	.tab-item .tab-title { border-bottom: 1px solid var(--color-gold); }
	.tab-item .tab-title::after { bottom: 0; margin-block: auto; position: absolute; right: 8px; top: 0; }
	.tab-item .tab-title.is-active::after { transform: rotate(90deg); }
	.tab-item { margin-bottom: 20px; }
	.tab-item .tab-content { margin-block: 20px; }
	.tab-content--group:not(:last-child) { margin-bottom: 20px; }

	/* Use Card Features */
	.card-features--container { grid-template-columns: repeat(2, 1fr); }
}

@media all and (min-width: 768px) {
	/* Homepage */
	.hero--disclaimer { background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0.8) 100%); bottom: 0; color: var(--color-dark-blue); padding: 10px 65px; position: absolute; right: -65px; }

	/* Explore Benefits */
	.benefits--tile-large { display: inline-block; margin-top: 25px; margin-bottom: calc(var(--vertical-space) + 25px); width: 100%; }
	.benefits--tile-large .benefits--content { display: grid; grid-template-columns: repeat(2, 50%); margin: 0; padding: 0; }
	.benefits--tile-large .benefits--content-txt { margin-block: 40px; max-width: 550px; padding-inline: 40px; width: 100%; }
	.benefits--tile--logos { height: auto; margin-bottom: 25px; max-width: 550px; width: 100%; }
	.benefits--tile-large .benefits--content-image { aspect-ratio: 398/278; margin-block: -25px -78px; margin-right: -1px; position: relative; z-index: 1; }
	.benefits--tile-large .benefits--footer { margin-top: 0; } 

	/* Earn Rewards */
	.earn-points--content { max-width: 430px; text-align: center; width: 100%; }

	.know-rewards--content { max-width: 480px; width: 100%; }

	/* Use Card Features */
	.payment-options--border-right::after { background-color: var(--color-gold); content: ''; bottom: 0; position: absolute; right: -40px; top: 0; width: 1px; }
}

@media all and (min-width: 1440px) {
	.hero--bg {width: 92vw; }
}

@media all and (min-width: 1900px) {
	.hero--disclaimer { right: -30%; }
}

@media all and (max-width: 767px) {
	/* Global */
	.bg-pattern { background-position: 12% 5%, 0 0; background-size: 200%; }
	.btn { padding: 1.25em 3.9em; width: 100%; }
	.show-mobile { display: block; }
	.hide-mobile { display: none; }
	.align-headline { text-align: left; }
	
	/* Homepage */
	.hero { border-bottom: 1px solid var(--color-gold); }
	.hero--bg { aspect-ratio: 365/575; background-image: url(../gold/img/hero-home-m.jpg?v=1); background-size: contain; background-position: 0 0; width: 100%; }
	.hero--content { align-self: flex-end; margin: 0 auto 40px; text-align: center; width: 100%; }
	.hero--image { margin-inline: auto; }
	.hero--disclaimer { text-shadow: 0px 0px 7.1px #00102E; margin-bottom: 20px; text-align: center; }
	.hero--text { margin-inline: auto; }

	.card-benefits { grid-template-columns: 100%; }
	.card-benefit { display: block; height: 100%; margin-inline: auto; max-width: 335px; width: 100%; }
	.card-benefit--container { height: auto; }
	.card-benefit--content { height: auto; }

	.quick-steps--container { grid-template-columns: 100%; }
	.quick-steps--image { aspect-ratio: 1 / 1; }

	.not-member--cards { max-width: 200px; }

	/* Explore Benefits */
	.benefits--tiles { gap: 110px; grid-template-columns: 1fr; margin-top: 30%; }
	.benefits--content { margin-top: -50px; }
	.benefits--content-txt { padding-inline: 0; }
	.benefits--footer { padding-inline: 20px; }

	.benefits--tile-large { margin-top: 140px; margin-bottom: var(--vertical-space); }
	.benefits--tile-large .benefits--content-image { order: -1; }

	.banner-feature--headline { margin-inline: auto; max-width: 280px; width: 100%; }

	/* Earn Rewards */
	.earn-points { grid-template-columns: 1fr; }
	.earn-points h2 { margin-bottom: .5em;}
	.earn-points h3 { margin-bottom: .2em;}
	.earn-points--content { margin-inline: auto; }
	.earn-points--image { margin-bottom: 20px; order: -1; }

	.know-rewards { grid-template-columns: 1fr; }
	.know-rewards--image { margin-bottom: 20px; order: -1; }

	/* Use Card Features */
	.payment-options--items { gap: 40px; grid-template-columns: 1fr; }
	.add-card-member { gap: 30px; grid-template-columns: 1fr; }
	.add-card-member--image { aspect-ratio: 1/1.1; background-image: url(../gold/img/add-card-member-m.png?v=0); background-position: bottom center; background-size: cover; }

	.card-features--container { grid-template-columns: 100%; }

	.send-and-split { grid-template-columns: 1fr; }
	.send-and-split--head { gap: 10px; grid-template-columns: auto; }
	.send-and-split--logos { height: 75px; width: 300px; }
	.send-and-split--head .flag, .send-and-split--image  { order: -1; }
	.send-and-split--head .flag { max-width: 145px; width: 100%; }

	/* Components */
	.the-app { gap: 40px; grid-template-columns: 1fr; padding-top: 0; }
	.the-app--image { aspect-ratio: 1 / 1; order: -1; }

	.header { margin-bottom: 30px; }
	.homepage .header { width: 100%; }

	.cta-banner { gap: 25px; grid-template-columns: 1fr; text-align: center; }
	.cta-banne .btn { margin-top: 0;}

	.banner-feature--image { max-width: 245px; }

	/* Footer */
	.footer-banner { height: auto; padding-block: 0; }
	.footer-banner-inner { gap: 0; width: 100%; }
	.footer-banner-img-container { background: linear-gradient(0deg, rgba(0, 16, 46, 0.95) 0%, rgba(0, 16, 46, 0.95) 100%), var(--color-white); min-width: initial; padding: 40px 20px; width: 100%; }
	.footer-banner-img-container img { margin: 0 auto; max-width: 250px; width: 100%; }
	.footer-banner-nav { flex-flow: column; gap: 0; padding-inline: 20px; width: 100%; }
	.footer-banner-nav a { color: var(--color-white); display: block; font-size: calc(1.5rem * .625); padding-block: 16px; text-align: center; }
	.footer-banner-nav a:not(:last-child) { border-bottom: 1px solid var(--color-gold); border-right: 0; padding-right: 0; }

	.footer--links { display: block; }
}
