*, html { box-sizing: border-box; }

div.promo-container { 
  position: relative;
  box-shadow: 0 4px 6px rgba(0,0,0,.05);
  border-radius: 1.5rem;
  display: flex;
  align-items: stretch;
}

.sidebar {
  width: 300px;
  background-color: #f2d3e4;
  padding: 1.5rem 0;
  overflow: auto;
  border-radius: 1.5rem 0 0 1.5rem;
  height: auto;             /* let flex stretch it */
  flex: 0 0 300px;          /* fixed sidebar width */
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar .promo-link.active {
  background-color: #f7f9fb;
  color: #cd158d;
  font-weight:700;
}

/* Links on mouse-over */
.sidebar .promo-link:hover:not(.active) {
  background-color: #cd158d;
  color: #ffffff;
}

.promo-link { 
  position: relative;
}

.promo-arrow { 
  position: absolute;
  right: 16px;
  bottom: calc(50% - 12px);
}

div.tabcontent {
  display: none;
  align-items: center;
  padding: 2rem;
  min-height: 300px;
  background-color: #f7f9fb;
  border-radius: 0 1.5rem 1.5rem 0;
  margin-left: 0;           /* remove the old offset */
  flex: 1;                  /* content takes remaining width */
}

div.tabcontent .promo-copy {
display: flex;
flex-direction: column;
padding-right:1rem;
      height: 100%;
}

div.partner-logos {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 1.5rem;
}

div.partner-logos .divider { 
  background-color: #939597; 
  height: 36px; 
  overflow: hidden;
  width: 2px;
}

div.partner-logos .credabl, div.partner-logos .partner
{
  height:24px;
  width:auto;
}

.promo-text { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }

.subtitle {  
  color: #212121;
  font-weight: bold;
}

.hs-button { 
  padding: 7px 21px; 
  font-size: .875rem !important;
  line-height: 1.25rem !important;
}

.promo-image { 
 border-radius: 50%;
  border: #cd158d 3px solid;
  box-shadow: 0 4px 6px rgba(0,0,0,.05);
  background-color: #ffffff;
}

.promo-image img {
  border-radius: 50%; padding: 0.5rem;
}

.all-promos { 
font-family: Lato;
  text-align:center;
  padding-top: 3.75rem;
}

.all-promos a { 
  font-size: 14px !important;
  color: #555 !important;
  border-bottom: 2px solid #00b3a6 !important;
  text-decoration: none;
  padding-bottom: 2px !important; }

@media (max-width: 767px) {
 /* .promo-container {
    flex-direction: column; 
  } */

  /* Sidebar becomes a horizontal scroller */
  .sidebar {
    display:none; /*
    flex: none;
    width: auto;
    padding: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    border-radius: 0; 
  } 
    
   .sidebar a {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border-radius: 999px; /
    background: rgba(255,255,255,0.55);
  }

  .sidebar a.active {
    background: #f7f9fb;
    */
  }
  
    div.tabcontent {
    display:flex;
    min-height: 0;
      width:80vw;
    padding: 1rem !important;
    /* align-items: stretch;  let children take full width */
    margin: 0 0.5rem;
    border-radius: 1.5rem;
    flex-direction:column;
    flex:none;
  }
  
  .tabcontent h3 { font-size:1.25rem; }
  
    .tabcontent .promo-image, .tabcontent .promo-image img {  
      width:auto;
      height:auto;
      order: -1; /* image first */
 }
  
  .tabcontent h3 { margin-top:0; }
  
  .tabcontent .promo-image {
  margin-bottom:1rem;
  }
  
  .tabcontent .promo-image img { padding:0; }
  
   .tabcontent img {
    max-width: 100%;
    height: auto;
  }
  /*  
    .sidebar {
    scroll-snap-type: x mandatory;
  }
  .sidebar a {
    scroll-snap-align: start;
    font-size:0.875rem;
  }
 */  
    div.tabcontent, div.promo-copy { height:auto !important; min-height:fit-content; display: flex;
    flex-direction: column;
    flex: 1; } 
    .promo-arrow { display:none; }
}
div.partner-promos {
 display:flex;
 flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

div.partner-logos {
  margin-bottom:1rem;
}

div.partner-logos .credabl, div.partner-logos .partner
{
  height:22px;
  width:auto;
}

  .partner-promos .promo-copy > div:last-child {
    margin-top: auto; /* button pinned bottom */
  }

.promo-text p:not(.subtitle) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size:0.875rem;
  -webkit-line-clamp: 3; /* Number of lines to show */
  overflow: hidden;
  text-overflow: ellipsis; 
}
}