/* =====================================================================
   LeadsNimble Why Wins — the "no other tool does all of this" comparison.
   Ported 1:1 from leadsnimble_html:
     src/html/partials/why-wins.html
     src/css/components/why-wins.css      (#why, .compare, .yes)
     src/css/base/1-reset.css             (type baseline, h2 metrics)
     src/css/base/2-layout.css            (.wrap, .section, .section__head, .eyebrow, .accent-text)
     src/css/base/3-utilities.css         (.reveal stagger, reduced motion)
     src/css/base/4-responsive.css        (gutter / section padding / head spacing steps)
     src/css/themes/aurora-nightfall/     (tokens resolved to literal values)

   Same conventions as lnew-solution.css / lnew-features.css: the theme's
   tokens are resolved to literal values and re-scoped under --lnw-*, LIGHT is
   the default mode, and [data-mode="dark"] flips the palette (the same switch
   the nav writes). The dark palette control section is emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-why so it outranks the light controls
   on specificity, not source order.

   THREE deliberate departures from a naive copy of the reference CSS — all
   render-identical at the reference's own settings, all documented inline:

   1. The raised product panel. The reference draws it with `.compare::before`
      positioned at a HARDCODED `left: 64.86%` — a rounding of the real column
      boundary, 2.4/3.7 = 64.8648%. Hardcoding it means any change to the
      column ratios silently strands the panel. Here the columns are authored
      as percentages (--lnw-col-1 / --lnw-col-2, mathematically identical to
      the reference's 1.4fr / 1fr at every width) and the panel's left edge is
      DERIVED from them, so the panel tracks the column boundary exactly no
      matter what the Style tab does to the ratios.

   2. Padding / font-size steps are tokens, not a source-order accident. In the
      reference, `.compare__h--cap { padding: 22px 26px }` is quietly undone at
      <=720px by the LATER `.compare__h, .compare__c { padding: 13px 14px }`
      rule at equal specificity, and `.compare__h--ln` keeps only its
      overridden `padding-top`. Rebuilding that cascade would make the control
      surface unpredictable, so the COMPUTED result is authored directly via
      --lnw-cell-pad-* / --lnw-cap-pad-y / --lnw-ln-pad-*, which resolve to the
      reference's exact numbers at both widths.

   3. The reference section is light-only (`#why` paints a fixed light gradient
      with no dark-mode rule, so on a dark page it would render near-white text
      on a pale slab). A real dark palette is provided below. Light mode — the
      site's default — is unchanged.
   ===================================================================== */

/* 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-why svg {}` is (0,1,1) and would outrank the
   component rules it is meant to sit under. */
