/* Breadcrumbs */
.breadcrumb.aem-GridColumn.aem-GridColumn--default--12 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px 32px;
  background-color: #F7F8F9;
}

a.text-link:focus {
	outline: 1px dashed #333; /* added to counteract a DLS update that removes the focus indicator on links */
}

a.text-link { /* removes padding from links so that focus indicator doesn't overlap other words */
    padding-top:0; 
    padding-bottom:0; 
}

.accordion-content .stack .text-link { /* removes padding from links within dropdowns */
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Sub-nav bar */
.offers-nav {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background-color: #00175A;
  height: 60px;
  /* border-radius: 5px; */
}

.offers-nav__inner {
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 30px;
}

.arrow-exploring {
  width: 16px;
  height: 16px;
}

.arrow-enrolled{
  width: 20px;
  height: 20px;
}

.offers-nav__inner a {
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}

/* Hero Module */
.hero-module {
  position: relative;
  width: 100%;
  max-width: 1280px;
  /* was height: 523px — a hard height plus overflow:hidden silently clips the
     CTA row if Benton Sans fails to load and the fallback runs the paragraph
     to a 6th line. min-height keeps the 523px design and lets it grow instead. */
  min-height: 523px;
  margin: 0 auto;
  padding-top: 1px;
  display: grid;
  grid-template-columns: 50% 50%;
  overflow: hidden;
}

/* Left Column */
.hero-module__left {
  position: relative;
  z-index: 1;
  background-color: #006FCF;
  padding-bottom: 30px;
}

.hero-module__content {
  box-sizing: border-box;
  /* right padding sizes the content box to exactly 392px, the "392 Fill"
     value in the Figma: 640 (half of 1280) - 40 left - 208 right = 392.
     It was 0, which also left the text free to slide under the video —
     that sits at z-index 3 and overlaps this column by 96px. */
  padding: 60px 208px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Right Column */
.hero-module__right {
  position: relative;
  z-index: 0;
  background-color: #EDF7FF;
  padding-bottom: 30px;
}


/* Image / Video */
.hero-module__image {
  position: absolute;
  width: 678px;
  height: 418px;
  max-width: none;
  object-fit: cover;
  /* <video> letterboxes its poster with black bars by default; object-fit
     alone does not cover the poster in every engine. This keeps the poster
     and the video frame filling the same 678x418 box. */
  background-color: #EDF7FF;
  top: 48px;
  /*
   * 50% puts the image's left edge at
   * the center of the hero.
   *
   * Negative left value moves it over
   * the blue column.
   */
  left: calc(50% - 96px);
  z-index: 3;
  border-radius: 12px;
}


/* Logo */
.hero-module__logo {
  display: block;
  width: 280px;
  height: 125px;
  object-fit: contain;
  object-position: left top;
  margin: 0 0 4px 0;
}


/* Title */
.hero-module__title {
  margin: 24px 0 8px 0;
  color: #FFFFFF;
  font-family: "Benton Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}


/* Paragraph */
.hero-module__paragraph {
  /* was 410px, which wraps this copy to 5 lines. Figma specs 392px, which
     wraps to 6. That 6th line is 22px, and it is exactly what makes the CTA
     row bottom (466px) meet the video bottom (top 48 + height 418 = 466px).
     At 410px the CTA row stopped 22px short of the video. */
  max-width: 392px;
  margin: 0 0 40px 0;
  color: #FFFFFF;
  font-family: "Benton Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}


/* Actions */
.hero-module__actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Both CTAs carry the global DLS classes `link-underlined` and `linkout`.
   DLS draws those underlines/icons with an absolutely positioned ::after.
   Neither link established a containing block, so that ::after resolved
   against .hero-module__left (the nearest position:relative ancestor) and
   stretched across the blue column instead of sitting under the link.
   This contains it without touching either ID rule. */
.hero-module__actions a.link-underlined,
.hero-module__actions a.linkout {
  position: relative;
}

/* .click_arrows {
  color: #FFFFFF;
  margin-left: -20px;
} */

.arrow-promo {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: 10px;
}


/* CTA */
#rm-StartExploring {
  width: 188px;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #006FCF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}


/* Secondary Link */
#rm-SeeEnrolledOffers {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: #56A1E3;
  text-underline-offset: 6px;
  white-space: nowrap;
}

#rm-SeeEnrolledOffers span { position: relative; }
#rm-SeeEnrolledOffers span > i[data-dls-glyph="link-out"] {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}
/* .links-item i {
  display: none !important;
} */

/* OPTIONAL — check against Figma before shipping.
   Because #rm-SeeEnrolledOffers is display:inline-flex, `text-decoration:
   underline` underlines the entire box, so the rule runs under the ↗ arrow
   as well as the label. These two rules move the underline onto the label
   span only. Delete this block if the Figma does want the arrow underlined.
   The ID rule above is untouched either way. */
.hero-module__actions #rm-SeeEnrolledOffers {
  text-decoration: none;
}

.hero-module__actions #rm-SeeEnrolledOffers > span {
  text-decoration: underline;
  text-decoration-color: #56A1E3;
  text-underline-offset: 6px;
}


/* Media Queries */

/* Mobile toggle – hidden on desktop */
.offers-nav__toggle {
  display: none;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .offers-nav {
    max-width: 375px;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    height: auto;
  }

  .offers-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 32px);
    padding: 16px 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #00175A;
    border-radius: 8px;
    cursor: pointer;
    color: #00175A;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    margin: 16px;
  }

  .offers-nav__arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .offers-nav.is-open .offers-nav__arrow {
    transform: rotate(180deg);
  }

  .offers-nav.is-open .offers-nav__arrow path {
    stroke: #006FCF;
  }

  .offers-nav__inner {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
  }

  .offers-nav.is-open .offers-nav__inner {
    display: flex;
  }

  .offers-nav__inner a {
    color: #006FCF;
    height: 48px;
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-top: none;
    background-color: #ffffff;
  }

  .offers-nav__inner a:first-child {
    background-color: #EAEAEA;
    color: #1A1A1A;
  }

  /* .offers-nav__inner a.is-current {
    background-color: #EAEAEA;
    color: #1A1A1A;
  } */
}


