.wz4 {

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--wz-sec-y) 0;
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);

  background-image:
    var(--wz-wash-soft);
}

.wz4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 7.6v6.8M7.6 11h6.8' stroke='%23171717' stroke-opacity='.055' stroke-width='1.1'/%3E%3C/svg%3E"),
    radial-gradient(760px 460px at 80% 8%, rgba(218, 51, 107, .13), transparent 58%),
    radial-gradient(700px 480px at 4% 62%, rgba(123, 63, 242, .11), transparent 56%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-image: var(--wz-decor-mask);
          mask-image: var(--wz-decor-mask);
}

.wz4 *,
.wz4 *::before,
.wz4 *::after { box-sizing: border-box; }

.wz4 :where(p, h2, h3, ul, li) { margin: 0; }
.wz4 :where(ul) { padding: 0; list-style: none; }

.wz4-inner {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.wz4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}

.wz4-c--g1 { --k: var(--wz-accent); --m: var(--wz-tint); --g: #f5d5e1; }
.wz4-c--g2 { --k: #6b2fdd; --m: #f1ecfe; --g: #ded1fa; }
.wz4-c--g3 { --k: #0d7a5e; --m: #e7f5f0; --g: #c8e5db; }
.wz4-c--g4 { --k: #2a63bc; --m: #eaf1fc; --g: #d2e0f5; }

.wz4-c {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 16px;
  background: #fff;

  box-shadow: inset 0 0 0 1px var(--g),
              0 1px 2px rgba(58, 26, 44, .05),
              0 10px 24px -16px rgba(58, 26, 44, .28);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

.wz4-c__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.wz4-c__i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--m);
  color: var(--k);
  transition: background .22s cubic-bezier(.4, 0, .2, 1),
              color .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

.wz4-c__i svg { display: block; width: 22px; height: 22px; }

.wz4-c__g {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--k);
}

.wz4-c h3 {
  font-family: var(--wz-display-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.1px;
  color: var(--wz-ink);
}

.wz4-c p {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--wz-ink-soft);
}

.wz4-c__b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}

.wz4-b {
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}

.wz4-b--j { background: var(--m); color: var(--k); }
.wz4-b--p { box-shadow: inset 0 0 0 1px var(--wz-line); color: var(--wz-ink-mute); }

.wz4-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 22px;
  border-radius: 16px;
  background: var(--wz-accent);
  color: #fff;
}

.wz4-cta__h {
  font-family: var(--wz-display-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.2px;
}

.wz4-cta__b { display: grid; gap: 10px; }

.wz4-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 50px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--wz-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.wz4-cta__btn svg { display: block; width: 16px; height: 16px; }

.wz4 .wz4-cta__alt {
  color: #ffe8f1;
  text-align: center;
}

.wz4 .wz4-cta__alt:hover,
.wz4 .wz4-cta__alt:focus-visible { color: #fff; }

.wz4-more { display: none; }

.wz4-js .wz4-wrap {
  max-height: var(--wz4-lipat, 530px);
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.4, 0, .2, 1);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 132px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 132px), transparent);
}

.wz4-js .wz4-wrap.is-open {
  -webkit-mask-image: none;
          mask-image: none;
}

.wz4-js .wz4-more {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-top: -34px;
}

.wz4-js .wz4-more[hidden] { display: none; }

.wz4-more__b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--wz-brand);
  color: #fff;
  font-family: var(--wz-ui-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(218, 51, 107, .5);
  transition: background .2s, transform .2s, box-shadow .2s;
}

.wz4-more__b svg { display: block; width: 18px; height: 18px; }

.wz4-more__b:hover {
  background: var(--wz-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(218, 51, 107, .55);
}

.wz4-more__b:focus-visible {
  outline: 3px solid rgba(218, 51, 107, .45);
  outline-offset: 3px;
}

@media (hover: hover) {

  .wz4-c::after,
  .wz4-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 5px;
  }

  .wz4-c:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--g),
                0 2px 4px rgba(58, 26, 44, .06),
                0 18px 34px -18px rgba(58, 26, 44, .38);
  }

  .wz4-c:hover .wz4-c__i {
    background: var(--k);
    color: #fff;
  }

  .wz4-cta { position: relative; }
  .wz4-cta:hover { transform: translateY(-3px); }
  .wz4-cta { transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
  .wz4-cta__btn:hover,
  .wz4-cta__btn:focus-visible { background: #fff1f6; }
}

.wz4-js .wz4-grid > li { opacity: 0; }

@keyframes wz4-naik {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.wz4-js .wz4.is-in .wz4-grid > li {
  opacity: 1;
  animation: wz4-naik .52s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i) * .035s);
}

@media (max-width: 767px) {
  .wz4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 620px) {
  .wz4-inner { padding: 0 16px; }

  .wz4-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }

  .wz4-c {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "i h"
      "i p"
      "b b";
    align-content: start;
    gap: 2px 14px;
    padding: 16px 18px 16px 16px;
  }

  .wz4-c__top { display: contents; }
  .wz4-c__i { grid-area: i; }
  .wz4-c__g { display: none; }
  .wz4-c h3 { grid-area: h; margin-top: 1px; }
  .wz4-c p  { grid-area: p; margin-top: 2px; }
  .wz4-c__b { grid-area: b; margin-top: 0; padding-top: 9px; }

  .wz4 .wz4-title span { white-space: nowrap; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .wz4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wz4-js .wz4-grid > li { opacity: 1; }
  .wz4-js .wz4.is-in .wz4-grid > li { animation: none; }
  .wz4-c, .wz4-cta, .wz4-c__i, .wz4-cta__btn, .wz4-more__b { transition: none; }

  .wz4-js .wz4-wrap { transition: none; }
  .wz4-c:hover, .wz4-cta:hover { transform: none; }
}