/* =====================================================================
   LeadsNimble Same Engine — the close of the /industries/ page.

   The directory above it argues BREADTH: nine verticals, nine different
   nouns. This is the answer to the objection that breadth invites — "fine,
   but mine is not on the list" — and it answers it by naming the three
   things the platform actually does, none of which have anything to do with
   what you sell.

   WHY THREE PILLARS IN ONE PANEL AND NOT THREE CARDS. Three free-standing
   cards here would be the fourth card grid the visitor has met on this site
   (features modules, pricing add-ons, the directory above). One bounded panel
   holding three columns reads as ONE machine with three parts, which is
   literally the argument the section is making. The index numeral riding
   beside each pillar's icon is this widget's own device — nothing else in the
   family uses one — so the panel cannot be mistaken for the features hero's
   spec strip.

   THE SECTION GRADIENT CHAIN. This ramps #f0f4fb -> #dde2f4: it starts on the
   flat colour lnew-ind-grid.css sits on and lands on the FAQ's own #dde2f4,
   so hero, directory, close and FAQ are one continuous surface with no seam
   anywhere. Change either end and you must change its neighbour.

   Built from the aurora-nightfall tokens resolved to literals and re-scoped
   under --lnic-*, LIGHT the default mode, [data-mode="dark"] flipping the
   palette, and the dark palette control section emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-ind-close so it outranks the light
   controls on SPECIFICITY, not 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. */
.lnew-ind-close, .lnew-ind-close *, .lnew-ind-close *::before, .lnew-ind-close *::after { box-sizing: border-box; }

/* THE `hidden` GUARD — a UA's `[hidden] { display: none }` carries ZERO
   specificity and loses to every `display: flex` / `grid` below. */
.lnew-ind-close [hidden] { display: none !important; }

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

