/* =====================================================================
   LeadsNimble Plan Builder — the interactive pricing configurator for the
   detailed /pricing/ page.

   NOT a port. This section does not exist in the leadsnimble_html reference,
   so it is BUILT from the design system's own vocabulary rather than measured
   against a template: the aurora-nightfall tokens resolved to literals and
   re-scoped under --lnpb-*, LIGHT the default mode, [data-mode="dark"]
   flipping the palette (the switch the nav writes), and the dark palette
   control section emitted at [data-mode="dark"] {{WRAPPER}} .lnew-plan-builder
   so it outranks the light controls on specificity, not source order — exactly
   the arrangement lnew-pricing2.css / lnew-faq.css / lnew-why.css use.

   Every literal below is lifted from an existing widget so the new page reads
   as one system rather than a cousin of it:

     type          DM Sans body / Parkinsans headings, 17px / 1.6 section
                   baseline, clamp(31px,3.6vw,47px) title, 13px eyebrow
                   (lnew-pricing2.css)
     palette       ink #12122a · body #454a63 · muted #6b7089 ·
                   dim #9498b0 · line #e7e9f4 · hairline #f0f1f8 ·
                   surface #ffffff  (lnew-pricing2.css)
     accent        #6d5cf5 light / #8b7cff dark, gradient
                   #6366f1 -> #a855f7 -> #22d3ee at 100deg
     radii         24px card · 18px panel · 13px button · 100px pill
     shadows       sm 0 1px 2px + 0 2px 6px rgba(30,30,80,.05)
                   md 0 12px 34px rgba(30,30,80,.10)
                   lg 0 30px 70px rgba(30,30,80,.16)
     motion        cubic-bezier(.22,1,.36,1), 70px/1.2s/70ms reveal ramp

   THREE structural decisions worth knowing before editing:

   1. THE CARD IS A <button>. Choosing a plan is a radiogroup, not a link, so
      the plan card is a real button inside role="radiogroup" with roving
      aria-checked. That means the widget must beat the theme's own `button`
      styling: every rule that touches the card is written at (0,2,0) — a
      `.lnew-plan-builder__plan` pair — for the same reason lnew-pricing2.css
      doubles its toggle selector. Do not flatten these to (0,1,0).

   2. MEDIA QUERIES WRITE PROPERTIES; ELEMENTOR CONTROLS WRITE TOKENS. An
      Elementor `default` emits an unconditional desktop rule at
      {{WRAPPER}} .lnew-plan-builder — (0,2,0), from a stylesheet loaded after
      this one — which outranks the (0,1,0) @media rules here at EVERY width.
      So each control that would collide with a breakpoint step writes a
      --lnpb-* token and the breakpoint re-writes the same token, letting the
      cascade resolve normally. Controls that cannot be expressed as a token
      ship with an EMPTY default. See [[elementor-control-css-beats-media-queries]].

   3. THE SUMMARY IS STICKY ON THE TWO-COLUMN LAYOUT ONLY. Its offset is
      --lnpb-sticky-top, defaulted to 104px to clear the flat dark nav 2 bar.
      Below the stack breakpoint the rail un-sticks and a slim, NON-INTERACTIVE
      minibar takes over at the top of the configurator, so the running total
      stays on screen while a thumb works down a long option list. The minibar
      holds no controls on purpose — it is aria-hidden, and hiding a focusable
      control from assistive tech is a defect, not a trade-off.
   ===================================================================== */

/* Local reset. Wrapped in :where() so it carries ZERO specificity — see
   [[nav-widget-feature]] for the four cascade traps this avoids. Do not
   unwrap: a bare `.lnew-plan-builder svg {}` is (0,1,1) and would outrank the
   component rules it is meant to sit under. */
.lnew-plan-builder, .lnew-plan-builder *, .lnew-plan-builder *::before, .lnew-plan-builder *::after { box-sizing: border-box; }

/* THE `hidden` GUARD, and it is load-bearing.
   This widget hides a lot of things by attribute rather than by removing them
   from the DOM: the notice that replaces the option list, the "Included" flag
   on a bundled add-on, the switch that flag replaces, an add-on row the tier
   cannot buy, the currency symbol on a prose-priced card, the secondary total
   line. A UA's `[hidden] { display: none }` carries ZERO specificity, so every
   `display: flex` / `inline-flex` / `grid` below out-ranks it and the element
   stays visible — which is exactly what happened before this rule existed
   (every add-on row showed a phantom "Included" chip, and the panel opened
   with an empty accent box where the notice was).
   `!important` is deliberate: `hidden` is not a style preference, it is a
   statement that the element is not part of the page. */
