/* NNI — lead magnet soft gate, theme-agnostic (2026-11-08)
   Used on: BOFU landing pages, white-label page, /resources hub.
   Blog posts use the scoped copy inside blog.css. */

/* a display rule on .mg-form would otherwise beat the UA [hidden] rule */
.magnet [hidden]{display:none!important}

.magnet{position:relative;margin:2.6rem 0;border-radius:20px;overflow:hidden;font-family:"Sora",system-ui,sans-serif;
  border:1px solid rgba(124,58,237,.32);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(124,58,237,.16), transparent 58%),
    radial-gradient(120% 140% at 100% 100%, rgba(167,139,250,.10), transparent 55%),
    rgba(127,127,127,.05);
  backdrop-filter:blur(10px)}
.magnet .mg-lab{display:flex;align-items:center;gap:.55rem;padding:.8rem 1.4rem;
  border-bottom:1px solid rgba(124,58,237,.22);
  font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#A78BFA}
.magnet .mg-lab::before{content:"";width:7px;height:7px;border-radius:50%;background:#A78BFA;flex:none;box-shadow:0 0 8px rgba(167,139,250,.75)}
.magnet .mg-body{padding:1.5rem}
.magnet h3{margin:0 0 .55rem;font-family:"Lexend",sans-serif;font-size:1.22rem;line-height:1.3;font-weight:700}
.magnet p{margin:0 0 .95rem;font-size:.97rem;line-height:1.62;opacity:.9}
.magnet .mg-form{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .7rem}
.magnet .mg-form input[type="email"]{flex:1 1 240px;min-width:0;padding:.8rem 1rem;border-radius:12px;
  border:1px solid rgba(127,127,127,.3);background:rgba(127,127,127,.09);color:inherit;
  font-size:.95rem;font-family:inherit}
.magnet .mg-form input[type="email"]::placeholder{color:inherit;opacity:.45}
.magnet .mg-form input[type="email"]:focus{outline:none;border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.magnet .mg-form button{flex:0 0 auto;cursor:pointer;border:none;
  background:linear-gradient(135deg,#A78BFA,#7C3AED);color:#fff;font-weight:800;font-size:.9rem;
  letter-spacing:.03em;padding:.8rem 1.35rem;border-radius:12px;font-family:inherit;
  box-shadow:0 10px 28px -12px rgba(124,58,237,.75);transition:filter .18s,transform .18s}
.magnet .mg-form button:hover{filter:brightness(1.09);transform:translateY(-1px)}
.magnet .mg-form button:disabled{opacity:.65;cursor:default;transform:none}
.magnet .mg-alt{margin:0 0 .55rem;font-size:.86rem;opacity:.72}
.magnet .mg-alt a{color:#A78BFA;font-weight:700;text-decoration:underline}
.magnet .mg-note{margin:0;font-size:.84rem;line-height:1.5;opacity:.62}
.magnet .mg-note.mg-ok{color:#22C55E;opacity:1;font-weight:700}
.magnet .mg-note.mg-err{color:#F97316;opacity:1;font-weight:700}
.magnet .mg-success{margin:.2rem 0 .6rem}
.magnet .mg-success a{display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(127,127,127,.1);border:1px solid rgba(124,58,237,.45);color:inherit;
  font-weight:800;font-size:.92rem;padding:.75rem 1.3rem;border-radius:12px;text-decoration:none}
.magnet .mg-success a:hover{border-color:#A78BFA}

/* grid of magnets on the resources hub */
.mag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem;margin:1.6rem 0}
.mag-grid .magnet{margin:0;display:flex;flex-direction:column}
.mag-grid .magnet .mg-body{flex:1;display:flex;flex-direction:column}
.mag-grid .magnet h3{font-size:1.05rem}
.mag-grid .magnet p{font-size:.9rem;flex:1}
@media(max-width:620px){.magnet .mg-form{flex-direction:column}.magnet .mg-form button{width:100%}}