/* ============================= */
/* Get Started Module            */
/* ============================= */
.get-started {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px 40px;
  box-sizing: border-box;
  background-color: #FFFFFF;
}


/* Title */
.get-started__title {
  margin: 0 0 16px 0;
  color: #00175A;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px; /* 120% */
}


/* Description */
.get-started__description {
  max-width: 690px;
  margin: 0 0 48px 0;
  color: #595959;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px; /* 140% */
}


/* Cards */
.get-started__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.get-started__card {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  overflow: visible;
}


/* Card image + number badge */
.get-started__card-media {
  position: relative;
}

.get-started__card-image-wrap {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.get-started__card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 450;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.get-started__card:hover .get-started__card-image {
  transform: scale(1.05);
}

/* Button and Link Hover States */

.hero-module__image {
  display: block;
  transition: filter 0.3s ease;
}

.hero-module__image:hover {
  filter: brightness(80%);
}

#rm-StartExploring, #rm-AddOffersNow, #rm-LogIn {
  transition: background-color 0.3s ease;
}

#rm-StartExploring:hover, #rm-LogIn:hover, #rm-FindOffers:hover {
  background-color: #EBF3FB;
}

#rm-AddOffersNow:hover {
  background-color: #0062B6;
}

#rm-SeeEnrolledOffers, #rm-ExploreCardsNow, #rm-LearnMore {
  display: inline-block;
}

#rm-SeeEnrolledOffers > span, #rm-ExploreCardsNow > span, #rm-LearnMore > span {
  position: relative;
  display: inline-block;
}

/* Animated underline */
#rm-SeeEnrolledOffers > span::after, #rm-ExploreCardsNow > span::after, #rm-LearnMore > span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 90%;
  height: 1px;
  background-color: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

#rm-ExploreCardsNow > span::after, #rm-LearnMore > span::after, #rm-SeeEnrolledOffers > span::after {
  width: 100%;
}

/* Fill underline left → right once */
#rm-SeeEnrolledOffers:hover > span::after, #rm-ExploreCardsNow:hover > span::after, #rm-LearnMore:hover > span::after {
  animation: rm-underline-fill 0.3s ease-out 1 forwards;
}

@keyframes rm-underline-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Move external-link icon slightly */
#rm-SeeEnrolledOffers i svg {
  transition: transform 0.3s ease-out;
}

#rm-SeeEnrolledOffers:hover i svg {
  transform: translate(.5px, -.5px);
}

#rm-ExploreCardsNow + .arrow-promo, #rm-LearnMore + .arrow-promo {
  transition: transform 0.3s ease-out;
}

