/* =====================================================================
   LeadsNimble Features — "One Surface".
   Ported 1:1 from leadsnimble_html:
     src/html/partials/features.html
     src/css/components/features.css      (.psurf plane, .pcap chips, popovers)
     src/css/components/buttons.css       (.btn / --primary / --lg)
     src/css/base/2-layout.css            (.wrap, .section__head, .eyebrow, .accent-text)
     src/css/base/3-utilities.css         (.reveal stagger, .gborder, .glass, reduced motion)
     src/css/base/4-responsive.css        (gutter / section padding steps)
     src/css/themes/aurora-nightfall/     (tokens resolved to literal values)

   Same conventions as lnew-problem.css / lnew-solution.css: the theme's design
   tokens are resolved to literal values and re-scoped under --lnf-*, so the
   widget renders identically regardless of the active WP theme and never leaks
   variables into the rest of the page.

   ---------------------------------------------------------------------------
   HALF-LOCKED PALETTE — read this before touching any colour below.

   The reference is NOT a single mode-aware palette. features.css opens with a
   `.psurf { ... }` block that REDECLARES every mode-dependent token to the
   theme's *dark* literals, so the whole capability plane is a DARK ISLAND that
   looks the same in light and dark mode. Only two rings of the section are
   mode-aware, because they sit OUTSIDE `.psurf` in the markup:

     • the section shell + head  (background, eyebrow, title, lead)
     • the CTA row below the plane (`.psurf__cta` is a SIBLING of `.psurf`,
       not a descendant — the stale comment at the top of the reference's own
       features.css claims otherwise; the markup is the authority)

   So this file mirrors that exactly:

     .lnew-features               → LIGHT default + [data-mode="dark"] flip
     .lnew-features__surf         → the locked dark island (same token list as
                                    `.psurf`, same literal values)

   A custom property declared on a DESCENDANT always wins for that subtree
   regardless of selector specificity, so the island block below overrides the
   shell tokens even though Elementor emits the shell's palette controls at a
   higher specificity. That is why the island gets its OWN control group
   (register_plane_palette_section(), selector {{WRAPPER}} .lnew-features__surf)
   instead of reusing the light/dark ones — those two would be silently dead
   inside the plane.

   Three residual mode deltas survive INSIDE the island, because the reference
   keeps them at the foot of features.css: the plane's bloom opacity, the
   gborder rest opacity, and the chip box-shadow. Dark is the base here and
   light carries the deltas — the reverse of how the rest of this file reads.
   ---------------------------------------------------------------------------

   Every --lnf-* colour token is writable from the widget's Style tab (see
   register_palette_section() in class-features-widget.php). The dark controls
   are emitted at [data-mode="dark"] {{WRAPPER}} .lnew-features so they outrank
   the light ones on SPECIFICITY, not source order — Elementor's generated CSS
   loads after this stylesheet.

   The ten capability glyphs, the six channel bubbles and the AI hub are the
   reference's fixed product art — same choice as lnew-problem.css hardcoding
   its check/cross/payoff icons. Their COPY is editable (widget controls) and
   an optional custom icon can override any chip glyph, but the default set
   ships identical to the template.
   ===================================================================== */

/* Local reset. Wrapped in :where() so it carries ZERO specificity — a bare
   `.lnew-features p` would be (0,1,1) and would outrank every (0,1,0)
   component class below it. See [[hero-widget-feature]] / [[nav-widget-feature]]
   for the traps this avoids. Do not unwrap. */
.lnew-features, .lnew-features *, .lnew-features *::before, .lnew-features *::after { box-sizing: border-box; }
:where(.lnew-features) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-features) :where(p) { margin: 0; }
:where(.lnew-features) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-features) :where(svg) { display: block; }
:where(.lnew-features) :where(h1, h2, h3) { margin: 0; }

