/*
 * Product stories: a short loop in the hero window of the feature pages (stories.js). The static mockup stays underneath
 * for visitors without JavaScript or with reduced motion.
 */
.mx-win.mn-story-on > :not(.mns) { display: none !important; }
.mns { --i: #6366f1; --i2: #4f46e5; --ink: #eceefc; --mute: #9ca1c6; --line: rgba(255,255,255,.1); --card: rgba(255,255,255,.045); --green: #34d399; --amber: #fbbf24; --red: #f87171;
  position: relative; width: 100%; height: var(--mns-h, 460px); overflow: hidden; color: var(--ink); font: 500 13.5px/1.45 -apple-system, "system-ui", "Segoe UI", Roboto, Arial, sans-serif; text-align: left; }
.mns * { box-sizing: border-box; }
.mns-bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
.mns-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mns-bar b { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--mute); }
.mns-stage { position: absolute; inset: 44px 0 0 0; padding: 16px 18px 0; overflow: hidden; transition: opacity .7s ease, filter .7s ease, transform .7s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px); }
.mns.mns-out .mns-stage { opacity: 0; filter: blur(10px); transform: scale(.985); }
.mns-col { display: flex; flex-direction: column; gap: 11px; transition: transform .9s cubic-bezier(.22,.8,.24,1); will-change: transform; }
.mns-noanim .mns-i, .mns-noanim .mns-col, .mns-noanim .mns-stage { transition: none !important; }