#rm-ExploreCardsNow:hover + .arrow-promo,
#rm-ExploreCardsNow + .arrow-promo:hover, #rm-LearnMore:hover + .arrow-promo,
#rm-LearnMore + .arrow-promo:hover {
  transform: translate(.5px, -.5px);
}

#rm-OfferOne, #rm-OfferTwo, #rm-OfferThree {
  display: inline-block;
}

#rm-OfferOne:hover, #rm-OfferTwo:hover, #rm-OfferThree:hover {
  animation: bounce-once 0.3s ease-in-out;
}

@keyframes bounce-once {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-.5px);
  }

  100% {
    transform: translateY(0);
  }
}

#rm-OfferOne img, #rm-OfferTwo img, #rm-OfferThree img {
  transition: transform 0.3s ease-out;
}

#rm-OfferOne:hover img, #rm-OfferTwo:hover img, #rm-OfferThree:hover img {
  transform: translate(2.5px, 0);
}


@media (prefers-reduced-motion: reduce) {
  .get-started__card-image {
    transition: none;
  }

  .get-started__card:hover .get-started__card-image {
    transform: none;
  }
}

.get-started__card-number {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 40px;
  padding: 0 12px 0 18px;
  box-sizing: border-box;
  background-color: #006FCF;
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); */
  clip-path: path("M2.667 5.8047C1.445 3.1441 3.203 0 5.913 0H56.364C58.372 0 60 1.79086 60 4V36C60 38.2091 58.372 40 56.364 40H5.913C3.203 40 1.445 36.8559 2.667 34.1953L8.362 21.8047C8.884 20.67 8.884 19.33 8.362 18.1953L2.667 5.8047Z");
  color: #FFFFFF;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}


/* Card text */
.get-started__card-text {
  margin: 0;
  padding: 32px;
  color: #3D3D3D;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


/* CTA */
.get-started__actions {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

#rm-AddOffersNow {
  height: 44px;
  width: 341px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 32px;
  border-radius: 4px;
  background-color: #006FCF;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}


/* Get Started – Mobile */
@media screen and (max-width: 767px) {
  .get-started {
    max-width: 375px;
    padding: 32px 16px;
  }

  .get-started__description {
    margin-bottom: 40px;
  }

  .get-started__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .get-started__card-image {
    aspect-ratio: 686 / 450;
  }

  .get-started__actions {
    margin-top: 40px;
  }

  #rm-AddOffersNow {
    width: 100%;
  }
}


/* ============================= */
/* Hero Module – Mobile          */
/* ============================= */
@media screen and (max-width: 767px) {
  .hero-module {
    max-width: 375px;
    height: auto;
    display: block;
    background-color: #006FCF;
    padding-bottom: 32px;
  }

  .hero-module__left {
    background-color: transparent;
    padding-bottom: 0;
  }

  .hero-module__right {
    display: none;
    padding-bottom: 0;
  }

  .hero-module__content {
    height: auto;
    padding: 54px 16px 0 16px;
    align-items: center;
    text-align: center;
  }

  .hero-module__logo {
    width: 267px;
    height: 97px;
    object-position: center top;
    margin: 0 auto 4px auto;
  }

  .hero-module__title {
    color: #FFFFFF;
    text-align: center;
  }

  .hero-module__paragraph {
    color: #FFFFFF;
    text-align: center;
  }

  .hero-module__actions {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  #rm-StartExploring {
    width: 343px;
    max-width: 100%;
  }

  .hero-module__image {
    position: static;
    display: block;
    width: 343px;
    height: 222px;
    margin: 32px auto 0 auto;
    border-radius: 12px;
  }
}


/* ============================= */
/* What You Get Module           */
/* ============================= */
.what-you-get {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
}

.what-you-get__inner {
  background-color: #EDF7FF;
  border-radius: 16px;
  padding: 80px 80px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 404px 1fr;
  gap: 100px;
  align-items: start;
}


/* Left Side */
.what-you-get__left{
  max-width: 390px;
}

.what-you-get__title {
  margin: 0 0 16px 0;
  color: #00175A;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px; /* 120% */
}

.what-you-get__paragraph {
  margin: 0 0 40px 0;
  color: #00175A;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.what-you-get__image {
  display: block;
  width: 404px;
  /* height: 259px; */
  max-width: 100%;
  object-fit: cover;
}


/* Right Side */
.what-you-get__right {
  max-width: 504px;
}

.what-you-get__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 25px 0;
  border-top: 1px solid #8C8C8C; /* 504px x 1px divider (spans item width) */
}

