:root {
	--color-nav: #1c2841;
  --color-deepBlue: #00175A;
  --color-darkNavy: #00102E;
  --color-card: #0D2362;
  --color-brightBlue: #006FCF;
  --color-gold: #E8D17E;
  --color-white: #FFFFFF;
	--vertical-space: clamp(40px, 7vw, 120px);

  --spacing: 0.25rem;
  --spacing-1: calc(var(--spacing) * 1);    /* 0.25rem | 4px */
  --spacing-2: calc(var(--spacing) * 2);    /* 0.5rem | 8px */
  --spacing-3: calc(var(--spacing) * 3);    /* 0.75rem | 12px */
  --spacing-4: calc(var(--spacing) * 4);    /* 1rem | 16px */
  --spacing-6: calc(var(--spacing) * 6);    /* 1.5rem | 24px */
  --spacing-8: calc(var(--spacing) * 8);    /* 2rem | 32px */
  --spacing-10: calc(var(--spacing) * 10);  /* 2.5rem | 40px */
  --spacing-15: calc(var(--spacing) * 15);  /* 3.75rem | 60px */
  --spacing-16: calc(var(--spacing) * 16);  /* 4rem | 64px */
  --spacing-20: calc(var(--spacing) * 20);  /* 5rem | 80px */
  --spacing-30: calc(var(--spacing) * 30);  /* 7.5rem | 120px */

  --amex-nav-height: 64px;
  --gold-nav-height: 48px;
  --gold-nav-margin-top: var(--spacing-2);

  --gold-nav-sticky: calc(var(--amex-nav-height) + var(--gold-nav-margin-top));
}

@font-face {
  font-family: 'Guardian Egyptian Web';
  src: url('../../fonts/GuardianEgyp-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
/* This is breaking position sticky on nav/banner */
/* html, body {
  overflow-x: clip !important;
} */
html { overflow-x: initial; }
html, body { min-width: initial !important; }

body {
	background-color: var(--color-deepBlue);
	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-bold);
	line-height: 1.2;
}

h2 {
	font-family: var(--font-secondary-amex);
	font-size: clamp(calc(3rem * .625), 3.5vw, calc(4rem * .625));
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.h2-subtext {
  font-size: clamp(calc(2rem * .625), 3.5vw, calc(2.4rem * .625));
}

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);
}

@layer normalize { a,
p a {
	color: inherit;
}
	p a:focus,
	p a:hover {
		color: var(--color-white);
		text-decoration: underline;
	}
}

[hidden]{
	visibility: hidden;
}

/* deprecated 
.axp-global-header__dls-module__module___1_EeR .axp-global-header__dls-module__widthFull___3ApM9 {
	background-color: var(--color-white);
}
*/

/* Global */
p a {
  color: inherit;
  text-decoration: underline;
}
sup {
   font-weight: inherit;
}

section { scroll-margin-top: var(--amex-nav-height); }

.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: var(--spacing-10); }
.md\:mb-16 {
  @media (width >= 768px) {
    margin-bottom: var(--spacing-16);
  }
}

.page-container {
  width: 100%;
  overflow-x: clip;
}

.outer-grid {
  --_og-gutter-size: 20px;
  --_og-max-content-width: 1200px;
  display: grid;
  grid-template-columns: [bleed-start] minmax(var(--_og-gutter-size), 1fr) [content-start] minmax(0, var(--_og-max-content-width)) [content-end] minmax(var(--_og-gutter-size), 1fr) [bleed-end];
  width: 100%;
  max-width: initial;
}

.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-white {
  color: var(--color-white);
}

.text-gold {
	color: var(--color-gold);
}

.space-between {
  justify-content: space-between;
}

.ml-auto {
  margin-left: auto;
}

.fineprint {
	font-family: var(--font-primary-amex);
	font-size: calc(1.2rem * .625);
}

.cta-text {
	background: url(../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: 20px 37px;
	text-align: center;
	transition: color .2s, background-color .2s, border-color .2s, opacity .2s;
	width: max-content;
  border-radius: 3px;
}

.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(../img/wsPattern.svg?v=0), var(--color-card);
  background-size: cover;
}

