/* ==========================================================================
   Big Pharmacy x Great Eastern — Member Health Benefits microsite
   Tokens below come from the Figma design (Main Red, Text, Content, Cream,
   Stroke, Background, and the Poppins / Geist type scale).
   ========================================================================== */

.bp-ge {
  --ge-red:        #ED1C24;
  --ge-text:       #121212;
  --ge-content:    #3B3B3B;
  --ge-grey:       #7B7B7B;
  --ge-stroke:     #CBCBCB;
  --ge-stroke-sec: #EBEBEB;
  --ge-bg:         #F0F0F0;
  --ge-cream:      #FFF0D7;
  --ge-white:      #FFFFFF;

  --ge-font:   "Poppins", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ge-font-2: "Geist", "Poppins", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --ge-h1: 56px;
  --ge-h2: 38px;
  --ge-h3: 28px;
  --ge-h4: 20px;

  --ge-pad-x: 100px;
  --ge-pad-y: 100px;
  --ge-max:   1280px;  /* 1240 content + 20px gutter = design's 100px edge at 1440 */

  font-family: var(--ge-font);
  color: var(--ge-text);
  background: var(--ge-white);
}

.bp-ge *,
.bp-ge *::before,
.bp-ge *::after { box-sizing: border-box; }

.ge-container {
  width: 100%;
  max-width: var(--ge-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- Shared type ---------------------------------------------------------- */

.ge-eyebrow {
  margin: 0;
  font-family: var(--ge-font-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}
.ge-hero .ge-eyebrow{
  flex: none;
  width: calc(100% - 200px);
}
.ge-eyebrow--red   { color: var(--ge-red); }
/* V2's hero eyebrow: "EXCLUSIVELY FOR" is uppercase and letter-spaced, but the
   cardholder name stays Title Case in Geist Black — confirmed from the mockup,
   where that half is 25px tall against the first half's 21px (it has
   descenders, so it cannot be uppercased). */
.ge-eyebrow__strong {
  font-weight: 900;
  text-transform: none;
  letter-spacing: normal;
}
.ge-eyebrow--white { color: var(--ge-white); }

.ge-h2 {
  margin: 0;
  font-size: var(--ge-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ge-text);
}
.ge-h2--white { color: var(--ge-white); }
.ge-h2__line  { display: block; }
/* Part 2's second line ("Use your voucher.") is red in the design. */
.ge-steps--book .ge-h2__line { color: var(--ge-red); }
.ge-h2__dot   { color: var(--ge-red); }

.ge-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: 48px;
}
.ge-section-head__main  { display: flex; flex-direction: column; gap: 16px; }
.ge-section-head__intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ge-content);
}

/* --- Buttons -------------------------------------------------------------- */

.ge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--ge-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.ge-btn--primary {
  background: var(--ge-red);
  color: var(--ge-white);
}
.ge-btn--primary:hover { background: #c8121a; color: var(--ge-white); }
.ge-btn--secondary {
  background: transparent;
  border-color: var(--ge-red);
  color: var(--ge-red);
}
.ge-btn--secondary:hover { background: var(--ge-red); color: var(--ge-white); }

/* --- Phone mockups -------------------------------------------------------- */

.ge-phone { display: block; flex: none; }
.ge-phone__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.ge-phone--hero { width: 355px; max-width: 100%; }
/* V2's step exports vary in width (some include a second overlay screen),
   so they're sized by height with the aspect preserved. */
.ge-phone--step { width: auto; max-width: 100%; }
.ge-phone--step .ge-phone__img { width: auto; height: 366px; max-width: 100%; }

/* --- Hero -----------------------------------------------------------------
   Measured from the Figma frame at 1440: the grey band covers only the top
   624px of the 815px section — the remaining 191px is white, and the phone
   crosses that boundary rather than sitting inside the grey.
   -------------------------------------------------------------------------- */

.ge-hero {
  position: relative;
  /* Grey fills the full section. The phone is cropped by .ge-hero__right, NOT
     by this element — clipping here also cut the headline and buttons once the
     text column became the taller of the two. */
  background: var(--ge-bg);
}

.ge-hero__inner {
  position: relative;
  display: grid;
  /* Design: 680px text column, 507px phone column. */
  grid-template-columns: minmax(0, 680px) auto;
  gap: 40px;
  align-items: start;
  justify-content: space-between;
  padding-block: 62px 0;
}

.ge-hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 73px;    /* logo top lands at y=135 as in the design */
  padding-bottom: 48px; /* only bites when the text is taller than the phone */
}

