/* =====================================================================
   LeadsNimble Capability Deep Dive — the body of the /features/ page.

   The homepage already SHOWS the ten capabilities: lnew_features paints them
   as a locked dark plane of chips, one line of benefit each, because on a
   landing page the job is "there are ten of these and they are one product".
   This widget is the other half of that promise — the same ten, one block
   each, with the concrete sub-features spelled out and a purpose-built
   vignette of what the screen actually looks like.

   THE TWO MUST NOT LOOK ALIKE. lnew_features is one bounded dark island of
   small chips; this is a column of light cards, each with its own dark art
   slab. Same palette, same type, different object.

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

     .lnew-feat-deep        → LIGHT default + [data-mode="dark"] flip
                              (section, head, rail, card shells)
     .lnew-feat-deep__scr   → a LOCKED DARK island. The vignettes are product
                              art: they are a picture of the app, and the app
                              is dark. Flipping them with the page would make
                              the "screens" white-on-white in light mode, the
                              exact bug lnew-industries.css documents for its
                              card slab. So __scr redeclares every colour it
                              uses and gets its OWN control group
                              (art_palette_section(), selector
                              {{WRAPPER}} .lnew-feat-deep__scr) — the light
                              and dark groups are silently DEAD inside it,
                              because a custom property declared on a
                              DESCENDANT always wins for that subtree
                              regardless of the selector's specificity.
   ---------------------------------------------------------------------------

   The vignettes are pure CSS + inline SVG on the design system's 24-unit icon
   grid — no images, so they cost nothing, scale to any width and recolour
   from tokens. Every one of them animates on an infinite loop, and every one
   of those loops is switched off under prefers-reduced-motion at the foot of
   this file. If you add an eleventh, add its keyframes to that block too.

   THE SECTION GRADIENT CHAIN. This sits on the flat #f0f4fb that
   lnew-feat-hero.css's gradient lands on, so hero and deep dive meet with no
   seam. lnew-feat-grid.css then ramps #f0f4fb -> #dde2f4 to land on the FAQ.

   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-deep, .lnew-feat-deep *, .lnew-feat-deep *::before, .lnew-feat-deep *::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-feat-deep [hidden] { display: none !important; }

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

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

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

  --lnfd-rail-w: 236px;
  --lnfd-rail-gap: 52px;
  /* clears the sticky site header (64px scrolled) plus breathing room */
  --lnfd-rail-top: 96px;
  --lnfd-anchor-top: 92px;

  --lnfd-card-gap: 28px;
  --lnfd-card-pad: 30px;
  --lnfd-card-radius: 26px;
  --lnfd-card-cols: minmax(0, 1.02fr) minmax(0, 0.98fr);
  --lnfd-card-inner-gap: 34px;

  --lnfd-ic: 46px;
  --lnfd-ic-radius: 14px;
  --lnfd-cap-title-size: 25px;
  --lnfd-cap-desc-size: 15.5px;
  --lnfd-point-size: 14px;

  --lnfd-scr-radius: 18px;
  --lnfd-scr-minh: 288px;

  /* ---- type ---- */
  --lnfd-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnfd-font-head: 'Parkinsans', 'DM Sans', sans-serif;
  --lnfd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

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

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

  --lnfd-green-ink: #0a8a5f;
  --lnfd-green-soft-bg: #e7f9f1;

  --lnfd-rail-ink: #6b7089;
  --lnfd-rail-active-ink: #12122a;
  --lnfd-rail-active-bg: #ffffff;
  --lnfd-rail-track: #e2e7f4;

  /* the four capability hues — mode-INDEPENDENT literals, the same indigo /
     teal / rose / amber ramp the hero's spec panel and the pricing pills
     carry, cycling every four blocks */
  --lnfd-hue-1-bg: #e7e4fb; --lnfd-hue-1-ink: #6a4ff0;
  --lnfd-hue-2-bg: #d8f0f3; --lnfd-hue-2-ink: #0e97a8;
  --lnfd-hue-3-bg: #fde2e7; --lnfd-hue-3-ink: #e5486d;
  --lnfd-hue-4-bg: #fceed4; --lnfd-hue-4-ink: #cf7d13;

  --lnfd-sh-sm-1: rgba(30,30,80,.05);
  --lnfd-sh-sm-2: rgba(30,30,80,.05);
  --lnfd-sh-md: rgba(30,30,80,.10);
  --lnfd-shadow-sm: 0 1px 2px var(--lnfd-sh-sm-1), 0 2px 6px var(--lnfd-sh-sm-2);
  --lnfd-shadow-md: 0 12px 34px var(--lnfd-sh-md);

  position: relative;
  overflow-x: clip;
  padding-block: var(--lnfd-pad-y);
  background: var(--lnfd-bg);
  font-family: var(--lnfd-font-sans);
  color: var(--lnfd-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-deep {
  --lnfd-bg: #0a0a12;
  --lnfd-ink: #f5f6ff;
  --lnfd-body: #b8bed6;
  --lnfd-muted: #949bbb;
  --lnfd-muted-2: #6d7398;
  --lnfd-line: rgba(255,255,255,.10);
  --lnfd-line-2: rgba(255,255,255,.06);
  --lnfd-surface: rgba(255,255,255,.035);
  --lnfd-inset: rgba(255,255,255,.04);

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

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

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

  --lnfd-rail-ink: #949bbb;
  --lnfd-rail-active-ink: #ffffff;
  --lnfd-rail-active-bg: rgba(255,255,255,.06);
  --lnfd-rail-track: rgba(255,255,255,.10);

  --lnfd-sh-sm-1: rgba(0,0,0,.4);
  --lnfd-sh-sm-2: transparent;
  --lnfd-sh-md: rgba(0,0,0,.5);
  --lnfd-shadow-sm: 0 1px 2px var(--lnfd-sh-sm-1);
  --lnfd-shadow-md: 0 12px 34px var(--lnfd-sh-md);
}

/* =====================================================================
   Shell + section head
   ===================================================================== */
.lnew-feat-deep__wrap {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--lnfd-maxw);
  margin-inline: auto;
  padding-inline: var(--lnfd-gutter);
}

