/* =====================================================================
   LeadsNimble Pricing Hero — the opening band of the detailed /pricing/ page.

   Deliberately QUIET. The homepage hero (lnew_hero2) is the loud one: aurora
   wiring, a nested product showcase, a headline in Bricolage Grotesque. A
   pricing page opens on a question the visitor already has, so this hero's
   whole job is to answer it in one line and get out of the way of the
   configurator below. That is why there is no artwork, no video facade and no
   second typeface here — just the design system's eyebrow, title, lead, two
   buttons, a row of trust pills and an optional jump index.

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

   The section gradient is the SAME band the homepage pricing section opens
   with (#d7e0ef -> #f0f4fb at 60% in light, #0c0c18 -> #090910 at 100% in
   dark), and the Plan Builder below it sits on the flat #f0f4fb / #0a0a12 the
   gradient lands on — so the two sections meet with no visible seam.

   CONTROLS WRITE TOKENS; MEDIA QUERIES WRITE PROPERTIES. See
   [[elementor-control-css-beats-media-queries]].
   ===================================================================== */

/* Local reset, :where()-wrapped so it carries ZERO specificity. */
.lnew-price-hero, .lnew-price-hero *, .lnew-price-hero *::before, .lnew-price-hero *::after { box-sizing: border-box; }

/* THE `hidden` GUARD. A UA's `[hidden] { display: none }` carries ZERO
   specificity, so any `display: flex` / `inline-flex` / `grid` in this file
   out-ranks it and an element hidden by attribute stays visible. `!important`
   is deliberate: `hidden` is not a style preference, it is a statement that
   the element is not part of the page. */
.lnew-price-hero [hidden] { display: none !important; }

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

.lnew-price-hero {
  /* ---- motion ---- */
  --lnph-ease: cubic-bezier(.22,1,.36,1);
  --lnph-rv-dist: 70px;
  --lnph-rv-dur: 1.2s;
  --lnph-rv-step: 70ms;

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

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

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

  --lnph-risk-top: 42px;
  --lnph-risk-gap: 10px;
  --lnph-risk-pad: 9px 14px;
  --lnph-risk-radius: 100px;
  --lnph-risk-item-gap: 9px;
  --lnph-risk-ic: 26px;
  --lnph-risk-ic-radius: 9px;
  --lnph-risk-size: 13.5px;

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

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

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

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

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

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

  /* the four trust-pill hues, mode-INDEPENDENT literals — the same indigo /
     teal / rose / amber the homepage pricing pills carry */
  --lnph-risk-1-bg: #e7e4fb; --lnph-risk-1-ink: #6a4ff0;
  --lnph-risk-2-bg: #d8f0f3; --lnph-risk-2-ink: #0e97a8;
  --lnph-risk-3-bg: #fde2e7; --lnph-risk-3-ink: #e5486d;
  --lnph-risk-4-bg: #fceed4; --lnph-risk-4-ink: #cf7d13;

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

  position: relative;
  overflow-x: clip;
  padding-top: 128px;
  padding-bottom: 96px;
  background: linear-gradient(180deg, var(--lnph-bg-1) 0%, var(--lnph-bg-2) var(--lnph-bg-stop));
  font-family: var(--lnph-font-sans);
  color: var(--lnph-body);
  font-size: 17px;
  /* stated, not inherited — see [[wp-theme-inherited-type-leak]] */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

[data-mode="dark"] .lnew-price-hero {
  --lnph-bg-1: #0c0c18;
  --lnph-bg-2: #090910;
  --lnph-bg-stop: 100%;
  --lnph-ink: #f5f6ff;
  --lnph-body: #b8bed6;
  --lnph-muted: #949bbb;
  --lnph-muted-2: #6d7398;
  --lnph-line: rgba(255,255,255,.10);

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

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

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

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

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

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

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

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

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

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

.lnew-price-hero__btn--ghost {
  background: var(--lnph-surface);
  color: var(--lnph-ink);
  border: 1px solid var(--lnph-line);
  box-shadow: var(--lnph-shadow-sm);
  -webkit-backdrop-filter: var(--lnph-glass-blur);
  backdrop-filter: var(--lnph-glass-blur);
}
.lnew-price-hero__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--lnph-accent);
  box-shadow: var(--lnph-shadow-md);
}

/* box-shadow, NOT a blurred ::after with z-index:-1 — the :hover transform
   creates a stacking context, and inside it a negative-z pseudo paints ABOVE
   the element's background, yielding a hover-only flicker. */
.lnew-price-hero__btn--primary {
  background: var(--lnph-accent-grad);
  color: var(--lnph-accent-ink);
  border: none;
  background-size: 130% 70%;
  background-position: 0% 50%;
  animation: lnph-gradient-loop 7s ease-in-out infinite;
  box-shadow: var(--lnph-shadow-accent), 0 0 0 0 rgba(139,124,255,0);
  transition: box-shadow .4s var(--lnph-ease), transform .22s var(--lnph-ease);
}
.lnew-price-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--lnph-shadow-accent-hover), 0 0 34px 3px var(--lnph-btn-glow);
}
@keyframes lnph-gradient-loop {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* STACKING NOTE: isolation:isolate on the button plus a POSITIVE z-index
   here. Do not "simplify" this back to a negative z-index. */
.lnew-price-hero__btn--primary::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(100deg, transparent, var(--lnph-btn-shimmer), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.lnew-price-hero__btn--primary:hover::before { opacity: 1; animation: lnph-btn-melt .85s var(--lnph-ease); }
@keyframes lnph-btn-melt { from { left: -45%; } to { left: 120%; } }
.lnew-price-hero__btn > * { position: relative; z-index: 2; }

/* =====================================================================
   Jump index — TEXT, not chips.

   It used to be four pill buttons, which put nine pill-shaped things in one
   hero (eyebrow + 2 CTAs + 4 jump + 4 trust) and flattened the hierarchy: the
   thing you should click looked exactly like the thing you should read. These
   are now quiet underlined links behind a label, so the two gradient CTAs are
   the only buttons on screen.
   ===================================================================== */
.lnew-price-hero__jump {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px var(--lnph-jump-gap);
  margin-top: var(--lnph-jump-top);
  justify-content: var(--lnph-align);
}
.lnew-price-hero__jump-l {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lnph-muted-2);
}
.lnew-price-hero__jump-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--lnph-jump-size); font-weight: 600;
  line-height: 1.5;
  color: var(--lnph-body);
  transition: color .22s ease;
}
/* the underline grows from the left rather than fading in — a 1px line the
   accent gradient paints, so the link picks up the brand ramp on hover */
