/* Hero section */
.hero { background: linear-gradient(135deg, #0f3d3e 0%, #155e63 100%); color: white; text-align: center; padding: 80px 20px; }
.hero h1 { font-size: 2.5rem; margin-bottom: 15px; }
.hero .highlight { color: #f9c74f; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }
.cta-button { background: #f9c74f; color: #0f3d3e; padding: 12px 25px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: background 0.2s; }
.cta-button:hover { background: #ffd166; }

/* Offers section */
.offers { display: flex; justify-content: center; gap: 20px; padding: 60px 20px; flex-wrap: wrap; }
.offer-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 30px; flex: 1 1 300px; max-width: 350px; text-align: center; transition: transform 0.2s; display: flex; flex-direction: column; }
.offer-card:hover { transform: translateY(-5px); }
.offer-card h2 { color: #155e63; margin-bottom: 15px; }
.offer-card p { margin-bottom: 20px; font-size: 1rem; }
.offer-logo { max-width: 140px; height: auto; margin: 0 auto 10px; display: block; }
.offer-card.offer-embark,
.offer-card.offer-wealthsimple,
.offer-card.offer-simplii,
.offer-card.offer-legalwills,
.offer-card.offer-freshprep,
.offer-card.offer-hovr {
  position: relative;
}
.offer-card.offer-embark .offer-icon,
.offer-card.offer-wealthsimple .offer-icon,
.offer-card.offer-simplii .offer-icon,
.offer-card.offer-legalwills .offer-icon,
.offer-card.offer-freshprep .offer-icon,
.offer-card.offer-hovr .offer-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1.2rem;
}
.offer-btn { background: #155e63; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: background 0.2s; margin-top: auto; }
.offer-btn:hover { background: #0f3d3e; }
.offer-card.coming-soon { background: #e0e0e0; color: #555; opacity: 0.8; }

.offer-card.offer-freshprep .offer-logo {
  max-width: 120px;
  width: 100%;
  height: auto;

  display: block;
  transform: none;
}
.offer-card.offer-freshprep p {
  margin-top: 4px;
}
.offer-card.offer-legalwills .offer-logo {
  max-width: 150px;
}
.offer-card.offer-hovr .offer-logo {
  max-width: 100px;
}
.offer-card.offer-ubereats .offer-logo {
  max-width: 150px;
}
.offer-card.offer-rover .offer-logo {
  max-width: 120px;
}
.offer-card.offer-wise .offer-logo {
  max-width: 150px;
}
.offer-card.offer-wealthsimple .offer-logo {
  max-width: 170px;
}
.offer-card.offer-simplii .offer-logo {
  max-width: 170px;
}
/* Inline logo inside hero heading */
.inline-logo { height: 1.3em; width: auto; vertical-align: -0.2em; display: inline-block; margin: 0 6px; }

/* Carousel */
.carousel { position: relative; overflow: hidden; }
.carousel-track { display: flex; width: 100%; transition: transform 0.6s ease; will-change: transform; }
.carousel-slide { min-width: 100%; box-sizing: border-box; padding: 80px 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.carousel-content h1 { font-size: 2.3rem; margin-bottom: 12px; }
.carousel-content p { font-size: 1.1rem; margin-bottom: 24px; }

/* Slide themes */
/* Embark: lighter theme with right-side banner image */
.slide-embark {
  /* Light background aligned to Embark styling */
  background-color: #eeedfd;
  /* Banner image on the right that scales with viewport */
  background-image: url('../images/embark_banner.png');
  background-repeat: no-repeat;
  background-position: right 24px center;
  /* Cap size for typical laptop/desktop widths */
  background-size: clamp(200px, 28vw, 420px) auto;
  /* Keep text on the left and reserve space so the image doesn’t overlap */
  justify-content: flex-start;
  padding-right: clamp(220px, 30vw, 440px);
  color: #0d2b2c; /* dark text for light bg */
}
.slide-embark .carousel-content {
  max-width: 680px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
.slide-embark .carousel-content h1 { text-shadow: none; }
/* Offer amount: remove yellow box, keep emphasis */
.slide-embark .highlight {
  background: transparent;
  color: #5a3bd1; /* brand-leaning purple */
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 800;
  font-size: 1.15em;
}
.slide-policyme { background: linear-gradient(135deg, #1f2a44 0%, #3a6186 100%); }
/* FreshPrep: light green background with right image */
.slide-freshprep {
  background-color: #eef9f4;
  background-image: url('../images/freshprep_banner.PNG');
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: clamp(220px, 32vw, 380px) auto;
  color: #0f3a2b;
  justify-content: flex-start;
  padding-right: clamp(240px, 34vw, 420px);
}
.slide-freshprep .carousel-content {
  max-width: 640px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
.slide-freshprep .highlight {
  background: transparent;
  color: #15b175;
  font-weight: 800;
  font-size: 1.15em;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.slide-wealthsimple {
  background-color: #f7f3eb;
  background-image: url('../images/wealthsimple_short_logo.svg');
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: clamp(220px, 30vw, 420px) auto;
  color: #0d2b2c;
  justify-content: flex-start;
  padding-right: clamp(240px, 32vw, 460px);
}
.slide-wealthsimple .carousel-content {
  max-width: 720px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
.slide-wealthsimple .highlight {
  background: transparent;
  color: #eab308;
  font-weight: 800;
  font-size: 1.15em;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.slide-nesto {
  background-color: #e8f1ff;
  background-image: url('../images/nesto_o_logo.svg');
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: clamp(220px, 30vw, 420px) auto;
  color: #0c1f33;
  justify-content: flex-start;
  padding-right: clamp(240px, 32vw, 460px);
}
.slide-nesto .carousel-content {
  max-width: 720px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
.slide-nesto .highlight {
  background: transparent;
  color: #2c7be5;
  font-weight: 800;
  font-size: 1.15em;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.slide-legalwills {
  background-color: #f5f7fb;
  background-image: url('https://www.legalwills.ca/images/LWCA_300x250-25.jpg');
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: clamp(220px, 30vw, 420px) auto;
  color: #0f1f2f;
  justify-content: flex-start;
  padding-right: clamp(240px, 32vw, 460px);
}
.slide-legalwills .carousel-content {
  max-width: 720px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
.slide-legalwills .highlight {
  background: transparent;
  color: #1f4b99;
  font-weight: 800;
  font-size: 1.15em;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Shakepay: white background with right-side banner image */
/* .slide-shakepay { */
/*   background-color: #ffffff; */
/*   background-image: url('../images/shakepay_banner.png'); */
/*   background-repeat: no-repeat; */
/*   background-position: right 24px center; */
/*   background-size: clamp(200px, 28vw, 420px) auto; */
/*   justify-content: flex-start; */
/*   padding-right: clamp(220px, 30vw, 440px); */
/*   color: #0d2b2c; */
/* } */
/* .slide-shakepay .carousel-content { max-width: 680px; text-align: left; margin-left: 2%; margin-right: auto; } */
/* Make the $amount stand out like Embark (no box, bold color) */
/* .slide-shakepay .highlight { */
/*   background: transparent; */
/*   color: #0a93e2; Shakepay blue */
/*   padding: 0; */
/*   border-radius: 0; */
/*   box-shadow: none; */
/*   font-weight: 800; */
/*   font-size: 1.15em; */
/* } */

/* Anonymous sign-in promo slide (logo on right, text on left) */
.slide-signin {
  /* Match Shakepay slide: white background, image on right */
  background-color: #ffffff;
  background-image: url('../images/logo.png');
  background-repeat: no-repeat;
  background-position: right 24px center;
  /* Increase logo size a bit more */
  background-size: clamp(220px, 24vw, 360px) auto;
  justify-content: flex-start;
  padding-right: clamp(240px, 26vw, 380px);
  color: #0d2b2c;
}
.slide-signin .carousel-content {
  max-width: 680px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
.slide-signin .highlight { color: #155e63; font-weight: 800; }

/* Auth referral slide: light RV green background, logo on right */
.slide-referral {
  background-color: #e6f3f2; /* lighter variant of #155e63 palette */
  background-image: url('../images/logo.png');
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: clamp(220px, 24vw, 360px) auto;
  justify-content: flex-start; /* text left */
  padding-right: clamp(240px, 26vw, 380px); /* reserve space for logo */
  color: #0d2b2c; /* dark text for contrast */
}
.slide-referral .carousel-content {
  max-width: 680px;
  text-align: left;
  margin-left: 2%;
  margin-right: auto;
}
/* Emphasize key numbers on the referral slide */
.slide-referral .highlight { color: #155e63; font-weight: 800; }

/* Dots */
.carousel-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; display: flex; gap: 8px; }
.carousel-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #155e63; background: rgba(21,94,99,0.25); cursor: pointer; padding: 0; }
.carousel-dot.is-active { background: #155e63; border-color: #155e63; }

/* Responsive */
@media (max-width: 768px) {
  .carousel-content h1 { font-size: 1.7rem; }
  .carousel-content p { font-size: 1rem; }
  /* On small screens, keep the image small on the right and reserve space */
  .slide-embark {
    justify-content: flex-start;
    background-position: right 12px center;
    background-size: clamp(140px, 38vw, 300px) auto;
    padding-right: clamp(150px, 40vw, 320px);
  }
  .slide-embark .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }
  /* .slide-shakepay { */
  /*   justify-content: flex-start; */
  /*   background-position: right 12px center; */
  /*   background-size: clamp(140px, 38vw, 300px) auto; */
  /*   padding-right: clamp(150px, 40vw, 320px); */
  /* } */
  /* .slide-shakepay .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; } */
  .slide-signin {
    background-position: right 12px center;
    background-size: clamp(180px, 38vw, 300px) auto;
    padding-right: clamp(200px, 40vw, 320px);
  }
  .slide-signin .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }
  .slide-referral {
    background-position: right 12px center;
    background-size: clamp(180px, 38vw, 300px) auto;
    padding-right: clamp(200px, 40vw, 320px);
  }
  .slide-referral .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }
  .slide-freshprep {
    justify-content: flex-start;
    background-position: right 12px center;
    background-size: clamp(170px, 44vw, 300px) auto;
    padding-right: clamp(180px, 50vw, 360px);
  }
  .slide-freshprep .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }
  .slide-wealthsimple {
    background-position: right 12px center;
    background-size: clamp(170px, 44vw, 300px) auto;
    padding-right: clamp(200px, 44vw, 340px);
  }
  .slide-wealthsimple .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }
  .slide-nesto {
    background-position: right 12px center;
    background-size: clamp(170px, 44vw, 300px) auto;
    padding-right: clamp(200px, 44vw, 340px);
  }
  .slide-nesto .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }
  .slide-legalwills {
    background-position: right 12px center;
    background-size: clamp(170px, 44vw, 300px) auto;
    padding-right: clamp(200px, 44vw, 340px);
  }
  .slide-legalwills .carousel-content { text-align: left; margin: 0 2%; max-width: 96%; }

  /* On small screens, drop banner images to reduce clutter */
  .slide-embark,
  .slide-freshprep,
  .slide-wealthsimple,
  .slide-nesto,
  .slide-legalwills,
  .slide-signin,
  .slide-referral {
    background-image: none;
    padding-right: 20px;
  }
}