/* ==========================================================
   Voctos — Dev Why Us block — TEXT mode
   Unbounded everywhere · body/list 14px / line-height 20px
   ========================================================== */

.voctos-dev-whyus-text {
  padding-top: 0;
  padding-bottom: 0;
}

/* White card wrapper — matches original bg-white rounded-rc-1 */
.voctos-dev-whyus-text .dwt-card {
  background: #fff;
  border-radius: 30px;
  padding: 20px 16px;          /* mobile: py-5 px-4 */
}
@media (min-width: 1024px) {
  .voctos-dev-whyus-text .dwt-card {
    padding: 44px 30px 30px;   /* desktop: pt-11 px-[30px] pb-[30px] */
  }
}

/* Each section */
.voctos-dev-whyus-text .dwt-section {
  padding-top: 28px;
  padding-bottom: 28px;
}
/* Card provides outer padding — trim first/last section edges */
.voctos-dev-whyus-text .dwt-section:first-child {
  padding-top: 0;
}
.voctos-dev-whyus-text .dwt-section:last-child {
  padding-bottom: 0;
}
.voctos-dev-whyus-text .dwt-section--divide {
  border-top: 1px solid #D5D9E8;
}

/* Heading — Unbounded, large. line-height 32px (matches original) */
.voctos-dev-whyus-text .dwt-heading {
  font-family: 'Unbounded', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #0D172D;
  margin: 0 0 16px;
}
@media (min-width: 1024px) {
  .voctos-dev-whyus-text .dwt-heading {
    font-size: 38px;
    margin-bottom: 20px;
  }
}

/* Intro + outro wrappers */
.voctos-dev-whyus-text .dwt-intro {
  margin: 0 0 20px;
}
.voctos-dev-whyus-text .dwt-outro {
  margin: 20px 0 0;
}

/* wpautop generates <p> tags inside — style those */
.voctos-dev-whyus-text .dwt-intro p,
.voctos-dev-whyus-text .dwt-outro p {
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0D172D;
  margin: 0 0 12px;
}
.voctos-dev-whyus-text .dwt-intro p:last-child,
.voctos-dev-whyus-text .dwt-outro p:last-child {
  margin-bottom: 0;
}

/* CTA button */
.voctos-dev-whyus-text .dwt-btn-wrap {
  padding: 36px 0 12px;
  text-align: center;
}
.voctos-dev-whyus-text .dwt-btn {
  display: inline-block;
  padding: 16px 24px;
  background: #16FFAB;
  color: #0D172D;
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.18s, transform 0.15s;
}
.voctos-dev-whyus-text .dwt-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

.voctos-dev-whyus-text .dwt-list li {
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #0D172D;
  padding-bottom: 8px;
}

/* ==========================================================
   SIMPLE MODE — white card: heading + paragraph + optional icon
   Mobile:  icon block above heading | px-4 pt-4 pb-6
   Desktop: icon absolute top-right  | px-11 py-9 relative
   ========================================================== */

/* Card — block layout (no flex), relative for absolute icon on desktop */
.voctos-dev-whyus-simple .dwts-card {
  background: #fff;
  border-radius: 30px;        /* rounded-rc-1 */
  padding: 16px 16px 24px;   /* px-4 pt-4 pb-6 */
  position: relative;
}
@media (min-width: 1024px) {
  .voctos-dev-whyus-simple .dwts-card {
    padding: 36px 44px;        /* lg:px-11 lg:py-9 */
  }
}

/* Icon size */
.voctos-dev-whyus-simple .dwts-icon-wrap {
  display: block;
  width: 56px;                 /* w-14 */
  height: 56px;                /* h-14 */
  margin-bottom: 6px;          /* mb-1.5 */
}

/* Mobile + tablet (<1024px): icon sits ON THE SAME ROW as the heading,
   pushed to the end of the row; intro drops below at full width. */
@media (max-width: 1023.98px) {
  .voctos-dev-whyus-simple .dwts-card--has-icon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .voctos-dev-whyus-simple .dwts-card--has-icon .dwts-heading {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 12px;
  }
  .voctos-dev-whyus-simple .dwts-card--has-icon .dwts-icon-wrap {
    order: 2;
    margin: 0 0 12px 12px;     /* gap from heading; aligned to row end via flex */
    flex-shrink: 0;
  }
  .voctos-dev-whyus-simple .dwts-card--has-icon .dwts-intro {
    order: 3;
    flex-basis: 100%;
  }
}
/* Icon: absolute top-right on desktop */
@media (min-width: 1024px) {
  .voctos-dev-whyus-simple .dwts-icon-wrap {
    position: absolute;
    right: 28px;               /* right-7 */
    top: 28px;                 /* top-7 */
    margin-bottom: 0;
    width: 56px;
    height: 56px;
  }
}
.voctos-dev-whyus-simple .dwts-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Heading: mobile font-medium 22px, desktop font-normal 38px */
.voctos-dev-whyus-simple .dwts-heading {
  font-family: 'Unbounded', sans-serif;
  font-size: 22px;             /* text-fs-7 */
  font-weight: 500;            /* font-medium */
  line-height: 1.25;           /* leading-tight */
  color: #0D172D;
  margin: 0 0 12px;            /* mb-3 */
}
@media (min-width: 1024px) {
  .voctos-dev-whyus-simple .dwts-heading {
    font-size: 38px;           /* text-fs-5 */
    font-weight: 400;          /* lg:font-normal */
    line-height: 1;            /* lg:leading-none */
    margin-bottom: 20px;       /* lg:mb-5 */
  }
}

/* Paragraph: mobile text-xs 12px, desktop text-sm 14px — both leading-tight */
.voctos-dev-whyus-simple .dwts-intro p {
  font-size: 12px;             /* text-xs */
  font-weight: 400;
  line-height: 1.25;           /* leading-tight */
  color: #0D172D;
  margin: 0 0 16px;            /* mb-4 */
}
@media (min-width: 1024px) {
  .voctos-dev-whyus-simple .dwts-intro p {
    font-size: 14px;           /* lg:text-sm */
  }
}
.voctos-dev-whyus-simple .dwts-intro p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   NUMBERED LIST — dark circle counters, matches original .cust-counter */
.voctos-dev-whyus-text .dwt-olist {
  list-style: none;
  counter-reset: dwt-c;
  padding-left: 0;
  margin: 0;
  max-width: 700px;
}
.voctos-dev-whyus-text .dwt-olist li {
  counter-increment: dwt-c;
  position: relative;
  padding-left: 36px;
  padding-bottom: 12px;
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #0D172D;
}
.voctos-dev-whyus-text .dwt-olist li::before {
  content: counter(dwt-c);
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background: #0D172D;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.voctos-dev-whyus-text .dwt-olist li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 7.5px;
  top: 17px;
  bottom: 1px;
  width: 1px;
  background: #252525;
}