/* =====================================================================
   LeadsNimble Features Hero — the opening band of the detailed /features/
   page.

   QUIET, on purpose, and for the same reason lnew-price-hero.css is quiet:
   the homepage hero (lnew_hero2) is the loud one — aurora wiring, a nested
   product showcase, a headline in Bricolage Grotesque. Somebody who clicked
   "Features" has already been sold the idea and wants the inventory, so this
   band answers "what is actually in the box" in one line and hands over to
   the deep dive below it. No artwork, no video facade, no second typeface.

   Built from the aurora-nightfall tokens resolved to literals and re-scoped
   under --lnfh-*, LIGHT the default mode, [data-mode="dark"] flipping the
   palette, and the dark palette control section emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-feat-hero so it outranks the light
   controls on SPECIFICITY, not source order.

   THE SECTION GRADIENT CHAIN. This band opens on the same #d7e0ef -> #f0f4fb
   the pricing page opens on, and lnew-feat-deep.css sits on the flat #f0f4fb
   the gradient lands on — so the two meet with no visible seam. The grid
   below that then ramps #f0f4fb -> #dde2f4 to land on the FAQ's own #dde2f4.
   Change one end of that chain and you must change its neighbour.

   WHY THE SPEC PANEL AND NOT PRICE-HERO'S TRUST BADGES. The pricing hero
   closes on four separate glass badges. Repeating that here would make the
   two page heads read as the same component with different words. This one
   closes on ONE bounded panel of four figure cells — the idiom lnew-social2
   uses for its stat band — so the family is obvious but the two are not
   interchangeable.

   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-hero, .lnew-feat-hero *, .lnew-feat-hero *::before, .lnew-feat-hero *::after { box-sizing: border-box; }

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

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

.lnew-feat-hero {
  /* ---- motion ---- */
  --lnfh-ease: cubic-bezier(.22,1,.36,1);
  /* one duration, both directions — the module-grid chip's .35s. See the
     spec-chip block for why matching that chip matters. */
  --lnfh-hov-dur: .35s;
  --lnfh-rv-dist: 70px;
  --lnfh-rv-dur: 1.2s;
  --lnfh-rv-step: 70ms;

  /* ---- geometry ---- */
  --lnfh-maxw: 1360px;
  --lnfh-gutter: 28px;
  --lnfh-inner-maxw: 880px;
  /* both written by the one Alignment control — see the note on __lead */
  --lnfh-align: center;
  --lnfh-lead-mi: auto;
  --lnfh-title-size: clamp(38px, 5vw, 62px);
  --lnfh-lead-size: 19px;
  --lnfh-lead-maxw: 700px;

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

  --lnfh-jump-top: 30px;
  --lnfh-jump-gap: 26px;
  --lnfh-jump-size: 13.5px;

  --lnfh-spec-top: 46px;
  --lnfh-spec-maxw: 1000px;
  --lnfh-spec-radius: 22px;
  --lnfh-spec-pad: 8px;
  --lnfh-spec-cell-pad: 18px 20px;
  --lnfh-spec-cols: repeat(4, 1fr);
  --lnfh-spec-ic: 38px;
  --lnfh-spec-ic-radius: 12px;
  --lnfh-spec-fig-size: 26px;
  --lnfh-spec-label-size: 12.5px;

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

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

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

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

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

  --lnfh-glass-blur: none;
  --lnfh-glass-hi: transparent;

  /* the four spec hues, mode-INDEPENDENT literals — the same indigo / teal /
     rose / amber ramp the pricing pills and the add-on cards carry, so a
     visitor moving between the two pages meets one colour vocabulary */
  --lnfh-hue-1-bg: #e7e4fb; --lnfh-hue-1-ink: #6a4ff0;
  --lnfh-hue-2-bg: #d8f0f3; --lnfh-hue-2-ink: #0e97a8;
  --lnfh-hue-3-bg: #fde2e7; --lnfh-hue-3-ink: #e5486d;
  --lnfh-hue-4-bg: #fceed4; --lnfh-hue-4-ink: #cf7d13;

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

  position: relative;
  overflow-x: clip;
  padding-top: 128px;
  padding-bottom: 96px;
  background: linear-gradient(180deg, var(--lnfh-bg-1) 0%, var(--lnfh-bg-2) var(--lnfh-bg-stop));
  font-family: var(--lnfh-font-sans);
  color: var(--lnfh-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-hero {
  --lnfh-bg-1: #0c0c18;
  --lnfh-bg-2: #090910;
  --lnfh-bg-stop: 100%;
  --lnfh-ink: #f5f6ff;
  --lnfh-body: #b8bed6;
  --lnfh-muted: #949bbb;
  --lnfh-muted-2: #6d7398;
  --lnfh-line: rgba(255,255,255,.10);

  /* the dark band is nearly black, so the aurora needs real presence */
  --lnfh-aurora-op: .8;
  --lnfh-surface: rgba(255,255,255,.035);

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

  --lnfh-accent: #8b7cff;

  --lnfh-glass-blur: blur(14px) saturate(150%);
  --lnfh-glass-hi: rgba(255,255,255,.10);

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

/* =====================================================================
   Ambient aurora — the same device the homepage hero opens with, so the
   features page starts in the same world. Three blurred colour fields on a
   slow alternating drift; the wrap sits above it on z-index.
   ===================================================================== */
.lnew-feat-hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.lnew-feat-hero__bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(38% 42% at 20% 26%, var(--lnfh-aurora-1), transparent 60%),
    radial-gradient(34% 38% at 80% 20%, var(--lnfh-aurora-2), transparent 60%),
    radial-gradient(40% 44% at 60% 82%, var(--lnfh-aurora-3), transparent 62%);
  filter: blur(var(--lnfh-aurora-blur));
  opacity: var(--lnfh-aurora-op);
  animation: lnfh-aurora-drift var(--lnfh-aurora-dur) ease-in-out infinite alternate;
}
@keyframes lnfh-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); }
}