.lnew-why, .lnew-why *, .lnew-why *::before, .lnew-why *::after { box-sizing: border-box; }
:where(.lnew-why) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-why) :where(p) { margin: 0; }
:where(.lnew-why) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-why) :where(svg) { display: block; }
:where(.lnew-why) :where(h1, h2, h3, h4, h5) { margin: 0; }

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

  /* ---- geometry ---- */
  --lnw-maxw: 1360px;
  --lnw-gutter: 28px;
  --lnw-radius-xl: 30px;
  --lnw-title-size: clamp(31px, 3.6vw, 47px);
  --lnw-head-align: center;
  --lnw-compare-top: 24px;

  /* Column tracks, verbatim from the reference. Authored as three separate
     custom properties so the Style tab can hand any of them a percentage
     instead; whatever is left over is absorbed by column 3's flex track. */
  --lnw-col-1: 1.4fr;
  --lnw-col-2: 1fr;
  --lnw-col-3: 1.3fr;

  /* Cell metrics (see departure #2 in the header comment) */
  --lnw-cell-pad-y: 16px;
  --lnw-cell-pad-x: 26px;
  --lnw-cap-pad-y: 22px;
  --lnw-ln-pad-top: 30px;
  --lnw-ln-pad-bottom: 20px;
  --lnw-h-other-size: 12.5px;
  --lnw-h-ln-size: 20px;
  --lnw-label-size: 12.5px;
  --lnw-c-size: 14.5px;
  --lnw-badge: 22px;
  --lnw-badge-glyph: 12px;
  --lnw-badge-gap: 11px;

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

  /* ---- palette · LIGHT (the site's default mode) ---- */
  --lnw-bg-1: #dae2f0;
  --lnw-bg-2: #f0f4fb;
  --lnw-bg-stop: 55%;
  --lnw-ink: #12122a;
  --lnw-body: #454a63;
  --lnw-muted: #6b7089;

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

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

  --lnw-panel-bg: #ffffff;
  --lnw-panel-border: #e0e3ff;
  --lnw-panel-shadow-1: rgba(99,102,241,.42);
  --lnw-panel-shadow-2: rgba(30,30,80,.12);
  --lnw-head-ln-bg: #eef0ff;
  --lnw-divider: #d5d9e6;

  --lnw-yes-bg: #2eb96a;
  --lnw-yes-ink: #ffffff;
  --lnw-yes-glow: rgba(46,185,106,.35);
  --lnw-no-bg: #e0574a;
  --lnw-no-glow: rgba(224,87,74,.32);
  --lnw-dash-bg: #b9bed2;

  position: relative;
  overflow-x: clip;
  padding-top: 112px;
  padding-bottom: 112px;
  background: linear-gradient(180deg, var(--lnw-bg-1) 0%, var(--lnw-bg-2) var(--lnw-bg-stop));
  font-family: var(--lnw-font-sans);
  color: var(--lnw-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

/* ---- palette · DARK ([data-mode="dark"] on <html>, written by the nav) ----
   Not in the reference (see departure #3). Derived from the aurora dark
   tokens so the band sits on the dark page instead of punching a pale hole
   in it, and so the raised product column still reads as raised. */
[data-mode="dark"] .lnew-why {
  --lnw-bg-1: #0b0b16;
  --lnw-bg-2: #12121f;
  --lnw-ink: #f5f6ff;
  --lnw-body: #b8bed6;
  --lnw-muted: #949bbb;

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

  --lnw-accent: #8b7cff;
  --lnw-accent-halo: rgba(139,124,255,.28);

  --lnw-panel-bg: #141428;
  --lnw-panel-border: rgba(139,124,255,.24);
  --lnw-panel-shadow-1: rgba(99,102,241,.42);
  --lnw-panel-shadow-2: rgba(0,0,0,.45);
  --lnw-head-ln-bg: rgba(139,124,255,.12);
  --lnw-divider: rgba(255,255,255,.10);

  --lnw-yes-bg: #2eb96a;
  --lnw-yes-ink: #ffffff;
  --lnw-yes-glow: rgba(46,185,106,.35);
  --lnw-no-bg: #ef5f52;
  --lnw-no-glow: rgba(239,95,82,.32);
  --lnw-dash-bg: #4a5070;
}

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

.lnew-why__head {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: var(--lnw-head-align);
}

/* =====================================================================
   Eyebrow — the dim indicator lamp. Kept dim on purpose: a continuous
   sine pulse reads as decoration, a lit/unlit cycle reads as a status light.
   ===================================================================== */
.lnew-why__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnw-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnw-eyebrow-ink);
  background: var(--lnw-eyebrow-bg);
  border: 1px solid var(--lnw-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-why__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnw-accent);
  box-shadow: 0 0 0 4px var(--lnw-accent-halo);
  opacity: .45;
  animation: lnw-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnw-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnw-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnw-accent-halo), 0 0 7px 1px var(--lnw-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnw-accent-halo), 0 0 7px 1px var(--lnw-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnw-accent-halo), 0 0 0 0 transparent; }
}

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

