/* =====================================================================
   LeadsNimble Industry Directory — the body of the /industries/ page.

   Nine verticals, one card each: a photo, the name, the ONE noun that
   vertical closes, a line of plain description, and — the part no other
   widget in the family does — a three-node wire showing the actual path a
   lead takes in that business, from the click that starts it to the thing
   that ends it.

   IT MUST NOT LOOK LIKE lnew_industries. The homepage says these same nine
   things with an auto-scrolling rail of uniform cards on a deep purple slab;
   this is a still, three-up grid of light cards, each with its own flow wire.
   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. It must not look like lnew_feat_grid either:
   that grid is imageless flat cards with a category filter, this one is
   photo-led with no filter at all (the hero's picker rail already does the
   "jump to mine" job, and nine items do not need filtering on top of that).

   THE LANDED STATE. Each card carries an id (#ind-real-estate, …) and the
   hero's picker chips link to it. On arrival lnew-ind-hero.js adds
   `.is-landed` for a couple of seconds so a visitor can see WHICH of nine
   cards they were just sent to — a silent scroll to an unmarked card in a
   uniform grid reads as "nothing happened". See the rule at the foot of the
   card block for why it has to out-rank the reveal.

   THE SECTION GRADIENT CHAIN. This sits on the flat #f0f4fb that
   lnew-ind-hero.css's gradient lands on, so hero and grid meet with no seam.
   lnew-ind-close.css then ramps #f0f4fb -> #dde2f4 to land on the FAQ's own
   #dde2f4. Change one end and you must change its neighbour.

   Built from the aurora-nightfall tokens resolved to literals and re-scoped
   under --lnig-*, LIGHT the default mode, [data-mode="dark"] flipping the
   palette, and the dark palette control section emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-ind-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-ind-grid, .lnew-ind-grid *, .lnew-ind-grid *::before, .lnew-ind-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. */
.lnew-ind-grid [hidden] { display: none !important; }

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

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

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

  --lnig-cols: repeat(3, minmax(0, 1fr));
  --lnig-card-gap: 22px;
  --lnig-card-radius: 22px;
  --lnig-card-pad: 22px;
  --lnig-media-ratio: 16 / 10;
  --lnig-card-title-size: 19px;
  --lnig-card-desc-size: 14.5px;

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

  --lnig-step-ic: 30px;
  --lnig-step-size: 11.5px;

  /* the card is the anchor target, so it owns the offset that clears the
     fixed site header — the bar is 76px resting / 64px scrolled */
  --lnig-anchor-top: 100px;

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

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

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

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

  /* the scrim that carries the icon chip off the bottom of the photo. Two
     stops, not one: a flat transparent top so the picture is not dimmed, then
     a fast ramp in the last third where the chip actually sits. */
  --lnig-scrim: linear-gradient(180deg, rgba(9,9,22,0) 34%, rgba(9,9,22,.28) 68%, rgba(9,9,22,.62) 100%);

  --lnig-closes-bg: #f4f5fc;
  --lnig-closes-l-ink: #9498b0;

  --lnig-step-bg: #f4f5fc;
  --lnig-step-ink: #6b7089;
  --lnig-wire: #e2e5f3;

  /* the four hues, mode-INDEPENDENT literals — one colour vocabulary across
     the pricing pills, the add-on cards, the features spec panel and the
     hero's picker chips */
  --lnig-hue-1-bg: #e7e4fb; --lnig-hue-1-ink: #6a4ff0;
  --lnig-hue-2-bg: #d8f0f3; --lnig-hue-2-ink: #0e97a8;
  --lnig-hue-3-bg: #fde2e7; --lnig-hue-3-ink: #e5486d;
  --lnig-hue-4-bg: #fceed4; --lnig-hue-4-ink: #cf7d13;

  --lnig-sh-sm-1: rgba(30,30,80,.05);
  --lnig-sh-sm-2: rgba(30,30,80,.05);
  --lnig-sh-md: rgba(30,30,80,.10);
  --lnig-shadow-sm: 0 1px 2px var(--lnig-sh-sm-1), 0 2px 6px var(--lnig-sh-sm-2);
  --lnig-shadow-md: 0 18px 44px var(--lnig-sh-md);

  position: relative;
  overflow-x: clip;
  padding-top: var(--lnig-pad-y);
  padding-bottom: var(--lnig-pad-y);
  background: var(--lnig-bg);
  font-family: var(--lnig-font-sans);
  color: var(--lnig-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-grid {
  --lnig-bg: #090910;
  --lnig-ink: #f5f6ff;
  --lnig-body: #b8bed6;
  --lnig-muted: #949bbb;
  --lnig-muted-2: #6d7398;
  --lnig-line: rgba(255,255,255,.10);
  --lnig-surface: rgba(255,255,255,.04);

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

  --lnig-accent: #8b7cff;
  --lnig-accent-soft-bg: rgba(139,124,255,.12);
  --lnig-accent-soft-border: rgba(139,124,255,.28);

  --lnig-closes-bg: rgba(255,255,255,.05);
  --lnig-closes-l-ink: #6d7398;

  --lnig-step-bg: rgba(255,255,255,.06);
  --lnig-step-ink: #949bbb;
  --lnig-wire: rgba(255,255,255,.12);

  --lnig-sh-sm-1: rgba(0,0,0,.4);
  --lnig-sh-sm-2: transparent;
  --lnig-sh-md: rgba(0,0,0,.55);
  --lnig-shadow-sm: 0 1px 2px var(--lnig-sh-sm-1);
  --lnig-shadow-md: 0 18px 44px var(--lnig-sh-md);
}

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

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

.lnew-ind-grid__card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--lnig-card-radius);
  background: var(--lnig-surface);
  border: 1px solid var(--lnig-line);
  box-shadow: var(--lnig-shadow-sm);
  /* the photo is a child with its own radius; without this the square top
     corners of the image punch through the card's rounded ones */
  overflow: hidden;
  scroll-margin-top: var(--lnig-anchor-top);
  transition: transform .35s var(--lnig-ease), box-shadow .35s var(--lnig-ease),
              border-color .35s var(--lnig-ease);
}
/* the card is programmatically focused when a picker chip lands on it, and a
   focus ring on a 380px-wide card is the one place the default outline reads
   as damage — the .is-landed treatment below is the visible signal instead */
