/* =====================================================================
   LeadsNimble — Not Found (404)

   A 1:1 port of the TextCRM Not Found widget's MECHANISM (pulsing eyebrow,
   gradient big number with a blurred ghost twin, three floating sparkles,
   two-tone title, description, primary/secondary actions, drifting orbs and
   the three decoration toggles) re-skinned entirely into the LeadsNimble
   aurora-nightfall design system.

   Nothing green survives: the palette, type, radii, shadows, gradient and
   hover behaviour are the SAME literals the Pricing Hero (lnew_price_hero)
   resolves, so a visitor who lands on a broken URL stays inside the same
   world as the rest of the site.

     type      DM Sans (body) + Parkinsans (display, 500 for headings and
               800 for the big display number — the design system's own rule
               for stat/price/step numerals)
     surface   the SAME opening band the pricing page uses
               (#d7e0ef -> #f0f4fb) in light, (#0c0c18 -> #090910) in dark
     accent    linear-gradient(100deg, #6366f1 0%, #a855f7 52%, #22d3ee 100%)
     buttons   .btn / .btn--primary — 13px radius, gradient loop, skewed
               shimmer sweep, translateY(-2px) lift

   LIGHT is the default mode; [data-mode="dark"] flips the palette, and the
   widget's dark palette controls are emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-404 so they outrank the light controls
   on specificity rather than source order.

   CONTROLS WRITE TOKENS; MEDIA QUERIES WRITE PROPERTIES. See
   [[elementor-control-css-beats-media-queries]].
   ===================================================================== */

/* Local reset, :where()-wrapped so it carries ZERO specificity — otherwise
   `.lnew-404 a` (0,1,1) would outrank the component rules below that are
   meant to override it. */
.lnew-404, .lnew-404 *, .lnew-404 *::before, .lnew-404 *::after { box-sizing: border-box; }

/* THE `hidden` GUARD. A UA's `[hidden] { display: none }` carries ZERO
   specificity, so any `display: flex` / `inline-flex` in this file out-ranks
   it and an element hidden by attribute stays visible. */
.lnew-404 [hidden] { display: none !important; }

:where(.lnew-404) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-404) :where(p) { margin: 0; }
:where(.lnew-404) :where(svg) { display: block; }
:where(.lnew-404) :where(h1, h2, h3, h4, h5) { margin: 0; }
:where(.lnew-404) :where(b, strong) { font-weight: 700; }
:where(.lnew-404) :where(i, em) { font-style: normal; }