.lnew-plan-builder [hidden] { display: none !important; }
:where(.lnew-plan-builder) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-plan-builder) :where(p) { margin: 0; }
:where(.lnew-plan-builder) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-plan-builder) :where(li) { margin: 0; }
:where(.lnew-plan-builder) :where(svg) { display: block; }
:where(.lnew-plan-builder) :where(h1, h2, h3, h4, h5) { margin: 0; }
:where(.lnew-plan-builder) :where(b, strong) { font-weight: 700; }
:where(.lnew-plan-builder) :where(i, em) { font-style: normal; }

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

  /* ---- geometry ---- */
  --lnpb-maxw: 1360px;
  --lnpb-gutter: 28px;
  --lnpb-head-align: center;
  --lnpb-title-size: clamp(31px, 3.6vw, 47px);
  --lnpb-lead-size: 18px;

  --lnpb-toggles-gap: 14px;
  --lnpb-toggles-mb: 40px;
  --lnpb-toggle-pad: 4px;
  --lnpb-toggle-btn-pad-y: 9px;
  --lnpb-toggle-btn-pad-x: 18px;
  --lnpb-toggle-size: 14px;

  --lnpb-plan-cols: 5;
  --lnpb-plan-gap: 16px;
  --lnpb-plan-radius: 20px;
  --lnpb-plan-pad-y: 22px;
  --lnpb-plan-pad-x: 20px;
  --lnpb-plan-name-size: 17px;
  --lnpb-plan-best-size: 13px;
  --lnpb-plan-best-min-h: 36px;
  --lnpb-plan-cur-size: 17px;
  --lnpb-plan-amt-size: clamp(26px, 2.1vw, 34px);
  --lnpb-plan-prose-size: 22px;   /* "Contact Sales" — a phrase, not a figure */
  --lnpb-plan-per-size: 12.5px;
  --lnpb-plan-sub-size: 12.5px;
  --lnpb-plan-spec-size: 12.5px;
  --lnpb-plan-ring: 2px;

  --lnpb-config-gap: 22px;
  --lnpb-rail-w: 372px;
  --lnpb-sticky-top: 104px;
  --lnpb-panel-radius: 24px;
  --lnpb-panel-pad: 26px;

  --lnpb-opt-gap: 14px;
  --lnpb-opt-radius: 16px;
  --lnpb-opt-pad-y: 16px;
  --lnpb-opt-pad-x: 18px;
  --lnpb-opt-label-size: 15px;
  --lnpb-opt-note-size: 12.5px;
  --lnpb-opt-hint-size: 12.5px;

  --lnpb-step-h: 40px;
  --lnpb-step-btn: 34px;
  --lnpb-step-field: 74px;
  --lnpb-step-radius: 12px;
  --lnpb-step-size: 15px;

  --lnpb-switch-w: 46px;
  --lnpb-switch-h: 26px;

  --lnpb-sum-radius: 24px;
  --lnpb-sum-pad: 26px;
  --lnpb-sum-line-size: 13.5px;
  --lnpb-sum-total-size: clamp(32px, 3vw, 42px);

  --lnpb-btn-size: 15.5px;
  --lnpb-btn-pad-y: 14px;
  --lnpb-btn-pad-x: 22px;
  --lnpb-btn-radius: 13px;

  --lnpb-minibar-display: none;

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

  /* ---- palette · LIGHT (the site's default mode) ---- */
  --lnpb-bg: #f0f4fb;
  --lnpb-ink: #12122a;
  --lnpb-body: #454a63;
  --lnpb-muted: #6b7089;
  --lnpb-muted-2: #9498b0;
  --lnpb-line: #e7e9f4;
  --lnpb-line-2: #f0f1f8;
  --lnpb-surface: #ffffff;
  --lnpb-well: #f7f8fd;

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

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

  --lnpb-toggle-bg: #cfd7ee;
  --lnpb-toggle-active-bg: #ffffff;
  --lnpb-toggle-active-ink: #12122a;

  --lnpb-glass-blur: none;
  --lnpb-glass-hi: transparent;
  --lnpb-plan-bg: #ffffff;
  --lnpb-plan-sel-bg: #ffffff;
  --lnpb-plan-wash-1: rgba(109,92,245,.16);
  --lnpb-plan-wash-2: rgba(34,211,238,.12);

  --lnpb-sum-bg: #ffffff;
  --lnpb-sum-wash-1: rgba(109,92,245,.14);
  --lnpb-sum-wash-2: rgba(34,211,238,.10);

  /* graduated-band ladder — teal -> indigo -> rose, matching the Add-Ons
     menu's band letters. Literals there, so mode-INDEPENDENT here too. */
  --lnpb-band-1: #0e97a8;
  --lnpb-band-2: #6a4ff0;
  --lnpb-band-3: #e5486d;

  /* ---- shadows ---- */
  --lnpb-sh-sm-1: rgba(30,30,80,.05);
  --lnpb-sh-sm-2: rgba(30,30,80,.05);
  --lnpb-sh-md: rgba(30,30,80,.10);
  --lnpb-sh-lg: rgba(30,30,80,.16);
  --lnpb-sh-accent: rgba(99,102,241,.28);
  --lnpb-sh-accent-hover: rgba(99,102,241,.36);
  --lnpb-btn-glow: rgba(139,124,255,.45);
  --lnpb-btn-shimmer: rgba(255,255,255,.55);

  --lnpb-shadow-sm: 0 1px 2px var(--lnpb-sh-sm-1), 0 2px 6px var(--lnpb-sh-sm-2);
  --lnpb-shadow-md: 0 12px 34px var(--lnpb-sh-md);
  --lnpb-shadow-lg: 0 30px 70px var(--lnpb-sh-lg);
  --lnpb-shadow-accent: 0 16px 40px var(--lnpb-sh-accent);
  --lnpb-shadow-accent-hover: 0 20px 50px var(--lnpb-sh-accent-hover);
  --lnpb-panel-shadow: var(--lnpb-shadow-sm);

  position: relative;
  overflow-x: clip;
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--lnpb-bg);
  font-family: var(--lnpb-font-sans);
  color: var(--lnpb-body);
  font-size: 17px;
  /* Stated, not inherited. twentytwentyfive pushes font-weight:300 and
     letter-spacing:-0.1px into anything that does not assert them — see
     [[wp-theme-inherited-type-leak]]. */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

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

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

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

  --lnpb-toggle-bg: #10101d;
  --lnpb-toggle-active-bg: rgba(255,255,255,.12);
  --lnpb-toggle-active-ink: #ffffff;

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

  --lnpb-sum-bg: rgba(255,255,255,.045);

  --lnpb-sh-sm-1: rgba(0,0,0,.4);
  --lnpb-sh-sm-2: transparent;
  --lnpb-sh-md: rgba(0,0,0,.5);
  --lnpb-sh-lg: rgba(0,0,0,.62);
  --lnpb-sh-accent: rgba(99,102,241,.4);
  --lnpb-sh-accent-hover: rgba(99,102,241,.5);
  --lnpb-btn-shimmer: rgba(255,255,255,.42);

  --lnpb-shadow-sm: 0 1px 2px var(--lnpb-sh-sm-1);
  --lnpb-shadow-lg: 0 34px 74px var(--lnpb-sh-lg);
  --lnpb-shadow-accent: 0 16px 44px var(--lnpb-sh-accent);
  --lnpb-shadow-accent-hover: 0 22px 54px var(--lnpb-sh-accent-hover);
  --lnpb-panel-shadow: inset 0 1px 0 var(--lnpb-glass-hi), var(--lnpb-shadow-sm);
}

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