.mns-i { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s ease, transform .55s cubic-bezier(.22,.8,.24,1); }
.mns-i.mns-on { opacity: 1; transform: none; }
.mns-card { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 11px 14px; }
.mns-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--mute); }
.mns-h b { color: var(--ink); font-weight: 700; }
.mns-av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6366f1, #a855f7); flex: none; }
.mns-big { font-size: 14.5px; font-weight: 700; color: #fff; }
.mns-mute { color: var(--mute); font-size: 12px; }
.mns-row { display: flex; align-items: center; gap: 9px; }
.mns-grow { flex: 1; min-width: 0; }
.mns-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #a5b4fc; animation: mns-blink .8s steps(1) infinite; }
@keyframes mns-blink { 50% { opacity: 0; } }
.mns-spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid rgba(165,180,252,.25); border-top-color: #a5b4fc; animation: mns-spin .8s linear infinite; }
@keyframes mns-spin { to { transform: rotate(360deg); } }
.mns-ck { width: 15px; height: 15px; flex: none; border-radius: 50%; display: none; place-items: center; background: rgba(52,211,153,.18); color: var(--green); }
.mns-ck svg { width: 9px; height: 9px; }
.mns-wait .mns-spin { display: block; } .mns-wait .mns-ck { display: none; }
.mns-fin .mns-spin { display: none; } .mns-fin .mns-ck { display: grid; }
.mns-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 11.5px; color: #d8dcf7; white-space: nowrap; }
.mns-chip svg { width: 11px; height: 11px; color: var(--green); }
.mns-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mns-pill { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: background .3s ease, color .3s ease; }
.mns-amber { background: rgba(251,191,36,.14); color: var(--amber); } .mns-greenp { background: rgba(52,211,153,.16); color: var(--green); } .mns-blue { background: rgba(129,140,248,.16); color: #a5b4fc; } .mns-redp { background: rgba(248,113,113,.15); color: var(--red); }
.mns-btn { border: 0; border-radius: 9px; padding: 8px 15px; font: 700 12.5px/1 inherit; color: #fff; background: var(--i2); box-shadow: 0 6px 16px -8px rgba(79,70,229,.9); transition: transform .12s ease, background .25s ease; white-space: nowrap; }
.mns-btn.mns-press { transform: scale(.94); }
.mns-btn.mns-ok { background: rgba(52,211,153,.16); color: var(--green); box-shadow: none; }
.mns-input { border: 1px solid rgba(165,180,252,.45); background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; color: #fff; font-weight: 600; min-height: 40px; }
.mns-lines i { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.12); transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.22,.8,.24,1); }
.mns-on .mns-lines i, .mns-lines.mns-on i { transform: scaleX(var(--w, 1)); }
.mns-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mx-win.mx-win.mx-win .mns .mns-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mns-stat { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: rgba(255,255,255,.035); }
.mns-stat small { display: block; font-size: 11px; color: var(--mute); }
.mns-stat strong { display: block; font-size: 19px; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
.mns-stat em { font-style: normal; font-size: 11px; color: var(--green); font-weight: 700; }
.mns-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.mns-fill { height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #4f46e5, #818cf8); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22,.8,.24,1); }
.mns-fill.mns-on { transform: scaleX(var(--w, .5)); }
.mns-brow { display: grid; gap: 4px; font-size: 12px; color: #cfd3f2; }
.mns-brow span { display: flex; justify-content: space-between; }
.mns-quote { border-left: 2px solid #818cf8; padding: 7px 11px; border-radius: 0 8px 8px 0; background: rgba(255,255,255,.04); font-size: 12.5px; color: #e4e6fb; }
.mns-fix { padding: 8px 12px; border-radius: 9px; background: rgba(52,211,153,.12); color: var(--green); font-weight: 700; font-size: 12.5px; }
.mns-code { font: 500 12px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #d6dbff; white-space: pre-wrap; word-break: break-all; }
.mns-code .k { color: #a5b4fc; } .mns-code .s { color: #86efac; } .mns-code .m { color: var(--mute); }

/* flow nodes */
.mns-flow { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.mns-node { width: min(250px, 80%); border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 12px; padding: 9px 13px; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.mns-node small { display: block; color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.mns-node.mns-hot { border-color: #818cf8; background: rgba(99,102,241,.16); box-shadow: 0 0 0 4px rgba(99,102,241,.14); }
.mns-link { width: 2px; height: 20px; background: rgba(165,180,252,.35); transform-origin: top; transform: scaleY(0); transition: transform .35s ease; }
.mns-link.mns-on { transform: scaleY(1); }
.mns-tok { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 5px rgba(251,191,36,.2), 0 0 18px rgba(251,191,36,.7); opacity: 0; transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .3s ease; z-index: 3; }
.mns-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mns-split .mns-node { width: 100%; }

/* gauge */
.mns-ring { width: 96px; height: 96px; position: relative; flex: none; }
.mns-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mns-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.mns-ring .bg { stroke: rgba(255,255,255,.1); }
.mns-ring .fg { stroke: #34d399; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1.4s cubic-bezier(.22,.8,.24,1); }
.mns-ring.mns-on .fg { stroke-dashoffset: calc(251 - 251 * var(--p, 1)); }
.mns-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.mns-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; }
.mns-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #818cf8, #4f46e5); height: calc(var(--h, 50) * 1%); transform-origin: bottom; transform: scaleY(0); transition: transform .8s cubic-bezier(.22,.8,.24,1); transition-delay: calc(var(--n, 0) * 90ms); }
.mns-bars.mns-on i { transform: scaleY(1); }
.mns-chart svg { width: 100%; height: 110px; display: block; overflow: visible; }
.mns-chart path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.3,.2,.2,1); }
.mns-chart.mns-on path { stroke-dashoffset: 0; }

.mns-toast { position: absolute; left: 18px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; background: #fff; color: #14163a; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); font-size: 12px; }
.mns-toast b { display: block; font-size: 13px; } .mns-toast small { color: #5d6285; font-size: 11.5px; }
.mns-cursor { position: absolute; z-index: 6; left: 0; top: 0; width: 20px; height: 20px; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(.4,.1,.2,1), opacity .3s ease; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.mns-cursor svg { width: 20px; height: 20px; display: block; }
.mns-cursor::after { content: ""; position: absolute; left: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; opacity: 0; transform: scale(.3); }
.mns-cursor.mns-click::after { animation: mns-ring .5s ease-out; }
@keyframes mns-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }

.mns-outro { position: absolute; inset: 44px 0 0 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.mns.mns-out .mns-outro { opacity: 1; }
.mns-outro img { height: 32px; width: auto; margin: 0 auto 12px; display: block; }
.mns-outro p { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: #fff; max-width: 340px; }
.mns-float { position: absolute; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.07); color: #d8dcf7; font-size: 12px; font-weight: 600; opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .6s ease, transform .9s cubic-bezier(.22,.8,.24,1); }
.mns.mns-out .mns-float { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

@media (max-width: 860px) {
  .mns { font-size: 12.5px; }
  [data-k=live] { display: none !important; }
  .mns-node { width: min(300px, 92%); }
  .mns-stat strong { font-size: 16px; } .mns-stat em { display: none; } .mns-toast { display: none; }
  .mns-outro p { font-size: 17px; } .mns-ring { width: 78px; height: 78px; } .mns-ring b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .mns { display: none; } .mx-win.mn-story-on > :not(.mns) { display: revert !important; } }

/* the story is always drawn on a dark panel, whatever the static window was */
.mx-win.mx-win.mn-story-on { background: #12153a; border-color: rgba(255,255,255,.14); }
.mns-wait [data-sent] { visibility: hidden; }

/* reserve each story's height from the first paint, so nothing moves when it is built */
body.mn-p-automations .mx-secHero .mx-win { min-height: 470px; }
body.mn-p-deliverability .mx-secHero .mx-win { min-height: 540px; }
body.mn-p-segmentation .mx-secHero .mx-win { min-height: 430px; }
body.mn-p-ecommerce .mx-secHero .mx-win { min-height: 470px; }
body.mn-p-ai-email-writer .mx-secHero .mx-win { min-height: 540px; }
body.mn-p-email-campaigns .mx-secHero .mx-win { min-height: 400px; }
body.mn-p-signup-forms .mx-secHero .mx-win { min-height: 400px; }
body.mn-p-analytics .mx-secHero .mx-win { min-height: 430px; }
body.mn-p-subscriber-digital-twins .mx-secHero .mx-win { min-height: 470px; }
body.mn-p-compliance .mx-secHero .mx-win { min-height: 520px; }
body.mn-p-api-webhooks .mx-secHero .mx-win { min-height: 450px; }
body.mn-p-site-tracking .mx-secHero .mx-win { min-height: 440px; }
body.mn-p-woocommerce-plugin .mx-secHero .mx-win { min-height: 410px; }
body.mn-p-newsletter-archive .mx-secHero .mx-win { min-height: 420px; }
body.mn-p-ai-assistants .mx-secHero .mx-win { min-height: 480px; }
body.mn-p-features .mx-secHero .mx-win { min-height: 482px; }
@media (max-width: 860px) {
  body.mn-p-automations .mx-secHero .mx-win { min-height: 470px; }
  body.mn-p-deliverability .mx-secHero .mx-win { min-height: 520px; }
  body.mn-p-segmentation .mx-secHero .mx-win { min-height: 470px; }
  body.mn-p-ecommerce .mx-secHero .mx-win { min-height: 540px; }
  body.mn-p-ai-email-writer .mx-secHero .mx-win { min-height: 540px; }
  body.mn-p-email-campaigns .mx-secHero .mx-win { min-height: 520px; }
  body.mn-p-signup-forms .mx-secHero .mx-win { min-height: 470px; }
  body.mn-p-analytics .mx-secHero .mx-win { min-height: 520px; }
  body.mn-p-subscriber-digital-twins .mx-secHero .mx-win { min-height: 540px; }
  body.mn-p-compliance .mx-secHero .mx-win { min-height: 540px; }
  body.mn-p-api-webhooks .mx-secHero .mx-win { min-height: 520px; }
  body.mn-p-site-tracking .mx-secHero .mx-win { min-height: 520px; }
  body.mn-p-woocommerce-plugin .mx-secHero .mx-win { min-height: 520px; }
  body.mn-p-newsletter-archive .mx-secHero .mx-win { min-height: 480px; }
  body.mn-p-ai-assistants .mx-secHero .mx-win { min-height: 540px; }
  body.mn-p-features .mx-secHero .mx-win { min-height: 540px; }
}

/* inner layout stays put while text is typed or a button changes label */
.mns .mns-btn { white-space: nowrap; }
.mns .mns-input { min-height: 3.2em; }
@media (min-width: 861px) { .mns .mns-input { min-height: 0; } }