.lnew-ind-grid__card:focus { outline: none; }
.lnew-ind-grid__card:hover {
  transform: translateY(-5px);
  border-color: var(--lnig-accent-soft-border);
  box-shadow: var(--lnig-shadow-md);
}

/* ---- the photo ---- */
.lnew-ind-grid__media {
  position: relative;
  aspect-ratio: var(--lnig-media-ratio);
  overflow: hidden;
  background: var(--lnig-accent-soft-bg);
}
/* TWO classes, deliberately. Elementor ships `.elementor img { height: auto }`
   at (0,1,1), which out-ranks a bare `.lnew-ind-grid__img` (0,1,0) and would
   collapse the photo to its intrinsic height inside the ratio box. */
.lnew-ind-grid .lnew-ind-grid__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .7s var(--lnig-ease);
}
.lnew-ind-grid__card:hover .lnew-ind-grid__img { transform: scale(1.06); }

.lnew-ind-grid__scrim {
  position: absolute; inset: 0;
  background: var(--lnig-scrim);
  pointer-events: none;
}
/* the icon chip rides ON the photo rather than in the body, so the card reads
   as one object instead of a picture with a card stapled underneath */
.lnew-ind-grid__ic {
  position: absolute; left: var(--lnig-card-pad); bottom: 14px;
  width: var(--lnig-ic); height: var(--lnig-ic);
  border-radius: var(--lnig-ic-radius);
  display: grid; place-items: center;
  /* the fourth hue is the FALLBACK, so a tenth card inherits it rather than
     falling back to an untinted glyph */
  background: var(--lnig-hue-4-bg); color: var(--lnig-hue-4-ink);
  box-shadow: 0 6px 18px rgba(9,9,22,.28);
  transition: transform .35s var(--lnig-ease);
}
.lnew-ind-grid__card[data-hue="1"] .lnew-ind-grid__ic { background: var(--lnig-hue-1-bg); color: var(--lnig-hue-1-ink); }
.lnew-ind-grid__card[data-hue="2"] .lnew-ind-grid__ic { background: var(--lnig-hue-2-bg); color: var(--lnig-hue-2-ink); }
.lnew-ind-grid__card[data-hue="3"] .lnew-ind-grid__ic { background: var(--lnig-hue-3-bg); color: var(--lnig-hue-3-ink); }
.lnew-ind-grid__card:hover .lnew-ind-grid__ic { transform: translateY(-3px) rotate(-6deg); }
.lnew-ind-grid__ic svg { width: 19px; height: 19px; }