.lnew-plan-builder__head {
  margin-inline: auto;
  margin-bottom: 40px;
  text-align: var(--lnpb-head-align);
}

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

.lnew-plan-builder__title {
  font-family: var(--lnpb-font-head);
  font-weight: 500;
  font-size: var(--lnpb-title-size);
  margin-top: 18px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lnpb-ink);
  text-wrap: balance;
}
.lnew-plan-builder__lead {
  margin-top: 18px;
  font-size: var(--lnpb-lead-size);
  color: var(--lnpb-muted);
  line-height: 1.65;
  text-wrap: balance;
}
.lnew-plan-builder__accent {
  background: var(--lnpb-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =====================================================================
   Billing / currency toggles — the same two segmented pills the homepage
   pricing section uses, so the two pages share one control vocabulary.
   ===================================================================== */
.lnew-plan-builder__toggles {
  display: flex; flex-wrap: wrap;
  gap: var(--lnpb-toggles-gap);
  justify-content: center;
  margin-bottom: var(--lnpb-toggles-mb);
}
/* A switched-off group stays in the DOM (the script reads state off these
   buttons); the blanket [hidden] guard at the top of this file is what makes
   the attribute win over the display declarations here. */
.lnew-plan-builder__toggle {
  display: inline-flex;
  background: var(--lnpb-toggle-bg);
  border: 1px solid var(--lnpb-line);
  border-radius: 100px;
  padding: var(--lnpb-toggle-pad);
}
/* (0,2,0) on purpose — a theme's own `button` styling must not reach in here */
.lnew-plan-builder__toggle .lnew-plan-builder__toggle-btn {
  font-family: inherit;
  padding: var(--lnpb-toggle-btn-pad-y) var(--lnpb-toggle-btn-pad-x);
  border: none; border-radius: 100px;
  background: none;
  font-size: var(--lnpb-toggle-size); font-weight: 600;
  /* `normal`, NOT the section's 1.6 — a <button>'s UA `font` shorthand resets
     line-height and only font-family is re-inherited. Forcing 1.6 here would
     make every pill 4px taller than the homepage's. */
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lnpb-muted);
  cursor: pointer;
  box-shadow: none;
  transition: color .18s, background .18s, box-shadow .18s;
}
.lnew-plan-builder__toggle .lnew-plan-builder__toggle-btn.is-active {
  background: var(--lnpb-toggle-active-bg);
  color: var(--lnpb-toggle-active-ink);
  box-shadow: var(--lnpb-shadow-sm);
}
.lnew-plan-builder__toggle .lnew-plan-builder__toggle-btn:focus-visible {
  outline: 2px solid var(--lnpb-accent);
  outline-offset: 2px;
}
/* the small "save" flag a period can carry, e.g. "1 month free" */
.lnew-plan-builder__toggle-save {
  margin-left: 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .01em;
  color: var(--lnpb-accent);
}

/* =====================================================================
   Step 1 — pick a plan. A real radiogroup: the cards are <button>s with
   roving aria-checked, arrow keys move the selection, and the whole group
   is one tab stop.
   ===================================================================== */
.lnew-plan-builder__step-h {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 16px;
  font-family: var(--lnpb-font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lnpb-muted-2);
}
.lnew-plan-builder__step-n {
  display: inline-grid; place-items: center;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lnpb-accent-soft-bg);
  border: 1px solid var(--lnpb-accent-soft-border);
  color: var(--lnpb-accent);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.lnew-plan-builder__plans {
  display: grid;
  grid-template-columns: repeat(var(--lnpb-plan-cols), minmax(0, 1fr));
  gap: var(--lnpb-plan-gap);
  align-items: stretch;
}

/* THE CARD IS A BUTTON — see structural note 1. Every rule that paints it is
   a (0,2,0) pair so a theme's `button {}` cannot reach in. */
.lnew-plan-builder .lnew-plan-builder__plan {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  width: 100%;
  margin: 0;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lnpb-body);
  background: var(--lnpb-plan-bg);
  -webkit-backdrop-filter: var(--lnpb-glass-blur);
  backdrop-filter: var(--lnpb-glass-blur);
  border: 1px solid var(--lnpb-line);
  border-radius: var(--lnpb-plan-radius);
  padding: var(--lnpb-plan-pad-y) var(--lnpb-plan-pad-x);
  box-shadow: var(--lnpb-panel-shadow);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: transform .3s var(--lnpb-ease), box-shadow .3s var(--lnpb-ease),
              border-color .3s ease, background .3s ease;
}
.lnew-plan-builder .lnew-plan-builder__plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--lnpb-shadow-md);
  border-color: var(--lnpb-accent-soft-border);
}
.lnew-plan-builder .lnew-plan-builder__plan:focus-visible {
  outline: 2px solid var(--lnpb-accent);
  outline-offset: 3px;
}
/* The SELECTED card. Declared after the generic hover so it wins the tie, and
   raised over its siblings so the accent ring is never clipped by a neighbour. */