.lnew-ind-close {
  /* ---- motion ---- */
  --lnic-ease: cubic-bezier(.22,1,.36,1);
  --lnic-rv-dist: 60px;
  --lnic-rv-dur: 1.1s;
  --lnic-rv-step: 70ms;

  /* ---- geometry ---- */
  --lnic-maxw: 1360px;
  --lnic-gutter: 28px;
  --lnic-pad-y: 104px;
  --lnic-head-maxw: 760px;
  --lnic-title-size: clamp(31px, 3.6vw, 47px);

  --lnic-panel-maxw: 1080px;
  --lnic-panel-top: 46px;
  --lnic-panel-radius: 26px;
  --lnic-panel-pad: 12px;
  --lnic-cols: repeat(3, minmax(0, 1fr));
  --lnic-cell-pad: 30px 26px 32px;

  --lnic-ic: 44px;
  --lnic-ic-radius: 14px;
  --lnic-num-size: 34px;
  --lnic-cell-title-size: 18px;
  --lnic-cell-desc-size: 14.5px;

  --lnic-punch-top: 46px;
  --lnic-punch-size: clamp(20px, 2.2vw, 27px);
  --lnic-punch-maxw: 780px;

  --lnic-cta-top: 32px;
  --lnic-cta-gap: 12px;
  --lnic-btn-size: 15.5px;
  --lnic-btn-pad-y: 14px;
  --lnic-btn-pad-x: 26px;
  --lnic-btn-radius: 13px;

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

  /* ---- palette · LIGHT ---- */
  --lnic-bg-1: #f0f4fb;
  --lnic-bg-2: #dde2f4;
  --lnic-ink: #12122a;
  --lnic-body: #454a63;
  --lnic-muted: #6b7089;
  --lnic-muted-2: #9498b0;
  --lnic-line: #e7e9f4;
  --lnic-surface: #ffffff;
  --lnic-cell-hover-bg: #f7f8fd;

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

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

  /* the index numeral. Quiet, but not invisible: it rides beside its own icon
     and its job is to say WHICH of the three you are reading. */
  --lnic-num-ink: #d3d9ef;

  --lnic-glass-blur: none;

  /* the four hues, mode-INDEPENDENT literals — one colour vocabulary across
     the whole site */
  --lnic-hue-1-bg: #e7e4fb; --lnic-hue-1-ink: #6a4ff0;
  --lnic-hue-2-bg: #d8f0f3; --lnic-hue-2-ink: #0e97a8;
  --lnic-hue-3-bg: #fde2e7; --lnic-hue-3-ink: #e5486d;
  --lnic-hue-4-bg: #fceed4; --lnic-hue-4-ink: #cf7d13;

  --lnic-sh-sm-1: rgba(30,30,80,.05);
  --lnic-sh-sm-2: rgba(30,30,80,.05);
  --lnic-sh-md: rgba(30,30,80,.10);
  --lnic-sh-accent: rgba(99,102,241,.28);
  --lnic-sh-accent-hover: rgba(99,102,241,.36);
  --lnic-btn-glow: rgba(139,124,255,.45);
  --lnic-btn-shimmer: rgba(255,255,255,.55);
  --lnic-shadow-sm: 0 1px 2px var(--lnic-sh-sm-1), 0 2px 6px var(--lnic-sh-sm-2);
  --lnic-shadow-md: 0 18px 44px var(--lnic-sh-md);
  --lnic-shadow-accent: 0 16px 40px var(--lnic-sh-accent);
  --lnic-shadow-accent-hover: 0 20px 50px var(--lnic-sh-accent-hover);

  position: relative;
  overflow-x: clip;
  padding-top: var(--lnic-pad-y);
  padding-bottom: var(--lnic-pad-y);
  background: linear-gradient(180deg, var(--lnic-bg-1) 0%, var(--lnic-bg-2) 100%);
  font-family: var(--lnic-font-sans);
  color: var(--lnic-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-ind-close {
  --lnic-bg-1: #090910;
  --lnic-bg-2: #0a0a12;
  --lnic-ink: #f5f6ff;
  --lnic-body: #b8bed6;
  --lnic-muted: #949bbb;
  --lnic-muted-2: #6d7398;
  --lnic-line: rgba(255,255,255,.10);
  --lnic-surface: rgba(255,255,255,.045);
  --lnic-cell-hover-bg: rgba(255,255,255,.05);

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

  --lnic-accent: #8b7cff;
  --lnic-num-ink: rgba(255,255,255,.14);

  --lnic-glass-blur: blur(14px) saturate(150%);

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

/* =====================================================================
   Shell + section head
   ===================================================================== */
.lnew-ind-close__wrap {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--lnic-maxw);
  margin-inline: auto;
  padding-inline: var(--lnic-gutter);
}
.lnew-ind-close__head {
  max-width: var(--lnic-head-maxw);
  margin-inline: auto;
  text-align: center;
}
.lnew-ind-close__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnic-eyebrow-ink);
  background: var(--lnic-eyebrow-bg);
  border: 1px solid var(--lnic-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-ind-close__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnic-accent);
  box-shadow: 0 0 0 4px var(--lnic-accent-halo);
  opacity: .45;
  animation: lnic-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnic-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnic-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnic-accent-halo), 0 0 7px 1px var(--lnic-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnic-accent-halo), 0 0 7px 1px var(--lnic-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnic-accent-halo), 0 0 0 0 transparent; }
}
.lnew-ind-close__title {
  font-family: var(--lnic-font-head);
  font-weight: 500;
  font-size: var(--lnic-title-size);
  margin-top: 18px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lnic-ink);
  text-wrap: balance;
}
.lnew-ind-close__title-accent {
  background: var(--lnic-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lnew-ind-close__lead {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--lnic-muted);
  text-wrap: balance;
}

/* =====================================================================
   The engine panel — ONE object with three parts, not three cards
   ===================================================================== */
.lnew-ind-close__panel {
  position: relative;
  display: grid;
  grid-template-columns: var(--lnic-cols);
  max-width: var(--lnic-panel-maxw);
  margin: var(--lnic-panel-top) auto 0;
  padding: var(--lnic-panel-pad);
  border-radius: var(--lnic-panel-radius);
  background: var(--lnic-surface);
  -webkit-backdrop-filter: var(--lnic-glass-blur);
  backdrop-filter: var(--lnic-glass-blur);
  border: 1px solid var(--lnic-line);
  box-shadow: var(--lnic-shadow-md);
  overflow: hidden;
}
/* a single hairline of the brand ramp across the top edge — the one place the
   panel says "this is the machine" without a word of copy. Inset so it stops
   short of the rounded corners rather than being clipped by them. */
.lnew-ind-close__panel::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%;
  height: 2px;
  background: var(--lnic-accent-grad);
  opacity: .75;
  border-radius: 0 0 2px 2px;
}