/* =====================================================================
   Shell
   ===================================================================== */
.lnew-feat-hero__wrap {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--lnfh-maxw);
  margin-inline: auto;
  padding-inline: var(--lnfh-gutter);
}
.lnew-feat-hero__inner {
  max-width: var(--lnfh-inner-maxw);
  margin-inline: auto;
  text-align: var(--lnfh-align);
}

.lnew-feat-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnfh-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnfh-eyebrow-ink);
  background: var(--lnfh-eyebrow-bg);
  border: 1px solid var(--lnfh-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-feat-hero__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnfh-accent);
  box-shadow: 0 0 0 4px var(--lnfh-accent-halo);
  opacity: .45;
  animation: lnfh-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnfh-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnfh-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnfh-accent-halo), 0 0 7px 1px var(--lnfh-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnfh-accent-halo), 0 0 7px 1px var(--lnfh-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnfh-accent-halo), 0 0 0 0 transparent; }
}

.lnew-feat-hero__title {
  font-family: var(--lnfh-font-head);
  font-weight: 500;
  font-size: var(--lnfh-title-size);
  margin-top: 20px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--lnfh-ink);
  text-wrap: balance;
}
.lnew-feat-hero__accent {
  background: var(--lnfh-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* The lead is the one element narrower than its parent, so it is the one that
   has to be centred as a BLOCK as well as having its text centred — and CSS
   has no conditional inside a value. So the alignment control writes TWO
   tokens: --lnfh-align for the text and --lnfh-lead-mi for this margin. It
   cannot be done by reading the control back in PHP and adding a modifier
   class: on the front end Elementor 4.x treats any selectors-carrying control
   as a STYLE control and drops it from get_settings_for_display(). */
.lnew-feat-hero__lead {
  max-width: var(--lnfh-lead-maxw);
  margin: 20px 0 0;
  margin-inline: var(--lnfh-lead-mi);
  font-size: var(--lnfh-lead-size);
  color: var(--lnfh-muted);
  line-height: 1.65;
  text-wrap: balance;
}

/* =====================================================================
   Buttons — the design system's .btn, scoped to this widget
   ===================================================================== */
.lnew-feat-hero__ctas {
  display: flex; flex-wrap: wrap;
  gap: var(--lnfh-cta-gap);
  margin-top: var(--lnfh-cta-top);
  justify-content: var(--lnfh-align);
}
.lnew-feat-hero__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--lnfh-font-sans);
  font-size: var(--lnfh-btn-size); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.6;
  padding: var(--lnfh-btn-pad-y) var(--lnfh-btn-pad-x);
  border-radius: var(--lnfh-btn-radius);
  white-space: nowrap;
  transition: transform .22s var(--lnfh-ease), box-shadow .3s var(--lnfh-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.lnew-feat-hero__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnfh-ease); }
.lnew-feat-hero__btn:hover svg { transform: translateX(4px); }
.lnew-feat-hero__btn:focus-visible { outline: 2px solid var(--lnfh-accent); outline-offset: 3px; }

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

/* =====================================================================
   Jump index — TEXT, not chips, for the same reason the pricing hero's is
   text: the thing you should click must not look like the thing you should
   read. The two gradient CTAs are the only buttons on screen.
   ===================================================================== */