.lnew-features {
  /* ---- motion / geometry ---- */
  --lnf-ease: cubic-bezier(.22,1,.36,1);
  --lnf-rv-dist: 70px;
  --lnf-rv-dur: 1.2s;
  --lnf-rv-step: 55ms;              /* dense grid — reference tightens this */
  --lnf-maxw: 1360px;
  --lnf-gutter: 28px;
  --lnf-plane-maxw: 1120px;
  --lnf-caps-gap: clamp(13px, 1.5vw, 20px);
  --lnf-radius-2xl: 40px;
  --lnf-radius-pill: 100px;
  --lnf-btn-radius: 13px;
  --lnf-cap-min-h: 128px;
  --lnf-cap-ic-size: 38px;
  --lnf-chub-size: 62px;
  --lnf-chan-size: 46px;
  --lnf-web-min-h: 250px;
  --lnf-title-size: clamp(31px, 3.6vw, 47px);
  --lnf-hero-title-size: clamp(21px, 2.3vw, 26px);
  --lnf-gborder-w: 1px;

  /* Is the capability-chip disclosure live? 1 = yes (laptop / desktop),
     0 = no. The responsive block at the foot of this file flips it, and
     lnew-features.js reads it back, so THE BREAKPOINT LIVES IN EXACTLY ONE
     PLACE — that @media rule. See the note there before changing anything. */
  --lnf-pop: 1;

  /* ---- type ---- */
  --lnf-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnf-font-head: 'Parkinsans', 'DM Sans', sans-serif;
  --lnf-head-tracking: -0.02em;

  /* ---- palette · LIGHT (the site's default mode) ---- */
  /* The section paints a two-stop vertical gradient because the aurora theme's
     overrides.css does exactly that in dark (`.section--soft { background:
     linear-gradient(180deg,#0c0c18,#090910) }`) while light stays flat
     (`[data-mode="light"] .section--soft { background: var(--bg-soft) }`).
     Light therefore sets BOTH stops to the same colour, which renders flat and
     keeps a single `background` declaration serving both modes. */
  --lnf-bg-soft: #cfd7ee;
  --lnf-bg-soft-2: #cfd7ee;
  --lnf-surface: #ffffff;
  --lnf-ink: #12122a;
  --lnf-body: #454a63;
  --lnf-muted: #6b7089;
  --lnf-muted-2: #9498b0;
  --lnf-line: #e7e9f4;
  --lnf-line-2: #f0f1f8;

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

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

  --lnf-green: #12b981;
  --lnf-green-ink: #0a8a5f;
  --lnf-green-soft-bg: #e7f9f1;

  --lnf-glass-bg: rgba(255,255,255,.72);
  --lnf-glass-blur: blur(12px) saturate(140%);
  --lnf-glass-hi: rgba(255,255,255,.90);

  --lnf-shadow-sm: 0 1px 2px rgba(30,30,80,.05), 0 2px 6px rgba(30,30,80,.05);
  --lnf-shadow-md: 0 12px 34px rgba(30,30,80,.1);
  --lnf-shadow-lg: 0 30px 70px rgba(30,30,80,.16);
  --lnf-shadow-accent: 0 16px 40px rgba(99,102,241,.28);
  --lnf-shadow-accent-hover: 0 20px 50px rgba(99,102,241,.36);
  --lnf-btn-shimmer: rgba(255,255,255,.55);

  /* Gradient hairline. Derived with color-mix from the accent tokens (same
     approach as lnew-problem.css) so a custom accent carries into the ring;
     the default mix percentages reproduce the theme's literal --border-grad.
     NOTE: every .gborder host lives inside the locked island, which
     redeclares this — the shell value is a fallback, not the rendered one. */
  --lnf-border-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--lnf-accent) 55%, transparent) 0%,
    color-mix(in srgb, var(--lnf-grad-3) 28%, transparent) 45%,
    transparent 82%);

  position: relative;
  overflow-x: clip;
  padding-top: 112px;
  padding-bottom: 112px;
  background: linear-gradient(180deg, var(--lnf-bg-soft), var(--lnf-bg-soft-2));
  font-family: var(--lnf-font-sans);
  color: var(--lnf-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- palette · DARK ([data-mode="dark"] on <html>, written by the nav) ---- */
[data-mode="dark"] .lnew-features {
  --lnf-bg-soft: #0c0c18;
  --lnf-bg-soft-2: #090910;
  --lnf-surface: rgba(255,255,255,.035);
  --lnf-ink: #f5f6ff;
  --lnf-body: #b8bed6;
  --lnf-muted: #949bbb;
  --lnf-muted-2: #6d7398;
  --lnf-line: rgba(255,255,255,.10);
  --lnf-line-2: rgba(255,255,255,.06);

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

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

  --lnf-green: #34d399;
  --lnf-green-ink: #6ee7b7;
  --lnf-green-soft-bg: rgba(52,211,153,.13);

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

  --lnf-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --lnf-shadow-md: 0 12px 34px rgba(0,0,0,.5);
  --lnf-shadow-lg: 0 34px 74px rgba(0,0,0,.62);
  --lnf-shadow-accent: 0 16px 44px rgba(99,102,241,.4);
  --lnf-shadow-accent-hover: 0 22px 54px rgba(99,102,241,.5);
  --lnf-btn-shimmer: rgba(255,255,255,.42);

  --lnf-border-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--lnf-accent) 90%, transparent) 0%,
    color-mix(in srgb, var(--lnf-grad-3) 45%, transparent) 42%,
    rgba(255,255,255,.05) 78%);
}

