/* NXAI demo chrome: the top ribbon and the "message preview" dialog.
   Neutral on purpose so it sits on top of any demo design. */
.nx-ribbon { position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 16px; background: #111214; color: #f2f2f0; font: 500 12.5px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .01em; }
.nx-ribbon a { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nx-ribbon a:hover, .nx-ribbon a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.nx-ribbon__back svg { width: 14px; height: 14px; }
.nx-ribbon__pkg { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.nx-ribbon__pkg b { font-weight: 650; color: #fff; }
.nx-ribbon__pill { flex: none; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 11.5px; font-weight: 650; letter-spacing: .03em; white-space: nowrap; }
.nx-ribbon__note { margin: 0; opacity: .6; white-space: nowrap; display: none; }
.nx-ribbon__cta { background: #f2f2f0; color: #111214 !important; padding: 5px 12px; border-radius: 999px; font-weight: 650; }
.nx-ribbon__cta-short { display: none; }
.nx-ribbon__studio { flex: none; min-height: 24px; opacity: .85; font-size: 12px; font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nx-ribbon__studio:hover, .nx-ribbon__studio:focus-visible { opacity: 1; }
/* very wide screens only: the long note about invented data fits next to the pill */
@media (min-width: 1560px) { .nx-ribbon__note { display: block; } }
/* tablets: row 1 = back link, pill, button; row 2 = package */
@media (min-width: 761px) and (max-width: 1099px) {
  .nx-ribbon__back { order: 1; }
  .nx-ribbon__pill { order: 2; }
  .nx-ribbon__studio { order: 2; }
  .nx-ribbon__cta { order: 3; margin-left: auto; }
  .nx-ribbon__pkg { order: 4; flex: 1 1 100%; white-space: normal; overflow: visible; }
}
/* phones and narrow tablets: row 1 = back link + button, row 2 = pill, row 3 = package (the text wraps, the price is never cut) */
@media (max-width: 760px) {
  .nx-ribbon { gap: 4px 10px; padding: 6px 12px; font-size: 12px; }
  .nx-ribbon__back { order: 1; min-height: 32px; }
  .nx-ribbon__cta { order: 2; margin-left: auto; }
  .nx-ribbon__pill { order: 3; font-size: 11px; }
  .nx-ribbon__studio { order: 3; min-height: 32px; font-size: 11.5px; }
  .nx-ribbon__pkg { order: 4; flex: 1 1 190px; white-space: normal; overflow: visible; line-height: 1.25; }
}
@media (max-width: 420px) {
  .nx-ribbon__cta-long { display: none; }
  .nx-ribbon__cta-short { display: inline; }
}

.nx-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(12, 12, 14, .55); backdrop-filter: blur(4px); }
.nx-dialog[hidden] { display: none; }
.nx-dialog__box { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fbfbfa; color: #17181a; border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 24px 80px rgba(0,0,0,.35); font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.nx-dialog__kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6b6d72; margin: 0 0 6px; }
.nx-dialog__title { font-size: 19px; font-weight: 650; margin: 0 0 12px; }
.nx-dialog__msg { white-space: pre-wrap; background: #fff; border: 1px solid #e3e3df; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font: 400 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #222; }
.nx-dialog__note { font-size: 13.5px; color: #55575c; margin: 0 0 8px; }
.nx-dialog__fine { font-size: 12px; line-height: 1.4; color: #6b6d72; margin: 0 0 16px; }
.nx-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-dialog__actions a, .nx-dialog__actions button { appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 10px 16px; font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; }
.nx-dialog__primary { background: #17181a; color: #fff; }
.nx-dialog__secondary { background: #ececea; color: #17181a; }
.nx-dialog__actions :focus-visible { outline: 2px solid #3b6cff; outline-offset: 2px; }

/* WhatsApp is marked with an asterisk; this is the one small note, the last line of the page footer (Meta is recognised as extremist in Russia) */
.nx-meta-note { margin: 0; padding: 12px 16px 14px; font: 400 12px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-align: center; text-transform: none; color: inherit; opacity: .8; }