/* =====================================================================
   The comparison grid — label | typical | Leads Nimble.

   Cells STRETCH to the full row height (not align-self:center) so every
   border-top lands at the exact same Y across all three columns — otherwise
   the taller "Yes"+badge cell centres higher and the divider staircases at
   the column boundary. Content is re-centred vertically via flex.
   ===================================================================== */
.lnew-why__compare {
  position: relative;
  display: grid;
  grid-template-columns: var(--lnw-col-1) var(--lnw-col-2) var(--lnw-col-3);
  margin-top: var(--lnw-compare-top);
}

/* Row wrappers are display:contents — they give the grid real ARIA table
   semantics (the reference is a flat pile of divs a screen reader reads as
   loose text) while leaving every child a direct grid item, so layout is
   byte-for-byte what the flat markup produced. */
.lnew-why__row { display: contents; }

/* The raised product panel: ONE rounded element behind column 3, so it casts
   a true panel-shaped drop shadow rather than a stitched, square one. Cells
   sit on top at z-index 1.

   It is drawn inside an absolutely-positioned OVERLAY GRID that repeats the
   table's own track list, and the slab is simply placed in that overlay's
   column 3. The reference instead hardcodes `left: 64.86%` on a ::before —
   a rounded copy of 2.4/3.7 that is 1/16 px off the real column edge and that
   silently strands the panel the moment the ratios change. Resolving the same
   tracks a second time is exact by construction and needs no maintenance.
   (Absolutely positioned, so unlike the reference's stray in-flow <span> it
   also costs no zero-height grid row.) */
.lnew-why__panel {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: grid;
  grid-template-columns: var(--lnw-col-1) var(--lnw-col-2) var(--lnw-col-3);
}
.lnew-why__panel-fill {
  grid-column: 3;
  background: var(--lnw-panel-bg);
  border: 1px solid var(--lnw-panel-border);
  border-radius: var(--lnw-radius-xl);
  box-shadow: 0 30px 58px -22px var(--lnw-panel-shadow-1),
              0 8px 24px -10px var(--lnw-panel-shadow-2);
}

.lnew-why__h, .lnew-why__c {
  position: relative; z-index: 1;
  padding: var(--lnw-cell-pad-y) var(--lnw-cell-pad-x);
  display: flex; align-items: center;
  /* safety net for user-authored labels longer than the reference's: without
     these a min-content-wide word spills the fixed-width track. No effect on
     the reference copy, which fits at every breakpoint. */
  min-width: 0;
  overflow-wrap: break-word;
}

.lnew-why__h--cap,   .lnew-why__c--label { grid-column: 1; }
.lnew-why__h--other, .lnew-why__c--other { grid-column: 2; }
.lnew-why__h--ln,    .lnew-why__c--ln    { grid-column: 3; }
.lnew-why__h--other, .lnew-why__h--ln,
.lnew-why__c--other, .lnew-why__c--ln { justify-content: center; }

.lnew-why__h { font-family: var(--lnw-font-head); }
.lnew-why__h--cap { padding: var(--lnw-cap-pad-y) var(--lnw-cell-pad-x); }
.lnew-why__h--other {
  text-align: center; color: var(--lnw-muted);
  font-weight: 700; font-size: var(--lnw-h-other-size);
  letter-spacing: .09em; text-transform: uppercase;
}
.lnew-why__h--ln {
  text-align: center;
  padding: var(--lnw-ln-pad-top) var(--lnw-cell-pad-x) var(--lnw-ln-pad-bottom);
  font-size: var(--lnw-h-ln-size); font-weight: 700;
  border-radius: var(--lnw-radius-xl) var(--lnw-radius-xl) 0 0;
  background: linear-gradient(180deg, var(--lnw-head-ln-bg), transparent 92%);
}
.lnew-why__h--ln .lnew-why__accent { font-family: var(--lnw-font-head); font-weight: 700; }