.lnew-ind-close__cell {
  position: relative;
  overflow: hidden;
  padding: var(--lnic-cell-pad);
  border-radius: calc(var(--lnic-panel-radius) - var(--lnic-panel-pad));
  transition: background .3s var(--lnic-ease);
}
.lnew-ind-close__cell:hover { background: var(--lnic-cell-hover-bg); }

/*
 * THE INDEX NUMERAL — this widget's own device.
 *
 * It gives the three parts an order (capture, then respond, then convert IS
 * the sequence) without a wire, an arrow or a chevron, none of which would
 * survive the single-column phone layout intact.
 *
 * IT SITS BESIDE ITS OWN ICON, NOT IN THE CELL'S TOP-RIGHT CORNER. It was
 * built that way first, as a very large ghost numeral, and it read as the
 * NEXT column's label: at the far right of a 350px column, "01" is ~50px
 * from column two's icon and ~250px from its own. Sharing a row with the icon
 * is what makes the pairing unambiguous, and it is why the numeral is small
 * enough to sit on that row rather than being a wash behind the cell.
 *
 * aria-hidden in the markup: "01" read aloud before "Capture everything" is
 * noise, and the <ol> the cells live in already carries the order.
 */
.lnew-ind-close__top {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}
.lnew-ind-close__num {
  font-family: var(--lnic-font-head);
  font-size: var(--lnic-num-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--lnic-num-ink);
  pointer-events: none;
  user-select: none;
}

.lnew-ind-close__ic {
  flex: none;
  width: var(--lnic-ic); height: var(--lnic-ic);
  border-radius: var(--lnic-ic-radius);
  display: grid; place-items: center;
  /* the fourth hue is the FALLBACK, so a fourth pillar inherits it rather than
     falling back to an untinted glyph */
  background: var(--lnic-hue-4-bg); color: var(--lnic-hue-4-ink);
  transition: transform .3s var(--lnic-ease);
}
.lnew-ind-close__cell:nth-child(4n+1) .lnew-ind-close__ic { background: var(--lnic-hue-1-bg); color: var(--lnic-hue-1-ink); }
.lnew-ind-close__cell:nth-child(4n+2) .lnew-ind-close__ic { background: var(--lnic-hue-2-bg); color: var(--lnic-hue-2-ink); }
.lnew-ind-close__cell:nth-child(4n+3) .lnew-ind-close__ic { background: var(--lnic-hue-3-bg); color: var(--lnic-hue-3-ink); }
.lnew-ind-close__cell:hover .lnew-ind-close__ic { transform: translateY(-3px) rotate(-6deg); }
.lnew-ind-close__ic svg { width: 20px; height: 20px; }

.lnew-ind-close__cell-title {
  position: relative; z-index: 1;
  margin-top: 18px;
  font-family: var(--lnic-font-head);
  font-size: var(--lnic-cell-title-size); font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lnic-ink);
}
.lnew-ind-close__cell-desc {
  position: relative; z-index: 1;
  margin-top: 10px;
  font-size: var(--lnic-cell-desc-size);
  line-height: 1.65;
  color: var(--lnic-muted);
}

/* =====================================================================
   Punchline + buttons
   ===================================================================== */