.lnew-404 {
  /* ---- motion ---- */
  --ln404-ease: cubic-bezier(.22,1,.36,1);
  --ln404-rise: 16px;

  /* ---- geometry ---- */
  --ln404-maxw: 1360px;
  --ln404-gutter: 28px;
  --ln404-inner-maxw: 780px;

  --ln404-num-size: clamp(112px, 22vw, 256px);
  --ln404-title-size: clamp(31px, 3.6vw, 47px);
  --ln404-desc-size: 19px;
  --ln404-desc-maxw: 620px;

  --ln404-eyebrow-gap: 26px;
  --ln404-num-gap: 26px;
  --ln404-title-gap: 20px;
  --ln404-actions-gap: 12px;
  --ln404-actions-top: 38px;

  --ln404-btn-size: 15.5px;
  --ln404-btn-pad-y: 14px;
  --ln404-btn-pad-x: 26px;
  --ln404-btn-radius: 13px;

  /* ---- ambient aurora — the house background device ---- */
  --ln404-aurora-op: .42;
  --ln404-aurora-1: rgba(99,102,241,.55);
  --ln404-aurora-2: rgba(168,85,247,.5);
  --ln404-aurora-3: rgba(34,211,238,.4);
  --ln404-aurora-blur: 60px;
  --ln404-aurora-dur: 16s;

  /* ---- drifting orbs (the TextCRM device, aurora-tinted) ---- */
  --ln404-orb-1: rgba(99,102,241,.28);
  --ln404-orb-2: rgba(34,211,238,.24);

  /* ---- type ---- */
  --ln404-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ln404-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT ----
     The band OPENS on the same #d7e0ef the pricing hero does and LANDS on
     the footer's own top colour (--lnf-bg, #e5ebf6 light / #0a0a12 dark), so
     the 404 section and the newsletter band below it meet with no seam. If
     the footer's background ever changes, change --ln404-bg-2 to match. */
  --ln404-bg-1: #d7e0ef;
  --ln404-bg-2: #e5ebf6;
  --ln404-bg-stop: 60%;
  --ln404-ink: #12122a;
  --ln404-body: #454a63;
  --ln404-muted: #6b7089;
  --ln404-line: #e7e9f4;
  --ln404-surface: #ffffff;

  --ln404-eyebrow-bg: #eef0ff;
  --ln404-eyebrow-ink: #5b46e0;
  --ln404-eyebrow-border: #e0e3ff;

  --ln404-grad-1: #6366f1;
  --ln404-grad-2: #a855f7;
  --ln404-grad-3: #22d3ee;
  --ln404-accent-grad: linear-gradient(100deg, var(--ln404-grad-1) 0%, var(--ln404-grad-2) 52%, var(--ln404-grad-3) 100%);
  --ln404-accent: #6d5cf5;
  --ln404-accent-2: #22d3ee;
  --ln404-accent-ink: #ffffff;
  --ln404-accent-halo: rgba(139,124,255,.28);

  --ln404-glass-blur: none;

  --ln404-sh-sm-1: rgba(30,30,80,.05);
  --ln404-sh-sm-2: rgba(30,30,80,.05);
  --ln404-sh-md: rgba(30,30,80,.10);
  --ln404-sh-accent: rgba(99,102,241,.28);
  --ln404-sh-accent-hover: rgba(99,102,241,.36);
  --ln404-btn-glow: rgba(139,124,255,.45);
  --ln404-btn-shimmer: rgba(255,255,255,.55);
  --ln404-shadow-sm: 0 1px 2px var(--ln404-sh-sm-1), 0 2px 6px var(--ln404-sh-sm-2);
  --ln404-shadow-md: 0 12px 34px var(--ln404-sh-md);
  --ln404-shadow-accent: 0 16px 40px var(--ln404-sh-accent);
  --ln404-shadow-accent-hover: 0 20px 50px var(--ln404-sh-accent-hover);
  --ln404-sparkle-shadow: rgba(109,92,245,.32);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  /* Top padding clears the fixed site header at the same distance the Pricing
     Hero uses, so the navbar -> eyebrow gap matches every other inner page.
     Content is anchored to the top, not vertically centred, for the same
     reason. */
  padding: 128px var(--ln404-gutter) 96px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(180deg, var(--ln404-bg-1) 0%, var(--ln404-bg-2) var(--ln404-bg-stop));
  font-family: var(--ln404-font-sans);
  color: var(--ln404-body);
  font-size: 17px;
  /* stated, not inherited — see [[wp-theme-inherited-type-leak]] */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-wrap: wrap;
  -webkit-font-smoothing: antialiased;
}

[data-mode="dark"] .lnew-404 {
  --ln404-bg-1: #0c0c18;
  --ln404-bg-2: #0a0a12;
  --ln404-bg-stop: 100%;
  --ln404-ink: #f5f6ff;
  --ln404-body: #b8bed6;
  --ln404-muted: #949bbb;
  --ln404-line: rgba(255,255,255,.10);
  --ln404-surface: rgba(255,255,255,.035);

  /* the dark band is nearly black, so the aurora needs real presence */
  --ln404-aurora-op: .8;
  --ln404-orb-1: rgba(99,102,241,.4);
  --ln404-orb-2: rgba(34,211,238,.34);

  --ln404-eyebrow-bg: rgba(255,255,255,.05);
  --ln404-eyebrow-ink: #cdc6ff;
  --ln404-eyebrow-border: rgba(255,255,255,.12);

  --ln404-accent: #8b7cff;
  --ln404-glass-blur: blur(14px) saturate(150%);

  --ln404-sh-sm-1: rgba(0,0,0,.4);
  --ln404-sh-sm-2: transparent;
  --ln404-sh-md: rgba(0,0,0,.5);
  --ln404-sh-accent: rgba(99,102,241,.4);
  --ln404-sh-accent-hover: rgba(99,102,241,.5);
  --ln404-btn-shimmer: rgba(255,255,255,.42);
  --ln404-shadow-sm: 0 1px 2px var(--ln404-sh-sm-1);
  --ln404-shadow-accent: 0 16px 44px var(--ln404-sh-accent);
  --ln404-shadow-accent-hover: 0 22px 54px var(--ln404-sh-accent-hover);
  --ln404-sparkle-shadow: rgba(139,124,255,.42);
}