.lnew-plan-builder .lnew-plan-builder__plan.is-selected {
  border: var(--lnpb-plan-ring) solid var(--lnpb-accent);
  background:
    radial-gradient(125% 85% at 50% -10%, var(--lnpb-plan-wash-1), transparent 58%),
    radial-gradient(90% 80% at 112% 115%, var(--lnpb-plan-wash-2), transparent 55%),
    var(--lnpb-plan-sel-bg);
  box-shadow: var(--lnpb-shadow-md), 0 22px 50px -18px var(--lnpb-accent-halo);
  /* the ring is 2px where the resting border is 1px — pull the padding in by
     the difference so the card's inner box does not shift when it is picked */
  padding: calc(var(--lnpb-plan-pad-y) - 1px) calc(var(--lnpb-plan-pad-x) - 1px);
  z-index: 2;
}
.lnew-plan-builder .lnew-plan-builder__plan.is-selected:hover {
  transform: translateY(-4px);
}

.lnew-plan-builder__plan-badge {
  position: absolute; z-index: 5; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--lnpb-accent-grad);
  color: var(--lnpb-accent-ink);
  font-family: var(--lnpb-font-sans);
  font-size: 11.5px; font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
  padding: 4px 13px; border-radius: 100px;
  box-shadow: var(--lnpb-shadow-accent);
  white-space: nowrap;
}

.lnew-plan-builder__plan-name {
  font-family: var(--lnpb-font-head);
  font-size: var(--lnpb-plan-name-size); font-weight: 700;
  line-height: 1.4;
  color: var(--lnpb-ink);
}
.lnew-plan-builder__plan-best {
  font-size: var(--lnpb-plan-best-size);
  color: var(--lnpb-muted);
  line-height: 1.5;
  margin: 5px 0 14px;
  min-height: var(--lnpb-plan-best-min-h);
  overflow-wrap: break-word;
}
.lnew-plan-builder__plan-price {
  display: flex; align-items: baseline; gap: 3px;
  flex-wrap: wrap;
  min-height: 40px;
}
.lnew-plan-builder__plan-price.is-sym-after .lnew-plan-builder__plan-cur { order: 1; }
.lnew-plan-builder__plan-price.is-sym-after .lnew-plan-builder__plan-per { order: 2; }
.lnew-plan-builder__plan-cur {
  font-family: var(--lnpb-font-head);
  font-size: var(--lnpb-plan-cur-size); font-weight: 700;
  color: var(--lnpb-ink);
}
.lnew-plan-builder__plan-amt {
  font-family: var(--lnpb-font-head);
  font-size: var(--lnpb-plan-amt-size); font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--lnpb-ink);
}
/* A prose price ("Contact Sales") is a PHRASE, not a figure, and must not be
   set at the numeral size: at 34px/800 it wraps to two lines in a 5-up card
   and shoves that card's spec list a line below its siblings'. Smaller and
   tighter, exactly as the homepage widget treats its own Custom tier. The
   class is written by PHP on first paint and by the script on every toggle. */
.lnew-plan-builder__plan-price.is-prose .lnew-plan-builder__plan-amt {
  font-size: var(--lnpb-plan-prose-size);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.lnew-plan-builder__plan-per {
  font-size: var(--lnpb-plan-per-size);
  color: var(--lnpb-muted);
}
.lnew-plan-builder__plan-sub {
  margin-top: 5px;
  font-size: var(--lnpb-plan-sub-size);
  color: var(--lnpb-muted-2);
  line-height: 1.5;
}
.lnew-plan-builder__plan-sub:empty { min-height: 1.5em; }

.lnew-plan-builder__plan-specs {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lnpb-line-2);
  font-size: var(--lnpb-plan-spec-size);
  color: var(--lnpb-body);
}
.lnew-plan-builder__plan-spec {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0; overflow-wrap: break-word;
}
.lnew-plan-builder__plan-spec svg {
  flex: none;
  width: 13px; height: 13px;
  margin-top: 3px;
  color: var(--lnpb-accent);
}
.lnew-plan-builder__plan-spec b { color: var(--lnpb-ink); font-weight: 700; }

/* the "Selected / Choose" affordance closing every card */
.lnew-plan-builder__plan-pick {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px; font-weight: 600;
  color: var(--lnpb-muted-2);
  transition: color .2s ease;
}
.lnew-plan-builder__plan-pick svg { width: 15px; height: 15px; opacity: 0; transition: opacity .2s ease; }
.lnew-plan-builder .lnew-plan-builder__plan:hover .lnew-plan-builder__plan-pick { color: var(--lnpb-accent); }
.lnew-plan-builder .lnew-plan-builder__plan.is-selected .lnew-plan-builder__plan-pick { color: var(--lnpb-accent); font-weight: 700; }
.lnew-plan-builder .lnew-plan-builder__plan.is-selected .lnew-plan-builder__plan-pick svg { opacity: 1; }

/* =====================================================================
   Step 2 — the configurator. Two columns on the wide layout: the option
   list, and the sticky running-total rail.
   ===================================================================== */
.lnew-plan-builder__config {
  margin-top: 44px;
}

.lnew-plan-builder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lnpb-rail-w);
  gap: var(--lnpb-config-gap);
  align-items: start;
}

.lnew-plan-builder__panel {
  min-width: 0;
  background: var(--lnpb-surface);
  -webkit-backdrop-filter: var(--lnpb-glass-blur);
  backdrop-filter: var(--lnpb-glass-blur);
  border: 1px solid var(--lnpb-line);
  border-radius: var(--lnpb-panel-radius);
  padding: var(--lnpb-panel-pad);
  box-shadow: var(--lnpb-panel-shadow);
}

.lnew-plan-builder__panel-h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-family: var(--lnpb-font-head);
  font-size: 19px; font-weight: 700;
  line-height: 1.3;
  color: var(--lnpb-ink);
}
.lnew-plan-builder__panel-sub {
  margin-top: 7px;
  font-size: 14px;
  color: var(--lnpb-muted);
  line-height: 1.6;
}

/* ---- option groups ---- */
.lnew-plan-builder__group + .lnew-plan-builder__group { margin-top: 26px; }
.lnew-plan-builder__group-h {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--lnpb-line-2);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.6;
  color: var(--lnpb-muted-2);
}
.lnew-plan-builder__group:first-child > .lnew-plan-builder__group-h {
  margin-top: 22px;
  padding-top: 20px;
}

