.customer-twin-popup {
  width: min(1120px, calc(100vw - 48px));
  height: min(900px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--bb-line, #d8dddd);
  border-radius: 24px;
  background: var(--bb-pearl, #faf8f4);
  color: var(--bb-charcoal, #283b3b);
  overflow: hidden;
  box-shadow: 0 24px 90px #183d4a40;
}
.customer-twin-popup::backdrop { background: #17313d80; backdrop-filter: blur(5px); }
.customer-twin-popup[open] { display: flex; flex-direction: column; }
.customer-twin-popup__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; flex: 0 0 auto; border-bottom: 1px solid var(--bb-line, #d8dddd); background: var(--bb-white, #fff); }
.customer-twin-popup__header h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.customer-twin-popup__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bb-line, #d8dddd); border-radius: 50%; background: var(--bb-pearl, #faf8f4); color: inherit; font-size: 28px; cursor: pointer; }
.customer-twin-popup__close:focus-visible { outline: 3px solid var(--bb-teal, #316b6c); outline-offset: 3px; }
.customer-twin-popup__content { flex: 1 1 auto; min-height: 0; }
#customer-twin-popup-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bb-pearl, #faf8f4); }
body.customer-twin-popup-open { overflow: hidden; }
@media (max-width: 640px) {
  .customer-twin-popup { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 18px; }
  .customer-twin-popup__header { padding: 8px 12px; }
}

/* Iframe documents use the same typography as the customer studio. */
body[data-customer-reference-workflow] {
  font-family: Arial, Helvetica, sans-serif;
}
body[data-customer-reference-workflow] :is(h1, h2, h3) { font-family: inherit; }
body[data-customer-reference-workflow] :is(h1, h2) { font-weight: 850; letter-spacing: -.035em; }