.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: var(--amex-nav-height);
	z-index: 3;
  padding-inline: 20px;
  max-width: 1240px;
  margin-inline: auto;
}

	.card-nav {
		align-items: center;
		background-color: var(--color-card);
		border-radius: 3px;
		height: var(--gold-nav-height);
		margin-top: var(--gold-nav-margin-top);
		padding: 0 24px 0 8px;
		width: 100%;
	}

	.cn-card { 
		background-image: url(../img/CG_CardArt.png?v=1);
		color: var(--color-white);
		font-family: var(--font-primary-amex);
		font-size: calc(1.4rem * .625);
		font-weight: var(--font-weight-bold);
		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;
		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-bold); 
		height: 48px; 
		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-bold);
		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-bold);
		height: 48px;
		justify-content: flex-end;
	}

	.nav-close {
		cursor: pointer;
		font-size: calc(1.5rem * .625); 
		height: 48px;
		margin-right: 15px;
		transition: transform .35s ease-in-out;
    font-weight: var(--font-weight-bold); 
	}

	.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: -3px;
	}

	.explore-links-open {
		border: 0;
		display: block;
		transform: translateY(50px);
	}

	.explore-link:nth-child(-n+4) {
		background-color: var(--color-card);
		background-image: none;
		border-color: var(--color-gold);
		font-family: var(--font-primary);
		font-size: calc(1.5rem * .625);
		font-weight: var(--font-weight-bold);
		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(../img/icon-arrow-horizontal.svg?v=0) no-repeat center;
		mask: url(../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
	}

  #joinNow {
    /* position: sticky;
    top: calc(var(--amex-nav-height) + var(--gold-nav-margin-top) + var(--gold-nav-height) + 4px);
    z-index: 5; */
    width: 100%;

    @media (width < 768px) {
      max-width: 100%;
      margin: 0 auto;
    }
  }

  #joinNow.hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }

  .join-now {
    text-align: center;
    padding: .7em;
    border-radius: 3px;
    position: relative;
    background: var(--color-card);
    color: var(--color-gold);
    margin-top: var(--spacing-1);
    font-size: calc(1.3rem * .625);
    border-bottom: 1px solid var(--color-gold);
  }

	.join-now a { text-decoration: underline; color: inherit; }
	
	.join-now-close { position: absolute; width: 44px; height: 44px; border: none; cursor: pointer; right: 11px; top: 2px; background: none; font-size: 2em; color: var(--color-gold); margin-top: -6px; font-weight: 300; font-family: var(--font-primary); }

	.card-nav-then-banner { position: relative; z-index: 5; }
	
	@media all and (max-width: 500px) {
		.join-now { font-size: .9em; text-align: left; padding: 1em 0 1em .7em; }
    .join-now-close { margin-top: -2px; }
	}