.lnew-feat-deep__head {
  max-width: var(--lnfd-head-maxw);
  margin-inline: auto;
  text-align: center;
  margin-bottom: 56px;
}
.lnew-feat-deep__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnfd-eyebrow-ink);
  background: var(--lnfd-eyebrow-bg);
  border: 1px solid var(--lnfd-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-feat-deep__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnfd-accent);
  box-shadow: 0 0 0 4px var(--lnfd-accent-halo);
  opacity: .45;
  animation: lnfd-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnfd-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnfd-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnfd-accent-halo), 0 0 7px 1px var(--lnfd-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnfd-accent-halo), 0 0 7px 1px var(--lnfd-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnfd-accent-halo), 0 0 0 0 transparent; }
}
.lnew-feat-deep__title {
  font-family: var(--lnfd-font-head);
  font-weight: 500;
  font-size: var(--lnfd-title-size);
  margin-top: 18px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lnfd-ink);
  text-wrap: balance;
}
.lnew-feat-deep__title-accent {
  background: var(--lnfd-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lnew-feat-deep__lead {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--lnfd-muted);
  text-wrap: balance;
}

/* =====================================================================
   Body — sticky index rail beside the column of capability cards
   ===================================================================== */
.lnew-feat-deep__body {
  display: grid;
  grid-template-columns: var(--lnfd-rail-w) minmax(0, 1fr);
  gap: var(--lnfd-rail-gap);
  align-items: start;
}
/* Rail switched off in the widget's settings. A media query cannot know about
   a setting, so the collapse is a modifier the renderer puts on the element
   that owns the grid — otherwise the first column stays a 236px hole. */
.lnew-feat-deep__body--norail { grid-template-columns: minmax(0, 1fr); }

.lnew-feat-deep__rail {
  position: sticky; top: var(--lnfd-rail-top);
  /* the rail is a nav, not a card: no fill, no border. It reads as marginalia
     beside the cards, which is what keeps the eye on the cards. */
}
.lnew-feat-deep__rail-l {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lnfd-muted-2);
  padding-left: 14px;
  margin-bottom: 12px;
}
.lnew-feat-deep__rail-list {
  position: relative;
  /* the track the active marker slides along */
  border-left: 2px solid var(--lnfd-rail-track);
}
.lnew-feat-deep__rail-item {
  position: relative;
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 12px 9px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px; font-weight: 600;
  line-height: 1.35;
  color: var(--lnfd-rail-ink);
  border-radius: 0 9px 9px 0;
  transition: color .25s var(--lnfd-ease), background .25s var(--lnfd-ease), border-color .25s var(--lnfd-ease);
}
.lnew-feat-deep__rail-n {
  font-family: var(--lnfd-font-head);
  font-size: 11px; font-weight: 800;
  letter-spacing: .04em;
  color: var(--lnfd-muted-2);
  transition: color .25s var(--lnfd-ease);
}
.lnew-feat-deep__rail-item:hover { color: var(--lnfd-ink); background: var(--lnfd-rail-active-bg); }
.lnew-feat-deep__rail-item:focus-visible { outline: 2px solid var(--lnfd-accent); outline-offset: 2px; }
/* is-active is written by the scroll-spy in lnew-feat-deep.js */
.lnew-feat-deep__rail-item.is-active {
  color: var(--lnfd-rail-active-ink);
  background: var(--lnfd-rail-active-bg);
  border-left-color: var(--lnfd-accent);
  box-shadow: var(--lnfd-shadow-sm);
}
.lnew-feat-deep__rail-item.is-active .lnew-feat-deep__rail-n { color: var(--lnfd-accent); }

.lnew-feat-deep__list {
  display: flex; flex-direction: column;
  gap: var(--lnfd-card-gap);
  min-width: 0;
}

/* =====================================================================
   One capability
   ===================================================================== */
.lnew-feat-deep__cap {
  scroll-margin-top: var(--lnfd-anchor-top);
  display: grid;
  grid-template-columns: var(--lnfd-card-cols);
  gap: var(--lnfd-card-inner-gap);
  align-items: center;
  padding: var(--lnfd-card-pad);
  border-radius: var(--lnfd-card-radius);
  background: var(--lnfd-surface);
  border: 1px solid var(--lnfd-line);
  box-shadow: var(--lnfd-shadow-sm);
  transition: box-shadow .4s var(--lnfd-ease), border-color .4s var(--lnfd-ease), transform .4s var(--lnfd-ease);
}
.lnew-feat-deep__cap:hover {
  border-color: var(--lnfd-accent-soft-bg);
  box-shadow: var(--lnfd-shadow-md);
}
/* Alternating rhythm. `direction` is NOT used — it would also flip the text
   inside. The art is placed into column 1 and the text into column 2 by
   grid-column, which reorders the boxes and leaves their contents alone. */
.lnew-feat-deep__cap:nth-child(even) .lnew-feat-deep__cap-art  { grid-column: 1; grid-row: 1; }
.lnew-feat-deep__cap:nth-child(even) .lnew-feat-deep__cap-text { grid-column: 2; grid-row: 1; }

.lnew-feat-deep__cap-text { min-width: 0; }

.lnew-feat-deep__cap-head { display: flex; align-items: center; gap: 13px; }
.lnew-feat-deep__cap-ic {
  flex: none;
  width: var(--lnfd-ic); height: var(--lnfd-ic);
  border-radius: var(--lnfd-ic-radius);
  display: grid; place-items: center;
  /* hue four is the FALLBACK so an eleventh block keeps a tint */
  background: var(--lnfd-hue-4-bg); color: var(--lnfd-hue-4-ink);
  transition: transform .35s var(--lnfd-ease);
}
.lnew-feat-deep__cap:nth-child(4n+1) .lnew-feat-deep__cap-ic { background: var(--lnfd-hue-1-bg); color: var(--lnfd-hue-1-ink); }
.lnew-feat-deep__cap:nth-child(4n+2) .lnew-feat-deep__cap-ic { background: var(--lnfd-hue-2-bg); color: var(--lnfd-hue-2-ink); }
.lnew-feat-deep__cap:nth-child(4n+3) .lnew-feat-deep__cap-ic { background: var(--lnfd-hue-3-bg); color: var(--lnfd-hue-3-ink); }
.lnew-feat-deep__cap:hover .lnew-feat-deep__cap-ic { transform: translateY(-2px) rotate(-5deg); }
.lnew-feat-deep__cap-ic svg { width: 22px; height: 22px; }

