/* =====================================================================
   LeadsNimble Module Grid — the close of the /features/ page.

   The deep dive above it covers the ten core capabilities at length. This is
   the answer to the question that follows: "and what ELSE is in there?" —
   the nine further modules that ship in the same product, one compact card
   each, filterable by the job they do.

   IT MUST NOT LOOK LIKE lnew_more. The homepage says the same nine things
   with a pinned paired-scroll showcase full of photography; this is a static
   grid of flat cards with no imagery at all. Same nine facts, opposite
   presentation — a visitor who has seen the homepage should recognise the
   content and not feel they are being shown the same component twice.

   THE SECTION GRADIENT CHAIN. This ramps #f0f4fb -> #dde2f4: it starts on
   the flat colour lnew-feat-deep.css sits on and lands on the FAQ's own
   #dde2f4, so hero, deep dive, grid 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 --lnfg-*, LIGHT the default mode, [data-mode="dark"] flipping the
   palette, and the dark palette control section emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-feat-grid 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-feat-grid, .lnew-feat-grid *, .lnew-feat-grid *::before, .lnew-feat-grid *::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. It matters
   more here than anywhere else in the family: the category filter hides cards
   with the attribute, so without this the filter would silently do nothing. */
.lnew-feat-grid [hidden] { display: none !important; }

:where(.lnew-feat-grid) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-feat-grid) :where(p) { margin: 0; }
:where(.lnew-feat-grid) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-feat-grid) :where(li) { margin: 0; }
:where(.lnew-feat-grid) :where(svg) { display: block; }
:where(.lnew-feat-grid) :where(h1, h2, h3, h4, h5) { margin: 0; }
:where(.lnew-feat-grid) :where(b, strong) { font-weight: 700; }
:where(.lnew-feat-grid) :where(i, em) { font-style: normal; }
/* the filter chips are real <button>s, and a UA button carries its own font,
   background and border — all of which have to go before the chip styles can
   land predictably */
:where(.lnew-feat-grid) :where(button) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}

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

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

  /* Geometry is lnew-addons.css's, number for number — see the card block. */
  --lnfg-cols: repeat(3, minmax(0, 1fr));
  --lnfg-card-gap: 18px;
  --lnfg-card-pad: 24px;
  --lnfg-card-radius: 20px;
  --lnfg-card-title-size: 16.5px;
  --lnfg-card-desc-size: 13.5px;

  --lnfg-ic: 40px;
  --lnfg-ic-radius: 13px;

  --lnfg-filter-top: 32px;
  --lnfg-filter-gap: 9px;

  --lnfg-foot-top: 44px;

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

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

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

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

  --lnfg-chip-bg: #ffffff;
  --lnfg-chip-ink: #454a63;

  --lnfg-tag-bg: #f2f3fb;
  --lnfg-tag-ink: #6b7089;

  --lnfg-glass-blur: none;

  /* the four module hues — mode-INDEPENDENT literals, the same indigo / teal
     / rose / amber ramp the hero's spec panel and the deep dive's chips carry.
     Here they are keyed to the CATEGORY rather than to position, so a card
     keeps its colour when the filter reshuffles the grid. */
  --lnfg-hue-1-bg: #e7e4fb; --lnfg-hue-1-ink: #6a4ff0;
  --lnfg-hue-2-bg: #d8f0f3; --lnfg-hue-2-ink: #0e97a8;
  --lnfg-hue-3-bg: #fde2e7; --lnfg-hue-3-ink: #e5486d;
  --lnfg-hue-4-bg: #fceed4; --lnfg-hue-4-ink: #cf7d13;

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

  position: relative;
  overflow-x: clip;
  padding-block: var(--lnfg-pad-y);
  background: linear-gradient(180deg, var(--lnfg-bg-1) 0%, var(--lnfg-bg-2) 100%);
  font-family: var(--lnfg-font-sans);
  color: var(--lnfg-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-feat-grid {
  --lnfg-bg-1: #0a0a12;
  --lnfg-bg-2: #10101d;
  --lnfg-ink: #f5f6ff;
  --lnfg-body: #b8bed6;
  --lnfg-muted: #949bbb;
  --lnfg-muted-2: #6d7398;
  --lnfg-line: rgba(255,255,255,.10);
  --lnfg-surface: rgba(255,255,255,.035);

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

  --lnfg-accent: #8b7cff;
  --lnfg-accent-soft-bg: rgba(139,124,255,.12);
  --lnfg-accent-soft-ink: #c3b8ff;
  --lnfg-accent-soft-border: rgba(139,124,255,.24);

  --lnfg-chip-bg: rgba(255,255,255,.05);
  --lnfg-chip-ink: #b8bed6;

  --lnfg-tag-bg: rgba(255,255,255,.05);
  --lnfg-tag-ink: #949bbb;

  --lnfg-glass-blur: blur(14px) saturate(150%);
  --lnfg-glass-hi: rgba(255,255,255,.10);
  /* the inset top highlight is what stops a glass card reading as a hole in
     the dark background — light mode has a real fill and does not need it */
  --lnfg-card-shadow: inset 0 1px 0 var(--lnfg-glass-hi), var(--lnfg-shadow-sm);

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

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

/* =====================================================================
   Category filter
   ===================================================================== */
.lnew-feat-grid__filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--lnfg-filter-gap);
  margin-top: var(--lnfg-filter-top);
}
.lnew-feat-grid__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: 13.5px; font-weight: 600;
  line-height: 1.4;
  color: var(--lnfg-chip-ink);
  background: var(--lnfg-chip-bg);
  border: 1px solid var(--lnfg-line);
  box-shadow: var(--lnfg-shadow-sm);
  -webkit-backdrop-filter: var(--lnfg-glass-blur);
  backdrop-filter: var(--lnfg-glass-blur);
  transition: color .25s var(--lnfg-ease), background .25s var(--lnfg-ease),
              border-color .25s var(--lnfg-ease), transform .25s var(--lnfg-ease);
}
.lnew-feat-grid__chip:hover { transform: translateY(-2px); border-color: var(--lnfg-accent-soft-border); }
.lnew-feat-grid__chip:focus-visible { outline: 2px solid var(--lnfg-accent); outline-offset: 3px; }
/* the count is the chip's own subtitle, not a badge — a filled pill here
   would compete with the active state for the same signal */