/* Homepage */
.hero {
	display: grid;
	margin-bottom: var(--sectionBottom);
	position: relative;
  grid-column: content;

  @media (width < 768px) {
    margin-bottom: var(--spacing-10);
    grid-column: bleed;
  }
}

	.hero--bg {	
		aspect-ratio: 1440/650;
		background-color: var(--color-deepBlue);
		background-image: url(../img/Home_hero.jpg?v=1);
		background-position: 100% 0;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		max-width: 1800px;
		width: 100vw;
    position: absolute;
	}

    .hero--bg::after {
      content: "";
      position: absolute;
      inset: 0;
      width: max(626px, 50%);
      background: linear-gradient(90deg, #00175A 20%, rgba(0, 23, 90, 0.80) 49%, rgba(0, 23, 90, 0.00) 100%);
    }

	.hero--content {
		align-self: center;
		position: relative;
		z-index: 2;
    max-width: 500px;
    padding-block-start: 100px;
    padding-block-end: 120px;
    margin-top: calc( var(--amex-nav-height) + var(--gold-nav-margin-top) + var(--gold-nav-height) );
	}

	.hero--image {
		height: auto;
		margin-bottom: 38px;
		max-width: 200px;
		width: 100%;
	}

	.hero--headline {
		font-size: clamp(calc(4rem * .625), 3.5vw, calc(6.5rem * .625));
		margin-bottom: .4em;
    max-width: 460px;
	}

	.hero--text {
		font-size: clamp(calc(1.8rem * .625), 1.5vw, calc(2.4rem * .625));
    font-weight: var(--font-weight-bold);
		line-height: 1.3;
		text-wrap: balance;
		width: 100%;
	}

	.hero--disclaimer {
		font-size: calc(1.2rem * .625);
	}

/* c-cta-banner */
.c-cta-banner {
  background-color: var(--color-card);
  display: grid;
  color: var(--color-white);
  align-items: center;
  grid-column: content;
  position: relative;

  @media (width < 768px) {
    grid-column: bleed;
  }

  .btn {
    margin-block: auto;
  }

  h2 {
    font-size: clamp(calc(2.4rem * .625), 3.5vw, calc(3.2rem * .625));
  }
}


  .c-cta-banner__content {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 2;
    padding-block: var(--spacing-10);
    padding-inline: var(--spacing-20);
    display: flex;
    gap: var(--spacing-20);
    align-items: center;

    @media (width < 768px) {
      flex-flow: column;
      gap: var(--spacing-8);
      padding-inline: 20px;
      align-items: center;
    }
  }

  .c-cta-banner__primary-col {
    flex: 1 1 0;

    @media (width < 768px) {
      text-align: center;
    }
  }

  .c-cta-banner__text-col {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1 1 0;

    @media (width < 768px) {
      text-align: left;
    }

    	h3 {
        font-size: calc(5.5rem * .625);
        font-weight: var(--font-weight-bold);
        margin-bottom: .5em;
      }

      h3 .text-small {
        font-size: calc(3.5rem * .625)
      }

      h3 .text-smaller {
        display: block;
        font-size: calc(1.8rem * .625);
        font-weight: var(--font-weight-bold);
        line-height: 1;
      }
  }

  .c-cta-banner__bg {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    height: 100%;

    @media (width < 768px) {
      position: absolute;
      inset: 0;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }


/* c-two-col */
.c-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding-block: var(--spacing-20);
  align-items: center;
  grid-column: content;

  @media (width < 768px) {
    grid-template-columns: 1fr;
    padding-block: var(--spacing-10);
    gap: 32px;
  }

  h3 {
    font-size: clamp(calc(1.8rem * .625), 3.5vw, calc(2rem * .625));
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin-bottom: 10px;
  }

  &.py-xl {
    padding-block: var(--spacing-30);

    @media (width < 768px) {
      padding-block: var(--spacing-10);
    }
  }
}

  .c-two-col--alt {
    @media (width < 768px) {
      .c-two-col__picture {
        order: -1;
      }
    }
  }

  .c-two-col__content {
    display: flex;
    flex-flow: column;

    &.space-y-10 {
      gap: var(--spacing-10);
    }

    .btn { margin-block: 0; }
  }

  .c-two-col__picture {
    img {
      width: 100%;
    }
  }

/* .c-apps */
.c-apps {
  grid-column: content;
  padding-block: var(--spacing-16);
  display: grid;
  grid-template-columns: minmax(400px, 760px) minmax(220px, 360px);
  gap: var(--spacing-20);

  @media (width < 768px) {
    padding-block: var(--spacing-10);
    grid-template-columns: 1fr;
  }
}

  .c-apps__content {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-16);

    @media (width < 768px) {
      gap: var(--spacing-10);
    }

    .group {
      display: grid;
      grid-template-columns: 16fr 47fr 37fr;
      grid-template-rows: max-content 1fr;
      row-gap: var(--spacing-4);
      padding-block: var(--spacing-10);
      border-bottom: 1px solid var(--color-gold);

      &:first-of-type {
        padding-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
        padding-bottom: 0;
      }
    }

    .app-icon {
      grid-column: 1;
      grid-row: 1 / -1;
      max-width: 88px;
      margin-right: 32px;

      @media (width < 768px) {
        grid-row: 1;
        max-width: 72px;
        margin-right: 16px;
      }
    }

    h3 {
      grid-column: 2 / span 2;
      grid-row: 1;
      color: var(--color-white);
      font-size: clamp(calc(2rem * .625), 3.5vw, calc(2.4rem * .625));
      font-weight: var(--font-weight-bold);
      font-family: var(--font-primary-amex);
      line-height: 1.3;
      margin-bottom: 0;

      @media (width < 768px) {
        align-self: center;
      }

      .eyebrow {
        color: inherit;
        line-height: 1.2;
        text-transform: uppercase;
        font-size: clamp(calc(1.2rem * .625), 2.1vw, calc(1.4rem * .625));
        margin-bottom: 4px;
      }
    }

    p {
      grid-column: 2 / span 2;
      grid-row: 2;

      @media (width < 768px) {
        grid-column: 1 / -1;
      }
    }

    .app-btns {
      grid-column: 2 / span 2; 
      grid-row: 3;
      display: flex;
      flex-flow: row wrap;
      gap: var(--spacing-4);

      @media (width < 768px) {
        grid-column: 1 / -1;
      }

      img {
        width: 100%;
      }

      .apple-store {
        min-height: 44px;
      }

      .play-store {
        min-height: 44px;
      }
    }
  }

  .c-apps__picture {

    @media (width < 768px) {
      display: none;
    }

    img {
      width: 100%;
    }
  }