.lnew-plan-builder__opts {
  display: flex; flex-direction: column;
  gap: var(--lnpb-opt-gap);
}

/* An option is a CARD, not a form row.

   It used to be a flat grey well with a hairline — which is what a settings
   form looks like, and read as unfinished next to the homepage's raised,
   gradient-edged panels. It now borrows that page's exact vocabulary: a white
   surface that lifts on hover, the masked gradient ring
   (.lnew-features__gborder), and an icon chip that flips to solid accent and
   tilts (.lnew-features__cap:hover .cap-ic). Nothing here is new to the
   design system; it is the system's card language applied to a control. */
.lnew-plan-builder__opt {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
  padding: var(--lnpb-opt-pad-y) var(--lnpb-opt-pad-x);
  border: 1px solid var(--lnpb-line);
  border-radius: var(--lnpb-opt-radius);
  background: var(--lnpb-surface);
  box-shadow: var(--lnpb-shadow-sm);
  transition: transform .3s var(--lnpb-ease), box-shadow .3s var(--lnpb-ease),
              border-color .25s ease, background .25s ease;
}
/* The gradient ring. Three notes carried over from lnew-features.css, all
   load-bearing: `xor` (WebKit) and `exclude` (standard) are NOT aliases and
   both lines are required; border-radius:inherit only works because the host
   declares a radius; and the ring is a pseudo so it cannot take pointer
   events away from the stepper inside. */
.lnew-plan-builder__opt::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--lnpb-accent-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: 0;
  transition: opacity .4s var(--lnpb-ease);
}
.lnew-plan-builder__opt:hover {
  transform: translateY(-3px);
  box-shadow: var(--lnpb-shadow-md);
}
.lnew-plan-builder__opt:hover::before { opacity: .65; }
.lnew-plan-builder__opt:focus-within::before { opacity: .85; }
.lnew-plan-builder__opt.is-on {
  border-color: transparent;
  background: var(--lnpb-accent-soft-bg);
}
.lnew-plan-builder__opt.is-on::before { opacity: 1; }

.lnew-plan-builder__opt-main {
  flex: 1 1 220px;
  min-width: 0;
}
.lnew-plan-builder__opt-label {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--lnpb-font-head);
  font-size: var(--lnpb-opt-label-size); font-weight: 700;
  line-height: 1.4;
  color: var(--lnpb-ink);
  overflow-wrap: break-word;
}
.lnew-plan-builder__opt-ic {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--lnpb-accent-soft-bg);
  border: 1px solid var(--lnpb-accent-soft-border);
  color: var(--lnpb-accent);
  transition: background .28s ease, border-color .28s ease, color .28s ease,
              transform .3s var(--lnpb-ease);
}
.lnew-plan-builder__opt-ic svg { width: 16px; height: 16px; }
.lnew-plan-builder__opt:hover .lnew-plan-builder__opt-ic {
  transform: translateY(-2px) rotate(-4deg);
}
.lnew-plan-builder__opt.is-on .lnew-plan-builder__opt-ic {
  background: var(--lnpb-accent);
  border-color: transparent;
  color: var(--lnpb-accent-ink);
}
.lnew-plan-builder__opt-note {
  margin-top: 4px;
  font-size: var(--lnpb-opt-note-size);
  color: var(--lnpb-muted);
  line-height: 1.5;
  overflow-wrap: break-word;
}
/* =====================================================================
   THE BAND METER — the one picture this section really needed.

   Graduated pricing is the least intuitive thing on the page: the rate goes
   UP as you buy more, which is the opposite of every volume discount a buyer
   has ever seen. A sentence can state it; a bar shows it. Three segments,
   each growing in proportion to how many units fall in that band, each a step
   warmer than the last (teal -> indigo -> rose, the ladder hues the Add-Ons
   menu uses for the same three bands). Empty bands stay as thin grey stubs so
   the ladder is legible before you have bought anything.

   Widths come from JS as --f (a flex-grow number), so the bar is one flex row
   and the browser does the arithmetic.
   ===================================================================== */
.lnew-plan-builder__bands {
  display: flex; align-items: stretch;
  gap: 3px;
  margin-top: 11px;
  height: 6px;
  /* capped, and short of the row's full width on purpose — a 600px-wide 6px
     bar reads as a progress indicator for the whole card rather than a
     property of the meter above it */
  max-width: 280px;
}
.lnew-plan-builder__bands[hidden] { display: none; }
/* `flex-grow` is set INLINE by the script, not fed in through a custom
   property. `flex: var(--f) 1 0` looks tidier and does not work: Chrome
   resolves a shorthand's var() at computed-value time and the transition then
   latches onto a stale "from", so the segments render one interaction behind —
   set 22 extra seats and the bar still showed the weights for 2. Setting the
   longhand directly transitions correctly. */
.lnew-plan-builder__band {
  flex: 0 1 0;
  min-width: 10px;
  border-radius: 100px;
  background: var(--lnpb-line);
  /* NO transition on flex-grow. Animating it looked better for one frame and
     then lied: Chrome kept returning the previous weights for up to a second
     after the value changed, so the bar showed the ladder for the PREVIOUS
     quantity. The width snaps; the colour and opacity still animate, which is
     where the eye is anyway. */
  transition: background .35s ease, opacity .35s ease;
  opacity: .55;
}
.lnew-plan-builder__band.is-lit { opacity: 1; }
.lnew-plan-builder__band:nth-child(1).is-lit { background: var(--lnpb-band-1); }
.lnew-plan-builder__band:nth-child(2).is-lit { background: var(--lnpb-band-2); }
.lnew-plan-builder__band:nth-child(3).is-lit { background: var(--lnpb-band-3); }