.lnew-feat-grid__chip-n {
  font-family: var(--lnfg-font-head);
  font-size: 11px; font-weight: 800;
  color: var(--lnfg-muted-2);
  transition: color .25s var(--lnfg-ease);
}
.lnew-feat-grid__chip[aria-pressed="true"] {
  color: var(--lnfg-accent-soft-ink);
  background: var(--lnfg-accent-soft-bg);
  border-color: var(--lnfg-accent-soft-border);
}
.lnew-feat-grid__chip[aria-pressed="true"] .lnew-feat-grid__chip-n { color: var(--lnfg-accent); }

/* The filter's live region. Visually hidden but NOT display:none — a hidden
   element is removed from the accessibility tree and its aria-live updates
   are never announced, which is the whole reason this element exists. This
   file carries its own rule rather than relying on the theme's
   .screen-reader-text, which not every theme ships. */
.lnew-feat-grid__status {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   The cards
   ===================================================================== */
.lnew-feat-grid__grid {
  display: grid;
  grid-template-columns: var(--lnfg-cols);
  gap: var(--lnfg-card-gap);
  margin-top: 34px;
}

/*
 * THE CARD IS THE ADD-ONS CARD, device for device.
 *
 * These two grids sit one click apart — /features/#modules and
 * /pricing/#add-ons — and a visitor moving between them should meet the same
 * object. So this carries lnew-addons.css's full treatment rather than a
 * plain outline: a blurred accent halo bleeding from the top-right corner, a
 * masked gradient ring that lights on hover, an icon chip that tilts, and the
 * same 5px lift. Geometry matches too (20px radius, 24px padding, 40px chip,
 * 16.5px/700 title, 13.5px description).
 *
 * If you restyle one of the two, restyle the other.
 */
.lnew-feat-grid__card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--lnfg-card-pad);
  border-radius: var(--lnfg-card-radius);
  background: var(--lnfg-surface);
  border: 1px solid var(--lnfg-line);
  box-shadow: var(--lnfg-card-shadow);
  -webkit-backdrop-filter: var(--lnfg-glass-blur);
  backdrop-filter: var(--lnfg-glass-blur);
  /* contains the corner halo; the ring is drawn inside the padding box so it
     is unaffected */
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--lnfg-ease), box-shadow .3s var(--lnfg-ease), border-color .3s ease;
}
/* the halo. Sits at z-index 0 under the content (which is lifted to 1), grows
   and brightens on hover — the card's own light source. Big, soft and mostly
   transparent at rest: a smaller, sharper one makes the gradient's own
   falloff read as a hard diagonal edge across the corner. */
.lnew-feat-grid__card::after {
  content: ""; position: absolute; z-index: 0;
  top: -46%; right: -30%; width: 96%; height: 92%;
  background: radial-gradient(circle, var(--lnfg-accent-halo), transparent 70%);
  filter: blur(26px);
  opacity: .28;
  pointer-events: none;
  transition: opacity .45s var(--lnfg-ease), transform .55s var(--lnfg-ease);
}
.lnew-feat-grid__card > * { position: relative; z-index: 1; }
/* the gradient ring. `xor` (WebKit) and `exclude` (standard) are NOT aliases —
   both lines are required. z-index 2 (above the content, under nothing) with
   isolation on the card; do NOT "simplify" this to a negative z-index, which
   would put it behind the card's own background. */