/* =====================================================================
   Layout shell
   ===================================================================== */
.lnew-features__wrap {
  width: 100%;
  max-width: var(--lnf-maxw);
  margin-inline: auto;
  padding-inline: var(--lnf-gutter);
}

.lnew-features__head {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}

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

/* =====================================================================
   Title + lead
   ===================================================================== */
.lnew-features__title {
  font-family: var(--lnf-font-head);
  font-weight: 500;
  font-size: var(--lnf-title-size);
  margin-top: 18px;
  line-height: 1.12;
  letter-spacing: var(--lnf-head-tracking);
  color: var(--lnf-ink);
  text-wrap: balance;
}
.lnew-features__title-accent {
  background: var(--lnf-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lnew-features__lead {
  margin-top: 18px;
  font-size: 18px;
  color: var(--lnf-muted);
  line-height: 1.65;
  text-wrap: balance;
}

/* =====================================================================
   Gradient-masked hairline (.gborder)
   THREE GOTCHAS, do not "tidy" these away:
   1. The -webkit-mask SHORTHAND resets -webkit-mask-composite, so the
      composite declarations MUST come after it. Reverse the order and you
      silently get a solid filled rectangle instead of a ring.
   2. `xor` (WebKit legacy) and `exclude` (standard/Firefox) are NOT aliases
      — both lines are required.
   3. border-radius:inherit only works if the host declares a radius.
   ===================================================================== */
.lnew-features__gborder { position: relative; }
.lnew-features__gborder::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: var(--lnf-gborder-w, 1px);
  background: var(--lnf-border-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: var(--lnf-gborder-op, .75);
  transition: opacity .45s var(--lnf-ease);
}
.lnew-features__gborder:hover::before,
.lnew-features__gborder:focus-within::before { opacity: 1; }

/* =====================================================================
   The single bounded platform surface — THE LOCKED DARK ISLAND.

   1:1 with the reference's `.psurf { ... }` opener: every mode-dependent
   token this subtree's descendants read is redeclared to the theme's dark
   literal, so the plane looks identical in light and dark mode. It cascades
   to the panel, chrome bar, spotlight (+ hub/channels), every chip and
   popover, and the "replaces your…" strike-line. It does NOT reach the CTA
   row or the section head — those are siblings/ancestors and stay mode-aware.

   Geometry tokens (--lnf-caps-gap, --lnf-cap-min-h, --lnf-web-min-h, the
   radii) are deliberately NOT redeclared here: they carry Style-tab controls
   and responsive steps written on .lnew-features, and a redeclaration on this
   descendant would silently swallow both.
   ===================================================================== */
.lnew-features__surf {
  max-width: var(--lnf-plane-maxw);
  margin: 44px auto 0;

  --lnf-surface: rgba(255,255,255,.035);
  --lnf-ink: #f5f6ff;
  --lnf-body: #b8bed6;
  --lnf-muted: #949bbb;
  --lnf-muted-2: #6d7398;
  --lnf-line: rgba(255,255,255,.10);
  --lnf-line-2: rgba(255,255,255,.06);
  --lnf-bg-soft: #10101d;               /* .lnew-features__cap-pop-x:hover */

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

  --lnf-green: #34d399;
  --lnf-green-ink: #6ee7b7;
  --lnf-green-soft-bg: rgba(52,211,153,.13);

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

  --lnf-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --lnf-shadow-md: 0 12px 34px rgba(0,0,0,.5);
  --lnf-shadow-lg: 0 34px 74px rgba(0,0,0,.62);
  --lnf-shadow-accent: 0 16px 44px rgba(99,102,241,.4);

  /* Same color-mix derivation as the shell, at the DARK mix percentages —
     these reproduce the theme's literal dark --border-grad exactly while
     still letting a custom plane Accent carry into the ring. */
  --lnf-border-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--lnf-accent) 90%, transparent) 0%,
    color-mix(in srgb, var(--lnf-grad-3) 45%, transparent) 42%,
    rgba(255,255,255,.05) 78%);

  --lnf-gborder-op: .38;                /* soft hairline at rest on chips */
  --lnf-panel-bloom-op: .8;

  /* The plane's opaque base (the theme's --dark-bg-grad). Its outer stop is
     the ONE island value the theme still varies by mode. */
  --lnf-panel-base-1: #1a1740;
  --lnf-panel-base-2: #06060d;
}
/* …the light-mode delta. (0,2,0) so it lands on top of the island block, and
   none of these three carry a Style-tab control, so nothing Elementor emits
   later can outrank them. */
[data-mode="light"] .lnew-features__surf {
  --lnf-gborder-op: .5;
  --lnf-panel-bloom-op: .5;
  --lnf-panel-base-2: #0a0a16;
}

