/* JZ Creates — Learn early-access popup (#lxExit) and the blog sidebar sign-up (.lxs).
   jzc-learn-popup.php. Self-contained: works on Learn, Work and blog pages.
   Themes: .lxp--light = white (black site pages); .lxp--auto = dark on the light
   blog page, white when html[data-read="dark"]. */

#lxExit, .lxs {
  --lx-grad: linear-gradient(92deg, #ff0000 0%, #d600ed 100%);
  --lx-display: "Playfair Display", Georgia, serif;
  --lx-body: "Inter", system-ui, sans-serif;
  --lx-ease: cubic-bezier(.22, 1, .36, 1);
}
/* light (white card) */
#lxExit.lxp--light, html[data-read="dark"] #lxExit.lxp--auto {
  --p-bg: #efeeeb; --p-ink: #16161a; --p-soft: #55515c; --p-line: rgba(22,22,26,.12);
  --p-field: #ffffff; --p-field-line: rgba(22,22,26,.14); --p-opt: #f8f7f5; --p-eyebrow: #a400c4;
  --p-shadow: 0 40px 120px -30px rgba(0,0,0,.85), 0 0 80px -30px rgba(214,0,237,.5);
}
/* dark (on the light blog page) */
#lxExit.lxp--auto {
  --p-bg: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(214,0,237,.22), transparent 65%), #120a1a;
  --p-ink: #ffffff; --p-soft: rgba(255,255,255,.74); --p-line: rgba(255,255,255,.12);
  --p-field: rgba(0,0,0,.35); --p-field-line: rgba(255,255,255,.18); --p-opt: rgba(255,255,255,.04); --p-eyebrow: #f3a6ff;
  --p-shadow: 0 40px 120px -30px rgba(20,4,30,.8);
}

/* ---------- popup ---------- */
#lxExit {
  width: min(1000px, calc(100vw - 2.5rem)); max-width: none; max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--p-ink);
  font-family: var(--lx-body);
}
#lxExit::backdrop { background: rgba(4,4,6,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#lxExit.lxp--auto::backdrop { background: rgba(20,16,24,.55); }
#lxExit[open] { animation: lxpIn .45s var(--lx-ease) both; }
@keyframes lxpIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
#lxExit .lxp__box {
  display: grid; grid-template-columns: var(--lxp-mw, 300px) minmax(0, 1fr); gap: clamp(1.4rem, 2.6vw, 2.4rem); align-items: center;
  max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 2.8vw, 2.6rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem);
  border-radius: 26px; border: 1px solid var(--p-line); background: var(--p-bg); box-shadow: var(--p-shadow);
}
#lxExit .lxp__close {
  position: absolute; top: .9rem; right: .9rem; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--p-line); background: var(--p-opt); cursor: pointer; transition: border-color .25s, background .25s;
}
#lxExit .lxp__close::before, #lxExit .lxp__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; margin: -.8px 0 0 -8px; background: var(--p-ink); transform: rotate(45deg);
}
#lxExit .lxp__close::after { transform: rotate(-45deg); }
#lxExit .lxp__close:hover { border-color: rgba(214,0,237,.55); }

/* three stacked previews */
#lxExit .lxp__media { display: grid; gap: .7rem; }
.lxp__vid, .lxs__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0a0a0d; }
.lxp__vid video, .lxs__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.lxp__tag {
  position: absolute; z-index: 2; left: .6rem; bottom: .6rem; padding: .3rem .6rem; border-radius: 999px;
  background: rgba(6,6,7,.62); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font: 600 .6rem/1 var(--lx-body); letter-spacing: .12em; text-transform: uppercase;
}