.lnew-feat-deep__cap-meta { display: flex; flex-direction: column; min-width: 0; }
.lnew-feat-deep__cap-n {
  font-family: var(--lnfd-font-head);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em;
  color: var(--lnfd-muted-2);
}
.lnew-feat-deep__cap-b {
  font-size: 13.5px; font-weight: 600;
  line-height: 1.35;
  margin-top: 2px;
  color: var(--lnfd-accent-soft-ink);
}

.lnew-feat-deep__cap-title {
  font-family: var(--lnfd-font-head);
  font-weight: 500;
  font-size: var(--lnfd-cap-title-size);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lnfd-ink);
  margin-top: 16px;
}
.lnew-feat-deep__cap-desc {
  margin-top: 11px;
  font-size: var(--lnfd-cap-desc-size);
  line-height: 1.62;
  color: var(--lnfd-muted);
}

.lnew-feat-deep__cap-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
  margin-top: 20px;
}
.lnew-feat-deep__cap-point {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--lnfd-point-size);
  line-height: 1.45;
  color: var(--lnfd-body);
}
.lnew-feat-deep__cap-point svg {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  padding: 3px;
  border-radius: 50%;
  background: var(--lnfd-green-soft-bg);
  color: var(--lnfd-green-ink);
}

.lnew-feat-deep__cap-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 20px;
  font-size: 14px; font-weight: 600;
  color: var(--lnfd-accent);
  transition: gap .3s var(--lnfd-ease);
}
.lnew-feat-deep__cap-link svg { width: 14px; height: 14px; }
.lnew-feat-deep__cap-link:hover { gap: 12px; }
.lnew-feat-deep__cap-link:focus-visible { outline: 2px solid var(--lnfd-accent); outline-offset: 3px; border-radius: 4px; }

/* =====================================================================
   The vignettes — a LOCKED DARK island (see the header note).

   Everything from here to the responsive block redeclares its own colours
   under --lnfd-scr-*. The section's light/dark tokens are deliberately not
   referenced: this is a picture of the product, and the product is dark.
   ===================================================================== */
.lnew-feat-deep__cap-art { min-width: 0; }

.lnew-feat-deep__scr {
  --lnfd-scr-bg-1: #18142f;
  --lnfd-scr-bg-2: #0b0917;
  --lnfd-scr-panel: rgba(255,255,255,.045);
  --lnfd-scr-panel-2: rgba(255,255,255,.075);
  --lnfd-scr-line: rgba(255,255,255,.10);
  --lnfd-scr-ink: #f5f6ff;
  --lnfd-scr-body: #c4cae2;
  --lnfd-scr-muted: #8b93b8;
  --lnfd-scr-bar: rgba(255,255,255,.16);
  --lnfd-scr-bar-2: rgba(255,255,255,.09);
  --lnfd-scr-accent: #8b7cff;
  --lnfd-scr-accent-2: #22d3ee;
  --lnfd-scr-green: #34d399;
  --lnfd-scr-amber: #fbbf24;
  --lnfd-scr-rose: #fb7185;
  --lnfd-scr-glow: rgba(139,124,255,.32);
  --lnfd-scr-dash: rgba(255,255,255,.16);
  /* the channel marks, at their own brand colours — these are the only
     literals in the file that are not part of the aurora ramp, and they are
     literal on purpose: a WhatsApp green that is not WhatsApp green reads as
     a bug to anyone who uses the app */
  --lnfd-ch-wa: #25d366;
  --lnfd-ch-ig: #e1306c;
  --lnfd-ch-fb: #1877f2;
  --lnfd-ch-em: #8b7cff;
  --lnfd-ch-sms: #22d3ee;
  --lnfd-ch-web: #fbbf24;

  position: relative;
  min-height: var(--lnfd-scr-minh);
  padding: 20px;
  border-radius: var(--lnfd-scr-radius);
  background: radial-gradient(120% 120% at 50% -10%, var(--lnfd-scr-bg-1) 0%, var(--lnfd-scr-bg-2) 60%);
  border: 1px solid var(--lnfd-scr-line);
  overflow: hidden;
  color: var(--lnfd-scr-body);
  font-size: 12px;
  display: flex;
}
/* one soft bloom, shared by every vignette, so the ten read as one set */
.lnew-feat-deep__scr::before {
  content: ""; position: absolute; z-index: 0;
  width: 62%; aspect-ratio: 1;
  top: -22%; right: -14%;
  border-radius: 50%;
  background: var(--lnfd-scr-glow);
  filter: blur(46px);
  pointer-events: none;
}
.lnew-feat-deep__scr > * { position: relative; z-index: 1; width: 100%; }

/* --- shared atoms ------------------------------------------------------ */
/* a skeleton line. Width comes from --w so the same element can stand in for
   a name, a snippet or a paragraph without a class each. */
.lnew-feat-deep__scr .ln {
  display: block; height: 6px; border-radius: 3px;
  width: var(--w, 100%);
  background: var(--lnfd-scr-bar-2);
}
.lnew-feat-deep__scr .ln--hi { background: var(--lnfd-scr-bar); }
.lnew-feat-deep__scr .pnl {
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
  border-radius: 12px;
}

/* ============ 01 · Unified Inbox ====================================== */
.lnew-feat-deep__scr--inbox > .ib { display: grid; grid-template-columns: 42% 1fr; gap: 12px; }
.ib__list { display: flex; flex-direction: column; gap: 7px; }
.ib__row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 10px;
  background: var(--lnfd-scr-panel);
  border: 1px solid transparent;
}
.ib__row.is-on { background: var(--lnfd-scr-panel-2); border-color: var(--lnfd-scr-line); }
.ib__av {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lnfd-scr-bar);
  position: relative;
}
/* the channel dot rides the avatar's corner, the way every unified inbox
   marks provenance — colour comes from data-ch */
.ib__av::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--lnfd-scr-bg-2);
  background: var(--ch, var(--lnfd-ch-em));
}
/* the thread header's avatar is the same customer, one step smaller — its
   channel dot scales with it or it swamps the 18px circle */