.lnew-feat-hero__jump {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px var(--lnfh-jump-gap);
  margin-top: var(--lnfh-jump-top);
  justify-content: var(--lnfh-align);
}
.lnew-feat-hero__jump-l {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lnfh-muted-2);
}
.lnew-feat-hero__jump-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--lnfh-jump-size); font-weight: 600;
  line-height: 1.5;
  color: var(--lnfh-body);
  transition: color .22s ease;
}
/* the underline grows from the left rather than fading in — a 1px line the
   accent gradient paints, so the link picks up the brand ramp on hover */
.lnew-feat-hero__jump-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--lnfh-accent-grad);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s var(--lnfh-ease);
}
.lnew-feat-hero__jump-item:hover { color: var(--lnfh-ink); }
.lnew-feat-hero__jump-item:hover::after,
.lnew-feat-hero__jump-item:focus-visible::after { transform: scaleX(1); }
.lnew-feat-hero__jump-item:focus-visible { outline: 2px solid var(--lnfh-accent); outline-offset: 4px; border-radius: 3px; }
.lnew-feat-hero__jump-item svg {
  width: 12px; height: 12px; opacity: .5;
  transition: transform .32s var(--lnfh-ease), opacity .22s ease;
}
.lnew-feat-hero__jump-item:hover svg { transform: translateY(2px); opacity: 1; }

/* =====================================================================
   Spec panel — the "what's in the box" strip.

   ONE bounded panel of four figure cells, not four free-standing badges.

   NO DIVIDERS BETWEEN THE CELLS. They had inset hairlines; the cells are
   rounded and hover-filled, so each rule met a rounded corner and read as a
   short stub floating between the cells rather than as a column separator —
   and at every breakpoint the row/column arithmetic needed its own set of
   rules to stay honest. The four coloured icon chips already say where one
   cell ends and the next begins. Do not reinstate them.
   ===================================================================== */
.lnew-feat-hero__spec {
  position: relative;
  display: grid;
  grid-template-columns: var(--lnfh-spec-cols);
  max-width: var(--lnfh-spec-maxw);
  margin: var(--lnfh-spec-top) auto 0;
  padding: var(--lnfh-spec-pad);
  border-radius: var(--lnfh-spec-radius);
  background: var(--lnfh-surface);
  -webkit-backdrop-filter: var(--lnfh-glass-blur);
  backdrop-filter: var(--lnfh-glass-blur);
  border: 1px solid var(--lnfh-line);
  box-shadow: var(--lnfh-spec-shadow);
}
.lnew-feat-hero__spec-cell {
  display: flex; align-items: center; gap: 13px;
  padding: var(--lnfh-spec-cell-pad);
  border-radius: calc(var(--lnfh-spec-radius) - var(--lnfh-spec-pad));
  text-align: left;
  transition: background var(--lnfh-hov-dur) var(--lnfh-ease);
}
.lnew-feat-hero__spec-cell:hover { background: var(--lnfh-eyebrow-bg); }

/* THE CHIP HAS TO OWN A COMPOSITING LAYER FOR LONGER THAN ITS OWN TRANSITION.
   Read this before deleting will-change / backface-visibility / z-index below;
   all three are load-bearing and none of them is a micro-optimisation.

   THE BUG THEY FIX. This chip is the only thing that moves in the spec panel —
   the cell around it just changes background, it never transforms. So Chrome
   promotes the chip to its own layer when the transform starts and DROPS that
   layer the moment the transform lands back on `none`. Dropping it forces a
   re-raster at integer pixels, and the chip's 12px rounded corners and its 2px
   SVG strokes visibly re-snap as the anti-aliasing changes — a jolt in the
   last frames of the return, exactly where the movement should be dying out.
   It is not an easing problem: no curve can hide a raster change.

   WHY THE MODULE GRID'S CHIP NEVER SHOWS IT. Over in lnew-feat-grid.css the
   CARD transforms on hover too, and it carries `isolation: isolate` with its
   children at `z-index: 1`. Its chip therefore rides a layer that belongs to
   the card and outlives the chip's own transition, so there is no promote/
   demote cycle to see. That is the real difference between the two, not the
   timing — which is why this block now matches that chip move for move
   (.35s, one curve each way, translateY(-3px) rotate(-5deg)) and adds the
   layer pinning the grid gets for free from its parent.

   An earlier attempt split this into separate entrance and exit curves on the
   theory that easeOutQuint's long tail was the culprit. It was not, and the
   split is gone. */