/* NOTE: TextCRM's 404 carries a 24px dot-grid overlay behind the number.
   It is deliberately NOT ported — a dotted particle field is not a device
   this design system uses anywhere, and the aurora already does the job of
   giving the band depth. Do not add it back "for parity". */

/* =====================================================================
   Background — two drifting orbs plus, when the ambient glow is on, the
   house three-field aurora that the homepage and pricing heroes open with.
   ===================================================================== */
/* The bottom fade is NOT decoration — it is what stops the aurora being
   guillotined by `overflow: hidden` at the section's bottom edge. The third
   colour field sits at 60%/82%, i.e. right on the boundary, so without this
   the cyan wash ends in a hard horizontal line against the footer's opening
   band. Masking the last 18% lets the field die out inside the section
   instead. The orbs ride the same mask; the bottom-right one is a 60px-blurred
   blob, so losing its final sliver is imperceptible. */
.lnew-404__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}

/* the aurora field is opt-in via .is-glow, so the Decoration toggle can
   switch it off without fighting a `content` property */
.lnew-404.is-glow .lnew-404__bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 20% 26%, var(--ln404-aurora-1), transparent 60%),
    radial-gradient(34% 38% at 80% 20%, var(--ln404-aurora-2), transparent 60%),
    radial-gradient(40% 44% at 60% 82%, var(--ln404-aurora-3), transparent 62%);
  filter: blur(var(--ln404-aurora-blur));
  opacity: var(--ln404-aurora-op);
  animation: ln404-aurora-drift var(--ln404-aurora-dur) ease-in-out infinite alternate;
}
@keyframes ln404-aurora-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.06); }
}

.lnew-404__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform, opacity;
}
.lnew-404__orb--a {
  top: -120px;
  left: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--ln404-orb-1), transparent 65%);
  animation: ln404-float 12s ease-in-out infinite;
}
.lnew-404__orb--b {
  bottom: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--ln404-orb-2), transparent 65%);
  animation: ln404-float 14s ease-in-out infinite reverse;
}

@keyframes ln404-float {
  0%, 100% { transform: translate(0, 0)       scale(1);    opacity: 1; }
  50%      { transform: translate(20px, 18px) scale(1.06); opacity: .78; }
}
@keyframes ln404-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes ln404-sparkle-spin {
  0%, 100% { transform: rotate(0deg)   scale(1);    opacity: .9; }
  50%      { transform: rotate(180deg) scale(1.15); opacity: .55; }
}
@keyframes ln404-rise {
  from { opacity: 0; transform: translateY(var(--ln404-rise)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   Shell
   ===================================================================== */
.lnew-404__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ln404-inner-maxw);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =====================================================================
   Eyebrow — the design system's pill with its indicator lamp.
   ===================================================================== */
.lnew-404__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--ln404-eyebrow-bg);
  border: 1px solid var(--ln404-eyebrow-border);
  color: var(--ln404-eyebrow-ink);
  font-family: var(--ln404-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  margin-bottom: var(--ln404-eyebrow-gap);
  animation: ln404-rise .7s var(--ln404-ease) backwards;
}
.lnew-404__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ln404-accent);
  box-shadow: 0 0 0 4px var(--ln404-accent-halo);
  opacity: .45;
  animation: ln404-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes ln404-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--ln404-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--ln404-accent-halo), 0 0 7px 1px var(--ln404-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--ln404-accent-halo), 0 0 7px 1px var(--ln404-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--ln404-accent-halo), 0 0 0 0 transparent; }
}