.ge-hero__badge {
  display: flex;
  align-items: center;
  gap: 16px; /* V2 gap between the logo and the eyebrow */
  flex-wrap: nowrap;
  width: 100%;
}
.ge-hero__logo     { display: inline-flex; flex-basis: 200px; }
.ge-hero__logo-img { display: block; width: auto; height: 60px; }

.ge-hero__title {
  margin: 0;
  font-size: var(--ge-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--ge-text);
  max-width: 620px;
}
.ge-hero__title-accent { display: block; color: var(--ge-red); }

.ge-hero__body {
  margin: 0;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ge-content);
}
.ge-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; }
/* The design insets the phone ~77px from the content's right edge, and the
   562px window (62px padding + 562 = the 624px section) crops the 750px phone. */
.ge-hero__right {
  justify-self: end;
  padding-right: clamp(0px, 5.35vw, 77px);
  height: 562px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .ge-hero .ge-hero__logo{
    flex-basis: 148px;
  }

  .ge-hero .ge-eyebrow{
    flex: none;
    width: calc(100% - 200px);
  }

  .ge-hero__logo-img{
    height: initial;
  }
}

/* --- Stats bar ------------------------------------------------------------ */

.ge-stats { background: var(--ge-red); color: var(--ge-white); }
.ge-stats__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  /* 64px icon + 64px top/bottom = the 192px bar in the design. */
  padding-block: 64px;
}
.ge-stats__divider {
  width: 1px;
  align-self: stretch;
  background: rgb(255 255 255 / 0.4);
}
.ge-stat { display: flex; align-items: center; gap: 26px; }
.ge-stat__icon-img {
  display: block;
  width: 64px;
  height: 64px;
  opacity: .64;
}
.ge-stat__text { display: flex; flex-direction: column; gap: 4px; }
.ge-stat__label {
  margin: 0;
  font-family: var(--ge-font-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ge-white);
}
.ge-stat__value {
  margin: 0;
  font-size: var(--ge-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-white);
}

/* --- Care package --------------------------------------------------------- */

.ge-care {
  display: flex;
  flex-direction: column;
  background: var(--ge-white);
  padding-block: var(--ge-pad-y);
}
.ge-care .ge-container { display: flex; flex-direction: column; gap: 64px; }
.ge-care__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ge-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--ge-stroke);
  border-radius: 16px;
  background: var(--ge-white);
}
.ge-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ge-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ge-cream);
  overflow: clip;
}
.ge-card__icon-img { display: block; width: 32px; height: 32px; }
/* V2: a 40px red circle, not a pill. */
.ge-card__count {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--ge-red);
  color: var(--ge-white);
  font-family: var(--ge-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.ge-card__body { display: flex; flex-direction: column; gap: 12px; }
.ge-card__title {
  margin: 0;
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-text);
}
.ge-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ge-content);
}
.ge-care__disclaimer {
  margin: 0;
  text-align: center;
  font-family: var(--ge-font-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ge-text);
}

/* --- Why members love it -------------------------------------------------- */