/* The panel is `.gborder .glass` in the reference, but its own `background`
   REPLACES the .glass single-layer translucent fill (later in source order,
   same specificity). Translucent alone it would merely tint the light page
   behind it instead of reading as a solid dark plane — which is precisely the
   bug this file used to ship. The backdrop-filter and the inset highlight
   box-shadow from .glass are NOT replaced and still apply.
   ORDER MATTERS: the radial base must be the LAST layer, since it is the only
   opaque one — a non-final opaque layer silently invalidates the shorthand. */
.lnew-features__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--lnf-radius-2xl);
  --lnf-gborder-op: .8;                 /* the plane's own ring stays crisp */
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 24px 24px,
    radial-gradient(120% 120% at 50% -10%, var(--lnf-panel-base-1) 0%, var(--lnf-panel-base-2) 56%);
  -webkit-backdrop-filter: var(--lnf-glass-blur);
          backdrop-filter: var(--lnf-glass-blur);
  box-shadow: inset 0 1px 0 var(--lnf-glass-hi), var(--lnf-shadow-sm);
}
/* Accent bloom. z-index:-1 inside the isolated stacking context paints it
   above the panel's own background but below its content — the reference
   behaviour. Do not "simplify" to a positive z-index. */
.lnew-features__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -12%, var(--lnf-accent-halo), transparent 62%);
  opacity: var(--lnf-panel-bloom-op);
}

/* ---- chrome bar: brand + the one-login / one-bill promise ---- */
.lnew-features__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--lnf-line-2);
}
.lnew-features__brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--lnf-font-head); font-weight: 500; font-size: 16px;
  color: var(--lnf-ink); letter-spacing: var(--lnf-head-tracking);
  /* the reference hardcodes "Leads&nbsp;Nimble"; nowrap gets the same
     never-break-the-brand result without mangling the editor's text */
  white-space: nowrap;
}
.lnew-features__logo {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 10px 10px 10px 3px;      /* per-corner house facet */
  background: var(--lnf-accent-soft-bg); color: var(--lnf-accent);
  box-shadow: inset 0 0 0 1px var(--lnf-accent-soft-border);
  overflow: hidden;
}
.lnew-features__logo svg { width: 17px; height: 17px; fill: currentColor; }
.lnew-features__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lnew-features__unify { display: flex; flex-wrap: wrap; gap: 8px; }
.lnew-features__unify li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--lnf-body);
  padding: 6px 11px; border-radius: var(--lnf-radius-pill);
  background: var(--lnf-surface); border: 1px solid var(--lnf-line);
}
.lnew-features__unify svg { width: 14px; height: 14px; color: var(--lnf-green-ink); }

/* ---- body: focal spotlight + the 3x3 constellation ---- */
.lnew-features__body {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 2fr);
  gap: var(--lnf-caps-gap);
  align-items: stretch;                   /* spotlight stretches to grid height */
}
.lnew-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--lnf-caps-gap);
}

/* =====================================================================
   Capability chips — raised, token-filled, persistent benefit
   NOTE: no overflow:hidden — the hover popover lifts out of the card.
   ===================================================================== */
.lnew-features__cap {
  position: relative;
  min-height: var(--lnf-cap-min-h); padding: 16px 16px 15px;
  display: flex; flex-direction: column;
  border-radius: 15px 15px 15px 4px;      /* echo the house facet */
  background: var(--lnf-surface);         /* .gborder owns the hairline */
  box-shadow: inset 0 1px 0 var(--lnf-glass-hi), var(--lnf-shadow-sm);
  cursor: pointer;                        /* it is a role="button" disclosure */
  transition: transform .34s var(--lnf-ease), box-shadow .34s var(--lnf-ease), background .34s var(--lnf-ease);
}
/* One of the three island micro-tunes the reference keeps mode-aware: on a
   light page the inset highlight is dropped so the raised chips separate
   cleanly. --lnf-shadow-sm itself stays the DARK literal (the island locks
   it), exactly as `[data-mode="light"] .pcap` resolves in the reference. */
[data-mode="light"] .lnew-features__cap { box-shadow: var(--lnf-shadow-sm); }

.lnew-features__cap-ic {
  display: grid; place-items: center;
  width: var(--lnf-cap-ic-size); height: var(--lnf-cap-ic-size);
  border-radius: 11px 11px 11px 3px;
  background: var(--lnf-surface); color: var(--lnf-muted); border: 1px solid var(--lnf-line);
  transition: background .34s var(--lnf-ease), color .34s var(--lnf-ease), border-color .34s var(--lnf-ease), transform .34s var(--lnf-ease);
}
.lnew-features__cap-ic svg { width: 21px; height: 21px; }
/* Elementor's icon control may emit a webfont <i> or an inline SVG wrapper */
.lnew-features__cap-ic i { font-size: 21px; line-height: 1; font-style: normal; }
.lnew-features__cap-ic svg[class] { width: 21px; height: 21px; }