.lnew-price-hero__jump-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--lnph-accent-grad);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s var(--lnph-ease);
}
.lnew-price-hero__jump-item:hover { color: var(--lnph-ink); }
.lnew-price-hero__jump-item:hover::after,
.lnew-price-hero__jump-item:focus-visible::after { transform: scaleX(1); }
.lnew-price-hero__jump-item:focus-visible { outline: 2px solid var(--lnph-accent); outline-offset: 4px; border-radius: 3px; }
.lnew-price-hero__jump-item svg {
  width: 12px; height: 12px; opacity: .5;
  transition: transform .32s var(--lnph-ease), opacity .22s ease;
}
.lnew-price-hero__jump-item:hover svg { transform: translateY(2px); opacity: 1; }

/* =====================================================================
   Trust pills — the same standalone badge chips the homepage pricing
   section closes with, so the two pages share one vocabulary.
   ===================================================================== */
/* THE BADGES.

   Full pill radius (100px), a solid hairline border and a single-line
   label — the same recipe, size and weight as the ghost CTA above and the
   industry picker's chips on /industries/, right down to the icon-chip
   proportions. No sub-label anymore: a second stacked line was what made
   these read thick next to the picker's thin one-liners. */
.lnew-price-hero__risk {
  display: flex; flex-wrap: wrap;
  gap: var(--lnph-risk-gap);
  margin-top: var(--lnph-risk-top);
  justify-content: var(--lnph-align);
}
.lnew-price-hero__risk-item {
  position: relative;
  display: inline-flex; align-items: center;
  gap: var(--lnph-risk-item-gap);
  padding: var(--lnph-risk-pad);
  border-radius: var(--lnph-risk-radius);
  background: var(--lnph-surface);
  -webkit-backdrop-filter: var(--lnph-glass-blur);
  backdrop-filter: var(--lnph-glass-blur);
  border: 1px solid var(--lnph-line);
  box-shadow: var(--lnph-pill-shadow);
  transition: transform .3s var(--lnph-ease), box-shadow .3s var(--lnph-ease), border-color .25s var(--lnph-ease);
}
.lnew-price-hero__risk-item:hover {
  transform: translateY(-3px);
  border-color: var(--lnph-accent);
  box-shadow: var(--lnph-shadow-md);
}

.lnew-price-hero__risk-ic {
  flex: none;
  width: var(--lnph-risk-ic); height: var(--lnph-risk-ic);
  border-radius: var(--lnph-risk-ic-radius);
  display: grid; place-items: center;
  /* the fourth hue is the FALLBACK, so a fifth badge inherits it rather than
     falling back to an untinted glyph — same rule as the homepage pills */
  background: var(--lnph-risk-4-bg); color: var(--lnph-risk-4-ink);
  transition: transform .3s var(--lnph-ease);
}
.lnew-price-hero__risk-item:nth-child(4n+1) .lnew-price-hero__risk-ic { background: var(--lnph-risk-1-bg); color: var(--lnph-risk-1-ink); }
.lnew-price-hero__risk-item:nth-child(4n+2) .lnew-price-hero__risk-ic { background: var(--lnph-risk-2-bg); color: var(--lnph-risk-2-ink); }
.lnew-price-hero__risk-item:nth-child(4n+3) .lnew-price-hero__risk-ic { background: var(--lnph-risk-3-bg); color: var(--lnph-risk-3-ink); }
.lnew-price-hero__risk-item:hover .lnew-price-hero__risk-ic { transform: translateY(-2px) rotate(-5deg); }
.lnew-price-hero__risk-ic svg { width: 14px; height: 14px; }

.lnew-price-hero__risk-t {
  font-family: var(--lnph-font-sans);
  font-size: var(--lnph-risk-size); font-weight: 600;
  line-height: 1.4;
  color: var(--lnph-ink);
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .lnew-price-hero .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-price-hero__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-price-hero__btn--primary { animation: none !important; }
  .lnew-price-hero__btn--primary::before { animation: none !important; display: none; }
  .lnew-price-hero__btn svg, .lnew-price-hero__risk-item, .lnew-price-hero__jump-item { transition: none; }
  /* the aurora stays — it is a static wash without its drift, which is the
     point of the field. Only the movement goes. */
  .lnew-price-hero__bg::before { animation: none !important; }
  .lnew-price-hero__jump-item::after,
  .lnew-price-hero__jump-item svg,
  .lnew-price-hero__risk-ic { transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-price-hero {
    --lnph-gutter: 24px;
    padding-top: 104px; padding-bottom: 72px;
  }
}

@media (max-width: 760px) {
  .lnew-price-hero {
    --lnph-gutter: 20px;
    --lnph-lead-size: 17px;
    --lnph-risk-top: 34px;
    padding-top: 88px; padding-bottom: 56px;
  }
}

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