.ge-why {
  position: relative;
  overflow: clip;
  background: var(--ge-bg);
  padding-block: var(--ge-pad-y);
}
/* Soft shape bleeding off the top-left corner, as in the design. */
.ge-why::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 580px;
  height: 550px;
  max-width: 55%;
  background: url("../img/ge/why-shape.svg") no-repeat top left / contain;
  pointer-events: none;
}
.ge-why .ge-container { position: relative; z-index: 1; }
.ge-why__inner {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 680fr);
  gap: 48px;
  align-items: start;
}
.ge-why__left { display: flex; flex-direction: column; gap: 16px; }
.ge-why__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.ge-why__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  padding-block: 28px;
  border-bottom: 1px solid var(--ge-stroke);
}
.ge-why__row:first-child { padding-top: 0; }
.ge-why__row:last-child  { border-bottom: 0; padding-bottom: 0; }
.ge-why__num {
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-red);
}
.ge-why__text  { display: flex; flex-direction: column; gap: 6px; }
.ge-why__title {
  margin: 0;
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-text);
}
.ge-why__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ge-content);
}

/* --- Step walkthroughs (Part 1 / Part 2) ---------------------------------- */

.ge-steps { padding-block: var(--ge-pad-y); background: var(--ge-white); }
.ge-steps--book { background: var(--ge-bg); }

.ge-steps__list {
  display: grid;
  grid-template-columns: repeat(var(--ge-steps, 5), minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ge-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ge-step .ge-phone { margin-bottom: 16px; }
.ge-step__cta { margin-top: 8px; }
.ge-step__num {
  font-family: var(--ge-font);
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-red);
}
.ge-step__title {
  margin: 0;
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ge-text);
}
.ge-step__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ge-content);
}

.ge-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 56px;
  padding: 24px 28px;
  border-left: 4px solid var(--ge-red);
  background: var(--ge-bg);
  font-size: 14px;
  line-height: 1.5;
}
.ge-steps--book .ge-note { background: var(--ge-white); }
.ge-note__label { color: var(--ge-red); font-weight: 600; }
.ge-note__text  { color: var(--ge-text); }

/* --- App download banner -------------------------------------------------- */

.ge-download { background: var(--ge-red); }
.ge-download__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 60px;
}
.ge-download__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.ge-download__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ge-white);
}
.ge-download__badges { display: flex; flex-wrap: wrap; gap: 16px; }

.ge-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: 8px;
  background: var(--ge-white);
  text-decoration: none;
}
a.ge-badge:hover { background: #f3f3f3; }
.ge-badge__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: clip;
  flex: none;
}
.ge-badge__icon-img { display: block; width: 32px; height: 32px; }
.ge-badge__text   { display: flex; flex-direction: column; gap: 2px; }
.ge-badge__kicker {
  font-family: var(--ge-font-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ge-content);
}
.ge-badge__store {
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-text);
}

/* --- FAQ ------------------------------------------------------------------ */

.ge-faq { background: var(--ge-white); padding-block: var(--ge-pad-y); }
.ge-faq__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.ge-faq__item { border-bottom: 1px solid var(--ge-stroke); }
.ge-faq__heading { margin: 0; }
.ge-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-block: 32px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ge-faq__item.is-static .ge-faq__question { padding-block: 32px; }
.ge-faq__question {
  margin: 0;
  font-size: var(--ge-h4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ge-text);
}
.ge-faq__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.ge-faq__sign::before,
.ge-faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--ge-red);
  transform: translateY(-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.ge-faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.ge-faq__toggle[aria-expanded="true"] .ge-faq__sign::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.ge-faq__panel { padding-bottom: 32px; }
.ge-faq__answer {
  max-width: 76ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ge-content);
}
.ge-faq__answer > :first-child { margin-top: 0; }
.ge-faq__answer > :last-child  { margin-bottom: 0; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .bp-ge { --ge-h1: 44px; --ge-h2: 32px; --ge-h3: 24px; --ge-pad-y: 72px; }
  .ge-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .ge-care__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The hero's two columns need ~1025px before the text column gets squeezed.
   Below that it dropped to ~400px, which stacked the buttons and pushed the
   content hard against the stats bar. */
@media (max-width: 1024px) {
  .ge-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 48px 0;
    justify-content: stretch;
  }
  .ge-hero__left {
    padding-top: 0;
    padding-bottom: 8px;
  }
  .ge-hero__right {
    justify-self: center;
    padding-right: 0;
    height: auto;
    overflow: hidden;
  }
  /* Crop the phone's lower half so it runs into the stats bar, as on desktop. */
  .ge-hero__right .ge-phone__img {
    margin-bottom: -50%;
  }
}