.what-you-get__item:last-child {
  padding-bottom: 0;
}

.what-you-get__item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.what-you-get__item-title {
  margin: 0 0 8px 0;
  color: #00175A;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px; /* 140% */
}

.what-you-get__item-paragraph {
  margin: 0;
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
}


/* What You Get – Mobile */
@media screen and (max-width: 767px) {
  .what-you-get {
    max-width: 375px;
    padding: 16px;
  }

  .what-you-get__inner {
    display: block;
    padding: 32px 14px;
    border-radius: 16px;
  }

  .what-you-get__paragraph {
    margin-bottom: 32px;
  }

  .what-you-get__image {
    width: 100%;
    height: auto;
    margin-bottom: 32px;
  }

  .what-you-get__right {
    max-width: none;
  }

  .what-you-get__item {
    flex-direction: column;
    gap: 12px;
    padding: 32px 0;
  }

  .what-you-get__item:last-child {
    padding-bottom: 0;
  }
}

/* ============================= */
/* Promo Banner Module           */
/* ============================= */
.promo-banner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
}

.promo-banner__inner {
  background-color: #006FCF;
  border-radius: 16px;
  padding: 80px;
  box-sizing: border-box;
  display: grid;
  /* 261 = 220 col + 40 gutter + 1px line | 338 = 40 gutter + 220 col + 78 gap | image fills the rest (~441) */
  grid-template-columns: 261px 338px 1fr;
  gap: 0;
  align-items: center;
}

/* Desktop order: text, text, image (all on one row) */
.promo-banner__col--first {
  grid-row: 1;
  grid-column: 1;
  padding-right: 30px;
  border-right: 1px solid #56A1E3;
  height: 224px;
  margin-top: 20px;
}

.promo-banner__col--second {
  grid-row: 1;
  grid-column: 2;
  padding-left: 40px;
  padding-right: 78px;
  height: 224px;
  margin-top: 20px;
}

.promo-banner__media { grid-row: 1; grid-column: 3; }


/* Image */
.promo-banner__image {
  display: block;
  width: 100%;
  max-width: 549px;
  height: auto;
}


/* Title */
.promo-banner__title {
  margin: 0 30px 12px 0;
  color: #FFFFFF;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}


/* Paragraph */
.promo-banner__paragraph {
  margin: 0 0 24px 0;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px; /* 150% */
}


/* Link */
#rm-ExploreCardsNow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: #56A1E3;
  text-underline-offset: 6px;
  white-space: nowrap;
}

#rm-LearnMore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: #56A1E3;
  text-underline-offset: 6px;
  white-space: nowrap;
}


/* Promo Banner – Mobile */
@media screen and (max-width: 767px) {
  .promo-banner {
    max-width: 375px;
    padding: 0px;
  }

  .promo-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    border-radius: 0;
  }

  /* Mobile order: image, first block, second block */
  .promo-banner__media {
    order: 0;
  }

  .promo-banner__image {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .promo-banner__col--first {
    order: 1;
    margin-top: 32px;
    padding-right: 0;
    border-right: none;
    height: auto;
    padding-bottom: 4px;
  }

  .promo-banner__col--second {
    order: 2;
    margin-top: 32px;
    padding-top: 32px;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    height: auto;
    padding-bottom: 20px;
  }

  .promo-banner__paragraph {
    font-size: 14px;
    line-height: 21px; /* 150% */
  }

  .promo-banner__title {
    font-size: 28px;
    line-height: 36.4px; /* 130% */
  }
}

/* ============================= */
/* FAQ Module                    */
/* ============================= */
.faq {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /* padding: 0 40px 0; */
  box-sizing: border-box;
}

.faq__inner {
  background-color: #00175A;
  padding: 80px 40px;
  box-sizing: border-box;
}


/* Title */
.faq__title {
  margin: 0 0 56px 0;
  color: #FFFFFF;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px; /* 120% */
}


/* Category label */
.faq__group + .faq__group {
  margin-top: 48px;
}

