@layer normalize, components, application, utilities;

@layer normalize {
  *,::after,::before{box-sizing:border-box}:not(dialog){margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#__next,#root{isolation:isolate}
  ul { padding: 0; }
}

:root {
  --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 */
  --spacing-60: calc(var(--spacing) * 60);  /* 15rem | 240px */

  --spacing-xxsm: var(--spacing-1);         /* 0.25rem | 4px */
  --spacing-xsm: var(--spacing-2);          /* 0.5rem | 8px */
  --spacing-sm: var(--spacing-4);           /* 1rem | 16px */
  --spacing-md1: var(--spacing-6);          /* 1.5rem | 16px */
  --spacing-md2: var(--spacing-8);          /* 2rem | 32px */
  --spacing-lg: var(--spacing-10);          /* 2.5rem | 40px */
  --spacing-xlg: var(--spacing-16);         /* 4rem | 64px */
  --spacing-xxlg: var(--spacing-20);        /* 5rem | 80px */
  --spacing-xxxlg: var(--spacing-30);       /* 7.5rem | 120px */
  --spacing-xxxxlg: var(--spacing-60);      /* 15rem | 240px */


  --primary: var(--skymiles-journal-page);
  --secondary: var(--white);
  --reverse: var(--dark-blue);
  --reverse-secondary: var(--delta-blue);
  --accent: var(--canyon-orange);
  --accent-reverse: var(--canyon-orange);
  --primary: var(--reserve-shade1);
  --secondary: var(--delta-blue);
  --subtle: #FFFFFF0D;
  --reverse: var(--skymiles-journal-page);
  --reverse-secondary: var(--reserve-shade4);
  --accent: var(--canyon-orange);
  --cta: var(--canyon-orange);
  --strong: var(--skymiles-journal-page);
  --subtle: var(--delta-blue);
  --reverse: var(--dark-blue);
  --reverse-subtle: var(--light-blue);
  --accent: var(--canyon-orange);
  --accent-reverse: var(--canyon-orange);

  --dark-blue: #0b253f;
  --skymiles-journal-page: #e3dcd2;
  --delta-blue: #003366;
  --delta-dark-red: #991933;
  --light-blue: #d1e7f2;
  --evergreen: #437e75;
  --canyon-orange: #c0402c;
  --gold-transit: #e1bd75;
  --reserve-shade1: #0b1b23;
  --reserve-shade2: #304246;
  --reserve-shade3: #42535d;
  --reserve-shade4: #788ea0;
  --platinum-shade1: #404040;
  --platinum-shade2: #6f7374;
  --platinum-shade3: #bec2c3;
  --platinum-shade4: #f6f8f9;
  --gold-shade1: #644919;
  --gold-shade2: #91723a;
  --gold-shade3: #cab078;
  --gold-shade4: #ffebb7;
  --blue-shade1: #204074;
  --blue-blue-shade2: #0b5ea2;
  --blue-blue-shade3: #0176b8;
  --blue-shade4: #61a2d5;
  --amex-white: #ffffff;
  --amex-blue: #006fcf;
  --amex-darkblue: #00175a;
  --amex-darkgrey: #333333;
  --silver-light: #F6F8F9;

	--font-primary: 'Whitney', sans-serif;
	--font-secondary: 'WhitneyCondense', sans-serif;
  --font-delta-display: 'DeltaDisplay', serif;
	--font-primary-amex: 'BentonSans', 'Helvetica Neue', Helvetica, sans-serif;
	--font-weight-default: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--vertical-space: clamp(50px, 4.5vw, 80px);
	--width-lg: 2730px;

  --amex-onenav-height: 64px;
  --card-nav-height: 56px;

  /* Figma color tokens */

  --color-Primary-Delta-Blue: #003366;
  --color-Primary-Dark-Blue: #0B253F;
  --color-Primary-SkyMiles-Journal: #E3DCD2;
  --color-Primary-Light-Blue: #D1E7F2;

  --color-Secondary-Canyon-Orange: #C0402C;

  --text-icon-primary: var(--color-Primary-SkyMiles-Journal);
  --text-icon-secondary: var(--amex-white);
  --text-icon-reverse: var(--color-Primary-Dark-Blue);
  --text-icon-reverse-secondary: var(--color-Primary-Delta-Blue);
  --text-icon-accent: var(--color-Secondary-Canyon-Orange);
  --text-icon-accent-reverse: var(--color-Secondary-Canyon-Orange);

  --surface-primary: var(--reserve-shade1);
  --surface-secondary: var(--color-Primary-Delta-Blue);
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-reverse: var(--color-Primary-SkyMiles-Journal);
  --surface-reverse-secondary: var(--reserve-shade4);
  --surface-accent: var(--color-Secondary-Canyon-Orange);
  --surface-cta: var(--color-Secondary-Canyon-Orange);

  --stroke-strong: var(--color-Primary-SkyMiles-Journal);
  --stroke-subtle: var(--color-Primary-Delta-Blue);
  --stroke-reverse: var(--color-Primary-Dark-Blue);
  --stroke-reverse-subtle: var(--color-Primary-Light-Blue);
  --stroke-accent: var(--color-Secondary-Canyon-Orange);
  --stroke-accent-reverse: var(--color-Secondary-Canyon-Orange);

  --gradient-primary: linear-gradient(180deg, var(--color-Primary-Delta-Blue) 1.1%, var(--reserve-shade1) 96.71%);
  
}

@font-face {
	font-family: 'Whitney';
	src: url('../fonts/Whitney-Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'Whitney';
	src: url('../fonts/Whitney-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'WhitneyCondense';
	src: url('../fonts/WhitneyCond-Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'DeltaDisplay';
	src: url('../fonts/deltaserif-beta-light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
}

html { 
  overflow-x: initial;
  scroll-behavior: smooth;
  scroll-padding-block: calc(var(--amex-onenav-height) + var(--card-nav-height));
  
  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

html, body { min-width: initial !important; }

section { scroll-margin-top: calc(var(--amex-onenav-height) + var(--card-nav-height)); }

body {
	background-color: var(--color-white);
	color: var(--color-gray);
	font-size: calc(1.5rem * .625);
	font-family: var(--font-primary-amex);
	font-weight: var(--font-weight-default);
	line-height: 1.4;
	margin: 0; 
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 1px;
  outline-offset: 3px;
  outline-color: currentColor;
  outline-style: dashed;
}

@layer utilities {
  /* Utility CLasses */
  .sr-only {
    display: block;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: fixed;
    width: 1px;
  }
  .subgrid {
    display: grid;
    grid-template-columns: subgrid;

    > * {
      grid-column: content;
    }
  }

  .nowrap {
    white-space: nowrap;

    a {
      white-space: break-spaces;
    }
  }

  .bg-surface-primary { background: var(--surface-primary); }
  .gradient-bg {background: var(--gradient-primary); }

  .text-link { color: var(--text-icon-primary); }
  .disclaimer { font-size: calc(1.2rem * .625); line-height: 1.5; }

  /* Regular padding-top */
  .pt-0 { padding-top: 0; }
  .pt-xxsm { padding-top: var(--spacing-xxsm); }
  .pt-xsm { padding-top: var(--spacing-xsm); }
  .pt-sm { padding-top: var(--spacing-sm); }
  .pt-md1 { padding-top: var(--spacing-md1); }
  .pt-md2 { padding-top: var(--spacing-md2); }
  .pt-lg { padding-top: var(--spacing-lg); }
  .pt-xlg { padding-top: var(--spacing-xlg); }
  .pt-xxlg { padding-top: var(--spacing-xxlg); }
  .pt-xxxlg { padding-top: var(--spacing-xxxlg); }
  .pt-xxxxlg { padding-top: var(--spacing-xxxxlg); }

  /* Regular padding-bottom */
  .pb-0 { padding-bottom: 0; }
  .pb-xxsm { padding-bottom: var(--spacing-xxsm); }
  .pb-xsm { padding-bottom: var(--spacing-xsm); }
  .pb-sm { padding-bottom: var(--spacing-sm); }
  .pb-md1 { padding-bottom: var(--spacing-md1); }
  .pb-md2 { padding-bottom: var(--spacing-md2); }
  .pb-lg { padding-bottom: var(--spacing-lg); }
  .pb-xlg { padding-bottom: var(--spacing-xlg); }
  .pb-xxlg { padding-bottom: var(--spacing-xxlg); }
  .pb-xxxlg { padding-bottom: var(--spacing-xxxlg); }
  .pb-xxxxlg { padding-bottom: var(--spacing-xxxxlg); }

  /* Regular padding-y */
  .py-0 { padding-block: 0; }
  .py-xxsm { padding-block: var(--spacing-xxsm); }
  .py-xsm { padding-block: var(--spacing-xsm); }
  .py-sm { padding-block: var(--spacing-sm); }
  .py-md1 { padding-block: var(--spacing-md1); }
  .py-md2 { padding-block: var(--spacing-md2); }
  .py-lg { padding-block: var(--spacing-lg); }
  .py-xlg { padding-block: var(--spacing-xlg); }
  .py-xxlg { padding-block: var(--spacing-xxlg); }
  .py-xxxlg { padding-block: var(--spacing-xxxlg); }
  .py-xxxxlg { padding-block: var(--spacing-xxxxlg); }

  .px-0 { padding-inline: 0; }
  .px-xxsm { padding-inline: var(--spacing-xxsm); }
  .px-xsm { padding-inline: var(--spacing-xsm); }
  .px-sm { padding-inline: var(--spacing-sm); }
  .px-md1 { padding-inline: var(--spacing-md1); }
  .px-md2 { padding-inline: var(--spacing-md2); }
  .px-lg { padding-inline: var(--spacing-lg); }
  .px-xlg { padding-inline: var(--spacing-xlg); }
  .px-xxlg { padding-inline: var(--spacing-xxlg); }
  .px-xxxlg { padding-inline: var(--spacing-xxxlg); }
  .px-xxxxlg { padding-inline: var(--spacing-xxxxlg); }

  @media (min-width: 768px) {
    .md\:pt-xxsm { padding-top: var(--spacing-xxsm); }
    .md\:pt-xsm  { padding-top: var(--spacing-xsm);  }
    .md\:pt-sm   { padding-top: var(--spacing-sm);   }
    .md\:pt-md1  { padding-top: var(--spacing-md1);  }
    .md\:pt-md2  { padding-top: var(--spacing-md2);  }
    .md\:pt-lg   { padding-top: var(--spacing-lg);   }
    .md\:pt-xlg  { padding-top: var(--spacing-xlg);  }
    .md\:pt-xxlg { padding-top: var(--spacing-xxlg); }
    .md\:pt-xxxlg{ padding-top: var(--spacing-xxxlg);}
    .md\:pt-xxxxlg{ padding-top: var(--spacing-xxxxlg);}

    .md\:pb-xxsm { padding-bottom: var(--spacing-xxsm); }
    .md\:pb-xsm  { padding-bottom: var(--spacing-xsm);  }
    .md\:pb-sm   { padding-bottom: var(--spacing-sm);   }
    .md\:pb-md1  { padding-bottom: var(--spacing-md1);  }
    .md\:pb-md2  { padding-bottom: var(--spacing-md2);  }
    .md\:pb-lg   { padding-bottom: var(--spacing-lg);   }
    .md\:pb-xlg  { padding-bottom: var(--spacing-xlg);  }
    .md\:pb-xxlg { padding-bottom: var(--spacing-xxlg); }
    .md\:pb-xxxlg{ padding-bottom: var(--spacing-xxxlg);}
    .md\:pb-xxxxlg{ padding-bottom: var(--spacing-xxxxlg);}

    .md\:py-xxsm { padding-block: var(--spacing-xxsm); }
    .md\:py-xsm { padding-block: var(--spacing-xsm); }
    .md\:py-sm { padding-block: var(--spacing-sm); }
    .md\:py-md1 { padding-block: var(--spacing-md1); }
    .md\:py-md2 { padding-block: var(--spacing-md2); }
    .md\:py-lg { padding-block: var(--spacing-lg); }
    .md\:py-xlg { padding-block: var(--spacing-xlg); }
    .md\:py-xxlg { padding-block: var(--spacing-xxlg); }
    .md\:py-xxxlg { padding-block: var(--spacing-xxxlg); }
    .md\:py-xxxxlg { padding-block: var(--spacing-xxxxlg); }

    .md\:px-xxsm { padding-inline: var(--spacing-xxsm); }
    .md\:px-xsm { padding-inline: var(--spacing-xsm); }
    .md\:px-sm { padding-inline: var(--spacing-sm); }
    .md\:px-md1 { padding-inline: var(--spacing-md1); }
    .md\:px-md2 { padding-inline: var(--spacing-md2); }
    .md\:px-lg { padding-inline: var(--spacing-lg); }
    .md\:px-xlg { padding-inline: var(--spacing-xlg); }
    .md\:px-xxlg { padding-inline: var(--spacing-xxlg); }
    .md\:px-xxxlg { padding-inline: var(--spacing-xxxlg); }
    .md\:px-xxxxlg { padding-inline: var(--spacing-xxxxlg); }
  }

  /* Regular margin-top */
  .mt-0 { margin-top: 0; }
  .mt-xxsm { margin-top: var(--spacing-xxsm); }
  .mt-xsm { margin-top: var(--spacing-xsm); }
  .mt-sm { margin-top: var(--spacing-sm); }
  .mt-md1 { margin-top: var(--spacing-md1); }
  .mt-md2 { margin-top: var(--spacing-md2); }
  .mt-lg { margin-top: var(--spacing-lg); }
  .mt-xlg { margin-top: var(--spacing-xlg); }
  .mt-xxlg { margin-top: var(--spacing-xxlg); }
  .mt-xxxlg { margin-top: var(--spacing-xxxlg); }
  .mt-xxxxlg { margin-top: var(--spacing-xxxxlg); }

  /* Regular margin-bottom */
  .mb-0 { margin-bottom: 0; }
  .mb-xxsm { margin-bottom: var(--spacing-xxsm); }
  .mb-xsm { margin-bottom: var(--spacing-xsm); }
  .mb-sm { margin-bottom: var(--spacing-sm); }
  .mb-md1 { margin-bottom: var(--spacing-md1); }
  .mb-md2 { margin-bottom: var(--spacing-md2); }
  .mb-lg { margin-bottom: var(--spacing-lg); }
  .mb-xlg { margin-bottom: var(--spacing-xlg); }
  .mb-xxlg { margin-bottom: var(--spacing-xxlg); }
  .mb-xxxlg { margin-bottom: var(--spacing-xxxlg); }
  .mb-xxxxlg { margin-bottom: var(--spacing-xxxxlg); }

  /* Regular margin-y */
  .my-0 { margin-block: 0; }
  .my-xxsm { margin-block: var(--spacing-xxsm); }
  .my-xsm { margin-block: var(--spacing-xsm); }
  .my-sm { margin-block: var(--spacing-sm); }
  .my-md1 { margin-block: var(--spacing-md1); }
  .my-md2 { margin-block: var(--spacing-md2); }
  .my-lg { margin-block: var(--spacing-lg); }
  .my-xlg { margin-block: var(--spacing-xlg); }
  .my-xxlg { margin-block: var(--spacing-xxlg); }
  .my-xxxlg { margin-block: var(--spacing-xxxlg); }
  .my-xxxxlg { margin-block: var(--spacing-xxxxlg); }

  @media (min-width: 768px) {
    .md\:mt-xxsm { margin-top: var(--spacing-xxsm); }
    .md\:mt-xsm  { margin-top: var(--spacing-xsm);  }
    .md\:mt-sm   { margin-top: var(--spacing-sm);   }
    .md\:mt-md1  { margin-top: var(--spacing-md1);  }
    .md\:mt-md2  { margin-top: var(--spacing-md2);  }
    .md\:mt-lg   { margin-top: var(--spacing-lg);   }
    .md\:mt-xlg  { margin-top: var(--spacing-xlg);  }
    .md\:mt-xxlg { margin-top: var(--spacing-xxlg); }
    .md\:mt-xxxlg{ margin-top: var(--spacing-xxxlg);}
    .md\:mt-xxxxlg{ margin-top: var(--spacing-xxxxlg);}

    .md\:mb-xxsm { margin-bottom: var(--spacing-xxsm); }
    .md\:mb-xsm  { margin-bottom: var(--spacing-xsm);  }
    .md\:mb-sm   { margin-bottom: var(--spacing-sm);   }
    .md\:mb-md1  { margin-bottom: var(--spacing-md1);  }
    .md\:mb-md2  { margin-bottom: var(--spacing-md2);  }
    .md\:mb-lg   { margin-bottom: var(--spacing-lg);   }
    .md\:mb-xlg  { margin-bottom: var(--spacing-xlg);  }
    .md\:mb-xxlg { margin-bottom: var(--spacing-xxlg); }
    .md\:mb-xxxlg{ margin-bottom: var(--spacing-xxxlg);}
    .md\:mb-xxxxlg{ margin-bottom: var(--spacing-xxxxlg);}

    .md\:my-xxsm { margin-block: var(--spacing-xxsm); }
    .md\:my-xsm { margin-block: var(--spacing-xsm); }
    .md\:my-sm { margin-block: var(--spacing-sm); }
    .md\:my-md1 { margin-block: var(--spacing-md1); }
    .md\:my-md2 { margin-block: var(--spacing-md2); }
    .md\:my-lg { margin-block: var(--spacing-lg); }
    .md\:my-xlg { margin-block: var(--spacing-xlg); }
    .md\:my-xxlg { margin-block: var(--spacing-xxlg); }
    .md\:my-xxxlg { margin-block: var(--spacing-xxxlg); }
    .md\:my-xxxxlg { margin-block: var(--spacing-xxxxlg); }
  }
}

/* Containers */
.outer-grid {
  --_og-gutter-size: 16px;
  --_og-max-content-width: 1375px;
  --_og-narrow-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;

  @media (width >= 768px) {
    --og-gutter-size: 20px;
  }
}

  .outer-grid--narrow {
    --_og-max-content-width: var(--_og-narrow-max-content-width);
  }

  .outer-grid > * {
    grid-column: content; /* default content placement, override with class-specific placement if needed */
  }

  .outer-grid > .full-bleed {
    grid-column: bleed; 
  }


/* Card Nav */
.c-cn {
  position: sticky;
  top: var(--amex-onenav-height);
  z-index: 3;
  background: var(--surface-primary);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;

  a { text-decoration: none; }
}
  .c-cn__content {
    height: 56px;
    display: flex;
    flex-flow: row;
    gap: 30px;
    justify-content: space-between;
    align-items: center;

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

  .c-cn__nav-container {
    display: flex;
    flex-flow: row;
    gap: 40px;

    /* Fix iOS Safari */
    overflow: initial;
  }

  .c-cn__nav-links {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 40px;
    text-transform: uppercase;
    letter-spacing: 0.3px;

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

    .nav-link {
      color: var(--text-icon-primary);
      min-height: 44px;
      place-content: center;

      &[aria-current="page"],
      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-color: var(--text-icon-accent);
        text-decoration-thickness: 2px;
      }

      &:hover {
        color: var(--amex-white);
      }
    }
  }

  .c-cn__card {
    display: flex;
    flex-flow: row;
    gap: 10px;
    align-items: center;
    color: var(--text-icon-primary, #E3DCD2);
    font-family: var(--font-primary-amex);
    font-size: calc(1.5rem * .625);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    min-height: 44px;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-color: var(--text-icon-accent);
      text-decoration-thickness: 2px;
      color: var(--amex-white);
    }

    img {
      display: block;
      width: 52px;
      height: auto;
    }
  }

  .c-cn__navoc {
    border: none;
  }

  .c-cn__explore {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--text-icon-accent);
    background: none;
    font-size: calc(1.5rem * .625);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    cursor: pointer;
    height: 44px;
    /* Register the button as a CSS anchor ── */
    anchor-name: --more-btn;

    &:hover .text {
      color: var(--amex-white);
    }

    &:focus-visible {
      outline-color: var(--amex-white);
    }

    @media (width < 768px) {
      border-left: 1px solid var(--text-icon-accent);
      min-height: 44px;
      min-width: 44px;
      justify-content: center;
    }

    .text {
      color: var(--text-icon-primary);

      @media (width < 768px) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
    }

    svg {
      color: inherit;

      @media (width < 768px) {
        color: var(--amex-white);
      }
    }

    &[aria-expanded="true"] {
      svg {
        transform: rotate(180deg);
      }
    }
  }

  .explore-link.nav-link-arrow {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: calc(1.5rem * .625);
    letter-spacing: 0.3px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--text-icon-primary);

    &:hover {
      color: var(--amex-white);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-color: var(--text-icon-accent);
      text-decoration-thickness: 2px;
    }
  }

  .c-cn__explore-links {
    background: none;
    border-radius: 5px;
    width: min(355px, calc(100% - 40px));
    max-width: 100%;

    position: absolute;
    top: 100%;
    right: 0;
    left: initial;
    translate: 0 0px;

    text-align: left;
    pointer-events: none;
    display: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

    opacity: 0;
    transform: translateY(-8px);
    transition: 
      opacity 0.125s ease,
      transform 0.125s ease,
      display 0.125s allow-discrete;

    /* Fix iOS Safari */
    overflow: visible;
    
    &:popover-open,
    &.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
      display: block;
    }

    &[hidden] {
      display: none;
      opacity: 0;
    }

    @supports (position-anchor: --more-btn) {
      top: calc(anchor(bottom) + 6px);
      left: anchor(right);
      right: auto;
      translate: -100% 0;
      position-anchor: --more-btn;
      translate: -100% 0;
    }

    /* @supports not (position-anchor: --more-btn) {
        position: absolute;
        top: 100%;
        right: 0;
    } */

    li {
      list-style: none;
    }

    .explore-link {
      display: flex;
      align-items: center;
      height: 44px;
      padding-left: 16px;
      padding-right: 20px;
      border-bottom: 1px solid rgba(0, 38, 58, 0.35);
      background-color: var(--silver-light);
      color: #706964;

      &:focus-visible {
        outline-offset: -2.5px;
        outline-color: #000000;
      }
    }

    .explore-link-external {
      position: relative;

      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-color: var(--text-icon-accent);
        text-decoration-thickness: 2px;
      }

      &:hover::after {
        background: var(--text-icon-accent);
      }
    }

    .explore-link-external::after {
      background: #2D292699;
      content: '';
      width: 100%;
      height: 100%;
      inset: 0;
      position: absolute;
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1130_27218)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.18417%201.17429C8.06706%201.26148%207.93723%201.33586%207.83484%201.43776C6.51306%202.75349%205.1952%204.0729%203.87693%205.39199C3.7835%205.48549%203.68503%205.57611%203.60568%205.68073C3.42626%205.91732%203.44898%206.15431%203.65768%206.35731C3.85302%206.54735%204.08083%206.56743%204.30457%206.40234C4.41008%206.32444%204.50183%206.22661%204.59526%206.13327C5.93328%204.79667%207.27026%203.45878%208.60868%202.12242C8.70299%202.02812%208.80594%201.94238%208.95937%201.80336C8.95937%202.40052%208.95681%202.90202%208.96017%203.40352C8.9628%203.79176%209.1595%204.03283%209.46387%204.03267C9.76192%204.03251%209.98454%203.78352%209.98886%203.40631C9.9995%202.46739%2010.0025%201.52838%209.99782%200.589454C9.99606%200.247044%209.76576%200.00525411%209.43044%200.00301457C8.47822%20-0.00330413%207.52583%200.0004551%206.57369%200.0129325C6.20061%200.0178915%205.9368%200.257842%205.9732%200.555461C6.01487%200.896271%206.22701%201.05168%206.57689%201.04424C7.08796%201.03328%207.59943%201.04136%208.11073%201.04136C8.13521%201.08575%208.15969%201.12998%208.18417%201.17429ZM0%202.77884C0.423076%201.74385%200.781679%201.50534%201.91508%201.50526C2.72164%201.50526%203.52819%201.50318%204.33467%201.50614C4.79534%201.50774%205.01836%201.69003%205.0066%202.04339C4.99564%202.37461%204.77654%202.54233%204.33643%202.54377C3.45052%202.54657%202.56469%202.54249%201.67879%202.54561C1.20579%202.54721%201.04237%202.70998%201.04149%203.19268C1.03829%204.89817%201.03805%206.60366%201.04165%208.30915C1.04269%208.77457%201.22523%208.95725%201.69142%208.95829C3.39709%208.96205%205.10283%208.96189%206.80841%208.95853C7.2886%208.95749%207.45347%208.79105%207.45515%208.31922C7.45819%207.43333%207.45419%206.54759%207.45691%205.66177C7.45835%205.21882%207.62329%205.00366%207.95693%204.99359C8.31138%204.98295%208.49296%205.20474%208.49464%205.66497C8.4976%206.47144%208.4956%207.27792%208.49552%208.08431C8.49552%209.21744%208.2581%209.57449%207.22189%2010H1.26979C0.625615%209.79764%200.200459%209.37613%200%208.73034V2.77884Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1130_27218%22%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat calc(100% - 20px) 50%;
      mask: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1130_27218)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.18417%201.17429C8.06706%201.26148%207.93723%201.33586%207.83484%201.43776C6.51306%202.75349%205.1952%204.0729%203.87693%205.39199C3.7835%205.48549%203.68503%205.57611%203.60568%205.68073C3.42626%205.91732%203.44898%206.15431%203.65768%206.35731C3.85302%206.54735%204.08083%206.56743%204.30457%206.40234C4.41008%206.32444%204.50183%206.22661%204.59526%206.13327C5.93328%204.79667%207.27026%203.45878%208.60868%202.12242C8.70299%202.02812%208.80594%201.94238%208.95937%201.80336C8.95937%202.40052%208.95681%202.90202%208.96017%203.40352C8.9628%203.79176%209.1595%204.03283%209.46387%204.03267C9.76192%204.03251%209.98454%203.78352%209.98886%203.40631C9.9995%202.46739%2010.0025%201.52838%209.99782%200.589454C9.99606%200.247044%209.76576%200.00525411%209.43044%200.00301457C8.47822%20-0.00330413%207.52583%200.0004551%206.57369%200.0129325C6.20061%200.0178915%205.9368%200.257842%205.9732%200.555461C6.01487%200.896271%206.22701%201.05168%206.57689%201.04424C7.08796%201.03328%207.59943%201.04136%208.11073%201.04136C8.13521%201.08575%208.15969%201.12998%208.18417%201.17429ZM0%202.77884C0.423076%201.74385%200.781679%201.50534%201.91508%201.50526C2.72164%201.50526%203.52819%201.50318%204.33467%201.50614C4.79534%201.50774%205.01836%201.69003%205.0066%202.04339C4.99564%202.37461%204.77654%202.54233%204.33643%202.54377C3.45052%202.54657%202.56469%202.54249%201.67879%202.54561C1.20579%202.54721%201.04237%202.70998%201.04149%203.19268C1.03829%204.89817%201.03805%206.60366%201.04165%208.30915C1.04269%208.77457%201.22523%208.95725%201.69142%208.95829C3.39709%208.96205%205.10283%208.96189%206.80841%208.95853C7.2886%208.95749%207.45347%208.79105%207.45515%208.31922C7.45819%207.43333%207.45419%206.54759%207.45691%205.66177C7.45835%205.21882%207.62329%205.00366%207.95693%204.99359C8.31138%204.98295%208.49296%205.20474%208.49464%205.66497C8.4976%206.47144%208.4956%207.27792%208.49552%208.08431C8.49552%209.21744%208.2581%209.57449%207.22189%2010H1.26979C0.625615%209.79764%200.200459%209.37613%200%208.73034V2.77884Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1130_27218%22%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat calc(100% - 20px) 50%;
      -webkit-mask-size: 18px;
      mask-size: 18px;
      pointer-events: none;
      /* background-repeat: no-repeat;
      background-position: calc(100% - 20px) 50%;
      background-size: 18px; */
    }

    .explore-link:not(.explore-link-external) {
      background-color: var(--surface-primary);
      border-bottom: 1px solid var(--stroke-subtle);
      color: var(--amex-white);
      outline-color: currentColor;
    }

    @media (width >= 1024px) {
      .explore-link.nav-link-arrow {
        display: none;
      }
    }
  }

  @starting-style {
    .c-cn__explore-links:popover-open {
      opacity: 0;
      transform: translateY(-20px);
    }
  }

  #joinNow {
    /* position: sticky;
    top: calc(var(--amex-nav-height) + var(--gold-nav-margin-top) + var(--gold-nav-height) + 4px);
    z-index: 5; */
    position: fixed;
    top: calc(var(--amex-onenav-height) + var(--card-nav-height));
    width: 100%;
    min-height: 44px;
    background: var(--surface-secondary);
    display: flex;
    flex-flow: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary-amex);
    font-weight: 400;

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

  #joinNow.notfixed {
    position: initial;
  }

  #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);
    margin-top: var(--spacing-1);
    font-size: calc(1.3rem * .625);
    font-weight: var(--font-weight-medium);
    color: var(--text-icon-primary);
  }

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

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