/* the live "8 extra · $8 × 3 + $12 × 4 + $18 × 1" line under a meter */
.lnew-plan-builder__opt-hint {
  margin-top: 6px;
  font-size: var(--lnpb-opt-hint-size);
  color: var(--lnpb-accent);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.lnew-plan-builder__opt-hint:empty { display: none; }

.lnew-plan-builder__opt-side {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto;
}
.lnew-plan-builder__opt-cost {
  font-family: var(--lnpb-font-head);
  font-size: 14.5px; font-weight: 700;
  line-height: 1.3;
  color: var(--lnpb-ink);
  white-space: nowrap;
  text-align: right;
  min-width: 62px;
}
.lnew-plan-builder__opt-cost.is-zero { color: var(--lnpb-muted-2); font-weight: 600; }
.lnew-plan-builder__opt-cost small {
  display: block;
  font-family: var(--lnpb-font-sans);
  font-size: 11px; font-weight: 500;
  color: var(--lnpb-muted-2);
}
/* the "Included" flag on an add-on a tier bundles for free */
.lnew-plan-builder__opt-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--lnpb-accent-soft-bg);
  border: 1px solid var(--lnpb-accent-soft-border);
  color: var(--lnpb-accent);
  font-size: 12px; font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* =====================================================================
   Stepper — [ − | field | + ]
   Written at (0,2,0) throughout so a theme's `button` / `input` styling
   cannot reach in.
   ===================================================================== */
.lnew-plan-builder__step {
  display: inline-flex; align-items: stretch;
  flex: none;
  height: var(--lnpb-step-h);
  border: 1px solid var(--lnpb-line);
  border-radius: var(--lnpb-step-radius);
  background: var(--lnpb-surface);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lnew-plan-builder__step:focus-within {
  border-color: var(--lnpb-accent);
  box-shadow: 0 0 0 3px var(--lnpb-accent-halo);
}
.lnew-plan-builder .lnew-plan-builder__step-btn {
  flex: none;
  width: var(--lnpb-step-btn);
  display: grid; place-items: center;
  margin: 0; padding: 0;
  border: none;
  background: none;
  color: var(--lnpb-muted);
  cursor: pointer;
  font-family: inherit;
  line-height: normal;
  appearance: none; -webkit-appearance: none;
  transition: background .18s ease, color .18s ease;
}
.lnew-plan-builder .lnew-plan-builder__step-btn svg { width: 15px; height: 15px; }
.lnew-plan-builder .lnew-plan-builder__step-btn:hover:not(:disabled) {
  background: var(--lnpb-accent-soft-bg);
  color: var(--lnpb-accent);
}
.lnew-plan-builder .lnew-plan-builder__step-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.lnew-plan-builder .lnew-plan-builder__step-btn:focus-visible {
  outline: 2px solid var(--lnpb-accent);
  outline-offset: -2px;
}
.lnew-plan-builder .lnew-plan-builder__step-field {
  flex: none;
  width: var(--lnpb-step-field);
  min-width: 0;
  margin: 0; padding: 0 4px;
  border: none;
  border-left: 1px solid var(--lnpb-line-2);
  border-right: 1px solid var(--lnpb-line-2);
  border-radius: 0;
  background: none;
  text-align: center;
  font-family: var(--lnpb-font-head);
  font-size: var(--lnpb-step-size); font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  color: var(--lnpb-ink);
  appearance: none; -webkit-appearance: none;
  box-shadow: none;
}
.lnew-plan-builder .lnew-plan-builder__step-field:focus { outline: none; box-shadow: none; }
/* belt and braces: some themes ship number spinners even on text inputs */
.lnew-plan-builder .lnew-plan-builder__step-field::-webkit-outer-spin-button,
.lnew-plan-builder .lnew-plan-builder__step-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =====================================================================
   Switch — a real checkbox, visually a track + knob. The input keeps its
   own hit area (it sits on top at zero opacity) so the control is
   keyboard-operable and announces its checked state natively.
   ===================================================================== */
.lnew-plan-builder__switch {
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--lnpb-switch-w);
  height: var(--lnpb-switch-h);
}
.lnew-plan-builder .lnew-plan-builder__switch-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  appearance: none; -webkit-appearance: none;
}
.lnew-plan-builder__switch-track {
  position: absolute; inset: 0;
  border-radius: 100px;
  background: var(--lnpb-toggle-bg);
  border: 1px solid var(--lnpb-line);
  transition: background .22s var(--lnpb-ease), border-color .22s ease;
  pointer-events: none;
}
.lnew-plan-builder__switch-track::after {
  content: "";
  position: absolute;
  top: 50%; left: 3px;
  width: calc(var(--lnpb-switch-h) - 10px);
  height: calc(var(--lnpb-switch-h) - 10px);
  border-radius: 50%;
  background: var(--lnpb-surface);
  box-shadow: 0 1px 3px rgba(30,30,80,.28);
  transform: translateY(-50%);
  transition: transform .22s var(--lnpb-ease), background .22s ease;
}
.lnew-plan-builder__switch-input:checked + .lnew-plan-builder__switch-track {
  background: var(--lnpb-accent);
  border-color: var(--lnpb-accent);
}
.lnew-plan-builder__switch-input:checked + .lnew-plan-builder__switch-track::after {
  background: #ffffff;
  transform: translateY(-50%) translateX(calc(var(--lnpb-switch-w) - var(--lnpb-switch-h) + 2px));
}
.lnew-plan-builder__switch-input:focus-visible + .lnew-plan-builder__switch-track {
  outline: 2px solid var(--lnpb-accent);
  outline-offset: 3px;
}
.lnew-plan-builder__switch-input:disabled { cursor: not-allowed; }
.lnew-plan-builder__switch-input:disabled + .lnew-plan-builder__switch-track { opacity: .45; }

/* =====================================================================
   The notice that replaces the option list when the picked plan cannot be
   customised — Free (no add-ons at all) and Custom (talk to a human).
   ===================================================================== */