.faq__category {
  margin: 56px 0 0 0;
  padding: 16px 0px;
  border-bottom: 1px solid #006FCF; /* full-width line under the label */
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px; /* 100% */
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* Item */
.faq__item {
  margin: 0 24px; /* per Figma: questions/answers inset 24px each side */
  border-bottom: 1px solid #56A1E3;
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px; /* 150% */
}

.faq__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq__item.is-open .faq__arrow {
  transform: rotate(180deg);
}


/* Answer */
.faq__answer {
  display: none;
  padding: 0 36px 24px 0;
  color: #EDF7FF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px; /* 150% */
}

.faq__item.is-open .faq__answer {
  display: block;
}

.faq__answer p {
  margin: 0 0 16px 0;
}

.faq__answer p:last-child,
.faq__answer ul:last-child,
.faq__answer ol:last-child {
  margin-bottom: 0;
}

.faq__answer ul,
.faq__answer ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.faq__answer li {
  margin-bottom: 8px;
}

.faq__answer li:last-child {
  margin-bottom: 0;
}


/* FAQ – Mobile */
@media screen and (max-width: 767px) {
  .faq {
    max-width: 375px;
    padding: 0px;
  }

  .faq__inner {
    padding: 32px 16px;
  }

  .faq__answer {
    padding-right: 0;
  }

  .faq__item {
    margin: 0;
  }
}

/* ============================= */
/* Terms & Conditions Module     */
/* ============================= */
.terms {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background-color: #F4F4F4;
}

.terms__inner {
  padding: 64px 40px 64px;
  box-sizing: border-box;
}


/* Toggle */
.terms__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #000000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-align: left;
}

.terms__arrow {
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.terms.is-open .terms__arrow {
  transform: rotate(0deg);
}


/* Content */
.terms__content {
  display: none;
  margin-top: 32px;
}

.terms.is-open .terms__content {
  display: block;
}


/* Headings */
.terms__heading {
  margin: 24px 0 8px 0;
  color: #3D3D3D;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px; /* 150% */
}

.terms__content .terms__heading:first-child {
  margin-top: 0;
}


/* Sub-headings (Eligibility and Enrollment, Qualifying Purchases, etc.) */
.terms__subheading {
  margin: 16px 0 0 0;
  color: #3D3D3D;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px; /* 150% */
}


/* Paragraphs */
.terms__paragraph {
  margin: 0 0 16px 0;
  color: #3D3D3D;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px; /* 150% */
}

.terms__paragraph:last-child {
  margin-bottom: 0;
}


/* Links */
.terms__content a {
  color: #006FCF;
  text-decoration: underline;
}


/* Terms & Conditions – Mobile */
@media screen and (max-width: 767px) {
  .terms {
    max-width: 375px;
  }

  .terms__inner {
    padding: 32px 16px;
  }
}

/* ============================= */
/* Featured Offers Module        */
/* ============================= */
.featured-offers {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Vertical lines to the left of each offer column */
.featured-offers__offer {
  border-left: 1px solid #8C8C8C;
  padding: 50px 32px 32px 32px;
  /* margin: 0 32px 0 0; */
}

.featured-offers__intro {
  padding-right: 140px;
  max-width: 405px;
}


/* Left Side */
.featured-offers__title {
  margin: 0 0 16px 0;
  color: #00175A;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px; /* 120% */
}

.featured-offers__description {
  margin: 0 0 32px 0;
  min-width: 300px;
  color: #00175A;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px; /* 140% */
}

#rm-LogIn {
  width: 268px;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #B5D7F4;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #006FCF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px; /* 100% */
  text-decoration: none;
}

#rm-OfferOne, #rm-OfferTwo, #rm-OfferThree {
  font-weight: 500;
  text-decoration: none;
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
}
  


/* Right Side – Offers */
.featured-offers__logo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 0 50px 0;
}

.featured-offers__brand {
  margin: 0 0 12px 0;
  color: #333333;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px; /* 100% */
  letter-spacing: 2px;
  text-transform: uppercase;
}

.featured-offers__offer-title {
  margin: 0 0 16px 0;
  color: #333333;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px; /* 140% */
}

.featured-offers__paragraph {
  margin: 0 0 16px 0;
  padding: 16px 0;
  border-top: 1px solid #BDBDBD;
  border-bottom: 1px solid #BDBDBD;
  color: #3D3D3D;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px; /* 150% */
}

.featured-offers__paragraph a {
  color: #0066BE;
  text-decoration: underline;
}

.featured-offers__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #006FCF;
  font-family: 'Bentonsans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px; /* 100% */
  text-decoration: none;
}


/* Title line breaks: desktop vs mobile */
.featured-offers__br--mob {
  display: none;
}


