/* =========================================================
   WHAT WE DO — STEP CARD
========================================================= */
.wwdCard {
  background: #0d1b3e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 26px 34px;
}

/* =========================================================
   TOP ROW — number left, icon right
========================================================= */
.wwdCard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  min-height: 44px;
}

.wwdCard__number {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #e06b1f;
}

.wwdCard__icon {
  display: block;
  width: 52px;
  height: 52px;
  flex-shrink: 0;

  object-fit: contain;
}

/* =========================================================
   TITLE
========================================================= */
.wwdCard__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;

  color: #fff !important;
  margin: 0;
}

/* =========================================================
   DESCRIPTION
========================================================= */
.wwdCard__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;

  color: rgba(255, 255, 255, 0.65) !important;
  margin-top: 16px;
}

.wwdCard__desc p {
  margin: 0 0 10px;
}

.wwdCard__desc p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   FOOTER — duration label pinned to the card bottom
========================================================= */
.wwdCard__footer {
  display: block;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;

  color: rgba(255, 255, 255, 0.4);
  margin-top: auto;
  padding-top: 22px;
}

/* light theme variant, set by the parent section */
.wwdSection--light .wwdCard__footer {
  color: rgba(13, 27, 62, 0.42);
}
.wwdSection--light .wwdCard__title {
  color: #111 !important;
}
.wwdSection--light .wwdCard__desc {
  color: #555 !important;
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 820px) {
  .wwdCard {
    padding: 24px 22px 26px;
  }

  .wwdCard__title {
    font-size: 1.08rem;
    margin-top: 20px;
  }

  .wwdCard__desc {
    font-size: 0.88rem;
    margin-top: 14px;
  }

  .wwdCard__footer {
    padding-top: 18px;
  }
}