/* c-setup-cards */
.c-setup-cards {
  display: grid;
  gap: var(--spacing-4);
  margin-top: var(--spacing-10);
}

  .c-setup-cards__card {
    padding-block: var(--spacing-8);
    padding-inline: var(--spacing-6);
    display: grid;
    gap: var(--spacing-2);
    border: 1px solid var(--color-gold);
    background-color: var(--color-card);
    text-decoration: none;
    font-size: calc(1.4rem * .625);
    line-height: 1.57;
    transition: all .2s ease-in-out;

    @media (width < 768px) {
      padding-block: var(--spacing-6);
      padding-inline: var(--spacing-4);
    }

    &:hover {
      box-shadow: 0 0 0 2px var(--color-gold);
      background-color: transparent;
      transition: all .2s ease-in-out;
    }

    h3 {
      font-size: clamp(calc(1.8rem * .625), 3.5vw, calc(2rem * .625));
      line-height: 1.3;
      font-weight: var(--font-weight-bold);
      margin-bottom: 0;
    }

    .link-title {
      display: flex;
      flex-flow: row;
      align-items: center;
      gap: var(--spacing-2);
    }
  }

  .points-banner {
    margin-bottom: calc(6rem * .625);

    @media (width < 768px) {
      margin-bottom: 0;
    }
  }


/* .c-jump-nav */
.embla__viewport {
  overflow: hidden;
}

.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
}

.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
}

.c-jump-nav {
  grid-column: bleed;
  padding-inline: 20px;
}

.c-jump-nav__ul {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--spacing-4);
  justify-content: center;
  margin-inline: auto;
  padding-block: var(--spacing-8);
  width: 100%;
  z-index: 3;

  @media (width < 768px) {
    justify-content: flex-start;
  }


  li {
    list-style: none;
  }

  a {
    display: inline-flex;
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-8);
    border: 1px solid transparent;
    text-decoration: none;
    background: var(--color-card);
    font-size: calc(1.4rem * .625);
    font-weight: var(--font-weight-medium);
    line-height: 1.57;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: max-content;

    &.active,
    &:hover {
      border-color: var(--color-gold);
    }
  }
}