.lnew-features__cap-num {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--lnf-font-head); font-weight: 800; font-size: 12px;
  letter-spacing: .04em; color: var(--lnf-accent-soft-ink); opacity: .42;
  transition: opacity .34s var(--lnf-ease);
}
.lnew-features__cap-title {
  margin-top: 13px;
  font-family: var(--lnf-font-head); font-weight: 500; font-size: 14.5px;
  line-height: 1.22; letter-spacing: var(--lnf-head-tracking); color: var(--lnf-ink);
  min-height: calc(1.22em * 2);           /* reserve 2 lines so benefits align across a row */
}
.lnew-features__cap-benefit {
  margin-top: 4px;
  font-size: 12px; line-height: 1.4; color: var(--lnf-muted);
}

/* gentle, single-element hover — no sequence, no scroll-jack */
.lnew-features__cap:hover, .lnew-features__cap:focus-within {
  transform: translateY(-4px);
  background: var(--lnf-accent-soft-bg);
  box-shadow: inset 0 1px 0 var(--lnf-glass-hi), var(--lnf-shadow-md);
  z-index: 20;                            /* lift the card + its popover above neighbours */
}
[data-mode="light"] .lnew-features__cap:hover,
[data-mode="light"] .lnew-features__cap:focus-within { box-shadow: var(--lnf-shadow-md); }

.lnew-features__cap:hover .lnew-features__cap-ic,
.lnew-features__cap:focus-within .lnew-features__cap-ic {
  background: var(--lnf-accent); color: var(--lnf-accent-ink); border-color: transparent;
  transform: translateY(-2px) rotate(-3deg);
}
.lnew-features__cap:hover .lnew-features__cap-num,
.lnew-features__cap:focus-within .lnew-features__cap-num { opacity: 1; }

/* =====================================================================
   POPOVER: the full description, attached just below the chip.
   It is a DESCENDANT of the chip, so a mouse hover over it keeps the chip
   :hover alive; a 2px overlap removes the hover gap between the two. The chip
   itself is a focusable disclosure (role=button + aria-expanded) and
   lnew-features.js toggles .is-open on click/tap/Enter/Space — so the
   description is reachable on touch and by keyboard, not hover-only.
   Escape / outside-click close it.
   ===================================================================== */
.lnew-features__cap-pop {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 2px);
  padding: 15px 16px 16px;
  border-radius: 16px;
  background: var(--lnf-glass-bg);
  -webkit-backdrop-filter: var(--lnf-glass-blur); backdrop-filter: var(--lnf-glass-blur);
  border: 1px solid var(--lnf-accent-soft-border);
  box-shadow: inset 0 1px 0 var(--lnf-glass-hi), var(--lnf-shadow-lg), 0 0 0 4px var(--lnf-accent-soft-bg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--lnf-ease), transform .2s var(--lnf-ease), visibility .2s;
  pointer-events: none;
}
.lnew-features__cap-pop-desc { font-size: 13px; line-height: 1.55; color: var(--lnf-body); padding-right: 14px; }
.lnew-features__cap-pop-x {
  position: absolute; top: 9px; right: 9px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 8px; color: var(--lnf-muted); background: transparent; border: 0; cursor: pointer;
  transition: color .18s, background .18s;
}
.lnew-features__cap-pop-x svg { width: 14px; height: 14px; }
.lnew-features__cap-pop-x:hover, .lnew-features__cap-pop-x:focus-visible { color: var(--lnf-ink); background: var(--lnf-bg-soft); }

/* Open on click / tap / keyboard (.is-open, driven by lnew-features.js) OR
   mouse hover. Deliberately NOT :focus-within — merely tabbing to a chip
   should not expand it; Enter/Space does, keeping the visual state and
   aria-expanded in sync. */