/* =====================================================================
   The big number + its blurred ghost twin.

   Parkinsans at 800 — the design system reserves that weight for display
   NUMERALS (prices, stats, step chips), which is exactly what this is.
   ===================================================================== */
.lnew-404__bignum-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--ln404-num-gap);
  line-height: .9;
}
.lnew-404__bignum {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--ln404-font-head);
  font-size: var(--ln404-num-size);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  background: var(--ln404-accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation:
    ln404-rise .9s var(--ln404-ease) .08s backwards,
    ln404-bob 6s ease-in-out 1s infinite;
}
/* the ghost is the same glyph blurred behind the real one, so the gradient
   bleeds a coloured halo onto the band instead of sitting flat on it */
.lnew-404__bignum--ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(40px);
  opacity: .45;
  animation: none;
  pointer-events: none;
}

/* ----- Sparkles ----- */
.lnew-404__sparkle {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  color: var(--ln404-accent);
  pointer-events: none;
  opacity: .85;
  filter: drop-shadow(0 4px 16px var(--ln404-sparkle-shadow));
}
.lnew-404__sparkle--1 {
  top: -6%;
  left: -4%;
  width: 36px;
  height: 36px;
  animation: ln404-sparkle-spin 6s ease-in-out infinite;
}
.lnew-404__sparkle--2 {
  top: 12%;
  right: -6%;
  width: 22px;
  height: 22px;
  color: var(--ln404-accent-2);
  animation: ln404-sparkle-spin 5s ease-in-out .8s infinite reverse;
}
.lnew-404__sparkle--3 {
  bottom: 4%;
  left: 18%;
  width: 18px;
  height: 18px;
  animation: ln404-sparkle-spin 7s ease-in-out .4s infinite;
}

/* =====================================================================
   Title — Parkinsans 500, the house heading weight. The accent phrase is
   painted with the brand gradient rather than a flat colour, matching the
   way every other LeadsNimble heading highlights a phrase.
   ===================================================================== */
.lnew-404__title {
  font-family: var(--ln404-font-head);
  font-size: var(--ln404-title-size);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0 0 var(--ln404-title-gap);
  color: var(--ln404-ink);
  text-wrap: balance;
  max-width: 22ch;
  animation: ln404-rise .8s var(--ln404-ease) .14s backwards;
}
.lnew-404__title-lead { color: inherit; }
.lnew-404__title-accent {
  margin-left: .3em;
  background: var(--ln404-accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* =====================================================================
   Description
   ===================================================================== */
.lnew-404__desc {
  font-size: var(--ln404-desc-size);
  line-height: 1.65;
  color: var(--ln404-muted);
  margin: 0 auto;
  max-width: var(--ln404-desc-maxw);
  text-wrap: balance;
  animation: ln404-rise .8s var(--ln404-ease) .2s backwards;
}

/* =====================================================================
   Actions — the design system's .btn, scoped to this widget
   ===================================================================== */
.lnew-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ln404-actions-gap);
  margin-top: var(--ln404-actions-top);
  animation: ln404-rise .8s var(--ln404-ease) .26s backwards;
}