.ib__av--sm { width: 18px; height: 18px; }
.ib__av--sm::after { width: 7px; height: 7px; right: -1px; bottom: -1px; }
.ib__av[data-ch="wa"]  { --ch: var(--lnfd-ch-wa); }
.ib__av[data-ch="ig"]  { --ch: var(--lnfd-ch-ig); }
.ib__av[data-ch="fb"]  { --ch: var(--lnfd-ch-fb); }
.ib__av[data-ch="sms"] { --ch: var(--lnfd-ch-sms); }
.ib__lines { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.ib__badge {
  flex: none;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 100px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  color: #fff; background: var(--lnfd-scr-accent);
  animation: lnfd-badge-pulse 3.6s ease-in-out infinite;
}
@keyframes lnfd-badge-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(139,124,255,.5); }
  35%           { box-shadow: 0 0 0 5px rgba(139,124,255,0); }
}
.ib__thread { display: flex; flex-direction: column; gap: 8px; }
.ib__hdr {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lnfd-scr-line);
}
/* The bubbles carry a hairline as well as a fill. At the panel fill's 4.5%
   alpha over a near-black slab, a bubble on its own is a 3% contrast step —
   it reads as a floating grey bar rather than a message. The border is what
   makes it a bubble. */
.ib__msg {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 9px; border-radius: 11px;
  max-width: 86%;
  background: var(--lnfd-scr-panel-2);
  border: 1px solid var(--lnfd-scr-line);
}
/* WIDTH, NOT max-width, ON THE ALIGNED-RIGHT BUBBLE.
   An incoming bubble is a stretched flex item, so its .ln lines resolve their
   `width: var(--w)` against the full column. `align-self: flex-end` makes the
   outgoing one shrink-wrap instead — and then the lines are a percentage of a
   box whose size is being derived from those same lines. The circular
   dependency resolves to zero and the bubble collapses to a padding-sized
   pill. A definite width breaks the cycle. */
.ib__msg--out {
  align-self: flex-end;
  width: 72%;
  background: rgba(139,124,255,.26);
  border-color: rgba(139,124,255,.4);
}
.ib__msg--out .ln { background: rgba(255,255,255,.34); }
.ib__msg--in { width: 86%; }

/* the reply bar. Without it the thread column stops two thirds of the way
   down the slab and the vignette reads as a cropped screenshot rather than a
   whole screen. */
.ib__reply {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding: 8px 8px 8px 11px;
  border-radius: 100px;
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
}
.ib__reply .ln { flex: 1 1 auto; }
.ib__send {
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: var(--lnfd-scr-accent);
}
.ib__send svg { width: 12px; height: 12px; }
/* the one moving part: a fourth message lands, on a loop */
.ib__msg--new { animation: lnfd-msg-land 5.4s var(--lnfd-ease) infinite; }
@keyframes lnfd-msg-land {
  0%, 12%   { opacity: 0; transform: translateY(14px); }
  26%, 88%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(14px); }
}

/* ============ 02 · AI Assistant ======================================= */
.lnew-feat-deep__scr--ai > .ai { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ai__orb {
  width: 46px; height: 46px; border-radius: 16px;
  display: grid; place-items: center;
  align-self: center;
  color: #fff;
  background: linear-gradient(135deg, var(--lnfd-scr-accent), var(--lnfd-scr-accent-2));
  box-shadow: 0 0 0 0 var(--lnfd-scr-glow);
  animation: lnfd-orb-breathe 4.2s ease-in-out infinite;
}
.ai__orb svg { width: 22px; height: 22px; }
@keyframes lnfd-orb-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,124,255,.45); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 12px rgba(139,124,255,0); transform: translateY(-3px); }
}
.ai__chat { display: flex; flex-direction: column; gap: 8px; }
.ai__msg {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 10px; border-radius: 12px;
  max-width: 84%;
  background: var(--lnfd-scr-panel-2);
  border: 1px solid var(--lnfd-scr-line);
}
/* definite width, same reason as .ib__msg--out — see the note there */
.ai__msg--in  { width: 82%; }
.ai__msg--bot {
  align-self: flex-end;
  width: 76%;
  background: rgba(139,124,255,.26);
  border-color: rgba(139,124,255,.4);
}
.ai__msg--bot .ln { background: rgba(255,255,255,.34); }
/* the typing bubble is the exception: it shrink-wraps three dots, and there
   is no percentage-width child to trip the circular dependency */
.ai__msg--typing { width: auto; }
.ai__typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.ai__typing b {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.75);
  animation: lnfd-type 1.35s ease-in-out infinite;
}
.ai__typing b:nth-child(2) { animation-delay: .18s; }
.ai__typing b:nth-child(3) { animation-delay: .36s; }
@keyframes lnfd-type {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.ai__tag {
  align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 100px;
  font-size: 11px; font-weight: 700;
  color: var(--lnfd-scr-green);
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.28);
  animation: lnfd-tag-in 5.4s var(--lnfd-ease) infinite;
}
.ai__tag svg { width: 12px; height: 12px; }
@keyframes lnfd-tag-in {
  0%, 40%  { opacity: 0; transform: translateY(9px) scale(.94); }
  55%, 90% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(9px) scale(.94); }
}

/* ============ 03 · Pipeline & Leads =================================== */
.lnew-feat-deep__scr--pipeline > .pl {
  --pl-gap: 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-gap);
  align-content: stretch;
  align-items: stretch;
}
.pl__col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* flex:1 makes the empty stage absorb the slack, so all three columns reach
   the foot of the slab whatever their card count */
.pl__drop {
  flex: 1 1 auto; min-height: 34px;
  border-radius: 9px;
  border: 1px dashed var(--lnfd-scr-line);
}
.pl__ch {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lnfd-scr-muted);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--col, var(--lnfd-scr-line));
}
.pl__col:nth-child(1) .pl__ch { --col: var(--lnfd-scr-accent-2); }
.pl__col:nth-child(2) .pl__ch { --col: var(--lnfd-scr-accent); }
.pl__col:nth-child(3) .pl__ch { --col: var(--lnfd-scr-green); }
.pl__ch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl__ch i { flex: none; font-size: 10px; color: var(--lnfd-scr-body); }
.pl__card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 8px; border-radius: 9px;
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
}
.pl__card .pl__val { font-size: 10.5px; font-weight: 700; color: var(--lnfd-scr-ink); }
/* the deal that moves a stage, on a loop. translateX is a whole column plus
   one gap, which is exactly what a 3-equal-column grid puts between them. */