/* Featured Offers – Mobile */
@media screen and (max-width: 767px) {
  .featured-offers {
    max-width: 375px;
    padding: 40px 16px;
    display: block;
  }

  #get-started, #li-get-started, #about-amex-offers, #li-about-amex-offers, #featured-offers, #li-featured-offers, #faq {
    scroll-margin-top: 80px;
  }

  .featured-offers__intro {
    padding-right: 0;
  }

  #rm-LogIn {
    width: 100%;
  }

  .featured-offers__offer {
    border-left: none;
    border-bottom: 1px solid #8C8C8C;
    padding: 64px 16px;
  }

  .featured-offers__br--desk {
    display: none;
  }

  .featured-offers__br--mob {
    display: inline;
  }
}

/* ============================================== */
/* Tablet fixes (768px – 1279px)                  */
/* Fluid overrides for fixed-width desktop values */
/* ============================================== */
@media screen and (min-width: 768px) and (max-width: 1279px) {

  /* --- Hero Module --- */
  .hero-module {
    height: auto;
    min-height: 523px;
  }

  .hero-module__content {
    /* right padding keeps text clear of the image,
       which overlaps the blue column by 96px + breathing room */
    padding: 48px 120px 48px 32px;
  }

  .hero-module__image {
    /* scale with the viewport instead of fixed 678x418 */
    width: calc(50% + 48px);
    /* `height: auto` on a <video> falls back to the file's intrinsic ratio,
       which also makes object-fit:cover a no-op. Pinning the 678:418 ratio
       keeps the crop identical to desktop at every tablet width. */
    height: auto;
    aspect-ratio: 678 / 418;
    top: 50%;
    transform: translateY(-50%);
  }

  .hero-module__actions {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .hero-module__left {
  padding-bottom: 0;
  }

  .hero-module__right {
    padding-bottom: 0;
  }

  /* --- What You Get Module --- */
  .what-you-get__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    padding: 48px 40px;
  }

  .what-you-get__image {
    width: 100%;
    height: auto;
  }

  /* --- Promo Banner Module --- */
  .promo-banner__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 40px;
  }

  .promo-banner__col--first  { grid-row: 1; grid-column: 1; }
  .promo-banner__col--second { grid-row: 1; grid-column: 2; padding-left: 0; padding-right: 0; }

  .promo-banner__media {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .promo-banner__image {
    width: 100%;
    max-width: 442px;
    height: auto;
  }

  /* --- Featured Offers Module --- */
  .featured-offers {
    grid-template-columns: repeat(3, 1fr);
  }

  .featured-offers__intro {
    grid-column: 1 / -1;
    padding-right: 0;
    max-width: none;
    margin-bottom: 16px;
  }

  .featured-offers__description {
    min-width: 0;
    max-width: 560px;
  }

  /* no stray divider at the container's left edge */
  .featured-offers__intro + .featured-offers__offer {
    border-left: none;
    padding-left: 0;
  }
}

  /* --- CM SWITCHED ON MODULES --- */

  .consumerLoggedIn {
    display: none;
  }

  .consumerLoggedIn .promo-banner__inner {
    padding: 60px 80px 80px;
    grid-template-columns: 432px 1fr;
  }
  .consumerLoggedIn .promo-banner__col--first {
    border-right: none;
    margin-top: 60px;
  }

  #rm-FindOffers {
    width: 188px;
    height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    color: #006FCF;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
  }

  @media screen and (min-width: 768px) and (max-width: 1279px) {
    .consumerLoggedIn .promo-banner__inner {
      padding: 40px;
      grid-template-columns: 100% 1fr;
    }
    .consumerLoggedIn .promo-banner__col--first {
      margin-top: 0px;
    }
    .consumerLoggedIn .promo-banner__inner {
      gap: 0;
    }
  }

  @media screen and (min-width: 769px) and (max-width: 1279px) {
    .consumerLoggedIn .promo-banner__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      column-gap: 48px;
    }
    .consumerLoggedIn .promo-banner__col--first {
      height: auto;
      padding-right: 0;
    }
    .consumerLoggedIn .promo-banner__media {
      grid-row: 1;
      grid-column: 2;
      justify-self: stretch;
    }
    .consumerLoggedIn .promo-banner__image {
      max-width: 549px;
      margin-left: auto;
    }
  }

  @media screen and (max-width: 767px) {
    .consumerLoggedIn .promo-banner__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 16px 32px;
        border-radius: 0;
    }
      .blueboxpublic  .consumerLoggedIn.hero-module {
      display: block !important;
    }
    .blueboxpublic .consumerLoggedIn.featured-offers {
      display: block !important;
    }
    .consumerLoggedIn .promo-banner__col--first {
      margin-top: 32px;
    }
}