.lnew-ind-close__punch {
  max-width: var(--lnic-punch-maxw);
  margin: var(--lnic-punch-top) auto 0;
  text-align: center;
  font-family: var(--lnic-font-head);
  font-size: var(--lnic-punch-size);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--lnic-ink);
  text-wrap: balance;
}
.lnew-ind-close__punch b {
  font-weight: 500;
  background: var(--lnic-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lnew-ind-close__ctas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--lnic-cta-gap);
  margin-top: var(--lnic-cta-top);
}
.lnew-ind-close__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--lnic-font-sans);
  font-size: var(--lnic-btn-size); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.6;
  padding: var(--lnic-btn-pad-y) var(--lnic-btn-pad-x);
  border-radius: var(--lnic-btn-radius);
  white-space: nowrap;
  transition: transform .22s var(--lnic-ease), box-shadow .3s var(--lnic-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.lnew-ind-close__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnic-ease); }
.lnew-ind-close__btn:hover svg { transform: translateX(4px); }
.lnew-ind-close__btn:focus-visible { outline: 2px solid var(--lnic-accent); outline-offset: 3px; }

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

/* 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-ind-close__btn--primary {
  background: var(--lnic-accent-grad);
  color: var(--lnic-accent-ink);
  border: none;
  background-size: 130% 70%;
  background-position: 0% 50%;
  animation: lnic-gradient-loop 7s ease-in-out infinite;
  box-shadow: var(--lnic-shadow-accent), 0 0 0 0 rgba(139,124,255,0);
  transition: box-shadow .4s var(--lnic-ease), transform .22s var(--lnic-ease);
}
.lnew-ind-close__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--lnic-shadow-accent-hover), 0 0 34px 3px var(--lnic-btn-glow);
}
@keyframes lnic-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-ind-close__btn--primary::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(100deg, transparent, var(--lnic-btn-shimmer), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.lnew-ind-close__btn--primary:hover::before { opacity: 1; animation: lnic-btn-melt .85s var(--lnic-ease); }
@keyframes lnic-btn-melt { from { left: -45%; } to { left: 120%; } }
.lnew-ind-close__btn > * { position: relative; z-index: 2; }

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.lnew-ind-close .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnic-rv-dist), 0);
  transition: opacity var(--lnic-rv-dur) var(--lnic-ease),
              transform var(--lnic-rv-dur) var(--lnic-ease);
  transition-delay: calc(var(--i, 0) * var(--lnic-rv-step));
}
.lnew-ind-close .lnew-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .lnew-ind-close .lnew-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lnew-ind-close .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-ind-close__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-ind-close__btn--primary { animation: none !important; }
  .lnew-ind-close__btn--primary::before { animation: none !important; display: none; }
  .lnew-ind-close__cell,
  .lnew-ind-close__ic,
  .lnew-ind-close__btn,
  .lnew-ind-close__btn svg { transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-ind-close {
    --lnic-gutter: 24px;
    --lnic-pad-y: 84px;
    --lnic-cell-pad: 26px 22px 28px;
    --lnic-num-size: 31px;
  }
}

@media (max-width: 860px) {
  .lnew-ind-close {
    --lnic-cols: minmax(0, 1fr);
    --lnic-panel-maxw: 560px;
    --lnic-panel-top: 36px;
  }
  /* stacked, the cells need something between them again — the index numerals
     alone do not separate rows the way they separate columns */
  .lnew-ind-close__cell + .lnew-ind-close__cell {
    border-top: 1px solid var(--lnic-line);
    border-radius: 0;
  }
}

@media (max-width: 760px) {
  .lnew-ind-close {
    --lnic-gutter: 20px;
    --lnic-pad-y: 68px;
    --lnic-punch-top: 36px;
  }
  .lnew-ind-close__lead { font-size: 16.5px; }
}

@media (max-width: 460px) {
  .lnew-ind-close {
    --lnic-gutter: 16px;
    --lnic-panel-radius: 20px;
    --lnic-cell-pad: 22px 18px 24px;
    --lnic-num-size: 29px;
    --lnic-btn-pad-x: 20px;
  }
  /* on a small phone two side-by-side buttons each get ~140px, which truncates
     any label longer than "Start free" — stack them instead */
  .lnew-ind-close__ctas { flex-direction: column; align-items: stretch; }
  .lnew-ind-close__btn { width: 100%; }
}