.pl__card--fly {
  animation: lnfd-deal-move 6.2s var(--lnfd-ease) infinite;
  will-change: transform;
}
@keyframes lnfd-deal-move {
  0%, 18%   { transform: none; box-shadow: none; }
  38%, 62%  { transform: translate(calc(100% + var(--pl-gap)), -6px) rotate(2.5deg); box-shadow: 0 14px 26px rgba(0,0,0,.45); }
  82%, 100% { transform: none; box-shadow: none; }
}

/* ============ 04 · Voice & Calls ====================================== */
.lnew-feat-deep__scr--calls > .cl { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cl__card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px; border-radius: 13px;
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
}
.cl__av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--lnfd-scr-accent), var(--lnfd-scr-accent-2)); }
.cl__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cl__s { font-size: 10.5px; color: var(--lnfd-scr-muted); }
.cl__btn {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: #04130c; background: var(--lnfd-scr-green);
  animation: lnfd-ring 2.6s ease-in-out infinite;
}
.cl__btn svg { width: 15px; height: 15px; }
@keyframes lnfd-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  60%      { box-shadow: 0 0 0 10px rgba(52,211,153,0); }
}
/* the live waveform. 22 bars, each with its own delay from nth-child, so the
   crest travels rather than every bar pumping in unison. */
.cl__wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 46px; }
.cl__wave i {
  flex: 1 1 auto;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--lnfd-scr-accent), var(--lnfd-scr-accent-2));
  /* EACH BAR HAS ITS OWN AMPLITUDE, and the animation only modulates it.
     With one shared height the resting frame is a row of identical blocks —
     which is what a reduced-motion visitor, a background tab and every
     screenshot see. The silhouette has to be a waveform before it moves. */
  height: calc(var(--a, .6) * 100%);
  transform-origin: center;
  transform: scaleY(.72);
  animation: lnfd-wave 1.5s ease-in-out infinite;
}
.cl__wave i:nth-child(8n+1) { --a: .42; }
.cl__wave i:nth-child(8n+2) { --a: .74; }
.cl__wave i:nth-child(8n+3) { --a: 1;   }
.cl__wave i:nth-child(8n+4) { --a: .58; }
.cl__wave i:nth-child(8n+5) { --a: .88; }
.cl__wave i:nth-child(8n+6) { --a: .38; }
.cl__wave i:nth-child(8n+7) { --a: .66; }
.cl__wave i:nth-child(8n)   { --a: .52; }
.cl__wave i:nth-child(3n+2) { animation-duration: 1.15s; }
.cl__wave i:nth-child(3n)   { animation-duration: 1.75s; }
.cl__wave i:nth-child(1)  { animation-delay: 0s; }
.cl__wave i:nth-child(2)  { animation-delay: .07s; }
.cl__wave i:nth-child(3)  { animation-delay: .14s; }
.cl__wave i:nth-child(4)  { animation-delay: .21s; }
.cl__wave i:nth-child(5)  { animation-delay: .28s; }
.cl__wave i:nth-child(6)  { animation-delay: .35s; }
.cl__wave i:nth-child(7)  { animation-delay: .42s; }
.cl__wave i:nth-child(8)  { animation-delay: .49s; }
.cl__wave i:nth-child(9)  { animation-delay: .56s; }
.cl__wave i:nth-child(10) { animation-delay: .63s; }
.cl__wave i:nth-child(11) { animation-delay: .7s; }
.cl__wave i:nth-child(12) { animation-delay: .77s; }
.cl__wave i:nth-child(13) { animation-delay: .84s; }
.cl__wave i:nth-child(14) { animation-delay: .91s; }
.cl__wave i:nth-child(15) { animation-delay: .98s; }
.cl__wave i:nth-child(16) { animation-delay: 1.05s; }
.cl__wave i:nth-child(17) { animation-delay: 1.12s; }
.cl__wave i:nth-child(18) { animation-delay: 1.19s; }
.cl__wave i:nth-child(19) { animation-delay: 1.26s; }
.cl__wave i:nth-child(20) { animation-delay: 1.33s; }
.cl__wave i:nth-child(21) { animation-delay: 1.4s; }
.cl__wave i:nth-child(22) { animation-delay: 1.47s; }
@keyframes lnfd-wave {
  0%, 100% { transform: scaleY(.34); }
  50%      { transform: scaleY(1); }
}
.cl__log { display: flex; flex-direction: column; gap: 6px; }
.cl__lrow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px;
  background: var(--lnfd-scr-panel);
}
.cl__lrow svg { flex: none; width: 13px; height: 13px; color: var(--lnfd-scr-green); }
.cl__lrow.is-out svg { color: var(--lnfd-scr-accent-2); }
.cl__lrow .ln { flex: 0 1 auto; margin-right: auto; }
.cl__lrow b { font-size: 10px; font-weight: 600; color: var(--lnfd-scr-muted); }