.lnew-plan-builder__notice {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 22px;
  padding: 20px;
  border-radius: var(--lnpb-opt-radius);
  border: 1px solid var(--lnpb-accent-soft-border);
  background: var(--lnpb-accent-soft-bg);
}
.lnew-plan-builder__notice-ic {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--lnpb-accent);
  color: var(--lnpb-accent-ink);
}
.lnew-plan-builder__notice-ic svg { width: 17px; height: 17px; }
.lnew-plan-builder__notice-b {
  font-family: var(--lnpb-font-head);
  font-size: 15.5px; font-weight: 700;
  line-height: 1.4;
  color: var(--lnpb-ink);
}
.lnew-plan-builder__notice-p {
  margin-top: 5px;
  font-size: 14px;
  color: var(--lnpb-body);
  line-height: 1.6;
}

/* =====================================================================
   The running-total rail
   ===================================================================== */
.lnew-plan-builder__rail {
  min-width: 0;
  position: sticky;
  top: var(--lnpb-sticky-top);
}

.lnew-plan-builder__sum {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--lnpb-sum-wash-1), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, var(--lnpb-sum-wash-2), transparent 55%),
    var(--lnpb-sum-bg);
  -webkit-backdrop-filter: var(--lnpb-glass-blur);
  backdrop-filter: var(--lnpb-glass-blur);
  border: 1px solid transparent;
  border-radius: var(--lnpb-sum-radius);
  padding: var(--lnpb-sum-pad);
  box-shadow: var(--lnpb-shadow-md);
}
/* The rail wears the gradient ring PERMANENTLY, not on hover — it is the one
   thing on the page that is always live, and the brand edge is what says so.
   Same masked-border technique as the option cards. */
.lnew-plan-builder__sum::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--lnpb-accent-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: .55;
}
.lnew-plan-builder__sum-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.6;
  color: var(--lnpb-muted-2);
}
.lnew-plan-builder__sum-plan {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--lnpb-accent-soft-bg);
  border: 1px solid var(--lnpb-accent-soft-border);
  color: var(--lnpb-accent);
  font-family: var(--lnpb-font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap;
}

.lnew-plan-builder__sum-lines {
  display: flex; flex-direction: column; gap: 11px;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--lnpb-line-2);
  font-size: var(--lnpb-sum-line-size);
  line-height: 1.5;
}
.lnew-plan-builder__sum-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.lnew-plan-builder__sum-line-t { min-width: 0; color: var(--lnpb-body); overflow-wrap: break-word; }
.lnew-plan-builder__sum-line-t small {
  display: block;
  font-size: 11.5px;
  color: var(--lnpb-muted-2);
}
.lnew-plan-builder__sum-line-v {
  flex: none;
  font-family: var(--lnpb-font-head);
  font-weight: 700;
  color: var(--lnpb-ink);
  white-space: nowrap;
}
.lnew-plan-builder__sum-line--base .lnew-plan-builder__sum-line-t { color: var(--lnpb-ink); font-weight: 600; }
.lnew-plan-builder__sum-line--free .lnew-plan-builder__sum-line-v { color: var(--lnpb-accent); }

.lnew-plan-builder__sum-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.lnew-plan-builder__sum-total-l {
  font-size: 13.5px; font-weight: 600;
  color: var(--lnpb-muted);
}
.lnew-plan-builder__sum-total-v {
  display: flex; align-items: baseline; gap: 3px;
  flex-wrap: wrap;
  margin-left: auto;
}
.lnew-plan-builder__sum-total-v.is-sym-after .lnew-plan-builder__sum-cur { order: 1; }
.lnew-plan-builder__sum-total-v.is-sym-after .lnew-plan-builder__sum-per { order: 2; }
.lnew-plan-builder__sum-cur {
  font-family: var(--lnpb-font-head);
  font-size: 20px; font-weight: 700;
  color: var(--lnpb-ink);
}
.lnew-plan-builder__sum-amt {
  display: inline-block;
  font-family: var(--lnpb-font-head);
  font-size: var(--lnpb-sum-total-size); font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--lnpb-ink);
  transform-origin: right center;
}
/* The total ACKNOWLEDGES a change. Without it the single most important
   number on the page swaps silently — you press "+" and nothing appears to
   happen, because the figure that moved is 400px away from the button. One
   short spring, retriggered by the script removing and re-adding the class.
   `right center` origin so a growing figure does not shove the currency
   symbol sideways. */
.lnew-plan-builder__sum-amt.is-bump { animation: lnpb-total-bump .42s var(--lnpb-ease); }
@keyframes lnpb-total-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.075); }
  100% { transform: scale(1); }
}
.lnew-plan-builder__sum-per {
  font-size: 13px;
  color: var(--lnpb-muted);
}
.lnew-plan-builder__sum-once {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--lnpb-line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px;
  color: var(--lnpb-muted);
}
.lnew-plan-builder__sum-once b {
  font-family: var(--lnpb-font-head);
  font-size: 16px; font-weight: 800;
  color: var(--lnpb-ink);
  white-space: nowrap;
}
.lnew-plan-builder__sum-once[hidden] { display: none; }

.lnew-plan-builder__sum-cta { margin-top: 20px; }
.lnew-plan-builder__sum-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--lnpb-muted-2);
  line-height: 1.6;
  text-align: center;
}
.lnew-plan-builder__sum-note:empty { display: none; }

/* the "reset to the plan's included quotas" affordance */
.lnew-plan-builder .lnew-plan-builder__reset {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0;
  border: none; background: none;
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lnpb-muted-2);
  cursor: pointer;
  transition: color .18s ease;
}
.lnew-plan-builder .lnew-plan-builder__reset:hover { color: var(--lnpb-accent); }
.lnew-plan-builder .lnew-plan-builder__reset:focus-visible { outline: 2px solid var(--lnpb-accent); outline-offset: 2px; }
.lnew-plan-builder .lnew-plan-builder__reset svg { width: 13px; height: 13px; }