/* Typography */
.h2 {
  font-family: var(--font-primary);
  font-size: calc(3rem * .625);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  color: var(--text-icon-secondary);
  @media (width >= 768px) {
    font-size: calc(3.8rem * .625);
  }
}

.h3 {
  font-family: var(--font-primary);
  font-size: calc(3rem * .625);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.h3-with-eyebrow {
  font-family: var(--font-primary);
  font-size: calc(2rem * .625);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;

  .eyebrow {
    color: var(--text-icon-secondary, #FFF);
    font-family: var(--font-primary);
    font-size: calc(1.4rem * .625);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: 0.28px;
    text-transform: uppercase;
  }
}

.h5 {
  font-family: var(--font-primary);
  font-size: calc(2rem * .625);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}


.text-white {
  color: var(--amex-white);
}

/* START: Componenets */

  /* c-cta */
  .c-cta {
    display: flex;
    padding-inline: var(--spacing-md1);
    padding-block: var(--spacing-sm);
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 3px;
    background: var(--surface-cta);
    color: var(--text-icon-secondary);
    text-align: center;
    font-family: var(--font-primary);
    font-size: calc(1.5rem * .625);
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s ease-in;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &:hover {
      text-decoration: underline;
      transition: all .2s ease-out;
      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
  }

    .c-cta--ghost {
      border: 1px solid var(--stroke-strong);
      background: transparent;
      color: var(--text-icon-primary);
      
      &:hover {
        background: var(--surface-accent);
        border: 1px solid var(--surface-accent);
      }
    }

  /* c-cta-banner */
  .c-cta-banner {
    background-color: var(--surface-secondary);
    border: 1px solid var(--surface-primary);
    padding-block: var(--spacing-lg);
    padding-inline: var(--spacing-md1);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    grid-row: 1 / -1;
    position: relative;


    @media (width >= 768px) {
      padding-block: var(--spacing-xxlg);
      padding-inline: var(--spacing-lg);
      grid-template-columns: min(30ch) minmax(30ch, 506px);
      gap: 7%;
    }

    @media (width >= 1024px) {
      padding-inline: var(--spacing-xxlg);
    }
  }

  .c-cta-banner + .sup-flag {
    @media (width >= 768px) {
      margin-right: auto;
    }
  }

  .c-cta-banner__heading {
    z-index: 2;
  }

  .c-cta-banner__copy {
    display: grid;
    gap: var(--spacing-md1);
    z-index: 2;

    .c-cta { 
      @media (width >= 768px) {
        margin-right: auto;
      }
    }
  }

  .c-cta-banner__bg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--surface-primary);
    opacity: 0.38;
    align-self: center;
    margin-left: auto;
    z-index: 1;
    display: none;

    @media (width >= 1024px) {
      display: block;
    }
  }

  /* c-benefitsCta */
  .c-benefitsCta__inner {
    padding-inline: var(--spacing-md1);
    padding-block: var(--spacing-md1);
    display: grid;
    justify-content: center;
    border-top: 1px solid var(--surface-primary);
    border-bottom: 1px solid var(--surface-primary);

    @media (width >= 768px) {
      padding-block: var(--spacing-lg);
    }
  }

  .c-benefitsCta--home {
    margin-block-end: var(--spacing-md1);
    padding-block-start: var(--spacing-md1);

    @media (width >= 768px) {
      margin-block-end: var(--spacing-xxlg);
      padding-block-start: var(--spacing-xxlg);
    }
  }

    .c-benefitsCta__content {
      display: flex;
      flex-flow: column;
      gap: var(--spacing-md1);
      color: var(--text-icon-primary);

      @media (width >= 768px) {
        max-width: 900px;
        gap: var(--spacing-xxlg);
        flex-flow: row;
        align-items: center;
      }

      .c-cta {
        flex-shrink: 0;
        margin-block: auto;
      }
    }

  /* c-rewards-column */
  .c-rewards-column {
    display: grid;
    gap: var(--spacing-md1);

    @media (width >= 768px) {
      gap: var(--spacing-lg);
    }
  }




  /* c-twocol */
  .c-twocol {
    &.c-twocol--reverse {
      .c-twocol__inner {
        @media (width >= 768px) {
          grid-template-columns: minmax(432px, 42fr) 58fr;
        }
      }

      .c-twocol__media {
        @media (width >= 768px) {
          order: 1;
        }
      }
    }

    &.c-twocol--even {
      .c-twocol__inner {
        @media (width >= 768px) {
          grid-template-columns: 1fr 1fr;
        }
      }
    }   
  }

    .c-twocol__inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-lg);

      @media (width >= 768px) {
        grid-template-columns: 58fr minmax(432px, 42fr);
        gap: var(--spacing-md1);
      }

      &.items-center {
        align-items: center;
      }
    }

    .c-twocol__media {
      img {
        width: 100%;
      }
    }

    .c-twocol__media--object {
      height: 100%;
      width: 100%;

      @media (width < 768px) {
        max-height: 36vh;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .c-twocol__content {
      max-width: initial;
      margin-inline: auto;

      @media (width >= 768px) {
        max-width: 456px;
      }
    }

    .c-twocol__content-wide {
      max-width: initial;
      margin-inline: auto;

      @media (width >= 768px) {
        max-width: 550px;
        width: 100%;
      }
    }

    .c-twocol__group {
      display: grid;
      gap: var(--spacing-md1);
    }

    .c-twocol__item {
      display: grid;
      gap: var(--spacing-sm);
      padding-bottom: var(--spacing-md1);
      border-bottom: 1px solid var(--stroke-subtle);
    }

    .c-twocol__item:last-of-type {
      padding-bottom: 0;
      border-bottom: none;
    }

  /* c-apps */
  .c-apps {
    padding-block: var(--spacing-xxlg);
  }

    .c-apps__inner {
      display: flex;
      flex-flow: column;
      gap: var(--spacing-lg);

      @media (width >= 768px) {
        flex-flow: row;
        align-items: center;
      }
    }

    .c-apps__picture {
      max-width: 100%;
      margin-inline: auto;
      order: 0;

      @media (width >= 768px) {
        max-width: 418px;
        min-width: 320px;
        order: 1;
      }
    }


    .c-apps__group {
      display: grid;
      grid-template-columns: max-content 1fr;
      column-gap: var(--spacing-sm);
      row-gap: var(--spacing-md1);
      padding-block: var(--spacing-md2);
      border-top: 1px solid var(--stroke-subtle);

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

      .app-icon {
        grid-column: 1;
        max-width: 60px;
      }

      h2 {
        color: var(--text-icon-secondary);
        font-family: var(--font-primary);
        font-size: calc(2.6rem * .625);
        font-style: normal;
        font-weight: 600;
        line-height: 1.25;
        display: grid;
        align-self: flex-start;
        gap: var(--spacing-xxsm);
        grid-column: 2;

        .eyebrow {
          font-size: calc(1.4rem * .625);
          line-height: 1.3;
          letter-spacing: 0.28px;
          text-transform: uppercase;
        }
      }

      p {
        grid-column: 1 / -1;
        font-size: calc(1.6rem * .625);
      }

      .app-btns {
        grid-column: 1 / -1;
        display: flex;
        flex-flow: row wrap;
        gap: var(--spacing-sm);
        align-items: center;

        a:focus-visible {
          outline-color: var(--amex-white);
        }
      }
    }

  /* c-accelerator */
 .c-accelerator {
    width: 100%;
    margin-inline: auto;
    display: grid;
    gap: var(--spacing-md1);

    @media (width >= 768px) {
      gap: var(--spacing-lg);
      max-width: 456px;
    }
 }
  .c-accelerator__items {
    display: flex;
    flex-flow: column;
  }

  .c-accelerator-grid {
    grid-template-columns: 1fr;
    display: grid;

    @media (width >= 1024px) {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 5%;
      row-gap: var(--spacing-lg);
    }
  }

    .c-accelerator-grid__item {
      display: flex;
      flex-flow: column;
      gap: var(--spacing-sm);
      padding-top: var(--spacing-md1);
      padding-bottom: var(--spacing-md1);

      &:not(:last-of-type) {
        border-bottom: 1px solid var(--stroke-subtle);

        @media (width >= 1024px) {
          border-bottom: none;
        }
      }

      @media (width >= 1024px) {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

  .c-accelerator-items__item:not(:last-of-type) {
    padding-bottom: var(--spacing-md1);
    border-bottom: 1px solid var(--stroke-subtle);

    &.rewards {
      @media (width >= 768px) {
        padding-bottom: var(--spacing-lg);
      }
    }
  }

  .c-accelerator-items__item:first-of-type {
    padding-top: 0;
  }

  .c-accelerator-items__item {
    padding-top: var(--spacing-md1);
    /* border-top: 1px solid var(--stroke-subtle); */
    display: grid;
    gap: var(--spacing-sm);

    &.rewards {
      padding-top: var(--spacing-md1);

      @media (width >= 768px) {
        padding-top: var(--spacing-lg);
      }
    }
  }

  .c-accelerator__heading {
    font-size: calc(4.7rem * .625);
    font-family: var(--font-delta-display);
    font-weight: 300;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--text-icon-secondary);
  }

  .c-accelerator__eyebrow {
    font-size: calc(1.4rem * .625);
    font-family: var(--font-primary);
    line-height: 1.3;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    color: var(--text-icon-primary);
  }


  /* Card Management */
  /* c-cardmanagement  */
  .c-cardmanagement {
    grid-column: content;
    display: flex;
    flex-flow: row;
    gap: var(--spacing-lg);
    justify-content: space-between;
    align-items: center;

    @media (width < 768px) {
      flex-flow: column;
      gap: var(--spacing-2);
    }
    

    h2 {
      font-family: var(--font-primary);
      font-size: calc(1.9rem * .625);
      font-weight: var(--font-weight-semibold);
      line-height: 1.3;
      text-transform: uppercase;
      color: var(--text-icon-secondary);
      
      > div {
        font-size: calc(3rem * .625);
        font-weight: var(--font-weight-semibold);
        font-family: var(--font-primary);
        line-height: 1.15;
        margin-top: var(--spacing-xxsm);
        text-transform: initial;

        @media (width >= 768px) {
          font-size: calc(3.8rem * .625);
        }
      }
    }
  }

    .c-cardmanagement__outer {
      padding-block: var(--spacing-lg);
      background: var(--surface-primary);

      @media (width >= 768px) {
        padding-block: var(--spacing-xxlg);
      }
    }

    .c-cardmanagement__content {
      display: flex;
      flex-flow: column;
      gap: var(--spacing-md1);
      max-width: 459px;
      flex-shrink: 1;

      @media (width < 768px) {
        flex-shrink: initial;
        max-width: initial;
        width: 100%;
        padding-inline: 16px;
      }

      .card-img {
        width: 100%;
        max-width: 120px;
      }
    }

    .c-cardmanagement__links {
      display: flex;
      flex-flow: column;
      min-width: 360px;
      max-width: 562px;
      list-style: none;

      @media (width < 768px) {
        max-width: initial;
        width: 100%;
        min-width: initial;
      }

      a {
        display: flex;
        flex-flow: column;
        padding-block: var(--spacing-md1);
        padding-inline: var(--spacing-sm);
        border-bottom: 1px solid var(--stroke-subtle);
        text-decoration: none;
        color: inherit;
        transition: background .2s ease-in;

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }

        &:hover {
          background: var(--surface-subtle);
          transition: all .2s ease-out;

          @media (prefers-reduced-motion: reduce) {
            transition: none;
          }
        }

        svg {
          color: var(--text-icon-accent);
        }
      }

      li:last-child a {
        /* border-bottom: none; */
      }

      h3 {
        font-family: var(--font-primary);
        font-size: calc(2rem * .625);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-1);
        display: inline-flex;
        gap: var(--spacing-2);
        align-items: center;

        @media (width < 768px) {
          font-size: calc(1.8rem * .625);
        }
      }
    }

  /* c-hero */
  .hero {
    background-color: var(--surface-secondary);
  }

  .c-hero {
    --nav-heights: calc(var(--amex-onenav-height) + var(--card-nav-height));
    --hero-height: calc(90vh - var(--nav-heights));
    display: grid;
    grid-template-rows: 1fr 80px;
    grid-template-columns: subgrid;
    grid-column: bleed;

    @media (width >= 768px) {
      --hero-height: calc(90vh - var(--nav-heights));
      grid-template-rows: var(--hero-height) 36px;
    }
  }

  .c-hero__content {
    margin-top: auto;
    z-index: 2;
    grid-row: 1 / -1;
    grid-column: content;
    padding-inline: var(--spacing-sm);
    padding-block: var(--spacing-md1);
    background: linear-gradient(180deg, rgba(11, 27, 35, 0.80) 0%, #0B1B23 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-md1);

    @media (width >= 768px) {
      padding-inline: var(--spacing-lg);
      grid-template-columns: max-content 1fr;
      gap: var(--spacing-lg);
      
    }

    h1 {
      font-family: var(--font-delta-display);
      font-size: calc(3.8rem * .625);
      font-style: normal;
      font-weight: 300;
      line-height: 1.1;
      text-transform: uppercase;

      @media (width >= 768px) {
        font-size: calc(5.9rem * .625);
      }

      .eyebrow {
        font-family: var(--font-primary);
        font-size: calc(3rem * .625);
        font-style: normal;
        font-weight: var(--font-weight-semibold);
        line-height: 1.15;
        text-transform: initial;
        margin-bottom: var(--spacing-sm);

        @media (width >= 768px) {
          font-size: calc(3.8rem * .625);
        }
      }
    }
  }

  .c-hero__stamp {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    align-items: center;
    max-width: 135px;

    @media (width >= 768px) {
      max-width: 243px;
      border-right: 1px solid var(--stroke-subtle);
      padding-right: var(--spacing-lg);
    }

    .stamp,
    .card {
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      width: 100%;
      
    }

    .card {
      justify-self: center;
      width: 78%;
    }
  }

  .c-hero__bg {
    grid-row: 1;
    grid-column: bleed;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }


  /* c-hero-alt */
  .c-hero-alt {
    --nav-heights: calc(var(--amex-onenav-height) + var(--card-nav-height));
    --hero-alt-height: calc(90vh - var(--nav-heights));
    --hero-alt-max-height: calc(100vh - var(--nav-heights));
    display: grid;
    grid-template-columns: subgrid;
    grid-column: bleed;
    min-height: max(500px, var(--hero-alt-height));
    max-height: var(--hero-alt-max-height);
    z-index: 1;
  }

    .c-hero-alt__content,
    .c-hero-alt__bg,
    .c-hero-alt__stamp {
      min-height: min-content;
    }

    .c-hero-alt__content {
      grid-column: content;
      grid-row: 1 / -1;
      z-index: 3;

      display: flex;
      flex-flow: column;
      color: var(--text-icon-reverse);
      gap: var(--spacing-md1);
      padding-block: var(--spacing-md1);
      margin-top: auto;

      @media (width >= 768px) {
        padding-block: var(--spacing-lg);
        padding-inline: var(--spacing-lg);
        gap: var(--spacing-lg);
      }

      .card {
        width: 100%;
        max-width: 154px;

        @media (width >= 768px) {
          max-width: 213px;
        }
      }

      h1 {
        font-family: var(--font-delta-display);
        font-size: calc(3.8rem * .625);
        font-style: normal;
        font-weight: 300;
        line-height: 1.1;
        text-transform: uppercase;

        @media (width >= 768px) {
          font-size: calc(5.9rem * .625);
        }

        .eyebrow {
          font-family: var(--font-primary);
          font-size: calc(3rem * .625);
          font-style: normal;
          font-weight: var(--font-weight-semibold);
          line-height: 1.15;
          text-transform: initial;
          margin-bottom: var(--spacing-sm);

          @media (width >= 768px) {
            font-size: calc(3.8rem * .625);
          }
        }
      }
    }

    .c-hero-alt__bg {
      grid-row: 1 / -1;
      grid-column: bleed;
      position: relative;
      z-index: 1;
      pointer-events: none;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right 36%;
      }

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(43deg, #0B253F 10.1%, rgba(11, 37, 63, 0.00) 55.17%);
        pointer-events: none;

        @media (width >= 992px) {
          background: linear-gradient(41deg, var(--surface-reverse) 4.54%, rgba(11, 37, 63, 0.00) 61.06%);
        }
      }
    }

    .c-hero-alt__stamp {
      display: block;
      grid-row: 1 / -1;
      grid-column: bleed;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right 36%;
        /* mask-image: linear-gradient(135deg, black 0%, black 50%, transparent 70%);
        -webkit-mask-image: linear-gradient(135deg, black 0%, black 50%, transparent 70%); */
      }
    }

  /* c-pagehero */
  .c-pagehero {
    /* margin-bottom: var(--spacing-lg); */

    @media (width >= 768px) {
      /* margin-bottom: var(--spacing-xxxlg); */
    }
  }
    .c-pagehero__bg {
      grid-column: bleed;
      grid-row: 1;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .c-pagehero__content {
      padding-block: var(--spacing-md1);
      grid-row: 1;
      margin-top: auto;
      z-index: 2;
      min-height: 250px;
      display: flex;
      align-items: flex-end;

      @media (width >= 768px) {
        padding-block: var(--spacing-lg);
      }

      h1 {
        font-size: calc(3.2rem * .625);
        font-weight: 300;
        font-family: var(--font-delta-display);
        line-height: 1.1;
        text-transform: uppercase;
        display: grid;
        gap: var(--spacing-xsm);

        @media (width >= 768px) {
          font-size: calc(4.7rem * .625);
        }

        .eyebrow {
          font-family: var(--font-primary);
          font-size: calc(1.9rem * .625);
          font-weight: var(--font-weight-semibold);
          line-height: 1.3;
          letter-spacing: 0.38px;
          text-transform: uppercase;
        }
      }
    }

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

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

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

  .c-jump-nav__outer {
    position: sticky;
    top: calc(var(--amex-onenav-height) + var(--card-nav-height));
    z-index: 2;
    background: rgba(0, 51, 102, 0.36);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--stroke-subtle);
  }

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

  .c-jump-nav__ul {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--spacing-md1);
    justify-content: flex-start;
    margin-inline: auto;
    padding-block: var(--spacing-xsm);
    width: 100%;
    max-width: 1380px;

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

    li {
      list-style: none;
      display: flex;
    }

    a, button {
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      flex-basis: 100%;
      padding-block: 12px;
      padding-inline: var(--spacing-md1);
      border: 1px solid var(--stroke-strong);
      text-decoration: none;
      background: var(--surface-secondary);
      width: max-content;
      color: var(--text-icon-primary);
      font-family: var(--font-primary);
      font-size: calc(1.5rem * .625);
      font-style: normal;
      font-weight: var(--font-weight-semibold);
      line-height: 1.3;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .2s ease-in;

      @media (width >= 768px) {
        padding-inline: var(--spacing-xxlg);
      }
      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &[aria-selected="true"],
      &:hover {
        background: var(--surface-primary);
        transition: all .2s ease-out;

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }
    }
  }

  /* c-tabs */
  .c-tabs__tab {
    scroll-margin-top: calc(var(--amex-onenav-height));
    padding-top: var(--spacing-md1);

    @media (width >= 768px) {
      padding-top: var(--spacing-lg);
    }

    &[hidden] {
      display: none;
    }
  }

  /* c-card */
  .c-card {
    background: var(--surface-primary);
    border: 1px solid var(--stroke-subtle);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-flow: column;
    
    h3 {
      font-family: var(--font-primary);
      font-size: calc(2.6rem * .625);
      font-style: normal;
      font-weight: var(--font-weight-semibold);
      line-height: 1.25;
      margin-bottom: var(--spacing-sm);

      @media (width >= 768px) {
        font-size: calc(3rem * .625);
      }
    }
  }

  .c-card--reverse-bg {
    background: var(--surface-reverse);
    color: var(--text-icon-reverse);

    .eyebrow {
      color: var(--text-icon-reverse-secondary);
    }
  }

  .c-card--large {
    @media (width >= 1024px) {
      grid-column: span 2;
    }
  }

  .c-card--row {
    @media (width >= 768px) and (width < 1024px) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-column: span 2;

      .c-card__hero {
        aspect-ratio: initial;
      }

      .c-card__body {
        padding-block: var(--spacing-md1);
      }
    }
  }

    .c-card__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--spacing-md1);
      margin-top: var(--spacing-md1);

      @media (width >= 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @media (width >= 1024px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .c-card__grid--two {
      @media (width >= 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .c-card__hero,
      .c-card__picture {
        @media (width >= 768px) {
          aspect-ratio: 678 / 260;
        }
      }
    }

    .c-card__hero {
      display: grid;
      aspect-ratio: 343 / 200;

      @media (width >= 768px) {
        aspect-ratio: 444 / 260;
      }
    }

    .c-card__picture {
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .c-card__body {
      padding-inline: var(--spacing-md1);
      padding-bottom: var(--spacing-sm);
      padding-top: var(--spacing-md1);
      display: flex;
      flex-flow: column;
      flex-grow: 1;
      position: relative;

      .c-arrow-link {
        padding-block: 12px;
        margin-top: auto;
      }

      p {
        margin-bottom: var(--spacing-sm);
      }

      &:not(:has(.c-arrow-link)) > :last-child {
        margin-bottom: 26px;
      }
    }

    .c-card__new-tag {
      background: var(--surface-subtle);
      color: var(--text-icon-secondary);
      padding-inline: var(--spacing-md1);
      padding-block: var(--spacing-sm);
      position: absolute;
      top: -30px;
      left: 0;
      text-transform: uppercase;
      font-family: var(--font-primary);
      font-size: calc(2rem * .625);
      font-weight: var(--font-weight-semibold);
      line-height: 1.3;
    }

    .c-card__items {
      display: flex;
      flex-flow: column;
      margin-block: var(--spacing-lg);
    }

    .c-card__items-group {
      padding-block: var(--spacing-md1);
      border-bottom: 1px solid var(--stroke-subtle);

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

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

      h4 {
        font-family: var(--font-primary);
        font-size: calc(2rem * .625);
        font-style: normal;
        font-weight: var(--font-weight-semibold);
        line-height: 1.3;
        margin-bottom: var(--spacing-sm);

        .eyebrow {
          font-size: calc(1.4rem * .625);
          font-style: normal;
          font-weight: var(--font-weight-semibold);
          line-height: 1.3;
          letter-spacing: 0.28px;
          text-transform: uppercase;
          margin-bottom: var(--spacing-xsm);
        }
      }
    }

    .c-card__footnote,
    .sup-flag {
      position: relative;
      background: 
        linear-gradient(to bottom, var(--surface-subtle), var(--surface-subtle)),
        linear-gradient(to bottom, #052848, #052848);
      padding-block: var(--spacing-xsm);
      padding-left: var(--spacing-md1);
      /* padding-right: 48px; Enable this if you want the icon back */
      padding-right: var(--spacing-md1);

      &::after {
        inset: 0;
        position: absolute;
        /* uncomment line below to bring back the icon */
        /* content: ''; */
        -webkit-mask: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%221%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1263_5486)%22%3E%3Cpath%20d%3D%22M12%204C16.4%204%2020%207.6%2020%2012C20%2016.4%2016.4%2020%2012%2020C7.6%2020%204%2016.4%204%2012C4%207.6%207.6%204%2012%204ZM12%205C8.1%205%205%208.1%205%2012C5%2015.9%208.1%2019%2012%2019C15.9%2019%2019%2015.9%2019%2012C19%208.1%2015.9%205%2012%205ZM12%2010C12.6%2010%2013%2010.4%2013%2011V16C13%2016.6%2012.6%2017%2012%2017C11.4%2017%2011%2016.6%2011%2016V11C11%2010.4%2011.4%2010%2012%2010ZM12%207C12.6%207%2013%207.4%2013%208C13%208.6%2012.6%209%2012%209C11.4%209%2011%208.6%2011%208C11%207.4%2011.4%207%2012%207Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1263_5486%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20transform%3D%22translate(4%204)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat calc(100% - 8px) 50%;
        mask: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%221%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1263_5486)%22%3E%3Cpath%20d%3D%22M12%204C16.4%204%2020%207.6%2020%2012C20%2016.4%2016.4%2020%2012%2020C7.6%2020%204%2016.4%204%2012C4%207.6%207.6%204%2012%204ZM12%205C8.1%205%205%208.1%205%2012C5%2015.9%208.1%2019%2012%2019C15.9%2019%2019%2015.9%2019%2012C19%208.1%2015.9%205%2012%205ZM12%2010C12.6%2010%2013%2010.4%2013%2011V16C13%2016.6%2012.6%2017%2012%2017C11.4%2017%2011%2016.6%2011%2016V11C11%2010.4%2011.4%2010%2012%2010ZM12%207C12.6%207%2013%207.4%2013%208C13%208.6%2012.6%209%2012%209C11.4%209%2011%208.6%2011%208C11%207.4%2011.4%207%2012%207Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1263_5486%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20transform%3D%22translate(4%204)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat calc(100% - 8px) 50%;
        -webkit-mask-size: 24px;
        mask-size: 24px;
        background: #fff;
        opacity: 0.3;
        pointer-events: none;
      }
    }

  /* c-arrow-link */
  .c-arrow-link {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--spacing-xxsm);
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: calc(1.5rem * .625);
    letter-spacing: 0.3px;
    line-height: 1.3;

    &:hover {
      text-decoration: underline;
    }

    svg {
      color: var(--text-icon-accent);
      flex-shrink: 0;
    }
  }

  /* c-nam | Not a Member*/
  .c-nam {
    display: grid;
    padding-inline: var(--spacing-md1);
    padding-block: var(--spacing-sm);
    background: var(--surface-secondary);
    font-family: var(--font-primary);
    align-items: flex-start;
    grid-template-columns: 1fr;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);

    @media (width >= 768px) {
      align-items: center;
      justify-content: center;
      margin-top: 0;
    }

    > * {
      @media (width >= 768px) {
        margin-inline: auto;
      }
    }

    h2 {
      font-size: calc(2rem * .625);
      font-weight: var(--font-weight-semibold);
      line-height: 1.3;
      text-wrap: pretty;

      @media (width >= 768px) {
        font-size: calc(2.4rem * .625);
      }
    }

    hr {
      background: var(--stroke-reverse);
      border: none;
      height: 1px;
      width: 100%;
      margin-block: var(--spacing-sm);
    }
  }

    .c-nam__outer {
      background: var(--surface-primary);
    }



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

    @media (width < 1024px) {
      gap: 0;
      grid-template-columns: 1fr;
    }

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

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

    .tab-controls {
      display: none;

      @media (width >= 1024px) {
        display: block;
      }
    }

    .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%;

      @media (width < 1024px) {
        margin-bottom: var(--spacing-lg);
      }
    }
	
    .tab-item .tab-title {
      background-color: var(--color-transparent);
      border: none;
      border-left: 1px solid transparent;
      color: var(--color-white);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--spacing-xxsm);
      font-family: var(--font-primary);
      font-size: calc(1.5rem * .625);
      font-weight: var(--font-weight-semibold);
      line-height: 1.3;
      letter-spacing: 0.3px;
      padding: 10px 16px;
      position: relative;
      text-align: left;
      text-transform: uppercase;
      width: 100%;

      @media (width < 1024px) {
        border-bottom: 1px solid var(--text-icon-accent);
        padding-left: 0;
        justify-content: space-between;
      }

      svg {
        color: var(--text-icon-accent);
      }
    }

    .tab-section .tab-item .tab-title {
      @media (width >= 1024px) {
        display: none;
      }
    }

    .tab-item .tab-title.is-active svg {
      @media (width < 1024px) {
        transform: rotate(90deg);
      }
    }

    .tab-item .tab-title:hover, 
    .tab-item .tab-title.is-active {
      border-left: 1px solid var(--text-icon-accent);
      /* background: #5A616D; */
      color: var(--color-white);
      text-decoration: none;
      background-color: rgba(255, 255, 255, 0.05);
      
      @media (width < 1024px) {
        border-left: none;
        background-color: transparent;
      }
    }

	.tab-item .tab-title:hover {
		border-left: 1px solid transparent;
	}


	.tab-item .tab-title.is-active:hover {
		border-left: 1px solid var(--text-icon-accent);

    @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%;

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

    a {
      color: inherit;
    }
	}

	.tab-item .tab-content.is-active {
		display: block;
		height: auto;
		opacity: 1;
		visibility: visible;
	}

  .tab-content--group:not(:last-child) { 
    border-bottom: 1px solid var(--stroke-subtle);
    margin-bottom: var(--spacing-md1);
    padding-bottom: var(--spacing-md1);

    @media (width >= 1024px) {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    }
  }

  .tab-content--group {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-sm);
  }

	.tab-content--group h3 {
    color: var(--text-icon-primary);
    font-family: var(--font-primary);
    font-size: calc(2rem * .625);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3
	}

	.tab-content--group p { 
		font-weight: var(--font-weight-default);
	}

	.sidebar {
		left: 0;
		position: sticky;
		top: calc(var(--amex-onenav-height) + var(--card-nav-height) + 16px);
	}


  /* c-split */
  .c-split {
    display: grid;
    gap: var(--spacing-md1);
  }

    .c-split__logo {
      max-width: 281px;
    }
    
    .c-split__item {
      display: flex;
      flex-flow: row;
      gap: var(--spacing-md1);
    }

    .c-split__icon {
      color: var(--text-icon-accent);
      width: 48px;
      aspect-ratio: 1;
      flex-shrink: 0;
    }

    .c-split__copy {
      display: grid;
      gap: var(--spacing-sm);
    }


  /* c-banner3 */
  .c-banner3 {
    margin-block: var(--spacing-lg);

    @media (width >= 768px) {
      margin-block: var(--spacing-xxxlg);
    }
  }

    .c-banner3__grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-column: bleed;
      background: var(--surface-primary);
      padding-inline: var(--spacing-md1);
      padding-block: var(--spacing-xxlg);
      row-gap: var(--spacing-md2);

      @media (width >= 768px) {
        grid-template-columns: minmax(320px, 1fr) 2fr;
        grid-column: content;
        border: 1px solid var(--stroke-subtle);
        column-gap: clamp(6%, 2.5vw, 12%);
        row-gap: 0;
      }

      @media (width >= 1024px) {
        padding-inline: var(--spacing-xxlg);
        padding-block: var(--spacing-xxxlg);
      }
    }

    .c-banner3__flex {
      display: flex;
      flex-flow: column;
      gap: var(--spacing-lg);

      @media (width >= 1024px) {
        flex-flow: row;
        grid-column: 2;
      }
    }

    .c-banner3__col {
      display: grid;
      grid-template-columns: max-content 1fr;
      grid-template-areas: "icon content";
      gap: var(--spacing-md1);

      @media (width >= 1024px) {
        display: initial;
      }

      > div {
        grid-column: content;
      }

      svg {
        width: 48px;
        aspect-ratio: 1;
        flex-shrink: 0;
        margin-bottom: var(--spacing-xsm);
        color: var(--text-icon-accent);
        grid-column: icon;
      }

      h3 {
        margin-bottom: var(--spacing-sm);
      }
    }

    .c-banner3__disclaimer {
      margin-top: var(--spacing-md1);

      @media (width >= 768px) {
        margin-top: var(--spacing-lg);
        grid-column: 2;
      }
    }


  /* c-appsmall */
  .c-appsmall {
    margin-top: var(--spacing-xxlg);
  }

    .c-appsmall__inner {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      gap: var(--spacing-lg);

      @media (width >= 768px) {
        grid-template-columns: 42fr 58fr;
        gap: var(--spacing-md1);
      }
    }

    .c-appsmall__picture {
      justify-self: center;
    }

    .c-appsmall__content {
      max-width: initial;
      margin-inline: auto;
      display: grid;
      gap: var(--spacing-md1);

      @media (width >= 768px) {
        max-width: 660px;
        gap: var(--spacing-lg);
      }

      .h2 {
        .eyebrow {
          font-size: calc(1.4rem * .625);
          font-weight: var(--font-weight-semibold);
          line-height: 1.3;
          letter-spacing: 0.38px;
          text-transform: uppercase;
          margin-bottom: var(--spacing-xsm);

          @media (width >= 768px) {
            font-size: calc(1.9rem * .625);
          }
        }
      }
    }

    .c-appsmall__footer {
      display: flex;
      flex-flow: row wrap;
      gap: var(--spacing-md1);
      align-items: center;

      .amex-app-icon {
        width: 44px;
        height: 44px;
        aspect-ratio: 1;
      }

      a:focus-visible {
        outline-color: var(--amex-white);
      }

      a > img {
        min-height: 44px;
      }
    }


  /* c-footer */
  .c-footer {
    background-color: var(--surface-secondary);
    min-height: 260px;
  }

    .c-footer:not(:has(.c-footer__picture-bg)) {
      @media (width < 768px) {
        min-height: initial;
        row-gap: var(--spacing-lg);
      }

      .c-footer__lockup {
        @media (width < 768px) {
          margin-top: var(--spacing-md1);
          max-width: 226px;
          margin-inline: auto;
        }
        @media (width >= 768px) {
          padding-top: var(--spacing-xxxlg);
          align-self: flex-start;
        }
      }

      .c-footer__nav {
        @media (width < 768px) {
          grid-row: 2;
        }
        
      }
    }

    .c-footer__picture-bg {
      grid-column: bleed;
      grid-row: 1;
      max-height: 550px;
      position: relative;

      /* Top Gradient */
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(11, 27, 35, 0.00) 0%, #0B1B23 100%);
        pointer-events: none;
      }

      /* Side gradient */
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, #0B1B23 0%, rgba(11, 27, 35, 0.00) 35%, rgba(11, 27, 35, 0.00) 65%, #0B1B23 100%);
        pointer-events: none;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* Right Side */
        &::after {
          content: '';
          position: absolute;
          inset: 0;
          width: 35%;
          background: linear-gradient(to right, rgba(11, 27, 35, 0.00) 0%, #0B1B23 100%);
        }
      }
    }

    .c-footer__lockup {
      max-width: 100%;
      margin-inline: auto;
      align-self: center;
      grid-row: 1;
      z-index: 2;
    }

    .c-footer__nav {
      background-color: var(--surface-primary);
      padding-inline: var(--spacing-md1);
      margin-top: var(--spacing-lg);
      margin-bottom: var(--spacing-md1);
      width: 100%;
      justify-self: center;
      grid-row: 1;
      margin-top: auto;
      z-index: 2;

      @media (width >= 768px) {
        width: max-content;
        padding-inline: var(--spacing-lg);
        margin-bottom: 0;
      }

      ul {
        list-style: none;
        display: flex;
        flex-flow: column;

        @media (width >= 768px) {
          flex-flow: row;
          gap: calc(var(--spacing-lg) * 2 + 1px);
        }
      }

      li { 
        display: block;
      }

      a {
        padding-block: var(--spacing-md1);
        border-bottom: 1px solid var(--stroke-subtle);
        justify-content: center;

        &:hover,
        &[aria-current="page"] {
          text-decoration: underline;
          text-underline-offset: 4px;
          text-decoration-color: var(--text-icon-accent);
          text-decoration-thickness: 2px;
        }

        @media (width >= 768px) {
          padding-block: var(--spacing-sm);
          border-bottom: none;
          position: relative;
        }
      }

      ul li:last-child a {
        border-bottom: none;
      }

      ul li:not(:last-child) a::after {
        content: '';
        position: absolute;
        height: calc(100% - var(--spacing-sm)* 2);
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        background-color: var(--stroke-subtle);
        right: calc(var(--spacing-lg) * -1 + 1px);

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

  /* c-terms */
  .c-terms {

    background-color: var(--amex-white);
    color: var(--text-icon-primary);

    @media (width >= 768px) {
      margin-top: var(--spacing-lg);
    }

    &[open] .icon-details {
      transform: rotate(90deg);
    }

    summary {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      cursor: pointer;
      font-size: calc(1.5rem * .625);
      font-weight: var(--font-weight-bold);
      line-height: 1.5;
      text-decoration: none;
      padding-block: var(--spacing-sm);

      &:focus-visible,
      &:hover {
        text-decoration: underline;
      }

      &:marker {
        display: none;
      }

      svg.icon-details {
        color: var(--text-icon-accent);
      }
    }

    #dbTerms {
      padding-top: var(--spacing-md2);
      padding-bottom: var(--spacing-lg);
      border-top: 1px solid var(--stroke-subtle);

      @media (width >= 768px) {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-xxlg);
      }
    }

    .all-terms {
      padding-left: 1em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: calc(1.2rem * .625);

      p { 
        font-size: inherit;
      }

      li {
        margin-bottom: 1em;

        &.no-number-term { list-style: none; margin-left: -1em;}

        p {
          margin-bottom: 1em;

          &:has(> strong:only-child) {
            margin-bottom: 0;
          }
        }

        a {
          color: var(--amex-blue);
          text-decoration: underline;

          &:has(.link-text) {
            text-decoration: none;
          }

          .link-text {
            text-decoration: underline;
          }
        }
      }
    }

  }
/* END: Componenets */