/* Datify hero colour treatment; keeps the original hero layout. */
.section.hero {
  background:
    radial-gradient(ellipse at 76% 32%, rgba(104, 157, 198, 0.34), transparent 43%),
    linear-gradient(125deg, #0b1d2f 0%, #153a59 56%, #355f84 100%);
}

.section.hero > .bg-image {
  display: none;
}

.agent-card.datify-whatsapp-preview {
  width: min(22rem, 44vw);
  min-height: 6.25rem;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2.75rem rgba(5, 22, 38, 0.16);
}

.datify-preview-mark {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  place-items: center;
  border-radius: 0.9rem;
  background: #183b5b;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.datify-preview-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.datify-preview-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #657286;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.datify-preview-label i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #29a879;
}

.datify-preview-copy strong {
  color: #16283a;
  font-size: 0.94rem;
  line-height: 1.25;
}

.datify-preview-copy p {
  margin: 0;
  color: #5e6b7a;
  font-size: 0.7rem;
  line-height: 1.35;
}

.datify-preview-action {
  margin-top: 0.2rem;
  color: #244f75;
  font-size: 0.68rem;
  font-weight: 650;
}

.datify-preview-action b {
  margin-left: 0.15rem;
  font-size: 0.82rem;
}

@media screen and (max-width: 767px) {
  .agent-card.datify-whatsapp-preview {
    width: min(100%, 22rem);
  }
}

.agent-card.datify-whatsapp-preview {
  align-items: flex-start;
  font-family: inherit;
}

.agent-card.datify-whatsapp-preview * {
  font-family: inherit;
}

.datify-preview-copy {
  align-items: flex-start;
  text-align: left;
}

.datify-preview-label {
  font-size: 0.62rem;
  line-height: 1.35;
}

.datify-preview-copy strong {
  font-size: 1rem;
  line-height: 1.3;
}

.datify-preview-copy p {
  font-size: 0.75rem;
  line-height: 1.4;
}

.datify-preview-action {
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Reuse Datify's square inset mark and accent blue in the hero story. */
.datify-preview-mark span {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.22rem;
  background: #fff;
}

.section-heading_wrapper.sticky-on-mobile .heading_wrapper.home-heading-one > .brand-color {
  color: #315f82;
}