.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(../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%;
  grid-column: content;
}

	.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);
    color: var(--color-white);
	}

	.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(../img/icon-external-link.svg?v=0);
		height: 16px;
		right: 10px;
		top: 10px;
		width: 16px;
	}
	
	.quick-step::after {
		background-image: url(../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(../img/Pattern_WorldService_DeepBlue.svg?v=0), var(--color-card);
	background-position: center, 0 0;
  background-size: cover;
	margin-top: 60px;
	padding-bottom: 25px;
  margin-top: var(--spacing-8);

  @media (width < 1024px) {
    background: url(../img/Pattern_WorldService_DeepBlue_mobile.svg?v=0), var(--color-card);
    background-size: cover;
  }
} 

	.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: -32px;
		max-width: 300px;
		width: 100%;
	}

	.not-member--headline {
		margin-bottom: 0;
	}

	.not-member--text {
		font-size: clamp(calc(1.8rem * .625), 4vw, calc(2.4rem * .625));
    font-weight: var(--font-weight-bold);
	}

/* Explore Benefits */
.benefits {
  margin-top: clamp(40px, 3.5vw, 64px);
	margin-bottom: clamp(40px, 3.5vw, 64px);
  grid-column: content;
  --_benefits-content-offset: 80px;

  @media (width < 768px) {
    --_benefits-content-offset: 50px;
  }
}


	.benefits--alt {
		margin-bottom: var(--vertical-space);
	}

	.benefits--tiles {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(3, 1fr);
		margin-top: calc(var(--spacing-10) + var(--_benefits-content-offset));

    @media (width < 900px) {
      grid-template-columns: repeat(1, 1fr);
      gap: calc(var(--spacing-8) + var(--_benefits-content-offset));
    }
	}

  .benefits--tiles--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-10);

    @media (width < 768px) {
      grid-template-columns: repeat(1, 1fr);
      gap: calc(var(--spacing-8) + var(--_benefits-content-offset));
    }
  }

	.benefits--tile {
		background: var(--color-card);
		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: calc(-1 * var(--_benefits-content-offset));
		padding-inline: 20px;
	}

	.benefits--content-image {
		aspect-ratio: 347/253;
		background-repeat: no-repeat;
		background-size: contain;
		margin-bottom: 30px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
	}
    .benefits--tiles--2 .benefits--content-image {
      aspect-ratio: 580/330;
    }

  .benefits--content-picture,
  .benefits--content-caption {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  .benefits--content-picture {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .benefits--content-caption {
    margin-top: auto;
    /* background: rgba(0, 23, 90, 0.60); */
    padding-inline: var(--spacing-4);
    padding-block: var(--spacing-3);
    display: flex;
    align-items: center;

    .location {
      background: var(--color-deepBlue);
      padding-block: 6px;
      padding-inline: var(--spacing-2);
      gap: 6px;
      display: flex;
      flex-flow: row;
      align-items: center;
      font-size: calc(1.2rem * .625);
      font-weight: var(--font-weight-medium);
      line-height: 1;
    }

    .logo-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: row wrap;
      gap: var(--spacing-4);
      width: 100%;

      img {
        max-width: 100%;
      }
    }
  }

	.benefits--content-txt {
		padding-inline: 0;
	}

	.benefits--content-txt h3 {
		align-items: center;
		display: grid;
		font-size: clamp(calc(2rem * .625), 2.1vw, calc(2.4rem * .625));
    font-weight: var(--font-weight-bold);
		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-deepBlue);
		font-size: calc(1.5rem * .625);
    font-weight: var(--font-weight-bold);
		/* height: 50px; */
		margin-top: 30px;
		padding-inline: 20px;
		width: 100%;
    display: flex;
    align-items: center;
	}

	.benefits--footer::after {
		content: '';
		display: inline-block;
		background-image: url(../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: 0;
  grid-column: content;
  margin-top: var(--spacing-16);

  @media (width < 768px) {
    margin-top: var(--spacing-10);
  }
}

	.tab-accordion--container {
		align-items: flex-start;
		display: grid;
		gap: 64px;
		grid-template-columns: 30fr 70fr;
		justify-content: space-between;
		position: relative;

    &.benefits-tab-accordion {
      margin-top: var(--spacing-16);

      @media (width < 768px) {
        margin-top: var(--spacing-10);
      }
    }
	}

	.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-family: var(--font-primary-amex);
		font-size: calc(1.8rem * .625);
		font-weight: var(--font-weight-bold);
		padding: 10px 16px;
		position: relative;
		text-align: left;
		width: 100%;
	}

	.tab-item .tab-title::after {
		background-image: url(../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: var(--color-card);
		border-left: 1px solid var(--color-gold);
		/* background: #5A616D; */
		color: var(--color-white);
		text-decoration: none;

    @media (width < 1024px) {
      border-left: 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);

    @media (width < 1024px) {
      border-left: none;
    }
	}

	.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));
    font-weight: var(--font-weight-bold);
    font-family: var(--font-primary-amex);
	}

	.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%;
  grid-column: content;
}

	.earn-points-alt {
		align-items: center;
		margin-bottom: var(--vertical-space);
	}

	.earn-points--image {
    img {
      width: 100%;
    }
	}

	.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-bold);
		line-height: 1;
	}

	.earn-points p {
		font-weight: var(--font-weight-default);
	}

	.earn-points p a {
		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-block: var(--spacing-16);
	width: 100%;
  grid-column: content;

  @media (width < 768px) {
    margin-block: var(--spacing-10);
  }

  h2 {
    margin-bottom: var(--spacing-6);
  }
}

  .know-rewards--item {
    p:not(:last-of-type) {
      margin-bottom: var(--spacing-4);
    }

    .cta-text {
      margin-top: var(--spacing-6);
    }
  }

	.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 {
		img {
      width: 100%;
    }
	}