/* =====================================================================
   Buttons — the design system's .btn, scoped to this widget
   ===================================================================== */
.lnew-plan-builder__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--lnpb-font-sans);
  font-size: var(--lnpb-btn-size); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.6;
  padding: var(--lnpb-btn-pad-y) var(--lnpb-btn-pad-x);
  border-radius: var(--lnpb-btn-radius);
  transition: transform .22s var(--lnpb-ease), box-shadow .3s var(--lnpb-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
  white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
}
.lnew-plan-builder__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnpb-ease); }
.lnew-plan-builder__btn:hover svg { transform: translateX(4px); }
.lnew-plan-builder__btn--block { width: 100%; }

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

/* =====================================================================
   The mobile running-total minibar. Display is a TOKEN, not a property, so
   the breakpoint below and any future control both write the same thing.
   Non-interactive by design — see structural note 3.
   ===================================================================== */
.lnew-plan-builder__minibar {
  display: var(--lnpb-minibar-display);
  position: sticky;
  top: var(--lnpb-sticky-top);
  z-index: 6;
  align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
  padding: 11px 16px;
  border-radius: 100px;
  background: var(--lnpb-surface);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--lnpb-line);
  box-shadow: var(--lnpb-shadow-md);
}
.lnew-plan-builder__minibar-l {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
  font-size: 13px; font-weight: 600;
  color: var(--lnpb-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lnew-plan-builder__minibar-dot {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnpb-accent);
  box-shadow: 0 0 0 3px var(--lnpb-accent-halo);
}
.lnew-plan-builder__minibar-v {
  flex: none;
  font-family: var(--lnpb-font-head);
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lnpb-ink);
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .lnew-plan-builder .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-plan-builder__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-plan-builder__btn--primary { animation: none !important; }
  .lnew-plan-builder__btn--primary::before { animation: none !important; display: none; }
  .lnew-plan-builder__btn svg,
  .lnew-plan-builder .lnew-plan-builder__plan,
  .lnew-plan-builder__switch-track,
  .lnew-plan-builder__switch-track::after { transition: none; }
  /* the ladder still shows which bands are live — only the re-weighting
     animation and the total's spring go */
  .lnew-plan-builder__band { transition: none; }
  .lnew-plan-builder__sum-amt.is-bump { animation: none !important; }
  .lnew-plan-builder__opt, .lnew-plan-builder__opt::before,
  .lnew-plan-builder__opt-ic { transition: none; }
}

/* =====================================================================
   Responsive. Ordered widest-first so the rules that write --lnpb-plan-cols
   resolve in the right direction. The design system's own step ladder is
   1080 / 1040 / 760 / 600 / 460; two extra stops (1240 and 900) belong to
   this section's own two structures — the five-up plan row and the
   two-column configurator — neither of which exists elsewhere.
   ===================================================================== */
@media (max-width: 1240px) {
  .lnew-plan-builder { --lnpb-rail-w: 330px; --lnpb-plan-gap: 14px; --lnpb-plan-pad-x: 17px; }
}

@media (max-width: 1080px) {
  .lnew-plan-builder { --lnpb-plan-cols: 3; }
}

@media (max-width: 1040px) {
  .lnew-plan-builder {
    --lnpb-gutter: 24px;
    --lnpb-panel-pad: 22px;
    --lnpb-sum-pad: 22px;
    padding-top: 84px; padding-bottom: 84px;
  }
  .lnew-plan-builder__head { margin-bottom: 34px; }
}

/* The configurator stacks BEFORE the plan row does: a 330px rail beside a
   ~430px option list starts crowding the steppers well above the tablet step. */
@media (max-width: 900px) {
  .lnew-plan-builder {
    --lnpb-minibar-display: flex;
    /* the running-total bar parks tighter than the desktop rail did — the
       site header is shorter on a phone, and every pixel above the fold is
       one the option list does not get */
    --lnpb-sticky-top: 76px;
  }
  .lnew-plan-builder__grid { grid-template-columns: minmax(0, 1fr); }
  .lnew-plan-builder__rail { position: static; top: auto; }
}

@media (max-width: 760px) {
  .lnew-plan-builder {
    --lnpb-gutter: 20px;
    --lnpb-lead-size: 16.5px;
    --lnpb-plan-cols: 2;
    padding-top: 64px; padding-bottom: 64px;
  }
  .lnew-plan-builder__head { margin-bottom: 28px; }
  .lnew-plan-builder__config { margin-top: 32px; }
}

@media (max-width: 600px) {
  .lnew-plan-builder {
    --lnpb-panel-pad: 18px;
    --lnpb-sum-pad: 18px;
    --lnpb-opt-pad-x: 14px;
    --lnpb-opt-pad-y: 14px;
  }
  /* the option row goes label-over-control at this width, so the control no
     longer has to share a line with a two-line label */
  .lnew-plan-builder__opt { gap: 12px; }
  .lnew-plan-builder__opt-main { flex: 1 1 100%; }
  .lnew-plan-builder__opt-side { margin-left: 0; width: 100%; justify-content: space-between; }
  .lnew-plan-builder__opt-cost { text-align: left; min-width: 0; }
  /* …and the cost swaps to the left of the control so the eye reads
     "price, then the thing you change" instead of a ragged right edge */
  .lnew-plan-builder__opt-cost { order: 1; }
  .lnew-plan-builder__step, .lnew-plan-builder__switch, .lnew-plan-builder__opt-flag { order: 2; }
}

@media (max-width: 460px) {
  .lnew-plan-builder {
    --lnpb-gutter: 16px;
    --lnpb-plan-cols: 1;
    --lnpb-plan-best-min-h: 0px;
    --lnpb-step-field: 62px;
    padding-top: 54px; padding-bottom: 54px;
  }
  .lnew-plan-builder__head { margin-bottom: 24px; }
  .lnew-plan-builder__minibar { padding: 10px 14px; }
}