.wz-em--teaser { background: var(--wz-wash); }
.wz-em--teaser .wz-em__copy > .wz-em__sub { margin-bottom: 24px; }

.wz-em__hero-demo { position: relative; min-width: 0; padding: 24px 0; font-family: system-ui, -apple-system, sans-serif; }
.wz-em__appwindow { overflow: hidden; width: 100%; background: #fff; border: 1px solid var(--wz-line); border-radius: 16px; box-shadow: 0 18px 50px color-mix(in srgb, var(--wz-em-shadow) 11%, transparent); color: var(--wz-ink); }
.wz-em__appbar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 15px; border-bottom: 1px solid var(--wz-line); background: #fff; font-size: 10px; }
.wz-em__appbar img { display: block; width: 89px; height: auto; }
.wz-em__crumb { flex: 1; border-left: 1px solid var(--wz-line); padding-left: 12px; color: var(--wz-ink-mute); }
.wz-em__avatar { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--wz-tint); color: var(--wz-pill-text); font-size: 10px; font-weight: 700; }
.wz-em__appbody { display: flex; min-width: 0; }
.wz-em__rail { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 15px; border-right: 1px solid var(--wz-line); background: var(--wz-tint-soft); color: var(--wz-ink-mute); }
.wz-em__rail .wz-em__icon { width: 17px; height: 17px; }
.wz-em__selected { padding: 7px; border-radius: 8px; background: var(--wz-tint); color: var(--wz-accent); }
.wz-em__compose { flex: 1; min-width: 0; padding: 18px; }
.wz-em__appheading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; font-size: 12px; font-weight: 650; }
.wz-em__status { display: inline-block; padding: 4px 8px; border-radius: 999px; background: var(--wz-em-ok-wash); color: var(--wz-btn-teal); border: 1px solid var(--wz-em-ok-line); font-size: 10px; font-weight: 600; white-space: nowrap; }
.wz-em__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wz-em__field { min-width: 0; }
.wz-em__field-label { display: block; margin-bottom: 6px; font-size: 10px; color: var(--wz-ink-mute); }
.wz-em__input { padding: 8px; border: 1px solid var(--wz-line); border-radius: 7px; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.wz-em__senderline { margin: 12px 0 7px; color: var(--wz-ink-mute); font-size: 10px; }
.wz-em__senderline b { color: var(--wz-ink); font-weight: 550; }
.wz-em__mailpreview { overflow: hidden; border: 1px solid var(--wz-line); border-radius: 9px; }
.wz-em__mailmast { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--wz-tint-soft); border-bottom: 1px solid var(--wz-line-warm-soft); color: var(--wz-accent); font-size: 10px; font-weight: 700; }
.wz-em__monogram { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--wz-accent); color: #fff; }
.wz-em__mailinner { padding: 18px; }
.wz-em__mail-title { font: 700 20px/1.25 system-ui, sans-serif; margin-bottom: 8px; letter-spacing: -.4px; }
.wz-em__mailinner p { max-width: 290px; font-size: 11px; line-height: 1.6; color: var(--wz-ink-mute); }
.wz-em__mailcta { display: inline-block; margin-top: 12px; padding: 7px 12px; border-radius: 5px; background: var(--wz-accent); color: #fff; font-size: 10px; }

.wz-em__appfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wz-line); color: var(--wz-ink-mute); font-size: 9px; }
.wz-em__appsend { flex: none; padding: 7px 10px; border-radius: 6px; background: var(--wz-accent); color: #fff; font-weight: 600; }
.wz-em__float { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--wz-line-warm); border-radius: 12px; box-shadow: 0 10px 28px color-mix(in srgb, var(--wz-em-shadow) 7.1%, transparent); background: #fff; font-family: var(--wz-ui-font); }
.wz-em__float strong { display: block; font-size: 13px; line-height: 1.35; }
.wz-em__float small { display: block; margin-top: 2px; font-size: 10px; color: var(--wz-ink-mute); }
.wz-em__seal { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--wz-em-ok-wash); color: var(--wz-btn-teal); }
.wz-em__seal .wz-em__icon { width: 18px; height: 18px; }
.wz-em__fverify { top: 0; right: 12px; }
.wz-em__fapi { bottom: 2px; left: -16px; }
.wz-em__fapi .wz-em__seal { background: var(--wz-tint); color: var(--wz-accent); }

@media (min-width: 768px) and (max-width: 1024px) {
  .wz-em__float { padding: 9px 12px; }
  .wz-em__float strong { font-size: 11px; }
}

@media (max-width: 767px) {
  .wz-em__hero-demo { padding: 24px 0 22px; }
  .wz-em__appbar { gap: 8px; min-height: 34px; padding: 7px 10px; font-size: 8px; }
  .wz-em__appbar img { width: 66px; }
  .wz-em__crumb { padding-left: 8px; }
  .wz-em__avatar { width: 20px; height: 20px; font-size: 8px; }
  .wz-em__rail { width: 32px; gap: 14px; padding-top: 12px; }
  .wz-em__rail .wz-em__icon { width: 13px; height: 13px; }
  .wz-em__selected { padding: 5px; border-radius: 6px; }
  .wz-em__compose { padding: 11px; }
  .wz-em__appheading { margin-bottom: 12px; font-size: 10px; }
  .wz-em__status { font-size: 8px; padding: 3px 6px; }
  .wz-em__fields { gap: 8px; }
  .wz-em__field-label { font-size: 8px; }
  .wz-em__input { font-size: 8px; padding: 6px; border-radius: 5px; }
  .wz-em__senderline { font-size: 8px; margin: 9px 0 6px; }
  .wz-em__mailmast { padding: 9px 11px; font-size: 9px; }
  .wz-em__monogram { width: 19px; height: 19px; border-radius: 5px; }
  .wz-em__mailinner { padding: 13px; }
  .wz-em__mail-title { font-size: 17px; }
  .wz-em__mailinner p { font-size: 9px; }
  .wz-em__mailcta { font-size: 8px; margin-top: 10px; }
  .wz-em__appfoot { font-size: 8px; margin-top: 10px; padding-top: 10px; }
  .wz-em__appsend { padding: 6px 8px; }
  .wz-em__float { gap: 8px; padding: 9px 11px; border-radius: 10px; }
  .wz-em__float strong { font-size: 10px; }
  .wz-em__float small { font-size: 8px; }
  .wz-em__seal { width: 27px; height: 27px; }
  .wz-em__seal .wz-em__icon { width: 15px; height: 15px; }
  .wz-em__fverify { right: 0; }
  .wz-em__fapi { left: 0; bottom: 0; }
}