/* Use Card Features */
.payment-options {
	margin-bottom: var(--vertical-space);
  grid-column: content;
}

.payment-options--items {
	display: grid;
	gap: 80px;
	grid-template-columns: repeat(3, 1fr);
  margin-top: var(--spacing-10);
}

	.payment-options--image {
    img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 345/245;
      margin-bottom: 40px;
    }
	}

	.payment-options--content {
		height: calc(95% - 245px);
		position: relative;
	}

	.payment-options--content h3 {
		font-size: clamp(calc(1.8rem * .625), 3.5vw, calc(2rem * .625));
    font-weight: var(--font-weight-bold);
	}

	.payment-options--content p {
		font-weight: var(--font-weight-default);
	}

	.payment-options--content a {
		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(../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(../img/icon-send.svg?v=4);
	}

	.icon-split {
		background-image: url(../img/icon-split.svg?v=4);
	}

.card-features {
	color: var(--color-white);
	padding-block: clamp(40px, 3.5vw, 80px);
	text-align: center;
  grid-column: content;
}

	.card-features--container {
		display: grid;
		gap: 40px;
		grid-template-columns: repeat(2, 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%;
  grid-column: content;
}

	.add-card-member--image {
		aspect-ratio: 1/1;
		background-image: url(../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: 150px;
		width: 100%;
	}

	.add-card-membr--headline {
		max-width: 470px;
		width: 100%;
    margin-bottom: var(--spacing-6);
	}

	.add-card-membr--description {
		margin-bottom: var(--spacing-6);
	}

/* 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(../img/membership-d.jpg?v=0);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.the-app--content {
		max-width: 545px;
	}

	.the-app--headline {
		margin-bottom: var(--spacing-10);

    @media (width < 768px) {
      margin-bottom: var(--spacing-6);
    }
	}

	.the-app--description {
		font-size: calc(1.6rem * .625);
		margin-block: var(--spacing-6);
		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--app-grid  {
    display: flex;
    flex-flow: row;
    gap: var(--spacing-6);
    align-items: center;

    img {
      width: 88px;
      @media (width < 768px) {
        width: 72px;
      }
    }

    h3 {
      color: var(--color-white);
      font-size: clamp(calc(2rem * .625), 3.5vw, calc(2.4rem * .625));
      font-weight: var(--font-weight-bold);
      font-family: var(--font-primary-amex);
      line-height: 1.3;
      margin-bottom: 0;

      @media (width < 768px) {
        align-self: center;
      }

      .eyebrow {
        color: inherit;
        line-height: 1.2;
        text-transform: uppercase;
        font-size: clamp(calc(1.2rem * .625), 2.1vw, calc(1.4rem * .625));
        margin-bottom: 4px;
      }
    }
	}

  .the-app--app-btns {
    display: flex;
    flex-flow: row;
    gap: var(--spacing-4);
    align-items: center;

    img {
      width: 100%;
    }

    .apple-store {
      width: 130px;
    }

    .play-store {
      width: 148px;
    }
  }

	.the-app p {
		font-weight: var(--font-weight-default);
	}

.header {
	border-bottom: 2px solid var(--color-gold);
	margin: 0 auto clamp(40px, 4.5vw, 64px);
	padding-block: clamp(20px, 4.5vw, 24px) 24px;
  grid-column: content;
  width: 100%;
}

  .header--negative-mt {
    --_header-mt: calc( -1 * (var(--amex-nav-height) + var(--gold-nav-height) + var(--gold-nav-margin-top) + 4px) );
    margin-top: var(--_header-mt) !important;
  }

	.header--headline {
		color: var(--color-gold);
		display: block;
		font-family: var(--font-primary);
		font-size: clamp(calc(1.4rem * .625), 1.2vw, calc(2rem * .625));
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
    margin-bottom: var(--spacing-1);
	}

	.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-bold);
		line-height: 1.2;
	}

  .header--desc--max-w {
    max-width: 736px;
    text-wrap: balance;
  }

	.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-top: var(--spacing-30);
  margin-bottom: var(--spacing-15);
	padding: 50px 20px;
	text-align: center;
	width: 100%;
  grid-column: content;

  @media (width < 768px) {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-10);
  }
}

	.banner-feature--image {
		margin: -80px auto 30px;
		max-width: 320px;
		width: 100%;
	}

	.banner-feature--headline {
		font-size: clamp(calc(3rem * .625), 3.5vw, 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: var(--color-card);
	}

	.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(../img/icon-arrow-vertical.svg?v=0) no-repeat center;
		mask: url(../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;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
	}
	
	.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;
	}

  .all-terms li a {
    color: inherit !important;
    text-decoration: underline;
    word-break: break-all;
  }

@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-card); 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(../img/icon-arrow-vertical.svg?v=0) no-repeat center; mask: url(../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 (width < 1024px) {
	/* 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(../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--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); padding-left: 0; }
	.tab-item .tab-title::after { bottom: 0; margin-block: auto; position: absolute; right: 8px; top: 0; }
  .tab-item .tab-title.is-active { background: var(--color-deepBlue); }
	.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 (width < 900px) {
    	/* Explore Benefits */
	.benefits--tiles { gap: 80px; grid-template-columns: 1fr; margin-top: calc(var(--spacing-10) + 50px); }
	.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%; }
}

@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 { width: 100%; margin-inline: auto; }
	.show-mobile { display: block; }
	.hide-mobile { display: none; }
	.align-headline { text-align: left; }
	
	/* Homepage */
	.hero--bg { aspect-ratio: 375/400; background-image: url(../img/Home_Hero_mobile.jpg?v=1); background-size: cover; background-position: 0 0; width: 100%; position: relative; margin-top: 17px; max-width: 100%; overflow-x: hidden; }
  .hero--bg::after {
    background: linear-gradient(0deg, #00175A 0%, rgba(0, 23, 90, 0.00) 86.83%);
    width: 100%;
    height: min(375px, 50%);
    margin-top: auto;
  }
  .hero--headline { max-width: initial; }
	.hero--content { align-self: flex-end; padding-inline: 20px; text-align: center; width: 100%; max-width: 100vw; padding-top: 0; padding-bottom: var(--spacing-10); margin-top: -120px; }
	.hero--image { margin-inline: auto; max-width: 146px; margin-bottom: var(--spacing-6); }
	.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; }



	/* 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(../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: var(--color-deepBlue); 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; }
}