/* ============ 05 · Broadcasts ========================================= */
.lnew-feat-deep__scr--broadcast > .bc {
  display: grid; grid-template-columns: minmax(0, 1fr) 74px 40px;
  gap: 8px; align-items: center; align-content: center;
}
.bc__compose {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px; border-radius: 12px;
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
}
.bc__seg {
  align-self: flex-start;
  margin-top: 3px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 100px;
  font-size: 10px; font-weight: 700;
  color: var(--lnfd-scr-accent);
  background: rgba(139,124,255,.16);
  border: 1px solid rgba(139,124,255,.28);
  /* three words on three lines turns the chip into a block; it is a label */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.bc__seg svg { flex: none; width: 11px; height: 11px; }
.bc__count { grid-column: 1; font-size: 10.5px; color: var(--lnfd-scr-muted); }
/* the fan-out. Three arcs drawn once and dashed into motion, rather than three
   animated elements — one path per destination keeps the geometry honest when
   the box changes width (preserveAspectRatio="none" stretches with it). */
.bc__arcs { grid-column: 2; grid-row: 1; width: 100%; height: 108px; }
.bc__arcs path {
  fill: none; stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
/* the route itself — always visible, including under reduced motion, where
   the pulse below it stops moving */
.bc__arcs .bc__base { stroke: var(--lnfd-scr-line); }
.bc__arcs .bc__flow {
  stroke: var(--lnfd-scr-accent);
  stroke-dasharray: 14 90;
  animation: lnfd-arc-flow 2.4s linear infinite;
}
.bc__arcs .bc__flow:nth-of-type(2) { animation-delay: .3s; stroke: var(--lnfd-scr-accent-2); }
.bc__arcs .bc__flow:nth-of-type(3) { animation-delay: .6s; }
@keyframes lnfd-arc-flow { to { stroke-dashoffset: -104; } }
.bc__targets { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 12px; }
.bc__t {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  color: #fff;
  background: var(--ch, var(--lnfd-ch-em));
  animation: lnfd-target-hit 2.4s ease-in-out infinite;
}
.bc__t svg { width: 16px; height: 16px; }
.bc__t[data-ch="wa"]  { --ch: var(--lnfd-ch-wa); }
.bc__t[data-ch="sms"] { --ch: var(--lnfd-ch-sms); animation-delay: .3s; }
.bc__t[data-ch="em"]  { --ch: var(--lnfd-ch-em); animation-delay: .6s; }
@keyframes lnfd-target-hit {
  0%, 55%, 100% { transform: scale(1);    filter: brightness(.82); }
  70%           { transform: scale(1.09); filter: brightness(1.15); }
}

/* ============ 06 · Automation =========================================
   THE WIRES ARE ROWS IN THE FLOW, NOT AN ABSOLUTE OVERLAY. One <svg>
   stretched over the whole slab cannot stay attached to the nodes: where
   they sit depends on their own text height, so a wrapped label slides the
   endpoints off them. Each connector is its own fixed-height row between the
   two things it joins, with preserveAspectRatio="none" — by construction it
   IS the gap, at every width.
   ===================================================================== */
.lnew-feat-deep__scr--automation > .au {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.au__wire { display: block; width: 100%; }
.au__wire svg { width: 100%; height: 100%; }
.au__wire--stem { height: 24px; }
.au__wire--fork { height: 28px; }
.au__wire path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.au__wire .au__base { stroke: var(--lnfd-scr-line); }
.au__wire .au__flow {
  stroke: var(--lnfd-scr-accent);
  stroke-dasharray: 10 54;
  animation: lnfd-au-flow 2.6s linear infinite;
}
.au__wire--fork .au__flow:nth-of-type(2) { animation-delay: .5s; stroke: var(--lnfd-scr-accent-2); }
@keyframes lnfd-au-flow { to { stroke-dashoffset: -64; } }

/* The wires' fork legs land at a quarter and three quarters of the WIRE's
   width, so the branch grid must be exactly as wide as the wire above it —
   both are 100% of .au. Narrowing one without the other is what pulls the
   legs off the nodes. */
.au__branches {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.au__branches .au__node { justify-content: center; }
.au__node {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
  color: var(--lnfd-scr-ink);
  background: var(--lnfd-scr-panel-2);
  border: 1px solid var(--lnfd-scr-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.au__node i { min-width: 0; }
.au__node svg { flex: none; width: 14px; height: 14px; color: var(--lnfd-scr-accent); }
/* trigger and condition are single, centred blocks; the two outcomes sit side
   by side underneath — the shape every flow builder settles on */
.au__node--trigger, .au__node--cond { align-self: center; }
.au__node--trigger svg { color: var(--lnfd-scr-amber); }
.au__node--cond { border-color: rgba(139,124,255,.34); }
.au__node--yes svg { color: var(--lnfd-scr-green); }
.au__node--no  svg { color: var(--lnfd-scr-rose); }

/* ============ 07 · Templates ========================================== */
.lnew-feat-deep__scr--templates > .tp { position: relative; display: grid; place-items: center; }
.tp__stack { position: relative; width: 100%; max-width: 300px; }
.tp__card {
  border-radius: 13px;
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
}
/* the two behind are pure geometry — no content, so they cannot be read as
   two more templates the visitor is meant to parse */
.tp__card--2, .tp__card--3 { position: absolute; left: 0; right: 0; }
.tp__card--3 { top: -22px; transform: scale(.88); opacity: .38; height: 60px; }
.tp__card--2 { top: -11px; transform: scale(.94); opacity: .6;  height: 60px; }
.tp__card--1 {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 15px;
  /* TWO LAYERS, NOT ONE. The translucent panel fill composited over an
     OPAQUE base. With the panel alone, the two ghost cards behind read
     straight through the front card and the stack becomes three overlapping
     outlines instead of one card with two behind it. */
  background: linear-gradient(var(--lnfd-scr-panel-2), var(--lnfd-scr-panel-2)), var(--lnfd-scr-bg-1);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
  animation: lnfd-tp-breathe 5s ease-in-out infinite;
}
@keyframes lnfd-tp-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.tp__hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp__ok {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 100px;
  font-size: 9.5px; font-weight: 700;
  color: var(--lnfd-scr-green);
  background: rgba(52,211,153,.14);
}
.tp__ok svg { width: 10px; height: 10px; }
.tp__tok {
  align-self: flex-start;
  padding: 3px 8px; border-radius: 6px;
  font-family: var(--lnfd-font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--lnfd-scr-accent);
  background: rgba(139,124,255,.16);
  border: 1px dashed rgba(139,124,255,.4);
  animation: lnfd-tok-glow 3.2s ease-in-out infinite;
}
@keyframes lnfd-tok-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,124,255,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(139,124,255,0); }
}

/* ============ 08 · Reports & ROI ====================================== */
.lnew-feat-deep__scr--reports > .rp { display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: end; }
.rp__chart { display: flex; align-items: flex-end; gap: 7px; height: var(--rp-h, 168px); }
.rp__chart i {
  flex: 1 1 auto;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--lnfd-scr-accent), rgba(139,124,255,.28));
  height: var(--h, 40%);
  transform-origin: bottom;
  animation: lnfd-bar-grow 3.6s var(--lnfd-ease) infinite;
}
.rp__chart i:last-child { background: linear-gradient(180deg, var(--lnfd-scr-accent-2), rgba(34,211,238,.3)); }
.rp__chart i:nth-child(2) { animation-delay: .08s; }
.rp__chart i:nth-child(3) { animation-delay: .16s; }
.rp__chart i:nth-child(4) { animation-delay: .24s; }
.rp__chart i:nth-child(5) { animation-delay: .32s; }
.rp__chart i:nth-child(6) { animation-delay: .4s; }
.rp__chart i:nth-child(7) { animation-delay: .48s; }
@keyframes lnfd-bar-grow {
  0%, 100% { transform: scaleY(.42); }
  45%      { transform: scaleY(1); }
}
.rp__side { display: flex; flex-direction: column; gap: 10px; }
/* the donut is one conic-gradient over a masked ring — no SVG, no library */
.rp__donut {
  position: relative;
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--lnfd-scr-accent) 0 var(--p, 68%), rgba(255,255,255,.09) var(--p, 68%) 100%);
  animation: lnfd-donut-sweep 4.4s var(--lnfd-ease) infinite;
}
.rp__donut::before {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%;
  background: var(--lnfd-scr-bg-2);
}
.rp__donut b {
  position: relative;
  font-family: var(--lnfd-font-head);
  font-size: 15px; font-weight: 800;
  color: var(--lnfd-scr-ink);
}
@keyframes lnfd-donut-sweep {
  0%       { --p: 6%; }
  55%,100% { --p: 68%; }
}
/* --p has to be a registered property for the sweep above to interpolate
   rather than snap. Declared here, not in :root, so it stays this widget's. */
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 68%;
}
.rp__rows { display: flex; flex-direction: column; gap: 6px; }
.rp__r { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.rp__k { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--k, var(--lnfd-scr-accent)); }
.rp__r:nth-child(2) .rp__k { --k: var(--lnfd-scr-accent-2); }
.rp__r:nth-child(3) .rp__k { --k: var(--lnfd-scr-amber); }
.rp__r .ln { flex: 1 1 auto; }
.rp__r b { font-weight: 700; color: var(--lnfd-scr-ink); }