#lxExit .lxp__body { min-width: 0; padding-right: 1.2rem; }
.lxp__eyebrow { display: block; font: 600 .7rem/1.3 var(--lx-body); letter-spacing: .16em; text-transform: uppercase; color: var(--p-eyebrow, #a400c4); }
#lxExit h3 { margin: .6rem 0 0; font: 600 clamp(1.6rem, 2.4vw, 2.15rem)/1.12 var(--lx-display); color: var(--p-ink); text-wrap: balance; }
#lxExit .lxp__text { margin: .7rem 0 0; color: var(--p-soft); font-size: .97rem; line-height: 1.55; }

/* ---------- the form (popup + sidebar) ---------- */
:is(#lxExit, .lxs) .lxf { display: grid; gap: .85rem; margin-top: 1.2rem; }
:is(#lxExit, .lxs) .lxf .lx-form__row { display: grid; grid-template-columns: 1fr; gap: .8rem; }
#lxExit .lxf .lx-form__row { grid-template-columns: 1fr 1fr; }
:is(#lxExit, .lxs) .lxf label { display: grid; gap: .35rem; font-size: .8rem; color: var(--p-soft); }
:is(#lxExit, .lxs) .lxf input[type="text"], :is(#lxExit, .lxs) .lxf input[type="email"] {
  width: 100%; padding: .8rem .95rem; border-radius: 11px; border: 1px solid var(--p-field-line);
  background: var(--p-field); color: var(--p-ink); font: 400 .98rem/1.3 var(--lx-body); box-shadow: none;
}
:is(#lxExit, .lxs) .lxf input:focus-visible { outline: 2px solid rgba(214,0,237,.7); outline-offset: 2px; }
:is(#lxExit, .lxs) .lxf fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; min-width: 0; }
:is(#lxExit, .lxs) .lxf legend { padding: 0; margin-bottom: .45rem; font-size: .8rem; color: var(--p-soft); }
:is(#lxExit, .lxs) .lxf .lx-check {
  display: flex !important; align-items: flex-start; gap: .65rem !important; cursor: pointer;
  padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--p-line); background: var(--p-opt);
  color: var(--p-ink) !important; font-size: .92rem !important; line-height: 1.4; transition: border-color .25s, background .25s;
}
:is(#lxExit, .lxs) .lxf .lx-check:has(input:checked) { border-color: rgba(214,0,237,.6); background: rgba(214,0,237,.08); }
:is(#lxExit, .lxs) .lxf .lx-check input { margin-top: .15rem; width: 17px; height: 17px; accent-color: #d600ed; flex: 0 0 auto; }
:is(#lxExit, .lxs) .lxf .lx-check > span { display: grid; gap: .15rem; }
:is(#lxExit, .lxs) .lxf .lx-check strong { color: var(--p-ink); font-weight: 600; }
:is(#lxExit, .lxs) .lxf .lx-check small { color: var(--p-soft); font-size: .8rem; line-height: 1.4; }
:is(#lxExit, .lxs) .lxf .lx-form__fine { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--p-soft); }
:is(#lxExit, .lxs) .lxf .lx-form__fine a { color: var(--p-ink); text-decoration: underline; }
:is(#lxExit, .lxs) .lxf .lxf__btn {
  display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lx-grad); color: #fff !important; font: 600 .95rem/1 var(--lx-body);
  box-shadow: 0 12px 30px -10px rgba(255,36,56,.6); transition: transform .3s var(--lx-ease), box-shadow .3s;
}
:is(#lxExit, .lxs) .lxf .lxf__btn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -10px rgba(214,0,237,.7); }
:is(#lxExit, .lxs) .lxf .lxf__btn:disabled { opacity: .6; cursor: progress; }
:is(#lxExit, .lxs) .lxf .lx-form__msg { margin: 0; font-size: .88rem; color: var(--p-ink); }
:is(#lxExit, .lxs) .lxf .lx-form__msg:empty { display: none; }
:is(#lxExit, .lxs) .lxf .lx-form__msg.is-error { color: #e0334a; }

/* ---------- phones: one video on top, form below ---------- */
@media (max-width: 820px) {
  #lxExit { width: calc(100vw - 1.5rem); }
  #lxExit .lxp__box { grid-template-columns: 1fr !important; gap: 1.1rem; padding: 1rem 1rem 1.3rem; align-items: start; }
  #lxExit .lxp__media .lxp__vid:not(:first-child) { display: none; }
  #lxExit .lxp__body { padding: 0 .2rem; }
  #lxExit h3 { padding-right: 0; }
  #lxExit .lxf .lx-form__row { grid-template-columns: 1fr; }
  #lxExit .lxp__close { background: rgba(6,6,7,.6); border-color: rgba(255,255,255,.2); top: 1.4rem; right: 1.4rem; }
  #lxExit .lxp__close::before, #lxExit .lxp__close::after { background: #fff; }
}

/* ---------- blog sidebar sign-up ---------- */
.jzb .side-card.lxs {
  --p-bg: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(214,0,237,.38), transparent 62%), linear-gradient(160deg, #1c0830 0%, #2b0b45 60%, #3a0d55 100%);
  --p-ink: #ffffff; --p-soft: rgba(255,255,255,.76); --p-line: rgba(255,255,255,.14);
  --p-field: rgba(0,0,0,.32); --p-field-line: rgba(255,255,255,.2); --p-opt: rgba(255,255,255,.05); --p-eyebrow: #f3a6ff;
  padding: .7rem .7rem 1rem; border-radius: 22px; border: 1px solid var(--p-line); background: var(--p-bg);
  box-shadow: 0 26px 60px -28px rgba(43,11,69,.75); color: var(--p-ink);
}
html[data-read="dark"] .jzb .side-card.lxs {
  --p-bg: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(214,0,237,.10), transparent 62%), #efeeeb;
  --p-ink: #16161a; --p-soft: #55515c; --p-line: rgba(22,22,26,.12);
  --p-field: #ffffff; --p-field-line: rgba(22,22,26,.16); --p-opt: #faf9fb; --p-eyebrow: #a400c4;
  box-shadow: 0 26px 60px -30px rgba(214,0,237,.45);
}
.jzb .lxs .lxs__body { padding: .95rem .5rem 0; }
.jzb .lxs h3 { margin: 0; font: 600 1.28rem/1.15 var(--lx-display); color: var(--p-ink) !important; }
.jzb .lxs .lxs__text { margin: .45rem 0 0; color: var(--p-soft) !important; font-size: .84rem; line-height: 1.45; }
.jzb .lxs .lxf { gap: .6rem; margin-top: .85rem; }
.jzb .lxs .lxf .lx-check { padding: .55rem .75rem; }
.jzb .lxs .lxf .lx-fl input { height: 50px !important; padding-top: 21px !important; }
.jzb .lxs .lxf .lx-form__row { grid-template-columns: 1fr; }
.jzb .lxs .lxf .lxf__btn { width: 100%; }
.jzb .lxs .lxf .lx-form__fine a { color: var(--p-ink) !important; }

@media (prefers-reduced-motion: reduce) { #lxExit[open] { animation: none; } }

/* ---------- floating labels, like the contact form ---------- */
:is(#lxExit, .lxs) .lxf .lx-fl { position: relative; display: block; gap: 0; }
:is(#lxExit, .lxs) .lxf .lx-fl > span {
  position: absolute; top: 7px; left: 13px; right: 13px; z-index: 1; pointer-events: none;
  font: 500 11px/1.3 var(--lx-body); color: var(--p-soft); transition: top .12s, font-size .12s, transform .12s;
}
:is(#lxExit, .lxs) .lxf .lx-fl:has(input:placeholder-shown):not(:focus-within) > span { top: 50%; font-size: 14px; font-weight: 400; transform: translateY(-50%); }
:is(#lxExit, .lxs) .lxf .lx-fl input[type="text"], :is(#lxExit, .lxs) .lxf .lx-fl input[type="email"] { height: 54px; padding: 23px 13px 7px; line-height: 1.45; }
@media (max-width: 600px) { :is(#lxExit, .lxs) .lxf .lx-fl input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { :is(#lxExit, .lxs) .lxf .lx-fl > span { transition: none; } }

/* sidebar sign-up, compact: wider/shorter preview, name + email side by side */
.jzb .lxs .lxs__media { aspect-ratio: 2 / 1; border-radius: 15px; }
.jzb .lxs .lxf .lx-form__row { grid-template-columns: 4fr 6fr !important; gap: .5rem; }
.jzb .lxs .lxf legend { margin-bottom: .35rem; }
.jzb .lxs .lxf fieldset { gap: .4rem; }
.jzb .lxs .lxf .lx-form__fine { font-size: .7rem; line-height: 1.45; }
.jzb .side-card.lxs { padding-bottom: .7rem; }
.jzb .lxs .lxf .lx-check small { font-size: .74rem; }