/* row dividers — clearly visible */
.lnew-why__c { border-top: 1px solid var(--lnw-divider); }
.lnew-why__c--label {
  color: var(--lnw-ink); font-weight: 700; font-size: var(--lnw-label-size);
  letter-spacing: .06em; text-transform: uppercase;
}
.lnew-why__c--other { color: var(--lnw-muted); font-size: var(--lnw-c-size); text-align: center; }
.lnew-why__c--ln    { color: var(--lnw-ink);   font-size: var(--lnw-c-size); text-align: center; }

/* With the header row hidden, the first data row becomes the panel's top edge:
   drop its divider and carry the panel radius so the corner stays clean. */
.lnew-why--no-head .lnew-why__row--first .lnew-why__c { border-top: 0; }
.lnew-why--no-head .lnew-why__row--first .lnew-why__c--ln {
  border-radius: var(--lnw-radius-xl) var(--lnw-radius-xl) 0 0;
  padding-top: var(--lnw-ln-pad-bottom);
}

/* =====================================================================
   Verdict badge — circle-check (and its cross / dash siblings)
   ===================================================================== */
.lnew-why__yes {
  display: inline-flex; align-items: center; gap: var(--lnw-badge-gap);
  color: var(--lnw-ink); font-weight: 500;
}
/* in the "typical tools" column the badge decorates muted body copy, so it
   must not inherit the product column's ink + medium weight */
.lnew-why__c--other .lnew-why__yes { color: inherit; font-weight: inherit; }

.lnew-why__yes-c {
  flex: none;
  width: var(--lnw-badge); height: var(--lnw-badge);
  border-radius: 50%;
  background: var(--lnw-yes-bg);
  display: grid; place-items: center;
  box-shadow: 0 2px 7px var(--lnw-yes-glow);
}
.lnew-why__yes-c svg { width: var(--lnw-badge-glyph); height: var(--lnw-badge-glyph); color: var(--lnw-yes-ink); }

.lnew-why__yes--cross .lnew-why__yes-c { background: var(--lnw-no-bg); box-shadow: 0 2px 7px var(--lnw-no-glow); }
.lnew-why__yes--dash  .lnew-why__yes-c { background: var(--lnw-dash-bg); box-shadow: none; }

/* text-only verdict: keep the flex box (so the gap collapses cleanly) but
   drop the badge entirely */
.lnew-why__yes--plain { gap: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .lnew-why .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-why__eyebrow-dot { animation: none !important; opacity: 1; }
}

/* =====================================================================
   Responsive — the reference's own steps, nothing invented.
     base/4-responsive.css : 1040 / 760 / 460  (gutter, section pad, head gap)
     components/why-wins.css : 720             (the whole table tightens)
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-why { --lnw-gutter: 24px; padding-top: 84px; padding-bottom: 84px; }
  .lnew-why__head { margin-bottom: 44px; }
}

@media (max-width: 760px) {
  .lnew-why { --lnw-gutter: 20px; padding-top: 64px; padding-bottom: 64px; }
  .lnew-why__head { margin-bottom: 34px; }
  .lnew-why__lead { font-size: 16.5px; }
}

@media (max-width: 720px) {
  .lnew-why {
    --lnw-col-1: 1.3fr;
    --lnw-col-2: .8fr;
    --lnw-col-3: 1fr;
    --lnw-cell-pad-y: 13px;
    --lnw-cell-pad-x: 14px;
    --lnw-cap-pad-y: 13px;
    /* the reference only overrides padding-TOP here, so the product header's
       bottom padding collapses to the generic 13px — not 14px */
    --lnw-ln-pad-top: 24px;
    --lnw-ln-pad-bottom: 13px;
    --lnw-h-other-size: 11px;
    --lnw-h-ln-size: 16px;
    --lnw-c-size: 13px;
    --lnw-label-size: 11.5px;
    --lnw-badge: 20px;
  }
}

@media (max-width: 460px) {
  .lnew-why { --lnw-gutter: 16px; padding-top: 54px; padding-bottom: 54px; }
  .lnew-why__head { margin-bottom: 28px; }
}