.lnew-feat-grid__card::before {
  content: ""; position: absolute; z-index: 2; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--lnfg-accent-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--lnfg-ease);
}
.lnew-feat-grid__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lnfg-shadow-md);
  border-color: transparent;
}
.lnew-feat-grid__card:hover::before { opacity: .9; }
.lnew-feat-grid__card:hover::after { opacity: .8; transform: translate3d(-6%, 6%, 0) scale(1.12); }

.lnew-feat-grid__card-ic {
  flex: none;
  width: var(--lnfg-ic); height: var(--lnfg-ic);
  border-radius: var(--lnfg-ic-radius);
  display: grid; place-items: center;
  /* hue four is the FALLBACK, so a card in an unknown category still gets a
     tint rather than an untinted glyph */
  background: var(--lnfg-hue-4-bg); color: var(--lnfg-hue-4-ink);
  transition: transform .35s var(--lnfg-ease);
}
/* Keyed to the CATEGORY, not to nth-child as the add-ons grid is — that grid
   never reorders, this one does. Position-keyed hues would repaint every
   surviving card each time the filter reflowed the grid, which reads as the
   page glitching rather than as a filter being applied. */
.lnew-feat-grid__card[data-hue="1"] .lnew-feat-grid__card-ic { background: var(--lnfg-hue-1-bg); color: var(--lnfg-hue-1-ink); }
.lnew-feat-grid__card[data-hue="2"] .lnew-feat-grid__card-ic { background: var(--lnfg-hue-2-bg); color: var(--lnfg-hue-2-ink); }
.lnew-feat-grid__card[data-hue="3"] .lnew-feat-grid__card-ic { background: var(--lnfg-hue-3-bg); color: var(--lnfg-hue-3-ink); }
.lnew-feat-grid__card:hover .lnew-feat-grid__card-ic { transform: translateY(-3px) rotate(-5deg); }
.lnew-feat-grid__card-ic svg { width: 19px; height: 19px; }

.lnew-feat-grid__card-title {
  margin-top: 16px;
  font-family: var(--lnfg-font-head);
  font-size: var(--lnfg-card-title-size); font-weight: 700;
  line-height: 1.35;
  color: var(--lnfg-ink);
  overflow-wrap: break-word;
}
.lnew-feat-grid__card-desc {
  margin-top: 12px;
  font-size: var(--lnfg-card-desc-size);
  line-height: 1.6;
  color: var(--lnfg-body);
  overflow-wrap: break-word;
}
/* pushes the tag row to the bottom edge, so cards of unequal description
   length still line their tags up across a row */
.lnew-feat-grid__card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}
.lnew-feat-grid__card-tag {
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 11.5px; font-weight: 600;
  color: var(--lnfg-tag-ink);
  background: var(--lnfg-tag-bg);
}

/* NOTE: the filtered-out state lives at the foot of this file, with the
   reveal rules it has to out-rank. See the note there. */

/* =====================================================================
   Footer note + buttons
   ===================================================================== */
.lnew-feat-grid__foot {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  margin-top: var(--lnfg-foot-top);
  text-align: center;
}
.lnew-feat-grid__note {
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lnfg-muted);
  text-wrap: balance;
}
.lnew-feat-grid__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lnew-feat-grid__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.6;
  padding: 14px 26px;
  border-radius: 13px;
  white-space: nowrap;
  transition: transform .22s var(--lnfg-ease), box-shadow .3s var(--lnfg-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.lnew-feat-grid__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnfg-ease); }
