.wzb {

  --wzb-emerald: #047857;
  --wzb-emerald-soft: #059669;

  position: relative;
  padding: var(--wz-sec-y) 0;
  background: var(--wz-wash);
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

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

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

.wzb-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.wzb-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wzb-pill { align-self: center; }

.wzb-title em {
  font-style: normal;
}

.wzb-stage {
  position: relative;

  max-width: 1060px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 14px 36px rgba(5, 150, 105, 0.10);
}

.wzb-window {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wzb-pan {
  position: relative;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wzb-stage watzap-hero-tour {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f8fafc;
}

.wzb-stage .hp-callout { display: none !important; }

.wzb-spot {
  position: absolute;
  z-index: 30;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;

  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.42);

  transition: opacity 0.4s ease, left 0.3s ease, top 0.3s ease,
    width 0.3s ease, height 0.3s ease;
}

.wzb-spot.is-on { opacity: 1; }

@media (min-width: 768px) {
  .wzb-spot { display: none; }
}

.wzb-endcard {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;

  align-items: safe center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;

  background: linear-gradient(180deg, rgba(8, 24, 20, 0.5), rgba(8, 24, 20, 0.72));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.wzb-endcard.is-open {
  opacity: 1;
  visibility: visible;
}

.wzb-endcard-card {
  width: min(460px, 100%);
  padding: 30px 28px 26px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 64px rgba(8, 24, 20, 0.4);
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wzb-endcard.is-open .wzb-endcard-card {
  transform: translateY(0) scale(1);
}

.wzb-endcard-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: var(--wzb-emerald);
  font-size: 22px;
}

.wzb-endcard-title {
  font-family: var(--wz-display-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.wzb-endcard-desc {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
  color: var(--wz-ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.wzb-endcard-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wzb-replay {
  margin-top: 4px;

  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--wz-ink-mute);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.wzb-replay:hover { color: var(--wz-ink); }

.wzb-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 32px;
}

.wzb-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.14);
  transition: background 0.35s ease, width 0.35s ease;
}

.wzb-dot.is-done { background: rgba(16, 185, 129, 0.4); }

.wzb-dot.is-active {
  width: 22px;
  background: var(--wzb-emerald-soft);
}

.wzb-rail {
  display: grid;
  max-width: 560px;
  margin: 16px auto 0;
  text-align: center;
}

.wzb-step {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wzb-step.is-active {
  visibility: visible;
  opacity: 1;
}

.wzb-step-num { display: none; }

.wzb-step-title {
  font-family: var(--wz-display-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.wzb-step-desc {
  margin-top: 6px !important;
  color: var(--wz-ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: balance;
}

.wzb-step-desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--wzb-emerald);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

.wzb-progress { display: none; }

.wzb-cta {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
}

.wzb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.wzb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--wz-ui-font);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease, background 0.2s ease;
}

.wzb-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wzb-btn--primary {
  border: 0;
  background: linear-gradient(135deg, var(--wz-brand), var(--wz-accent));
  color: #fff;
  box-shadow: 0 10px 24px rgba(196, 42, 94, 0.32);
}

.wzb-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(196, 42, 94, 0.38);
  color: #fff;
}

.wzb-btn--ghost {
  border: 1.5px solid rgba(23, 23, 23, 0.16);
  background: #fff;
  color: var(--wz-ink);
}

.wzb-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 23, 23, 0.3);
  color: var(--wz-ink);
}

.wzb-btn--quiet {
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--wz-ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.wzb-btn--quiet:hover {
  color: var(--wzb-emerald);
  transform: none;
}

.wzb-btn--quiet svg { width: 16px; height: 16px; }

.wzb-trust {
  margin-top: 10px !important;
  color: var(--wz-ink-mute);
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: balance;
}

.wzb-trust b {
  color: var(--wz-ink-soft);
  font-weight: 700;
}

@media (max-width: 767px) {
  .wzb-trust { display: none; }
}

.wzb-window .hp-welcome-cta {
  background: var(--wz-btn-bg, #c42a5e);
  box-shadow: 0 8px 20px rgba(196, 42, 94, .35), inset 0 1px rgba(255, 255, 255, .08);
  border-radius: 999px;
  font-family: var(--wz-ui-font, inherit);
  font-weight: 700;
}

.wzb-window .hp-welcome-cta:hover {
  background: var(--wz-btn-bg-hover, #a92150);
}

@media (max-width: 767px) {
  .wzb-window .hp-welcome-overlay {
    background: rgba(15, 23, 42, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

@media (max-width: 767px) {
  .wzb-window {
    height: 430px;
    border-radius: 18px;
  }

  .wzb-pan {
    position: absolute;
    top: 0;
    left: 0;
    width: 1040px;
    height: 650px;
  }

  .wzb-stage watzap-hero-tour {
    width: 1040px;
    height: 650px;
    aspect-ratio: auto;
  }

  .wzb-window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(248, 250, 252, 0.9) 0,
      rgba(248, 250, 252, 0) 26px,
      rgba(248, 250, 252, 0) calc(100% - 26px),
      rgba(248, 250, 252, 0.9) 100%
    );
  }

  .wzb[data-beat="0"] .wzb-window::after {
    background:
      linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.96) 0,
        rgba(248, 250, 252, 0) 22px,
        rgba(248, 250, 252, 0) calc(100% - 22px),
        rgba(248, 250, 252, 0.96) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248, 250, 252, 0.9) 0,
        rgba(248, 250, 252, 0) 26px,
        rgba(248, 250, 252, 0) calc(100% - 26px),
        rgba(248, 250, 252, 0.9) 100%
      );
  }

}

@media (max-width: 1024px) {
  .wzb-dots { margin-top: 20px; }
  .wzb-rail { margin-top: 12px; }
  .wzb-step-title { font-size: 16.5px; }
  .wzb-step-desc { font-size: 13.5px; }

  .wzb-cta-actions { flex-direction: column; gap: 10px; }
  .wzb-btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .wzb-cta-actions { flex-direction: row; gap: 12px; }
  .wzb-btn { width: auto; }
}

@media (max-width: 600px) {

  .wzb-stage {
    margin-inline: -20px;
    border-radius: 0;
  }

  .wzb-window {
    height: 424px;
    border-radius: 0;
  }

  .wzb-endcard { padding: 14px; }
  .wzb-endcard-card { padding: 22px 18px 18px; }

  .wzb-endcard-check {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
  }

  .wzb-endcard-check svg {
    width: 18px;
    height: 18px;
  }

  .wzb-endcard-title { font-size: 19px; }

  .wzb-endcard-desc {
    margin-top: 6px !important;
    margin-bottom: 14px !important;
    font-size: 13.5px;
  }

  .wzb-endcard-actions { gap: 8px; }
}

.wzb-brk { display: none; }

.wzb-mock { display: none; }
.wzb-sub--hp { display: none; }
.wzb-ringkas { display: none; }

@media (max-width: 600px) {

  .wzb-window,
  .wzb-dots,
  .wzb-rail,
  .wzb-endcard { display: none !important; }

  .wzb-sub--layar { display: none; }
  .wzb-sub--hp { display: inline; }

  .wzb-stage {
    margin-inline: 0;
    height: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  .wzb-mock { display: block; }

  .wzb-mock:not(.is-main) *,
  .wzb-mock:not(.is-main) *::before,
  .wzb-mock:not(.is-main) *::after { animation-play-state: paused !important; }

  .wzb-hp {
    --wz-mo-w: var(--wz-hp-w);
    --wz-mo-h: var(--wz-hp-h);
    --wz-mo-bez: var(--wz-hp-bez);
    --wz-mo-r-out: var(--wz-hp-r-out);
    --wz-mo-r-in: var(--wz-hp-r-in);
    --wz-mo-status: var(--wz-hp-status);

    --wz-mo-hijau: var(--wz-wa-teal);
    --wz-mo-hijau-tua: var(--wz-wa-teal-dark);
    --wz-mo-bubble: var(--wz-wa-bubble);
    --wz-mo-wall: var(--wz-wa-wall);
    --wz-mo-chrome: var(--wz-wa-in);
    --wz-mo-garis: var(--wz-hp-garis);
    --wz-mo-ink: var(--wz-wa-ink);
    --wz-mo-ink-soft: var(--wz-wa-meta);

    display: flex;
    justify-content: center;
  }

  .wzb-hp .wz-mo-phone {
    box-shadow:
      0 2px 4px rgba(94, 26, 58, .14),
      0 10px 20px rgba(94, 26, 58, .10),
      0 22px 38px rgba(94, 26, 58, .10);
  }

  .wzb-hp .wz-mo-views {
    transition: none;
    animation: wzb-view var(--wzb-t) var(--wzb-e) infinite;
  }

  .wzb-agen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--wz-mo-ink-soft);
  }

  .wzb-agen-av {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-right: -7px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: var(--wzb-av, #12a37b);
    font-size: 8.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }

  .wzb-agen .wzb-agen-av:nth-of-type(3) { margin-right: 4px; }

  .wzb-ke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--wz-mo-ink-soft);
  }

  .wzb-ke .wzb-agen-av {
    width: 13px;
    height: 13px;
    margin: 0;
    border: 0;
    font-size: 7px;
  }

  .wzb-ke--baru {
    opacity: 0;
    animation: wzb-ke var(--wzb-t) var(--wzb-e) infinite;
  }

  .wzb-nota {
    align-self: stretch;
    margin: 2px 0 0;
    padding: 7px 9px 6px;
    border: 1px solid #efe0b6;
    border-radius: 9px;
    background: #fffaeb;
  }

  .wzb-nota > b {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    font-size: 9px;
    font-weight: 800;
    color: #8a6d1f;
  }

  .wzb-nota > b em {
    padding: 1px 5px;
    border-radius: 999px;
    background: #f4e6bd;
    font-size: 8px;
    font-style: normal;
  }

  .wzb-nota > span {
    display: block;
    font-size: 10.5px;
    line-height: 1.42;
    color: #57534a;
  }

  .wzb-nota > span u {
    font-weight: 800;
    text-decoration: none;
    color: #b02a58;
  }

  .wzb-nota > i {
    display: block;
    margin-top: 4px;
    font-size: 8.5px;
    font-style: normal;
    color: #a4977a;
  }

  .wzb-lb { opacity: 0; }
  .wzb-lb--1 { animation: wzb-lb1 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-lb--2 { animation: wzb-lb2 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-lb--3 { animation: wzb-lb3 var(--wzb-t) var(--wzb-e) infinite; }

  .wzb-hp .wzb-lb--2 { background: #fdeaf1; color: #b02a58; }
  .wzb-hp .wzb-lb--3 { background: var(--wz-mo-hijau); color: #fff; }

  .wzb-lbs {
    display: inline-grid;

    flex: 0 0 auto;
    white-space: nowrap;
  }

  .wzb-lbs > .wzb-lb { grid-area: 1 / 1; }

  .wzb-hp .wzb-lb {
    transform: none;
    transition: none;
  }

  .wzb-row { opacity: 0; }
  .wzb-row--1 { animation: wzb-r1 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-row--2 { animation: wzb-r2 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-row--3 { animation: wzb-r3 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-row--4 { animation: wzb-r4 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-row--5 { animation: wzb-r5 var(--wzb-t) var(--wzb-e) infinite; }

  .wzb-hp .wz-mo-bub--out {
    max-height: none;
    margin-bottom: 8px;
    padding-top: 7px;
    padding-bottom: 16px;
    overflow: visible;
    transform: none;
    transition: none;
  }

  .wzb-el { opacity: 0; }
  .wzb-el--1 { animation: wzb-e1 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-el--2 { animation: wzb-e2 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-el--3 { animation: wzb-e3 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-el--4 { animation: wzb-e4 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-el--5 { animation: wzb-e5 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-el--6 { animation: wzb-e6 var(--wzb-t) var(--wzb-e) infinite; }
  .wzb-el--7 { animation: wzb-e7 var(--wzb-t) var(--wzb-e) infinite; }

}

.wzb-mock {
  --wzb-t: 20s;
  --wzb-e: cubic-bezier(.22, 1, .36, 1);
}

@keyframes wzb-r1 { 0%, 0% { opacity: 0; transform: translateY(7px); } 3%, 100% { opacity: 1; transform: none; } }
@keyframes wzb-r2 { 0%, 2% { opacity: 0; transform: translateY(7px); } 5%, 100% { opacity: 1; transform: none; } }
@keyframes wzb-r3 { 0%, 4% { opacity: 0; transform: translateY(7px); } 7%, 100% { opacity: 1; transform: none; } }
@keyframes wzb-r4 { 0%, 6% { opacity: 0; transform: translateY(7px); } 9%, 100% { opacity: 1; transform: none; } }
@keyframes wzb-r5 { 0%, 8% { opacity: 0; transform: translateY(7px); } 11%, 100% { opacity: 1; transform: none; } }

@keyframes wzb-ke { 0%, 11% { opacity: 0; transform: translateY(4px); } 15%, 100% { opacity: 1; transform: none; } }

@keyframes wzb-view {
  0%, 20% { transform: none; }
  22.6%, 100% { transform: translateX(-50%); }
}

@keyframes wzb-e1 {
  0%    { opacity: 0; transform: translate(-10px, 12px) scale(.94); display: none; }
  24%   { opacity: 0; transform: translate(-10px, 12px) scale(.94); display: none; }
  24.5% { opacity: 0; transform: translate(-10px, 12px) scale(.94); display: block; }
  27%   { opacity: 1; transform: none; display: block; }
  100%  { opacity: 1; transform: none; display: block; }
}
@keyframes wzb-e2 {
  0%    { opacity: 0; transform: translateY(6px) scale(.94); display: none; }
  30%   { opacity: 0; transform: translateY(6px) scale(.94); display: none; }
  30.5% { opacity: 0; transform: translateY(6px) scale(.94); display: flex; }
  33%   { opacity: 1; transform: none; display: flex; }
  100%  { opacity: 1; transform: none; display: flex; }
}
@keyframes wzb-e3 {
  0%    { opacity: 0; transform: translate(14px, 16px) scale(.9); display: none; }
  36%   { opacity: 0; transform: translate(14px, 16px) scale(.9); display: none; }
  36.5% { opacity: 0; transform: translate(14px, 16px) scale(.9); display: block; }
  39%   { opacity: 1; transform: none; display: block; }
  100%  { opacity: 1; transform: none; display: block; }
}
@keyframes wzb-e4 {
  0%    { opacity: 0; transform: translate(-10px, 12px) scale(.94); display: none; }
  43%   { opacity: 0; transform: translate(-10px, 12px) scale(.94); display: none; }
  43.5% { opacity: 0; transform: translate(-10px, 12px) scale(.94); display: block; }
  46%   { opacity: 1; transform: none; display: block; }
  100%  { opacity: 1; transform: none; display: block; }
}
@keyframes wzb-e5 {
  0%    { opacity: 0; transform: translate(14px, 16px) scale(.9); display: none; }
  50%   { opacity: 0; transform: translate(14px, 16px) scale(.9); display: none; }
  50.5% { opacity: 0; transform: translate(14px, 16px) scale(.9); display: block; }
  53%   { opacity: 1; transform: none; display: block; }
  100%  { opacity: 1; transform: none; display: block; }
}
@keyframes wzb-e6 {
  0%    { opacity: 0; transform: translateY(6px) scale(.94); display: none; }
  60%   { opacity: 0; transform: translateY(6px) scale(.94); display: none; }
  60.5% { opacity: 0; transform: translateY(6px) scale(.94); display: flex; }
  63%   { opacity: 1; transform: none; display: flex; }
  100%  { opacity: 1; transform: none; display: flex; }
}
@keyframes wzb-e7 {
  0%    { opacity: 0; transform: translateY(8px); display: none; }
  74%   { opacity: 0; transform: translateY(8px); display: none; }
  74.5% { opacity: 0; transform: translateY(8px); display: block; }
  78%   { opacity: 1; transform: none; display: block; }
  100%  { opacity: 1; transform: none; display: block; }
}

@keyframes wzb-lb1 { 0%, 24% { opacity: 0; } 26%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes wzb-lb2 { 0%, 60% { opacity: 0; } 62%, 83% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes wzb-lb3 { 0%, 83% { opacity: 0; } 85%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {

  .wzb-mock *,
  .wzb-mock *::before,
  .wzb-mock *::after { animation: none !important; }

  .wzb-hp .wz-mo-views { transform: translateX(-50%) !important; }

  .wzb-lb--1,
  .wzb-lb--2 { opacity: 0 !important; }

  .wzb-row,
  .wzb-ke--baru,
  .wzb-el,
  .wzb-lb--3 { opacity: 1 !important; transform: none !important; }

  .wzb-pan,
  .wzb-step,
  .wzb-endcard,
  .wzb-endcard-card,
  .wzb-btn {
    transition-duration: 0.01ms !important;
  }

  .wzb-step { transition: none !important; }
}

.wzb { position: relative; isolation: isolate; }

.wzb::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='34' height='34'%3E%3Crect x='0' y='0' width='2' height='2' rx='.4' fill='%23171717' fill-opacity='.055'/%3E%3C/svg%3E"),
    radial-gradient(620px 420px at 84% 22%, rgba(218, 51, 107, .085), transparent 64%),
    radial-gradient(560px 460px at 12% 78%, rgba(123, 63, 242, .07), transparent 62%);
  background-size: 34px 34px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-image: var(--wz-decor-mask);
          mask-image: var(--wz-decor-mask);
}