/* ============ 09 · Team & Routing ===================================== */
.lnew-feat-deep__scr--team > .tm { display: grid; align-content: center; }
.tm__stack {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
}
.tm__queue {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px; border-radius: 11px;
  background: var(--lnfd-scr-panel);
  border: 1px dashed var(--lnfd-scr-line);
  font-size: 10.5px; color: var(--lnfd-scr-muted);
}
/* the seat the chat leaves from — stays put, so the queue row keeps its shape
   while the traveller is away */
.tm__slot {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1px dashed var(--lnfd-scr-line);
}
/*
 * THE TRAVELLER IS ABSOLUTE, AND ITS PATH IS IN PERCENT.
 *
 * A translate() in pixels is a magic number measured against one card width:
 * it lands on the third agent at 1440px and somewhere between two agents at
 * every other width. `left`/`top` percentages resolve against .tm, so the
 * same keyframes hit the third of four tiles at any size.
 */
.tm__tok {
  position: absolute; z-index: 2;
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, var(--lnfd-scr-accent), var(--lnfd-scr-accent-2));
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
  /* the dashed slot's own position inside the queue row; the destination is
     the third of four agent tiles. Both are percentages of __stack. */
  left: 2.9%; top: 6.8%;
  animation: lnfd-route 5.6s var(--lnfd-ease) infinite;
}
/* Held at the queue for the first third of the loop and returned to it for
   the last tenth, so the row is never empty for long. The fade-out and the
   jump back both happen while it is invisible. */
/* The two anchor points are MEASURED, not guessed: the dashed slot sits at
   (2.9%, 6.8%) of __stack and the third agent's avatar centres the token at
   (60.5%, 72.6%). Re-measure if the queue row or the agent tiles change
   height — a probe that reports both is cheaper than eyeballing it. */
@keyframes lnfd-route {
  0%, 32%   { left: 2.9%;  top: 6.8%;  opacity: 1; transform: scale(1); }
  58%, 74%  { left: 60.5%; top: 72.6%; opacity: 1; transform: scale(.86); }
  82%       { left: 60.5%; top: 72.6%; opacity: 0; transform: scale(.6); }
  83%       { left: 2.9%;  top: 6.8%;  opacity: 0; transform: scale(1); }
  93%, 100% { left: 2.9%;  top: 6.8%;  opacity: 1; transform: scale(1); }
}
.tm__rule {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 700;
  color: var(--lnfd-scr-accent);
  background: rgba(139,124,255,.16);
  border: 1px solid rgba(139,124,255,.28);
}
.tm__rule svg { width: 11px; height: 11px; }
.tm__agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.tm__ag {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 5px; border-radius: 11px;
  background: var(--lnfd-scr-panel);
  border: 1px solid transparent;
}
.tm__ag i {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lnfd-scr-bar);
  position: relative;
}
.tm__ag i::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--lnfd-scr-bg-2);
  background: var(--lnfd-scr-green);
}
.tm__ag--busy i::after { background: var(--lnfd-scr-amber); }
.tm__ag--off i::after  { background: var(--lnfd-scr-muted); }
/* the agent the chat lands on lights up in time with its arrival — the two
   timings are one number apart on purpose, keep them in step */
.tm__ag.is-hit { animation: lnfd-ag-hit 5.6s var(--lnfd-ease) infinite; }
@keyframes lnfd-ag-hit {
  0%, 50%, 86%, 100% { border-color: transparent; background: var(--lnfd-scr-panel); }
  60%, 78%           { border-color: rgba(139,124,255,.5); background: rgba(139,124,255,.14); }
}

/* ============ 10 · Integrations & API ================================= */
.lnew-feat-deep__scr--integrations > .ig { display: grid; place-items: center; }
/* __stage is the SQUARE both the wires and the tiles fill. The wires are
   drawn against a 300x300 box that maps 1:1 onto the 3x3 grid, so every
   hub-to-tile line ends dead centre of its tile — but only while the two
   share a box. Hang the SVG off the slab instead and it stretches across a
   rectangle the square grid is merely centred in, and every wire misses. */