.lnew-features__cap.is-open .lnew-features__cap-pop,
.lnew-features__cap:hover .lnew-features__cap-pop {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.lnew-features__cap:focus-visible { outline: 2px solid var(--lnf-accent); outline-offset: 3px; }

/* Bottom row (last three) on the 3-col grid opens UPWARD so it never spills
   over the "replaces your…" line. Applies from 681px — i.e. wherever the grid
   is still 3 columns (incl. tablets), not just >=1041px. */
@media (min-width: 681px) {
  .lnew-features__grid .lnew-features__cap:nth-last-child(-n+3) .lnew-features__cap-pop { top: auto; bottom: calc(100% - 2px); transform: translateY(-6px); }
  .lnew-features__grid .lnew-features__cap:nth-last-child(-n+3).is-open .lnew-features__cap-pop,
  .lnew-features__grid .lnew-features__cap:nth-last-child(-n+3):hover .lnew-features__cap-pop { transform: none; }
}

/* =====================================================================
   SPOTLIGHT (featured — unified-channel web)
   ===================================================================== */
.lnew-features__hero {
  position: relative; overflow: hidden;
  --lnf-gborder-op: .92; --lnf-gborder-w: 1.4px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 100%; padding: 22px;
  border-radius: 18px 18px 18px 5px;
  background:
    radial-gradient(122% 120% at 16% 0%, var(--lnf-accent-soft-bg), transparent 58%),
    var(--lnf-surface);
  box-shadow: inset 0 1px 0 var(--lnf-glass-hi), var(--lnf-shadow-md);
}
.lnew-features__glow {
  position: absolute; z-index: 0; top: -28%; right: -14%; width: 76%; height: 80%;
  background: radial-gradient(circle, var(--lnf-accent-halo), transparent 66%);
  filter: blur(10px); opacity: .85; pointer-events: none;
}
.lnew-features__badge {
  position: absolute; z-index: 4; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--lnf-font-head); font-size: 10.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--lnf-accent-soft-ink);
  padding: 5px 11px; border-radius: var(--lnf-radius-pill);
  background: var(--lnf-glass-bg);
  -webkit-backdrop-filter: var(--lnf-glass-blur); backdrop-filter: var(--lnf-glass-blur);
  border: 1px solid var(--lnf-accent-soft-border);
  box-shadow: inset 0 1px 0 var(--lnf-glass-hi);
}
.lnew-features__badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--lnf-accent); box-shadow: 0 0 0 3px var(--lnf-accent-halo); font-style: normal; }