.lnew-feat-grid__btn:hover svg { transform: translateX(4px); }
.lnew-feat-grid__btn:focus-visible { outline: 2px solid var(--lnfg-accent); outline-offset: 3px; }
.lnew-feat-grid__btn--ghost {
  background: var(--lnfg-surface);
  color: var(--lnfg-ink);
  border: 1px solid var(--lnfg-line);
  box-shadow: var(--lnfg-shadow-sm);
}
.lnew-feat-grid__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--lnfg-accent);
  box-shadow: var(--lnfg-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-feat-grid__btn--primary {
  background: var(--lnfg-accent-grad);
  color: var(--lnfg-accent-ink);
  border: none;
  background-size: 130% 70%;
  background-position: 0% 50%;
  animation: lnfg-gradient-loop 7s ease-in-out infinite;
  box-shadow: var(--lnfg-shadow-accent), 0 0 0 0 rgba(139,124,255,0);
  transition: box-shadow .4s var(--lnfg-ease), transform .22s var(--lnfg-ease);
}
.lnew-feat-grid__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--lnfg-shadow-accent-hover), 0 0 34px 3px var(--lnfg-btn-glow);
}
@keyframes lnfg-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-feat-grid__btn--primary::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(100deg, transparent, var(--lnfg-btn-shimmer), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.lnew-feat-grid__btn--primary:hover::before { opacity: 1; animation: lnfg-btn-melt .85s var(--lnfg-ease); }
@keyframes lnfg-btn-melt { from { left: -45%; } to { left: 120%; } }
.lnew-feat-grid__btn > * { position: relative; z-index: 2; }

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.lnew-feat-grid .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnfg-rv-dist), 0);
  transition: opacity var(--lnfg-rv-dur) var(--lnfg-ease),
              transform var(--lnfg-rv-dur) var(--lnfg-ease);
  transition-delay: calc(var(--i, 0) * var(--lnfg-rv-step));
}
.lnew-feat-grid .lnew-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .lnew-feat-grid .lnew-reveal { opacity: 1; transform: none; }
/* A card is BOTH a reveal target and a filter target, and the two write the
   same two properties. Once the filter has taken over a card, it owns it —
   otherwise re-filtering a card that has already revealed would animate from
   the reveal's transform instead of from its resting state. */
.lnew-feat-grid .lnew-reveal.is-filtering {
  transition: opacity .3s var(--lnfg-ease), transform .3s var(--lnfg-ease);
  transition-delay: 0s;
}

/*
 * THE FILTERED-OUT STATE, AND WHY IT IS DOWN HERE.
 *
 * A card is both a reveal target and a filter target, and both write opacity
 * and transform. `.lnew-feat-grid .lnew-reveal.is-in` is (0,3,0); a bare
 * `.lnew-feat-grid__card.is-out` is (0,2,0) and LOSES to it — so a revealed
 * card stayed fully opaque while being "hidden", and the only reason it went
 * away at all was the `hidden` attribute the script sets 320ms later. This
 * rule matches (0,3,0) and sits after `.is-in`, so it wins on source order.
 *
 * Cards leave by shrinking rather than vanishing, which reads as "filtered
 * out" instead of "crashed"; `hidden` follows once the transition has run, so
 * a filtered-out card is really out of the layout and out of the tab order,
 * not just transparent.
 */
.lnew-feat-grid .lnew-feat-grid__card.is-out {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lnew-feat-grid .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-feat-grid__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-feat-grid__btn--primary { animation: none !important; }
  .lnew-feat-grid__btn--primary::before { animation: none !important; display: none; }
  .lnew-feat-grid__card,
  .lnew-feat-grid__card::before,
  .lnew-feat-grid__card::after,
  .lnew-feat-grid__card-ic,
  .lnew-feat-grid__chip,
  .lnew-feat-grid__btn,
  .lnew-feat-grid__btn svg { transition: none; }
  /* the filter still works — it just cuts instead of fading */
  .lnew-feat-grid .lnew-reveal.is-filtering { transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-feat-grid {
    --lnfg-gutter: 24px;
    --lnfg-pad-y: 84px;
    --lnfg-cols: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .lnew-feat-grid {
    --lnfg-gutter: 20px;
    --lnfg-pad-y: 68px;
    --lnfg-card-pad: 20px;
    --lnfg-card-radius: 18px;
    --lnfg-filter-top: 26px;
  }
  .lnew-feat-grid__lead { font-size: 16.5px; }
  /* THE CHIP ROW WRAPS HERE — it must not become a scroll rail again.
     It was one (nowrap + overflow-x:auto, bled to the screen edge), and that
     is what cut the chips off in BOTH directions:

       · Horizontally — the five default chips overflow a 390px screen by only
         40px, so the rail sat permanently on a half-cut chip. Forty pixels of
         travel reads as a broken row, not as something to swipe.
       · Vertically — `overflow-x: auto` forces `overflow-y` to compute to auto
         as well (a scroll container cannot clip one axis and leave the other
         visible), and the row is exactly one chip tall. So the chip's own
         box-shadow, the -2px :hover lift and the 3px-offset focus ring were
         all sheared off flat. On a phone that hover state sticks after a tap,
         which is how it was reported.

     Wrapping cures both at once, needs no scroll affordance, and keeps every
     chip whole however many categories the page defines. The tighter gap below
     is what buys back the row the rail used to save. */
  .lnew-feat-grid__filter { --lnfg-filter-gap: 8px; }
}

@media (max-width: 560px) {
  .lnew-feat-grid {
    --lnfg-gutter: 16px;
    --lnfg-cols: minmax(0, 1fr);
    --lnfg-ic: 40px;
  }
  .lnew-feat-grid__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .lnew-feat-grid__btn { width: 100%; }
}