/* Smooth fade and scale effect for slider panels */
.slides li {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 1s ease, transform 1s ease;
}

.slides li.flex-active-slide {
  opacity: 1;
  transform: scale(1);
}

/* Optional: animate text and image separately */
.slides li .ict-title,
.slides li .ict-paragraph,
.slides li .ict-image {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slides li.flex-active-slide .ict-title,
.slides li.flex-active-slide .ict-paragraph,
.slides li.flex-active-slide .ict-image {
  opacity: 1;
  transform: translateY(0);
}

/* Make sure the slider images sit above the black strip */
.flexslider,
.flexslider .slides li,
.flexslider .slides img {
  position: relative;
  z-index: 2;
}

/* Keep the black strip below */
.three-cta {
  position: relative;
  z-index: 1;
}

/* ===== StickySheets override: fix full-bleed CTA strip alignment ===== */
.topicpage .three-cta,
body.home .three-cta,
body .three-cta {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;       /* full width without shifting right */
  max-width: 100% !important;
  background: #000;             /* keep black */
  z-index: 1 !important;        /* below slider (which is z-index:2) */
  box-sizing: border-box;
}

/* Ensure inner wrappers don’t re-center it */
.topicpage .three-cta .container,
.topicpage .three-cta .content,
body .three-cta .container,
body .three-cta .content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove gutters so the badges sit flush */
.topicpage .three-cta .columns,
body .three-cta .columns {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.topicpage .three-cta .column,
body .three-cta .column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Mobile heart lift (final, last-wins) ===== */
@media (max-width: 768px) {
  /* more room for the overhang + iOS home indicator */
  body .section.newsletter {
    padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* raise the 💜 heart and nudge it in a touch */
  body .section.newsletter .sticker-heart {
    width: 120px !important;
    height: 120px !important;
    right: 10px !important;
    bottom: -12px !important;   /* adjust to taste: -16px, -8px, 0 */
    z-index: 2 !important;
  }
}

/* ultra-narrow phones: small extra tweak */
@media (max-width: 420px) {
  body .section.newsletter .sticker-heart {
    right: 6px !important;
    bottom: -18px !important;
  }
}