@media (max-width: 860px) {
  .bp-ge { --ge-h1: 44px; --ge-h2: 30px; --ge-pad-y: 56px; }
  .ge-hero__inner { padding-block: 40px 0; }
  /* The mobile design shows a ~245px phone, not the 355px desktop one. */
  .ge-phone--hero { width: min(245px, 72vw); }
  .ge-hero__badge { gap: 20px; }

  .ge-section-head { grid-template-columns: 1fr; align-items: start; margin-bottom: 32px; }

  /* Stacked stats don't need the desktop bar's 64px padding. */
  .ge-stats__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 40px; }
  .ge-stats__divider { width: 100%; height: 1px; align-self: auto; }
  .ge-stat__icon-img { width: 52px; height: 52px; }

  .ge-why__inner { grid-template-columns: 1fr; gap: 32px; }

  .ge-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ge-download__inner { flex-direction: column; align-items: flex-start; padding-block: 48px; }
}

@media (max-width: 560px) {
  .bp-ge { --ge-h1: 44px; --ge-h2: 30px; --ge-h4: 18px; }
  .ge-care__grid  { grid-template-columns: 1fr; }
  .ge-steps__list { grid-template-columns: 1fr; gap: 40px; }
  .ge-step { align-items: center; text-align: center; }
  .ge-hero__actions .ge-btn { flex: 1 1 100%; }
  .ge-faq__toggle { padding-block: 24px; gap: 16px; }
}

/* --- Closing CTA banner --------------------------------------------------- */

.ge-cta {
  position: relative;
  overflow: clip;
  background: var(--ge-red);
  isolation: isolate;
}
.ge-cta__shape {
  position: absolute;
  z-index: -1;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
/* One asset, used twice: the design's bottom-right arc is the same shape
   rotated 180°, so rotating here avoids shipping a duplicate file. */
.ge-cta__shape--left,
.ge-cta__shape--right {
  width: 448px;
  height: 282px;
  background-image: url("../img/ge/cta-shape.svg");
  background-position: top left;
}
.ge-cta__shape--left  { top: 0; left: 0; }
.ge-cta__shape--right { right: 0; bottom: 0; transform: rotate(180deg); }
.ge-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: 80px;
  text-align: center;
}
.ge-cta__title {
  margin: 0;
  max-width: 18ch;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--ge-white);
}
.ge-btn--invert {
  background: var(--ge-white);
  color: var(--ge-red);
}
.ge-btn--invert:hover { background: #f3f3f3; color: var(--ge-red); }

@media (max-width: 860px) {
  .ge-cta__title { font-size: 36px; }
  .ge-cta__shape { width: 260px; height: 164px; }
}

/* --- Step carousel (mobile) ----------------------------------------------
   The mobile design presents both step walkthroughs as a swipeable carousel
   with pagination dots, rather than the desktop grid. Without JS this stays a
   plain horizontal scroller, which is still usable.
   ------------------------------------------------------------------------- */

.ge-steps__dots { display: none; }

@media (max-width: 860px) {
  .ge-steps__list {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    /* Full-bleed so cards can scroll past the container gutter. */
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ge-steps__list::-webkit-scrollbar { display: none; }

  .ge-step {
    flex: 0 0 min(72%, 260px);
    scroll-snap-align: start;
    align-items: flex-start;
    text-align: left;
  }

  .ge-steps__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
  }
  .ge-steps__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ge-stroke);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
  }
  .ge-steps__dot[aria-current="true"] {
    width: 24px;
    background: var(--ge-red);
  }
}

@media (max-width: 560px) {
  .ge-steps__list { gap: 16px; }
  .ge-step { flex: 0 0 min(78%, 240px); align-items: flex-start; text-align: left; }
}


br.mobile-only{display:none;}
@media (max-width: 560px) {
  br.mobile-only{display:block;}
}