/* Add cards here for the card carousel */
.card-01 {background-image: url('../img/card-01.jpg');}
.card-02 {background-image: url('../img/card-02.jpg');}
.card-03 {background-image: url('../img/card-03.jpg');}
.card-04 {background-image: url('../img/card-04.jpg');}
.card-05 {background-image: url('../img/card-05.jpg');}
.card-06 {background-image: url('../img/card-06.jpg');}
.card-07 {background-image: url('../img/card-07.jpg');}
.card-10 {background-image: url('../img/card-10.jpg');}
.card-11 {background-image: url('../img/card-11.jpg');}
.card-12 {background-image: url('../img/card-12.jpg');}
.card-13 {background-image: url('../img/card-13.jpg');}


/* .card-xx should be the same name as the file and added as a class to the anchor tag with the class card */

/* Add headers here for the transparent header */
.transhead-01 {background-image: url('../img/transhead-01.jpg');}
.transhead.transhead-01 .transparent-filter {background-color:rgba(104, 90, 162, 0.7);}

.transhead-02 {background-image: url('../img/transhead-02.jpg');}
.transhead.transhead-02 .transparent-filter {background-color:rgba(43, 166, 209, 0.7);}

.transhead-03 {background-image: url('../img/transhead-03.jpg');}
.transhead.transhead-03 .transparent-filter {background-color:rgba(104, 90, 162, 0.7);}

.transhead-04 {background-image: url('../img/transhead-04.jpg');}
.transhead.transhead-04 .transparent-filter {background-color:rgba(104, 90, 162, 0.7);}

.transhead-05 {background-image: url('../img/transhead-05.jpg');}
.transhead.transhead-05 .transparent-filter {background-color:rgba(104, 90, 162, 0.7);}

.transhead-06 {background-image: url('../img/transhead-06.jpg');}
.transhead.transhead-06 .transparent-filter {background-color:rgba(104, 90, 162, 0.7);}



/* .transhead-xx should be the same name as the file and added as a class to the anchor tag with the class transhead */

body {
  background-color: #ffffff;  /* white background */
}

/* Full-bleed background but content aligned to Foundation's grid */
.hero-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* break out of container for edge-to-edge image */
  min-height: 75vh;
  display: flex;                 /* vertical centering of the grid-container */
  align-items: center;
  background: url('../img/hero_phone.jpg') center / cover no-repeat; /* your image */
  color: #fff;
  overflow: hidden;
}

/* keep text left and tidy; no extra left padding so it aligns with grid below */
.hero-content {
  position: relative;  /* above overlay */
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: -9rem;           
  /* no padding-left here — let .grid-container gutters handle alignment */
}

.hero-content h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  color: #fff;
}
.hero-content p {
  margin: 0;
  max-width: 60ch;
  color: #f2f5f8;
}
.hero-content .line {
  display: block;
  width: 80px;
  height: 4px;
  background: #2BA78C; /* brand accent */
  border-radius: 2px;
}

/* mobile tweak */
@media (max-width: 640px) {
  .hero-section { min-height: 60vh; 
                  background-position: 65% center;
}
}


@media (max-width: 800px) {
  .hero-content {
    align-items: flex-start; /* keep all child elements pinned left */
    text-align: left;
  }

  .hero-content p {
    max-width: 24ch;  /* controls how soon lines wrap */
    margin-left: 0;   /* don't let it auto-center */
    margin-right: 0;
  }
}


/* Full-bleed background, but content aligned to Foundation grid */
.hero-small {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* makes the image edge-to-edge */
  min-height: 45vh;
  display: flex;                   /* vertically center the grid-container */
  align-items: center;
  background: url('../img/hero-mobile-desktop.jpg') center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}


/* Text block — unique class so it won't inherit from main hero */
.hero-small__content {
  position: relative;  /* above overlay */
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* Ensure nothing drags it left from previous tweaks */
  margin-left: 0 !important;
  align-items: flex-start;
}

.hero-small__content h2 {
  margin: 0 0 .4rem 0;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  color: #fff;
}