.lnew-feat-hero__spec-ic {
  flex: none;
  width: var(--lnfh-spec-ic); height: var(--lnfh-spec-ic);
  border-radius: var(--lnfh-spec-ic-radius);
  display: grid; place-items: center;
  /* the fourth hue is the FALLBACK, so a fifth cell inherits it rather than
     falling back to an untinted glyph — same rule as the pricing pills */
  background: var(--lnfh-hue-4-bg); color: var(--lnfh-hue-4-ink);
  /* the module-grid card gives its chip a stacking context via
     `.lnew-feat-grid__card > * { position: relative; z-index: 1 }`; the chip
     here has no such parent, so it states it itself */
  position: relative;
  z-index: 1;
  /* the layer pin. `will-change` keeps the chip composited at REST as well as
     mid-move, so the promote/demote cycle — and the re-raster at the end of
     it — never happens; `backface-visibility` stops the rotated raster being
     re-snapped to the pixel grid on the way back to identity. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: transform var(--lnfh-hov-dur) var(--lnfh-ease);
}
.lnew-feat-hero__spec-cell:nth-child(4n+1) .lnew-feat-hero__spec-ic { background: var(--lnfh-hue-1-bg); color: var(--lnfh-hue-1-ink); }
.lnew-feat-hero__spec-cell:nth-child(4n+2) .lnew-feat-hero__spec-ic { background: var(--lnfh-hue-2-bg); color: var(--lnfh-hue-2-ink); }
.lnew-feat-hero__spec-cell:nth-child(4n+3) .lnew-feat-hero__spec-ic { background: var(--lnfh-hue-3-bg); color: var(--lnfh-hue-3-ink); }
/* the SAME travel and the SAME curve the module-grid chip uses. The rest state
   is an explicit identity rather than `none`, so the transform never leaves the
   property entirely and Chrome has no reason to tear the layer down. */
.lnew-feat-hero__spec-ic { transform: translateY(0) rotate(0deg); }
.lnew-feat-hero__spec-cell:hover .lnew-feat-hero__spec-ic { transform: translateY(-3px) rotate(-5deg); }
.lnew-feat-hero__spec-ic svg { width: 17px; height: 17px; }

.lnew-feat-hero__spec-t { display: flex; flex-direction: column; min-width: 0; }
.lnew-feat-hero__spec-fig {
  font-family: var(--lnfh-font-head);
  font-size: var(--lnfh-spec-fig-size); font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lnfh-ink);
}
/* the unit rides at the figure's own size but at body weight — the number is
   the datum, the unit is only there so "6" is not read as a rank */
.lnew-feat-hero__spec-unit {
  font-size: .62em; font-weight: 600;
  color: var(--lnfh-muted);
  margin-left: 3px;
}
.lnew-feat-hero__spec-l {
  font-size: var(--lnfh-spec-label-size);
  line-height: 1.35;
  color: var(--lnfh-muted);
  margin-top: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
  .lnew-feat-hero .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-feat-hero__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-feat-hero__btn--primary { animation: none !important; }
  .lnew-feat-hero__btn--primary::before { animation: none !important; display: none; }
  .lnew-feat-hero__btn svg, .lnew-feat-hero__jump-item { 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-feat-hero__bg::before { animation: none !important; }
  .lnew-feat-hero__jump-item::after,
  .lnew-feat-hero__jump-item svg,
  .lnew-feat-hero__spec-cell,
  .lnew-feat-hero__spec-ic { transition: none; }
  /* the chip keeps `will-change` — pinning a layer is not motion, and dropping
     it here would reintroduce the end-of-transition re-raster for anyone whose
     OS asks for reduced motion */
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-feat-hero {
    --lnfh-gutter: 24px;
    --lnfh-spec-cell-pad: 16px 16px;
    --lnfh-spec-fig-size: 24px;
    padding-top: 104px; padding-bottom: 72px;
  }
}

@media (max-width: 860px) {
  .lnew-feat-hero {
    --lnfh-spec-cols: repeat(2, 1fr);
    --lnfh-spec-maxw: 560px;
  }
}

@media (max-width: 760px) {
  .lnew-feat-hero {
    --lnfh-gutter: 20px;
    --lnfh-lead-size: 17px;
    --lnfh-spec-top: 36px;
    padding-top: 88px; padding-bottom: 56px;
  }
}

@media (max-width: 460px) {
  .lnew-feat-hero {
    --lnfh-gutter: 16px;
    --lnfh-spec-cols: 1fr;
    --lnfh-spec-cell-pad: 14px 14px;
    --lnfh-spec-ic: 34px;
    --lnfh-spec-fig-size: 22px;
    --lnfh-btn-pad-x: 20px;
    padding-top: 76px; padding-bottom: 48px;
  }
  /* on a small phone two side-by-side buttons each get ~140px, which truncates
     any label longer than "Start free" — stack them instead */
  .lnew-feat-hero__ctas { flex-direction: column; align-items: stretch; }
  .lnew-feat-hero__btn { width: 100%; }
}