/* ---- the body ---- */
.lnew-ind-grid__body {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  padding: 18px var(--lnig-card-pad) var(--lnig-card-pad);
}
.lnew-ind-grid__card-title {
  font-family: var(--lnig-font-head);
  font-size: var(--lnig-card-title-size); font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lnig-ink);
}

/*
 * THE "CLOSES" LINE.
 *
 * Its own full-width row, hugging its content, NOT a chip tucked beside the
 * title — that was tried on the earlier build of this page and the noun got
 * an ellipsis in every card ("a checkout c…"). It is the single most useful
 * string on the card, so it gets the room to be read.
 *
 * The noun is in the SANS face with the brand gradient painted through it,
 * not in a serif: the label and the value have to look like one line.
 */
.lnew-ind-grid__closes {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 100px;
  background: var(--lnig-closes-bg);
  border: 1px solid var(--lnig-line);
}
.lnew-ind-grid__closes-l {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lnig-closes-l-ink);
}
.lnew-ind-grid__closes-v {
  font-family: var(--lnig-font-sans);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--lnig-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lnew-ind-grid__desc {
  margin-top: 12px;
  font-size: var(--lnig-card-desc-size);
  line-height: 1.6;
  color: var(--lnig-muted);
}

/*
 * THE FLOW WIRE — the one device on this page no other widget in the family
 * uses, and the reason the card is worth more than a photo with a caption:
 * it shows the actual path a lead takes in THAT business.
 *
 * margin-top:auto pins it to the bottom edge of the card, so the wires line
 * up across a row no matter how long the descriptions above them run.
 *
 * The hairline is a ::before on the list, inset to the centre of the first
 * and last node, and it sits BEHIND the nodes (which carry the card's own
 * surface colour) so it reads as a wire the nodes are threaded onto rather
 * than a rule drawn through them.
 */
.lnew-ind-grid__flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--lnig-line);
}
.lnew-ind-grid__flow::before {
  content: "";
  position: absolute;
  left: 16.66%; right: 16.66%;
  top: calc(20px + (var(--lnig-step-ic) / 2));
  height: 2px;
  background: var(--lnig-wire);
  border-radius: 2px;
}
/* the travelling pulse. A short gradient segment scaled to nothing at rest and
   animated across the wire while the card is hovered or focused within, so the
   wire reads as a direction rather than a decoration. */
.lnew-ind-grid__flow::after {
  content: "";
  position: absolute;
  left: 16.66%; right: 16.66%;
  top: calc(20px + (var(--lnig-step-ic) / 2));
  height: 2px;
  border-radius: 2px;
  background: var(--lnig-accent-grad);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.lnew-ind-grid__card:hover .lnew-ind-grid__flow::after,
.lnew-ind-grid__card:focus-within .lnew-ind-grid__flow::after {
  animation: lnig-wire-run 1.15s var(--lnig-ease) forwards;
}
@keyframes lnig-wire-run {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

.lnew-ind-grid__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  text-align: center;
}
.lnew-ind-grid__step-ic {
  width: var(--lnig-step-ic); height: var(--lnig-step-ic);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--lnig-step-ink);
  background: var(--lnig-step-bg);
  /* the ring is the card's own surface, which is what makes the wire appear
     to pass BEHIND each node instead of through it */
  box-shadow: 0 0 0 4px var(--lnig-surface);
  transition: transform .35s var(--lnig-ease), color .35s var(--lnig-ease),
              background .35s var(--lnig-ease);
}
.lnew-ind-grid__step-ic svg { width: 14px; height: 14px; }
/* the last node is the OUTCOME — the thing the whole card is about — so it
   carries the brand gradient rather than the neutral fill */