.lnew-404__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--ln404-btn-pad-y) var(--ln404-btn-pad-x);
  border-radius: var(--ln404-btn-radius);
  font-family: var(--ln404-font-sans);
  font-size: var(--ln404-btn-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s var(--ln404-ease), box-shadow .3s var(--ln404-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
}
.lnew-404__btn:focus-visible { outline: 2px solid var(--ln404-accent); outline-offset: 3px; }

/* box-shadow, NOT a blurred ::after with z-index:-1 — the :hover transform
   creates a stacking context, and inside it a negative-z pseudo paints ABOVE
   the element's background, yielding a hover-only flicker. */
.lnew-404__btn--primary {
  background: var(--ln404-accent-grad);
  color: var(--ln404-accent-ink);
  border: none;
  background-size: 130% 70%;
  background-position: 0% 50%;
  animation: ln404-gradient-loop 7s ease-in-out infinite;
  box-shadow: var(--ln404-shadow-accent), 0 0 0 0 rgba(139,124,255,0);
}
.lnew-404__btn--primary:hover {
  transform: translateY(-2px);
  color: var(--ln404-accent-ink);
  box-shadow: var(--ln404-shadow-accent-hover), 0 0 34px 3px var(--ln404-btn-glow);
}
@keyframes ln404-gradient-loop {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* STACKING NOTE: isolation:isolate on the button plus a POSITIVE z-index
   here. Do not "simplify" this back to a negative z-index. */
.lnew-404__btn--primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  background: linear-gradient(100deg, transparent, var(--ln404-btn-shimmer), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.lnew-404__btn--primary:hover::before { opacity: 1; animation: ln404-btn-melt .85s var(--ln404-ease); }
@keyframes ln404-btn-melt { from { left: -45%; } to { left: 120%; } }
.lnew-404__btn > * { position: relative; z-index: 2; }

.lnew-404__btn--secondary {
  background: var(--ln404-surface);
  color: var(--ln404-ink);
  border: 1px solid var(--ln404-line);
  box-shadow: var(--ln404-shadow-sm);
  -webkit-backdrop-filter: var(--ln404-glass-blur);
          backdrop-filter: var(--ln404-glass-blur);
}
.lnew-404__btn--secondary:hover {
  transform: translateY(-2px);
  border-color: var(--ln404-accent);
  box-shadow: var(--ln404-shadow-md);
}

.lnew-404__arrow {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  transition: transform .4s var(--ln404-ease);
}
.lnew-404__btn--primary:hover .lnew-404__arrow   { transform: translateX(-4px); }
.lnew-404__btn--secondary:hover .lnew-404__arrow { transform: translateX(4px); }

/* =====================================================================
   Responsive — the design system's own steps (1040 / 760 / 460).
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-404 {
    --ln404-gutter: 24px;
    padding-top: 104px;
    padding-bottom: 72px;
  }
}

@media (max-width: 760px) {
  .lnew-404 {
    --ln404-gutter: 20px;
    --ln404-num-size: clamp(80px, 32vw, 160px);
    --ln404-desc-size: 17px;
    --ln404-eyebrow-gap: 20px;
    --ln404-num-gap: 18px;
    --ln404-actions-top: 32px;
    padding-top: 88px;
    padding-bottom: 56px;
  }

  .lnew-404__orb--a { width: 240px; height: 240px; top: -80px;    left: -80px; }
  .lnew-404__orb--b { width: 240px; height: 240px; bottom: -80px; right: -60px; }

  .lnew-404__sparkle--1 { width: 26px; height: 26px; }
  .lnew-404__sparkle--2 { width: 18px; height: 18px; }
  .lnew-404__sparkle--3 { width: 14px; height: 14px; }

  /* on a small screen two side-by-side buttons each get ~150px, which
     truncates any label longer than "Back home" — stack them instead */
  .lnew-404__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .lnew-404__btn     { width: 100%; }
}

@media (max-width: 460px) {
  .lnew-404 {
    --ln404-gutter: 16px;
    --ln404-btn-pad-x: 20px;
    padding-top: 76px;
    padding-bottom: 48px;
  }
}

@media (max-width: 420px) {
  .lnew-404__sparkle--3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lnew-404__eyebrow,
  .lnew-404__dot,
  .lnew-404__bignum,
  .lnew-404__title,
  .lnew-404__desc,
  .lnew-404__actions,
  .lnew-404__orb,
  .lnew-404__sparkle,
  .lnew-404__btn--primary,
  .lnew-404__btn--primary::before { animation: none !important; }
  .lnew-404__dot { opacity: 1; }
  .lnew-404__btn--primary::before { display: none; }
  .lnew-404__btn:hover { transform: none; }
  .lnew-404__btn, .lnew-404__arrow { transition: none; }
  /* the aurora stays — it is a static wash without its drift, which is the
     point of the field. Only the movement goes. */
  .lnew-404.is-glow .lnew-404__bg::before { animation: none !important; }
}