.ig__stage { position: relative; width: 100%; max-width: 268px; aspect-ratio: 1; }
.ig__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.ig__wires line {
  stroke: var(--lnfd-scr-line); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.ig__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%; height: 100%;
}
.ig__tile {
  display: grid; place-items: center;
  border-radius: 13px;
  color: var(--lnfd-scr-body);
  background: var(--lnfd-scr-panel);
  border: 1px solid var(--lnfd-scr-line);
  animation: lnfd-tile-blink 6s ease-in-out infinite;
}
.ig__tile svg { width: 18px; height: 18px; }
.ig__tile:nth-child(2) { animation-delay: .7s; }
.ig__tile:nth-child(3) { animation-delay: 1.4s; }
.ig__tile:nth-child(4) { animation-delay: 2.1s; }
.ig__tile:nth-child(6) { animation-delay: 2.8s; }
.ig__tile:nth-child(7) { animation-delay: 3.5s; }
.ig__tile:nth-child(8) { animation-delay: 4.2s; }
.ig__tile:nth-child(9) { animation-delay: 4.9s; }
@keyframes lnfd-tile-blink {
  0%, 88%, 100% { border-color: var(--lnfd-scr-line); color: var(--lnfd-scr-body); }
  94%           { border-color: rgba(139,124,255,.55); color: var(--lnfd-scr-ink); }
}
/* the hub is tile five — the centre of a 3x3 — so it needs no positioning */
.ig__hub {
  grid-area: 2 / 2;
  display: grid; place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--lnfd-scr-accent), var(--lnfd-scr-accent-2));
  box-shadow: 0 0 0 0 var(--lnfd-scr-glow);
  animation: lnfd-hub-pulse 3.4s ease-in-out infinite;
}
.ig__hub svg { width: 20px; height: 20px; }
@keyframes lnfd-hub-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,124,255,.4); }
  55%      { box-shadow: 0 0 0 13px rgba(139,124,255,0); }
}

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

/* =====================================================================
   Reduced motion — every loop in this file, off. The vignettes keep their
   RESTING state, which is why each one is authored to be readable at 0%.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lnew-feat-deep .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-feat-deep__eyebrow-dot,
  .ib__badge, .ib__msg--new,
  .ai__orb, .ai__typing b, .ai__tag,
  .pl__card--fly,
  .cl__btn, .cl__wave i,
  .bc__arcs .bc__flow, .bc__t,
  .au__wire .au__flow,
  .tp__card--1, .tp__tok,
  .rp__chart i, .rp__donut,
  .tm__tok, .tm__ag.is-hit,
  .ig__tile, .ig__hub { animation: none !important; }
  .lnew-feat-deep__eyebrow-dot { opacity: 1; }
  /* the bars would otherwise sit at their scaled-down keyframe origin */
  /* the per-bar --a amplitudes still apply, so this is a still waveform and
     not a row of equal blocks */
  .cl__wave i { transform: scaleY(.82); }
  .rp__chart i { transform: none; }
  .lnew-feat-deep__cap,
  .lnew-feat-deep__cap-ic,
  .lnew-feat-deep__cap-link,
  .lnew-feat-deep__rail-item { transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1160px) {
  .lnew-feat-deep {
    --lnfd-rail-w: 200px;
    --lnfd-rail-gap: 36px;
    --lnfd-card-inner-gap: 24px;
    --lnfd-card-pad: 24px;
    --lnfd-scr-minh: 262px;
    --lnfd-cap-title-size: 23px;
  }
}

/* The rail stops being a column and becomes a scroller pinned under the site
   header. Below this width the two-column card would give each half ~300px,
   which is narrower than the vignettes are legible at. */
@media (max-width: 980px) {
  .lnew-feat-deep {
    --lnfd-gutter: 24px;
    --lnfd-pad-y: 84px;
    --lnfd-card-cols: minmax(0, 1fr);
  }
  .lnew-feat-deep__body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lnew-feat-deep__rail {
    top: 64px;
    z-index: 5;
    margin-inline: calc(var(--lnfd-gutter) * -1);
    padding: 10px var(--lnfd-gutter);
    background: color-mix(in srgb, var(--lnfd-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-block: 1px solid var(--lnfd-line);
  }
  .lnew-feat-deep__rail-l { display: none; }
  .lnew-feat-deep__rail-list {
    display: flex; gap: 8px;
    border-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }
  .lnew-feat-deep__rail-list::-webkit-scrollbar { display: none; }
  .lnew-feat-deep__rail-list li { flex: none; scroll-snap-align: start; }
  .lnew-feat-deep__rail-item {
    margin-left: 0;
    padding: 8px 13px;
    border-left: 0;
    border: 1px solid var(--lnfd-line);
    border-radius: 100px;
    white-space: nowrap;
    background: var(--lnfd-surface);
  }
  .lnew-feat-deep__rail-item.is-active {
    border-color: var(--lnfd-accent);
    background: var(--lnfd-accent-soft-bg);
    color: var(--lnfd-accent-soft-ink);
  }
  /* the alternation is meaningless in one column, and leaving it on would put
     the art above the text on every other block */
  .lnew-feat-deep__cap:nth-child(even) .lnew-feat-deep__cap-art,
  .lnew-feat-deep__cap:nth-child(even) .lnew-feat-deep__cap-text { grid-column: 1; grid-row: auto; }
  .lnew-feat-deep__cap-text { order: 1; }
  .lnew-feat-deep__cap-art  { order: 2; }
}

@media (max-width: 760px) {
  .lnew-feat-deep {
    --lnfd-gutter: 20px;
    --lnfd-pad-y: 68px;
    --lnfd-card-radius: 20px;
    --lnfd-scr-minh: 236px;
    --lnfd-cap-title-size: 21px;
    --lnfd-ic: 42px;
  }
  .lnew-feat-deep__head { margin-bottom: 36px; }
  .lnew-feat-deep__lead { font-size: 16.5px; }
}

@media (max-width: 560px) {
  .lnew-feat-deep {
    --lnfd-gutter: 16px;
    --lnfd-card-pad: 18px;
    --lnfd-scr-minh: 216px;
  }
  /* two columns of check-points at 300px gives each about 130px, which wraps
     nearly every one of them onto three lines */
  .lnew-feat-deep__cap-points { grid-template-columns: minmax(0, 1fr); }
  .lnew-feat-deep__scr { padding: 14px; }
  /* the inbox is the one vignette that cannot survive a single column: at
     this width its list and thread are ~130px each. Show the thread only. */
  .lnew-feat-deep__scr--inbox > .ib { grid-template-columns: minmax(0, 1fr); }
  .ib__list { display: none; }
  .lnew-feat-deep__scr--reports > .rp { grid-template-columns: 1fr 78px; }
  .lnew-feat-deep__scr--broadcast > .bc { grid-template-columns: 1fr 54px 40px; }
}