/* ---- the web canvas — hub centred, channels on a hexagon around it ---- */
.lnew-features__web { position: relative; z-index: 1; flex: 1 1 auto; min-height: var(--lnf-web-min-h); margin-top: 30px; }
.lnew-features__weblines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lnew-features__wl-ring { fill: none; stroke: var(--lnf-accent); opacity: .16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lnew-features__wl-spokes line {
  stroke: var(--lnf-accent); opacity: .4; stroke-width: 1.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 3 5;
  animation: lnf-web-flow 2.8s linear infinite;
}
.lnew-features__wl-spokes line:nth-child(2) { animation-duration: 3.4s; }
.lnew-features__wl-spokes line:nth-child(3) { animation-duration: 2.4s; }
.lnew-features__wl-spokes line:nth-child(4) { animation-duration: 3.8s; }
.lnew-features__wl-spokes line:nth-child(5) { animation-duration: 2.9s; }
.lnew-features__wl-spokes line:nth-child(6) { animation-duration: 3.2s; }
@keyframes lnf-web-flow { to { stroke-dashoffset: -16; } }   /* pulses flow inward, to the hub */

/* central AI hub */
.lnew-features__chub {
  position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%);
  z-index: 3; display: grid; place-items: center;
  width: var(--lnf-chub-size); height: var(--lnf-chub-size);
  border-radius: 18px 18px 18px 6px;
  color: var(--lnf-accent-ink); background: var(--lnf-accent-grad);
  box-shadow: var(--lnf-shadow-accent), 0 0 0 6px var(--lnf-accent-soft-bg);
  /* the hub itself breathes light, like it's live */
  animation: lnf-chub-glow 3.4s ease-in-out infinite;
}
@keyframes lnf-chub-glow {
  0%, 100% { box-shadow: var(--lnf-shadow-accent), 0 0 0 6px var(--lnf-accent-soft-bg), 0 0 46px 10px var(--lnf-accent-halo); }
  50%      { box-shadow: var(--lnf-shadow-accent), 0 0 0 6px var(--lnf-accent-soft-bg), 0 0 85px 26px var(--lnf-accent-halo); }
}
.lnew-features__chub::before {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; z-index: -1;
  border: 1.5px solid var(--lnf-accent-soft-border);
  animation: lnf-hub-pulse 2.8s var(--lnf-ease) infinite;
}
.lnew-features__chub svg { width: 30px; height: 30px; }
@keyframes lnf-hub-pulse {
  0%   { transform: scale(1);    opacity: .9; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* channel bubbles — brand-coloured squircles with a white glyph */
.lnew-features__chan {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 2; display: grid; place-items: center;
  width: var(--lnf-chan-size); height: var(--lnf-chan-size);
  border-radius: 14px 14px 14px 5px; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(20,20,55,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.lnew-features__chan svg { width: 24px; height: 24px; }
.lnew-features__chan--wa { background: #25d366; }
.lnew-features__chan--ms { background: linear-gradient(145deg, #0a86ff, #a21fe0); }
.lnew-features__chan--ig { background: linear-gradient(135deg, #f9ce34 5%, #ee2a7b 55%, #6228d7 95%); }
.lnew-features__chan--tg { background: #29a9ea; }
.lnew-features__chan--em { background: #ea4335; }
.lnew-features__chan--ph { background: #f59e0b; }

.lnew-features__hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lnew-features__hero-num {
  font-family: var(--lnf-font-head); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--lnf-accent-soft-ink); opacity: .75;
}
.lnew-features__hero-title {
  font-family: var(--lnf-font-head); font-weight: 500;
  font-size: var(--lnf-hero-title-size); line-height: 1.14;
  letter-spacing: var(--lnf-head-tracking); color: var(--lnf-ink);
}
.lnew-features__hero-lead { font-size: 14px; line-height: 1.5; color: var(--lnf-body); max-width: 36ch; }
.lnew-features__hero-lead .lnew-features__title-accent { font-weight: 600; }
.lnew-features__status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  font-size: 12px; color: var(--lnf-muted-2);
}
.lnew-features__status i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lnf-green);
  box-shadow: 0 0 0 3px var(--lnf-green-soft-bg); font-style: normal;
  animation: lnf-status-pulse 2.6s var(--lnf-ease) infinite;
}
@keyframes lnf-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--lnf-green-soft-bg); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* =====================================================================
   The point tools it replaces, stated once
   ===================================================================== */
.lnew-features__replaces {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--lnf-line-2);
  font-size: 12.5px; color: var(--lnf-muted-2);
}
.lnew-features__replaces s { color: var(--lnf-muted-2); text-decoration-color: var(--lnf-accent); text-decoration-thickness: 1.5px; }
.lnew-features__replaces svg { width: 15px; height: 15px; color: var(--lnf-accent); margin: 0 2px; }
.lnew-features__replaces b { color: var(--lnf-ink); font-weight: 600; }

/* =====================================================================
   CTA row
   ===================================================================== */
.lnew-features__cta { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lnew-features__note { font-size: 13.5px; color: var(--lnf-muted-2); }
.lnew-features__note b { font-family: var(--lnf-font-head); font-weight: 600; color: var(--lnf-accent-soft-ink); }

/* ---- button (ported from components/buttons.css) ---- */
.lnew-features__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--lnf-font-sans);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 13px 22px; border-radius: var(--lnf-btn-radius);
  transition: transform .22s var(--lnf-ease), box-shadow .3s var(--lnf-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
  white-space: nowrap;
  /* isolation + overflow contain the shimmer sweep. See the stacking note below. */
  position: relative; overflow: hidden; isolation: isolate;
}
.lnew-features__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnf-ease); }
.lnew-features__btn:hover svg { transform: translateX(4px); }
/* keep label + icon above the sweep */
.lnew-features__btn > * { position: relative; z-index: 2; }

/* The aurora theme adds a pill GLOW to primary buttons on hover (its
   overrides.css `.btn--primary` pair). It is a box-shadow, NOT a blurred
   ::after with z-index:-1 — :hover applies translateY, which creates a
   stacking context where a negative-z pseudo paints ABOVE the background.
   box-shadow also isn't clipped by the button's overflow:hidden. */
.lnew-features__btn--primary {
  background: var(--lnf-accent-grad); color: var(--lnf-accent-ink);
  box-shadow: var(--lnf-shadow-accent), 0 0 0 0 rgba(139,124,255,0); border: none;
  background-size: 130% 70%; background-position: 0% 50%;
  animation: lnf-gradient-loop 7s ease-in-out infinite;
}
.lnew-features__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--lnf-shadow-accent-hover), 0 0 34px 3px rgba(139,124,255,.45);
}
@keyframes lnf-gradient-loop {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* "melt" shimmer sweep, fires once per hover.
   STACKING NOTE: :hover applies a transform, which creates a stacking context.
   Inside it, a z-index:-1 pseudo would paint ABOVE the element's background —
   a hover-only flicker that is miserable to debug. Hence isolation:isolate on
   the button plus a POSITIVE z-index here. Do not "simplify" to negative. */
.lnew-features__btn--primary::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(100deg, transparent, var(--lnf-btn-shimmer), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.lnew-features__btn--primary:hover::before { opacity: 1; animation: lnf-btn-melt .85s var(--lnf-ease); }
@keyframes lnf-btn-melt { from { left: -45%; } to { left: 120%; } }

.lnew-features__btn--ghost { background: var(--lnf-surface); color: var(--lnf-ink); border: 1px solid var(--lnf-line); box-shadow: var(--lnf-shadow-sm); }
.lnew-features__btn--ghost:hover { transform: translateY(-2px); border-color: var(--lnf-accent); box-shadow: var(--lnf-shadow-md); }

.lnew-features__btn--lg { padding: 16px 28px; font-size: 16.5px; border-radius: calc(var(--lnf-btn-radius) + 1px); }

/* =====================================================================
   Scroll reveal — --i is assigned by lnew-features.js (index within parent)
   ===================================================================== */
.lnew-features .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnf-rv-dist), 0);
  transition: opacity var(--lnf-rv-dur) var(--lnf-ease),
              transform var(--lnf-rv-dur) var(--lnf-ease);
  transition-delay: calc(var(--i, 0) * var(--lnf-rv-step));
}
.lnew-features .lnew-reveal--fade { transform: none; }
.lnew-features .lnew-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .lnew-features .lnew-reveal { opacity: 1; transform: none; }

/* =====================================================================
   Responsive
   ===================================================================== */
/* Breakpoint overrides drive the CUSTOM PROPERTIES rather than the properties
   themselves, so a per-device Style-tab control (which Elementor emits in a
   later stylesheet, at its own breakpoints) still wins instead of being
   clobbered here at the same specificity. */
/* ---------------------------------------------------------------------------
   THE DISCLOSURE BREAKPOINT — the one deliberate divergence from the template.

   The reference keeps the hover/tap popover all the way down to a 1-column
   phone grid, where it lifts out of its chip and covers the two cards below
   it. Below this width the popover is not rendered at all; the chips keep
   their title + benefit and simply stop being interactive.

   `display: none` (not opacity/visibility) so neither `.is-open` nor `:hover`
   can bring it back, and so a chip that was left open before a resize cannot
   linger. --lnf-pop:0 is the machine-readable half of the same decision:
   lnew-features.js reads it and strips role/tabindex/aria-* so a chip that
   does nothing is not announced as a button. CHANGE THE WIDTH HERE ONLY —
   the JS follows automatically.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .lnew-features { --lnf-pop: 0; }
  .lnew-features__cap-pop { display: none; }
  .lnew-features__cap { cursor: default; }
}

@media (max-width: 1040px) {
  .lnew-features {
    --lnf-gutter: 24px;
    --lnf-web-min-h: 280px;
    padding-top: 84px; padding-bottom: 84px;
  }
  .lnew-features__head { margin-bottom: 44px; }
  .lnew-features__body { grid-template-columns: 1fr; }   /* hero stacks above the grid */
  .lnew-features__hero { min-height: 0; }
}
@media (max-width: 760px) {
  .lnew-features { --lnf-gutter: 20px; padding-top: 64px; padding-bottom: 64px; }
  .lnew-features__head { margin-bottom: 34px; }
  .lnew-features__lead { font-size: 16.5px; }
}
@media (max-width: 680px) {
  .lnew-features { --lnf-cap-min-h: 120px; }
  .lnew-features__grid { grid-template-columns: repeat(2, 1fr); }
  .lnew-features__bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .lnew-features { --lnf-gutter: 16px; padding-top: 54px; padding-bottom: 54px; }
  .lnew-features__head { margin-bottom: 28px; }
  .lnew-features__btn--lg { padding: 14px 20px; font-size: 15.5px; }
}
@media (max-width: 440px) {
  .lnew-features { --lnf-cap-min-h: 0px; --lnf-web-min-h: 250px; }
  .lnew-features__grid { grid-template-columns: 1fr; }
  .lnew-features__cap-title { min-height: 0; }          /* single column: no cross-row alignment to hold */
}

/* Coarse-pointer: disable hover lifts that feel wrong on touch */
@media (hover: none) {
  .lnew-features__cap:hover { transform: none; }
}

/* =====================================================================
   Reduced motion: kill lift + pulses, keep legibility
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lnew-features .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-features__cap, .lnew-features__cap-ic, .lnew-features__cap-num,
  .lnew-features__hero, .lnew-features__badge, .lnew-features__cap-pop { transition: none !important; }
  .lnew-features__cap:hover, .lnew-features__cap:focus-within { transform: none; }
  .lnew-features__cap:hover .lnew-features__cap-ic,
  .lnew-features__cap:focus-within .lnew-features__cap-ic { transform: none; }
  .lnew-features__status i, .lnew-features__wl-spokes line,
  .lnew-features__chub, .lnew-features__chub::before { animation: none !important; }
  .lnew-features__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-features__btn--primary { animation: none !important; }
  .lnew-features__btn--primary::before { animation: none !important; display: none; }
  .lnew-features__btn svg { transition: none !important; }
  .lnew-features__gborder::before { transition: none !important; }
}