.lnew-ind-grid__step:last-child .lnew-ind-grid__step-ic {
  background: var(--lnig-accent-grad);
  color: var(--lnig-accent-ink);
}
.lnew-ind-grid__card:hover .lnew-ind-grid__step-ic { transform: translateY(-2px); }
.lnew-ind-grid__step-l {
  font-size: var(--lnig-step-size); font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--lnig-muted);
  text-wrap: balance;
}

/* =====================================================================
   Footer note
   ===================================================================== */
.lnew-ind-grid__note {
  max-width: 660px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--lnig-muted);
  text-wrap: balance;
}
.lnew-ind-grid__note b { color: var(--lnig-ink); font-weight: 700; }

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

/*
 * THE LANDED STATE, AND WHY IT IS DOWN HERE.
 *
 * A card is both a reveal target and a landing target. The reveal's resting
 * rule is `.lnew-ind-grid .lnew-reveal.is-in` at (0,3,0); a bare
 * `.lnew-ind-grid__card.is-landed` is (0,2,0) and would lose the transform
 * to it mid-animation. This selector matches (0,3,0) AND sits after `.is-in`,
 * so it wins on source order — the same fix lnew-feat-grid.css documents for
 * its filtered-out state.
 *
 * A ring plus a lift, not a colour wash: the photo is the card's identity and
 * tinting it would read as a broken image rather than as "here you are".
 */
.lnew-ind-grid .lnew-ind-grid__card.is-landed {
  animation: lnig-land 2.2s var(--lnig-ease);
}
@keyframes lnig-land {
  0%      { box-shadow: var(--lnig-shadow-sm), 0 0 0 0 var(--lnig-accent-halo); }
  14%     { box-shadow: var(--lnig-shadow-md), 0 0 0 6px var(--lnig-accent-halo); transform: translateY(-5px); }
  55%     { box-shadow: var(--lnig-shadow-md), 0 0 0 6px var(--lnig-accent-halo); transform: translateY(-5px); }
  100%    { box-shadow: var(--lnig-shadow-sm), 0 0 0 0 rgba(139,124,255,0); transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lnew-ind-grid .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-ind-grid__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-ind-grid__card,
  .lnew-ind-grid .lnew-ind-grid__img,
  .lnew-ind-grid__ic,
  .lnew-ind-grid__step-ic { transition: none; }
  /* the landing still has to be VISIBLE — it is the answer to "did my click
     do anything?" — so it becomes a static ring instead of a pulse */
  .lnew-ind-grid .lnew-ind-grid__card.is-landed {
    animation: none !important;
    box-shadow: var(--lnig-shadow-md), 0 0 0 4px var(--lnig-accent-halo);
  }
  .lnew-ind-grid__flow::after { animation: none !important; display: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1180px) {
  .lnew-ind-grid {
    --lnig-cols: repeat(2, minmax(0, 1fr));
  }
}

/* NOTE: --lnig-anchor-top is deliberately NOT stepped down at any breakpoint.
   The Anchor Offset control ships with a real default (100px) so the Style tab
   shows the number in use, and a control default emits at a specificity no
   media query in this file can beat — see
   [[elementor-control-css-beats-media-queries]]. 100px clears the site header
   at every width (76px resting, 64px scrolled), so there is nothing to step. */
@media (max-width: 1040px) {
  .lnew-ind-grid {
    --lnig-gutter: 24px;
    --lnig-pad-y: 84px;
  }
}

@media (max-width: 760px) {
  .lnew-ind-grid {
    --lnig-gutter: 20px;
    --lnig-pad-y: 68px;
    --lnig-cols: minmax(0, 1fr);
    --lnig-card-pad: 20px;
    --lnig-card-radius: 20px;
    /* a single-column card runs the full width of a phone, so a 16:10 photo
       would eat two thirds of the screen before a word of copy — flatten it */
    --lnig-media-ratio: 16 / 9;
  }
  .lnew-ind-grid__lead { font-size: 16.5px; }
  .lnew-ind-grid__grid { margin-top: 32px; }
}

@media (max-width: 420px) {
  .lnew-ind-grid {
    --lnig-gutter: 16px;
    --lnig-step-ic: 28px;
    --lnig-step-size: 11px;
    --lnig-card-title-size: 18px;
  }
}