.hero-small__content p {
  margin: 0;
  color: #eff3f6;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  max-width: 60ch;         /* good reading width on desktop */
}


@media (min-width: 1025px) {
  .hero-small .large-8.cell .hero-small__content {
    margin-left: -24rem !important; /* beats the earlier !important */
  }
}


.icon-heading {
  display: flex;
  align-items: center; /* Vertically aligns icon and heading */
  gap: 8px;            /* Space between icon and text */
}

.icon-inline {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  position: relative;
  top: 0px; /* tweak this number until it looks right */
}

.icon-heading h5 {
  margin: 0;            /* remove extra space */
  line-height: 1.2;     /* tighten vertical rhythm */
  display: flex;
  align-items: center;  /* ensures text aligns with icon */
}


.innerbox {
  border: 2px solid #d0d0d0;
  border-radius: 8px;             /* rounded corners */
  padding: 20px;                  /* space inside */
  background-color: #fff;         /* ensure white background */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* subtle shadow */
  transition: box-shadow 0.2s ease;
}

.innerbox:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* lift on hover */
}

/* Make band full width */
.stat-band {
  width: 100%;
  background: #EFF3FF;   /* Light blue background */
  padding: 48px 0;       /* top/bottom padding */
  margin: 0;             /* ensure no gap */
}

/* Typography */
.stat {
  padding: 8px 0;
}
.stat-number {
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1;
  color: #fff;        /* Accent color */
}
.stat-label {
  margin-top: 6px;
  color: #334155;
  font-size: 16px;
}


/* Make a section span the entire viewport width, even inside a container */
.full-bleed {
  width: 100vw;                          /* viewport width */
  margin-left: calc(50% - 50vw);         /* pull to left edge */
  margin-right: calc(50% - 50vw);        /* pull to right edge */
  background: #2BA78C;                   /* your band color */
  padding: 48px 0;                       /* vertical spacing */
}

.retention-cycle { padding: 40px 0; }
.cycle-title { margin-top: 0; margin-bottom: 14px; }

.cycle-figure { max-width: 80%; height: auto; }

.cycle-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
}
.cycle-steps li {
  display: flex; gap: 12px; position: relative; padding: 14px 0;
}
.cycle-steps li + li { border-top: 1px solid #eef2f7; }

.step-badge {
  flex: 0 0 32px; height: 32px; border-radius: 999px;
  background: #2BA78C; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-body h5 { margin: 0 0 6px; }
.step-body p  { margin: 0; color: #475467; }

.footer-logo {
  max-width: 150px;   /* adjust size */
  height: auto;       /* keeps proportions */
}

/* Mobile spacing between stacked items */
@media (max-width: 640px) {
  .footer-logo { 
    margin-bottom: 12px; /* add space under logo on small screens */
  }
}

@media (max-width: 640px) {
  .retention-cycle { padding: 28px 0; }
  .cycle-steps li { align-items: flex-start; }
}

/* Add vertical spacing between stacked cards on small screens */
@media (max-width: 640px) {
  .innerbox {
    margin-bottom: 20px;
  }
}

/* Section */
.logos-simple{
  padding: 28px 0;
  background: #fafbfe;    /* change or remove if you want white */
  text-align: center;
}
.logos-simple h2{
  margin: 0 0 16px;
  font-size: 1.125rem;    /* small, quiet heading */
  font-weight: 700;
}

/* Row of logos */
.logos-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 36px;         /* row/column gap */
  padding: 0 12px;
}

/* Make every logo the same optical height */
.logos-row img{
  height: 36px;           /* ← adjust once to taste */
  width: auto;
  max-width: 180px;       /* prevents very wide marks from dominating */
  filter: grayscale(1);
  opacity: .85;
  transition: filter .15s ease, opacity .15s ease, transform .15s ease;
}

/* Optional hover polish */
.logos-row img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

/* Slightly larger on wider screens */
@media (min-width: 768px){
  .logos-row img{ height: 42px; }
}