/* NoxTools home page (page 239) — owned by the home generator (wplocal/site-redesign/gen_home.py). Loaded after
   site.css on the home page only (noxtools-site-kit.php); every rule is also scoped to .elementor-239 (the home page's
   Elementor wrapper). */

/* ============ hero search: filters as you type, never scrolls while you type ============ */
/* "N tools found ↓" chip inside the box (link to the results); Enter does the same */
.elementor-239 .nx-hsearch .nx-found{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 14px;border-radius:10px;background:#EEF2FF;color:#4338CA;font:600 14px/1 var(--nx-body);text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.elementor-239 .nx-hsearch .nx-found:hover{background:#4F46E5;color:#fff}
.elementor-239 .nx-hsearch .nx-found[hidden]{display:none}
.elementor-239 .nx-found-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.elementor-239 .nx-hero .nx-hsearch.has-q input{padding-right:170px;text-overflow:ellipsis}
.elementor-239 .nx-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:767px){
  .elementor-239 .nx-hsearch .nx-found{right:5px;height:40px;padding:0 10px 0 12px;font-size:13px}
  .elementor-239 .nx-hero .nx-hsearch.has-q input{padding-right:152px}
}

/* ============ hero — light premium (design 10, demo/home-heroes/hero-10.html) ============
   The band is #F5F7FA, the same colour as the tools band right under it, with soft indigo-violet glows and a faint
   grid; both fade out before the bottom edge, so hero and catalog read as one light field with no seam and no double
   border (.nx-catalog drops its .nx-band hairline below).
   Left: pill, the owner's headline, the supporting line, the live tool search (#nx-tool-search, the script in
   gen_home.py) with popular chips, the two CTAs, the tick row. Right: .nx-h10-stage — Nox's animated performance
   inside a soft glow (panda-motion.js replaces img.nx-hero-panda in .nx-h10-panda; owner, 27 Sep: no Pause button
   under him), with logo-only tool plates and the uptime badge floating beside him.
   The section's own top pad is small (gen_home.py) so the page starts right under the header. */
.elementor-239 .nx-hero{background-color:#F5F7FA;--nx-focus:#4F46E5}
.elementor-239 .nx-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(660px 540px at 80% 16%,rgba(124,58,237,.17),transparent 62%),
   radial-gradient(580px 500px at 2% 84%,rgba(79,70,229,.15),transparent 60%),
   radial-gradient(440px 400px at 46% 92%,rgba(245,158,11,.10),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
.elementor-239 .nx-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* owner 28 Sep: grid lines 1.5x as visible as the original (.38 × .5 = .19 → .285) */
  background-image:linear-gradient(rgba(190,199,212,.285) 1px,transparent 1px),linear-gradient(90deg,rgba(190,199,212,.285) 1px,transparent 1px);
  background-size:48px 48px;background-position:0 -1px;
  -webkit-mask-image:radial-gradient(920px 620px at 46% 34%,#000 24%,transparent 100%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(920px 620px at 46% 34%,#000 24%,transparent 100%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
          mask-composite:intersect}
/* owner (27 Sep): the grid was barely visible — the lines are now about three times as strong (.57 at full opacity,
   was .38 at .5 = .19). The same soft radial fade, plus the band's own bottom fade (as ::before), so the stronger grid
   is gone before the bottom edge and hero and catalog still meet with no seam. background-position 0 -1px pushes the
   first horizontal line out of the box, so it no longer doubles the header hairline (next line lands at y=47). */
/* the header sits on the light hero now, so its hairline needs a shade more contrast than it needs on white */
body.nx-site .nx-header{border-bottom-color:#DFE5EE}

/* ---- copy ---- */
.elementor-239 .nx-hero .nx-pill{gap:10px;padding:6px 15px 6px 6px;background:#fff;border:1px solid #D7DEE8;color:#4338CA;box-shadow:0 1px 2px rgba(11,17,32,.06)}
.elementor-239 .nx-hero .nx-pill b{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:linear-gradient(90deg,#4F46E5,#7C3AED);color:#fff;font:700 11px/1 var(--nx-body);letter-spacing:.06em}
.elementor-239 .nx-hero .nx-grad{background-image:linear-gradient(90deg,#4F46E5 0%,#7C3AED 58%,#C2410C 132%)}
.elementor-239 .nx-hero .elementor-widget-heading .elementor-heading-title{text-wrap:normal;max-width:13.2em}
.elementor-239 .nx-hero .nx-text>.elementor-widget-container{max-width:560px}

/* ---- search: the same box and script as before, in the light design ---- */
.elementor-239 .nx-h10-slabel{display:block;margin:0 0 9px;font:600 13px/1.4 var(--nx-body);color:#0F172A}
.elementor-239 .nx-hero .nx-search{max-width:600px}
.elementor-239 .nx-hero .nx-search input{height:58px;padding:0 76px 0 52px;border:1.5px solid #BEC7D4;border-radius:16px;font-size:17px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 20px center;
  box-shadow:0 16px 36px -18px rgba(79,70,229,.55),0 1px 2px rgba(11,17,32,.05)}
.elementor-239 .nx-hero .nx-search input:focus{border-color:#4F46E5;box-shadow:0 0 0 4px rgba(99,102,241,.22)}
.elementor-239 .nx-hero .nx-hsearch .nx-found{height:44px;background:#0B1120;color:#fff}
.elementor-239 .nx-hero .nx-hsearch .nx-found:hover{background:#4F46E5;color:#fff}
.elementor-239 .nx-h10-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:600px;margin:12px 0 0}
.elementor-239 .nx-h10-chips-lbl{font:500 13px/1 var(--nx-body);color:#5B6B80}
.elementor-239 .nx-h10-chips a{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid #CBD5E1;border-radius:999px;background:#fff;color:#334155;font:500 13px/1 var(--nx-body);text-decoration:none;transition:border-color .15s ease,color .15s ease}
.elementor-239 .nx-h10-chips a:hover{border-color:#4F46E5;color:#4338CA}

/* ---- the two calls to action ---- */
.elementor-239 .nx-hero .nx-h10-go,.elementor-239 .nx-hero .nx-h10-browse{margin-top:18px}
.elementor-239 .nx-hero .nx-h10-browse{margin-left:12px}
.elementor-239 .nx-hero .nx-h10-go .elementor-button{background-image:linear-gradient(90deg,#4F46E5,#7C3AED);box-shadow:0 14px 28px -12px rgba(79,70,229,.6)}
.elementor-239 .nx-hero .nx-h10-go .elementor-button:hover,.elementor-239 .nx-hero .nx-h10-go .elementor-button:focus{background-image:linear-gradient(90deg,#4338CA,#6D28D9)}
.elementor-239 .nx-hero .nx-h10-browse .elementor-button{border-width:1.5px}
/* ---- tick row ---- */
.elementor-239 .nx-hero .nx-hero-trust{margin-top:18px;padding-top:16px;border-top:1px solid #CFD8E3;max-width:640px}

/* ---- Nox's stage: the performance, the floating logo plates and the uptime badge ---- */
.elementor-239 .nx-h10-stage{position:relative;min-height:486px;margin-top:-26px}
.elementor-239 .nx-h10-orb{position:absolute;right:-4px;bottom:18px;width:432px;height:432px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(124,58,237,.16),rgba(79,70,229,.08) 56%,transparent 72%);border:1px solid rgba(124,58,237,.12)}
/* the still and the performance are both 350px wide with the same 720/740 box, so swapping them moves nothing
   (panda-motion.css). Owner (27 Sep): no Pause button under Nox — he keeps the spot he had above it (bottom 46px, the
   old button row), so Nox, the plates, the badge, the bubble and the Canva window keep their places. Owner (27 Sep): Nox a little further left — 24px (right 26 -> 50px) at 1200px and
   up, 20px at 1025-1199; the logo plates move the same 24px at 1200+ so the panda-to-plate gaps stay as they were. */
.elementor-239 .nx-h10-panda{position:absolute;right:50px;bottom:46px;width:350px;max-width:100%}
/* five identical plates carrying nothing but the logo: same width, same height, same 90px pitch, alternating 0/22px
   so the column has a little life without ever losing its grid. The prices and categories live in the catalog. */
.elementor-239 .nx-h10-cards{position:absolute;inset:0;pointer-events:none}
.elementor-239 .nx-h10-card{position:absolute;box-sizing:border-box;display:grid;place-items:center;
  width:154px;height:58px;padding:0 14px;background:#fff;border:1px solid #E2E8F0;border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(11,17,32,.3),0 1px 2px rgba(11,17,32,.05)}
.elementor-239 .nx-h10-logo{--cap:118px;display:flex;align-items:center;justify-content:center}
.elementor-239 .nx-h10-card--1{top:60px;left:-24px}
.elementor-239 .nx-h10-card--2{top:150px;left:-2px}
.elementor-239 .nx-h10-card--3{top:240px;left:-24px}
.elementor-239 .nx-h10-card--4{top:330px;left:-2px}
.elementor-239 .nx-h10-card--5{top:420px;left:-24px}
.elementor-239 .nx-h10-badge{position:absolute;top:26px;right:4px;margin:0;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:#0B1120;color:#fff;font:600 12.5px/1 var(--nx-body);white-space:nowrap;
  box-shadow:0 12px 26px -12px rgba(11,17,32,.6)}
.elementor-239 .nx-h10-badge i{flex:none;width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22)}
/* the performance was drawn for the old navy hero: on the light band its bubble, window and sparkles need their own
   contrast (panda-motion.css keeps every position and the timing) */
.elementor-239 .nx-hero .nox-say{border-color:#E2E8F0;box-shadow:0 14px 30px -14px rgba(11,17,32,.34),0 1px 2px rgba(11,17,32,.06)}
.elementor-239 .nx-hero .nox-tool-window{box-shadow:0 20px 44px -18px rgba(11,17,32,.34),0 1px 2px rgba(11,17,32,.06)}
.elementor-239 .nx-hero .nox-delight{color:#8B5CF6}

/* ---- the hero and the tools band share one background, so the catalog drops its hairline ---- */
.elementor-239 .nx-catalog.nx-band{border-top:0}

/* ---- 1300 and below: the stage keeps Nox's speech bubble and Canva window inside the page ---- */
@media (max-width:1300px){
  .elementor-239 .nx-h10-panda{right:58px}   /* 34 + 24 (owner, 27 Sep) */
}
/* ---- small laptops (1025-1199): the stage is only ~420px wide, so Nox and the plates both step down and the
   panda no longer paints over the logos ---- */
@media (min-width:1025px) and (max-width:1199px){
  /* owner: Nox keeps his full desktop size at every desktop width; the logo plates make room instead */
  .elementor-239 .nx-h10-panda{right:8px}   /* -12 + 20 (owner, 27 Sep); the plates keep their places here */
  .elementor-239 .nx-h10-card{width:124px}
  .elementor-239 .nx-h10-logo{--cap:96px}
  .elementor-239 .nx-h10-card--1,.elementor-239 .nx-h10-card--3,.elementor-239 .nx-h10-card--5{left:-18px}
  .elementor-239 .nx-h10-card--2,.elementor-239 .nx-h10-card--4{left:-6px}
}

/* ============ the hero on tablets and phones ============
   Above 1024 nothing below changes the two-column design. At 1024 and under the hero is one column, and the
   stage stops being a scatter of absolutely placed pieces: it becomes its own centred composition —
   the five logo plates in a row (Ahrefs included; nothing is hidden), the uptime badge as Nox's own label
   right above him, then Nox on a soft halo (no Pause button, owner 27 Sep). Every vertical step in the hero is set
   here, so the rhythm is the small screen's own and not the desktop's left over. */
@media (max-width:1024px){
  /* the columns stop padding the seam between the copy and the stage; the steps below own every gap */
  .elementor-239 .nx-hero .nx-h10-copy > .elementor-widget-wrap{padding:14px 20px 0}
  .elementor-239 .nx-hero .nx-h10-side > .elementor-widget-wrap{padding:0 20px}
  .elementor-239 .nx-hero .elementor-widget{margin-block-end:0}
  .elementor-239 .nx-hero .nx-h10-pill,.elementor-239 .nx-hero .nx-h10-lede{margin:0}
  .elementor-239 .nx-hero .nx-h10-pill > .elementor-widget-container,
  .elementor-239 .nx-hero .nx-h10-lede > .elementor-widget-container{margin:0}
  .elementor-239 .nx-hero .nx-h10-h1{margin-top:18px}
  .elementor-239 .nx-hero .nx-h10-lede{margin-top:12px}
  .elementor-239 .nx-hero .nx-h10-search{margin-top:20px}
  .elementor-239 .nx-hero .nx-h10-go,.elementor-239 .nx-hero .nx-h10-browse{margin-top:18px}
  .elementor-239 .nx-hero .nx-hero-trust{margin-top:18px;padding-top:16px}
  .elementor-239 .nx-h10-stage-w{margin-top:20px}
  /* the hero is stacked here, so the search, the chips and the tick row use the whole column instead of
     leaving a wide empty gutter; the headline and the lede keep a readable measure */
  .elementor-239 .nx-hero .nx-search,
  .elementor-239 .nx-h10-chips,
  .elementor-239 .nx-hero .nx-hero-trust,
  .elementor-239 .nx-hero .nx-text > .elementor-widget-container{max-width:none}
  .elementor-239 .nx-hero .nx-h10-h1 .elementor-heading-title{max-width:17em}

  /* ---- the stage, in the flow ---- */
  .elementor-239 .nx-h10-stage{position:relative;min-height:0;margin:0;padding:0;
    display:flex;flex-direction:column;align-items:center}
  /* the halo comes back behind Nox (no ring on small screens, just the glow), so he stands on a stage */
  /* bottom -12px: the halo keeps its place under Nox now the 46px button row below him is gone (was 34px) */
  .elementor-239 .nx-h10-orb{display:block;left:50%;right:auto;top:auto;bottom:-12px;width:400px;height:400px;
    transform:translateX(-50%);border:0;z-index:0}
  /* one even row of five identical plates — same size, same pitch, Ahrefs back in the line-up */
  .elementor-239 .nx-h10-cards{position:static;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;
    gap:10px;width:100%;max-width:620px;margin:0;z-index:1}
  .elementor-239 .nx-h10-card{position:static;top:auto;left:auto;width:calc((100% - 40px) / 5);height:56px;
    padding:0 10px;box-shadow:0 12px 26px -16px rgba(11,17,32,.3),0 1px 2px rgba(11,17,32,.05)}
  .elementor-239 .nx-h10-card--5{display:grid}
  .elementor-239 .nx-h10-logo{--cap:96px}
  /* the badge is Nox's label: centred, tight above him — never a line of its own in the middle of nothing */
  .elementor-239 .nx-h10-badge{position:static;top:auto;right:auto;display:inline-flex;margin:22px 0 0;z-index:1}
  .elementor-239 .nx-h10-panda{position:static;right:auto;bottom:auto;width:min(360px,100%);margin:10px 0 0;z-index:1}
  .elementor-239 .nx-hero .nox-performance{width:360px;max-width:100%}
  .elementor-239 .nx-hero img.nx-hero-panda{width:360px!important;max-width:100%}
  /* the popular-tool chips are tap targets on every touch width, not only on phones */
  .elementor-239 .nx-h10-chips a{min-height:40px;padding:0 14px}
}

/* ---- small tablets (768-1024): the hero is stacked, so the copy keeps the headline's own measure instead
   of running the full column — at 1024 the lede would otherwise set over 110 characters a line ---- */
@media (min-width:768px) and (max-width:1024px){
  .elementor-239 .nx-hero .nx-search,
  .elementor-239 .nx-hero .nx-hero-trust,
  .elementor-239 .nx-hero .nx-text > .elementor-widget-container{max-width:748px}
}

/* ---- phones: the copy block is set for a 390 screen (headline 30px over 3-4 lines, 16px lede and 16px
   search text so iOS never zooms), the primary call to action runs the full width with the quieter
   "Browse tools" under it, and the plates fall into a centred 3 + 2 pyramid that keeps every logo at one
   optical size. ---- */
@media (max-width:767px){
  .elementor-239 .nx-hero .nx-h10-h1{margin-top:12px}
  /* on a wide phone (480-767) the copy keeps one measure instead of stretching to the column */
  .elementor-239 .nx-hero .nx-search,.elementor-239 .nx-hero .nx-hero-trust,
  .elementor-239 .nx-hero .nx-h10-go,.elementor-239 .nx-hero .nx-h10-browse{max-width:440px}
  .elementor-239 .nx-hero .nx-h10-h1 .elementor-heading-title{max-width:min(13.2em,440px)}
  .elementor-239 .nx-hero .nx-h10-lede{margin-top:14px}
  .elementor-239 .nx-hero .nx-h10-h1 .elementor-heading-title{line-height:1.06}
  .elementor-239 .nx-hero .nx-h10-lede > .elementor-widget-container{line-height:1.5;max-width:25em}
  .elementor-239 .nx-hero .nx-h10-search{margin-top:18px}
  .elementor-239 .nx-h10-slabel{margin-bottom:7px}
  .elementor-239 .nx-hero .nx-search input{height:52px;padding-left:46px;border-radius:14px;font-size:16px;background-position:16px center}
  .elementor-239 .nx-hero .nx-hsearch .nx-found{height:40px}
  .elementor-239 .nx-h10-chips{gap:8px}
  /* one full-width primary, one quieter secondary under it — both still comfortably over 40px */
  .elementor-239 .nx-hero .nx-h10-go{margin-top:18px}
  .elementor-239 .nx-hero .nx-h10-browse{margin-top:8px;margin-left:0}
  .elementor-239 .nx-hero .nx-h10-browse .elementor-button{padding-top:13px;padding-bottom:13px;font-size:15px}
  /* the tick row reads as two tidy columns and keeps its own line-height */
  .elementor-239 .nx-hero .nx-hero-trust{margin-top:14px;padding-top:12px}
  .elementor-239 .nx-hero .elementor-widget.nx-hero-trust .elementor-icon-list-items{display:grid;
    grid-template-columns:auto auto;justify-content:start;column-gap:14px;row-gap:7px;margin:0}
  /* Elementor's own inline-list spacing is a six-class selector, and its half-gap margins are what pushed
     "100% privacy protection" onto a second line at 390 */
  .elementor-239 .nx-hero .elementor-widget.nx-hero-trust .elementor-icon-list-item{margin:0!important;padding:0!important}
  .elementor-239 .nx-hero .elementor-widget.nx-hero-trust .elementor-icon-list-item > .elementor-icon-list-text{font-size:13px}
  .elementor-239 .nx-h10-stage-w{margin-top:16px}
  /* five plates, three over two, centred: one row of five would shrink the wordmarks past reading size */
  .elementor-239 .nx-h10-cards{max-width:400px;gap:8px}
  .elementor-239 .nx-h10-card{width:calc((100% - 16px) / 3);height:38px;padding:0 8px;border-radius:11px}
  .elementor-239 .nx-h10-logo{--cap:88px}
  .elementor-239 .nx-h10-badge{margin-top:14px;padding:7px 13px;font-size:13px}
  .elementor-239 .nx-h10-panda{width:min(216px,100%);margin-top:9px}
  .elementor-239 .nx-hero .nox-performance{width:216px;max-width:100%}
  .elementor-239 .nx-hero img.nx-hero-panda{width:216px!important;max-width:100%}
  .elementor-239 .nx-h10-orb{bottom:-20px;width:300px;height:300px}   /* -20 = the hero's 20px bottom padding: the halo ends exactly at the hero edge, not cut off past it */
}

/* ---- small phones (below 390px): the "since 2020" pill stays on one line (the year wrapped onto a line of
   its own at 360) and the plates lose a few pixels so three still fit across. Nox is small enough here that
   his speech bubble and Canva window stay inside the screen without shifting the whole stage sideways. ---- */
@media (max-width:389px){
  .elementor-239 .nx-hero .nx-pill{gap:8px;padding:5px 12px 5px 5px}
  .elementor-239 .nx-hero .nx-pill b{height:22px;padding:0 9px}
  /* the plates: Semrush and Canva share the first row (the Semrush wordmark is ~7.5:1 and was only 10px tall in a
     third-width plate), Helium 10, Claude and Ahrefs the second; every logo stays inside its plate's padding */
  .elementor-239 .nx-h10-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .elementor-239 .nx-h10-card{width:auto;padding:0 7px;grid-column:span 2}
  .elementor-239 .nx-h10-card--1,.elementor-239 .nx-h10-card--2{grid-column:span 3}
  .elementor-239 .nx-h10-logo{--cap:min(78px,calc((100vw - 74px) / 3 - 14px))}
  .elementor-239 .nx-h10-card--1 .nx-h10-logo{--cap:112px}
  .elementor-239 .nx-h10-badge{padding:7px 11px}
  .elementor-239 .nx-hero .elementor-widget.nx-hero-trust .elementor-icon-list-items{column-gap:12px}
  /* 320px phones: keep the SINCE 2020 chip on one line and the search placeholder unclipped */
  .elementor-239 .nx-hero .nx-pill b{white-space:nowrap}
  .elementor-239 .nx-hero .nx-search input{padding-left:42px;padding-right:18px;background-position:15px center}
  .elementor-239 .nx-hero .nx-found{position:static;display:block;margin:8px 0 0;width:max-content}
  /* the chip sits under the box here, so typed text keeps the whole field */
  .elementor-239 .nx-hero .nx-hsearch.has-q input{padding-right:18px}
}
@media (max-width:379px){
  .elementor-239 .nx-hero .elementor-widget.nx-hero-trust .elementor-icon-list-items{grid-template-columns:minmax(0,1fr)}
}
/* 480–767: centre the capped copy block on the same axis as the panda stage */
@media (min-width:480px) and (max-width:767px){
  .elementor-239 .nx-hero .nx-search,.elementor-239 .nx-hero .nx-hero-trust,
  .elementor-239 .nx-hero .nx-h10-go,.elementor-239 .nx-hero .nx-h10-browse,
  .elementor-239 .nx-hero .nx-h10-slabel{margin-left:auto;margin-right:auto}
}

/* ============ catalog ============ */
/* search status bar above the grid (inserted by the search script only while a search is active) */
.elementor-239 .nx-filter{flex:0 0 calc(100% - 16px);width:calc(100% - 16px);margin:0 8px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:10px 10px 10px 18px;background:#fff;border:1px solid var(--nx-indigo-l);border-radius:14px;box-shadow:var(--nx-shadow-rest)}
.elementor-239 .nx-filter[hidden]{display:none}
.elementor-239 .nx-filter:focus{outline:none}
.elementor-239 .nx-filter:focus-visible{outline:2px solid var(--nx-focus);outline-offset:2px}
.elementor-239 .nx-filter-text{margin:0;font:500 15px/1.5 var(--nx-body);color:var(--nx-text)}
.elementor-239 .nx-filter-extra:empty{display:none}
.elementor-239 .nx-filter-extra{color:var(--nx-slate)}
/* "· Also available: …" on one line on wide screens; on phones it gets its own line, so a wrapped line never ends in a dot */
.elementor-239 .nx-filter-extra::before{content:"· "}
@media (max-width:767px){.elementor-239 .nx-filter-extra{display:block;margin-top:2px}.elementor-239 .nx-filter-extra::before{content:none}}
/* nothing in the grid, but the tool has its own page: "This tool has its own page: <link>" (no separator dot) */
.elementor-239 .nx-filter-extra.nx-filter-extra--only::before{content:none}
.elementor-239 .nx-filter-extra a{color:var(--nx-indigo-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.elementor-239 .nx-filter-clear{appearance:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--nx-line-2);border-radius:10px;background:#fff;color:var(--nx-ink);font:600 14px/1 var(--nx-body);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.elementor-239 .nx-filter-clear:hover{border-color:var(--nx-indigo);color:var(--nx-indigo-d)}
/* nothing found: Nox with his magnifier beside the message that 20+ more tools live inside the member dashboard, and a
   Sign up button. Side by side from 640px, stacked and centred on phones. The generic note + "More Tools" button under
   the grid say the same thing, so they step aside while this shows (the search script sets #tools.nx-no-match). */
.elementor-239 #nx-empty{margin:0 8px;padding:30px 32px;border-radius:20px;text-align:left;border:1px dashed #A5B4FC;background:linear-gradient(180deg,#FFFFFF,#F8FAFF);scroll-margin-bottom:16px}
.elementor-239 .nx-empty-in{display:flex;align-items:center;justify-content:center;gap:30px;max-width:780px;margin:0 auto}
/* the soft indigo glow is the image's own background, so it always sits right behind Nox */
.elementor-239 #nx-empty img.nx-empty-panda{flex:none;display:block;width:140px;height:auto;margin:0;background:radial-gradient(closest-side,rgba(199,210,254,.75),rgba(199,210,254,0))}
.elementor-239 .nx-empty-copy{flex:0 1 560px;min-width:0}
.elementor-239 .nx-empty-kicker{margin:0 0 6px;font:600 15px/1.4 var(--nx-body);color:var(--nx-indigo-d)}
.elementor-239 .nx-empty-title{margin:0;font:700 24px/1.25 var(--nx-head);letter-spacing:-.018em;color:var(--nx-ink);text-wrap:balance}
.elementor-239 .nx-empty-text{margin:8px 0 18px;font:400 15px/1.6 var(--nx-body);color:var(--nx-slate);text-wrap:pretty}
.elementor-239 .nx-empty-text a{color:var(--nx-indigo-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.elementor-239 .nx-empty-text a:hover{color:var(--nx-indigo)}
.elementor-239 .nx-empty-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:12px;background:var(--nx-indigo);color:#fff;font:600 15px/1.2 var(--nx-body);text-decoration:none;box-shadow:0 8px 18px -8px rgba(79,70,229,.55);transition:background-color .15s ease}
.elementor-239 .nx-empty-btn:hover,.elementor-239 .nx-empty-btn:focus-visible{background:var(--nx-indigo-d);color:#fff}
.elementor-239 .nx-empty-btn .nx-ico{width:18px;height:18px;transition:transform .18s ease}
.elementor-239 .nx-empty-btn:hover .nx-ico{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.elementor-239 .nx-empty-btn .nx-ico{transition:none}}
.elementor-239 #tools.nx-no-match .nx-more-note,.elementor-239 #tools.nx-no-match .nx-more-btn{display:none}
/* catalog on small tablets: 4 cards a row from 900px (17 even rows, like desktop); 768-899 keeps 3 a row and centres
   the short last row */
@media (min-width:900px) and (max-width:1024px){.elementor-239 .nx-catalog .elementor-column.nx-card{width:25%}}
@media (min-width:768px) and (max-width:899px){.elementor-239 .nx-catalog > .elementor-container > .elementor-column > .elementor-widget-wrap{justify-content:center}}
/* tools with their own page but no card in the grid: plain links under it (names only, no prices) */
@media (max-width:639px){
  .elementor-239 #nx-empty{padding:22px 18px 24px;text-align:center}
  .elementor-239 .nx-empty-in{flex-direction:column;gap:6px}
  .elementor-239 #nx-empty img.nx-empty-panda{width:112px;margin:0 auto}
  .elementor-239 .nx-empty-copy{flex:none;width:100%}
  .elementor-239 .nx-empty-kicker{margin-bottom:4px;font-size:14px}
  .elementor-239 .nx-empty-title{font-size:20px;line-height:1.3}
  .elementor-239 .nx-empty-text{margin-bottom:16px}
  .elementor-239 .nx-empty-btn{display:flex;width:100%;min-height:48px}
}
@media (max-width:767px){.elementor-239 .nx-filter{flex-basis:calc(100% - 10px);width:calc(100% - 10px);margin:0 5px 14px;padding:10px 10px 10px 14px}.elementor-239 #nx-empty{margin:0 5px}}
/* the heading row ("All 100+ tools" + ₹/$ toggle) lines up with the card edges: 8px in on tablets and desktops, 5px on phones
   (Elementor boxes this inner section to 1140px, which put it 12px inside the grid) */
.elementor-239 .elementor-section.nx-cat-head > .elementor-container{max-width:none;margin:0 8px}
@media (max-width:767px){.elementor-239 .elementor-section.nx-cat-head > .elementor-container{margin:0 5px}}
/* tablets stack the heading and the toggle row: keep the toggle row under the heading's left edge (not pushed right) */
@media (max-width:1024px){.elementor-239 .nx-cat-head .nx-cat-tools{justify-content:flex-start;margin-top:14px}}

/* ---- logo tiles ----
   gen_home.py measures each logo file and writes its content box as custom properties:
   --ar = content aspect ratio, --x / --y = where the content starts inside the file, --H = file height (all relative to
   the content height), --h = fallback height (px), --mx = the file's own content height (never upscale past it).
   The span is the crop window (only the logo itself, no padding or old backgrounds), the <img> sits inside it.
   Tool cards (.nx-lg--fill): the logo FILLS the tile — object-fit: contain inside the tile's padding box, so wide
   wordmarks span the tile width and square marks fill its height. Bento chips keep one optical size (--h, --cap).
   --th = tile height: 75px at every width (owner request; the tool pages' related cards use the same). */
.elementor-239 .nx-lt{--th:75px;--tp:10px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:var(--th);padding:var(--tp);border:1px solid #DCE2EA;border-radius:12px;background:var(--nx-light);container-type:inline-size;overflow:hidden;text-decoration:none;transition:border-color .2s ease}
.elementor-239 .nx-lg{--u:1px;position:relative;display:block;flex:none;overflow:hidden;height:calc(var(--h) * var(--u));width:calc(var(--h) * var(--ar) * var(--u))}
@supports (width:1cqw){
  .elementor-239 .nx-lg{height:min(calc(var(--h) * var(--u)),calc(var(--cap) / var(--ar)));width:min(calc(var(--h) * var(--ar) * var(--u)),var(--cap))}
  .elementor-239 .nx-lt .nx-lg--fill{--ih:calc(var(--th) - 2 * var(--tp) - 2px);
    height:min(var(--ih),var(--mx),calc(100cqw / var(--ar)));width:min(calc(var(--ih) * var(--ar)),calc(var(--mx) * var(--ar)),100cqw)}
}
.elementor-239 .nx-lg img{position:absolute;display:block;max-width:none;min-width:0;width:auto;height:calc(100% * var(--H));left:calc(-100% / var(--ar) * var(--x));top:calc(-100% * var(--y));margin:0;border-radius:0;box-shadow:none}
/* logos saved on white melt into the tile; dark-box logos are shown inverted (dark text on the tile), grey boxes whitened */
.elementor-239 .nx-lg--mul img,.elementor-239 .nx-lg--invert img,.elementor-239 .nx-lg--invert-strong img,.elementor-239 .nx-lg--whiten img{mix-blend-mode:multiply}
.elementor-239 .nx-lg--invert img{filter:invert(1) hue-rotate(180deg) brightness(1.08) contrast(1.15)}
.elementor-239 .nx-lg--invert-strong img{filter:invert(1) hue-rotate(180deg) brightness(1.2) contrast(1.2)}
.elementor-239 .nx-lg--whiten img{filter:brightness(1.12) contrast(1.08)}
.elementor-239 .nx-lg--box{border-radius:6px}
.elementor-239 .nx-lg-text{font:700 18px/1.1 var(--nx-head);color:var(--nx-ink);letter-spacing:-.01em;text-align:center}
.elementor-239 .nx-lg-plain{max-height:100%;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:1024px){.elementor-239 .nx-lt{--tp:9px}}
@media (max-width:767px){.elementor-239 .nx-lt{--tp:8px}}
@media (max-width:479px){.elementor-239 .nx-lt{--tp:7px;border-radius:10px}}

/* ---- tool cards: a clearly visible outline on white and on the #F5F7FA band; indigo on hover / keyboard focus ---- */
.elementor-239 .elementor-column.nx-card > .elementor-widget-wrap.elementor-element-populated{border-color:#BEC7D4}
.elementor-239 .elementor-column.nx-card:hover > .elementor-widget-wrap.elementor-element-populated,
.elementor-239 .elementor-column.nx-card:has(:focus-visible) > .elementor-widget-wrap.elementor-element-populated{border-color:var(--nx-indigo)}
.elementor-239 .nx-card:hover .nx-lt{border-color:#C7D2FE}

/* tool names: wrap between words (never inside one), evenly */
.elementor-239 .nx-card-title .elementor-heading-title{overflow-wrap:break-word;word-break:normal;text-wrap:balance}
/* card buttons keep their label on one line (narrow phones get tighter side padding) */
.elementor-239 .elementor-column.nx-card .elementor-widget-button .elementor-button{white-space:nowrap}
@media (max-width:420px){.elementor-239 .elementor-column.nx-card .elementor-widget-button .elementor-button{padding-left:8px;padding-right:8px}}
/* touch screens have no hover: the card button is a solid call to action there */
@media (hover:none){
  .elementor-239 .elementor-column.nx-card .elementor-widget-button .elementor-button{background-color:var(--nx-indigo);color:#fff}
  .elementor-239 .elementor-column.nx-card .elementor-widget-button .elementor-button:active{background-color:var(--nx-indigo-d)}
}

/* ============ why: bento grid ============ */
.elementor-239 .nx-bento{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:"tools tools fast fast" "tools tools uptime video" "suggest suggest since since";text-align:left}
.elementor-239 .nx-bt--tools{grid-area:tools}.elementor-239 .nx-bt--fast{grid-area:fast}.elementor-239 .nx-bt--uptime{grid-area:uptime}
.elementor-239 .nx-bt--video{grid-area:video}.elementor-239 .nx-bt--suggest{grid-area:suggest}.elementor-239 .nx-bt--since{grid-area:since}
.elementor-239 .nx-bt{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:28px;border-radius:20px;background:#fff;border:1px solid var(--nx-line-card);box-shadow:var(--nx-shadow-rest);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
@media (hover:hover){.elementor-239 .nx-bt:hover{transform:translateY(-3px);border-color:var(--nx-indigo-l);box-shadow:var(--nx-shadow-hover)}}
@media (prefers-reduced-motion:reduce){.elementor-239 .nx-bt{transition:none}.elementor-239 .nx-bt:hover{transform:none}}
.elementor-239 .nx-bt-title{margin:0;font:700 20px/1.3 var(--nx-head);letter-spacing:-.01em;color:var(--nx-ink);text-wrap:balance}
.elementor-239 .nx-bt-text{margin:8px 0 0;font:400 15px/1.6 var(--nx-body);color:var(--nx-slate);text-wrap:pretty}
.elementor-239 .nx-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.elementor-239 .nx-bt-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 0 18px;border-radius:12px}
.elementor-239 .nx-bt-icon--grad{background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;box-shadow:0 8px 18px -6px rgba(79,70,229,.5)}
.elementor-239 .nx-bt-icon--soft{background:#EEF2FF;color:#4F46E5}
.elementor-239 .nx-bt-icon--cur{font:700 16px/1 var(--nx-head);letter-spacing:.02em}

/* big tile: 100+ tools + logo cloud, on navy (the hero above is light now; this tile keeps the dark accent) */
.elementor-239 .nx-bt--tools{padding:34px 34px 30px;border:0;color:#CBD5E1;background:radial-gradient(60% 70% at 100% 0%,rgba(99,102,241,.40),transparent 62%),radial-gradient(45% 50% at 0% 100%,rgba(245,158,11,.14),transparent 60%),linear-gradient(135deg,#0B1120,#1E1B4B)}
.elementor-239 .nx-bt--tools:hover{border-color:transparent;box-shadow:0 2px 4px rgba(15,23,42,.08),0 24px 48px -20px rgba(30,27,75,.6)}
.elementor-239 .nx-bt-eyebrow{margin:0 0 14px;display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:600 12px/1 var(--nx-body);letter-spacing:.06em;text-transform:uppercase;color:#FCD34D}
.elementor-239 .nx-bt-title--xl{font-size:32px;line-height:1.15;letter-spacing:-.022em;color:#fff}
.elementor-239 .nx-bt--tools .nx-bt-text{max-width:540px;margin:10px 0 24px;font-size:16px;color:#CBD5E1}
.elementor-239 .nx-cloud{list-style:none;margin:auto 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.elementor-239 .nx-chip{--cap:74cqw;display:flex;align-items:center;justify-content:center;height:58px;margin:0;padding:0 8px;border-radius:12px;background:#fff;container-type:inline-size;box-shadow:0 1px 2px rgba(0,0,0,.28)}
.elementor-239 .nx-chip--wide{grid-column:span 2}
.elementor-239 .nx-chip--more{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.32);box-shadow:none;color:#fff;font:700 15px/1 var(--nx-head);letter-spacing:-.01em;white-space:nowrap}
.elementor-239 .nx-bt-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:18px;font:600 15px/1.2 var(--nx-body);color:#FCD34D;text-decoration:none}
.elementor-239 .nx-bt-link .nx-ico{width:18px;height:18px;transition:transform .18s ease}
.elementor-239 .nx-bt-link:hover{color:#FDE68A}.elementor-239 .nx-bt-link:hover .nx-ico{transform:translateX(3px)}
.elementor-239 .nx-bt--tools{--nx-focus:#FCD34D}

/* instant activation: the CTA gradient */
.elementor-239 .nx-bt--fast{border:0;color:#EEF2FF;background:radial-gradient(70% 90% at 100% 0%,rgba(255,255,255,.20),transparent 60%),linear-gradient(135deg,#4F46E5,#7C3AED)}
.elementor-239 .nx-bt--fast:hover{border-color:transparent;box-shadow:0 2px 4px rgba(15,23,42,.08),0 24px 48px -20px rgba(79,70,229,.65)}
.elementor-239 .nx-bt--fast .nx-bt-icon{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.elementor-239 .nx-bt--fast .nx-bt-title{color:#fff}
.elementor-239 .nx-bt--fast .nx-bt-text{color:#E0E7FF;margin-top:6px}
.elementor-239 .nx-eta{list-style:none;margin:14px 0 0;padding:0;width:100%}
.elementor-239 .nx-eta li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0;padding:12px 0;border-top:1px solid rgba(255,255,255,.22);font:500 15px/1.4 var(--nx-body);color:#E0E7FF}
.elementor-239 .nx-eta li:last-child{padding-bottom:0}
.elementor-239 .nx-eta strong{flex:none;font:700 17px/1.2 var(--nx-head);color:#fff;white-space:nowrap}

/* 99% uptime */
.elementor-239 .nx-bt--uptime .nx-bt-icon{position:absolute;top:24px;right:24px;margin:0}
.elementor-239 .nx-bt-stat{margin:0;display:flex;flex-direction:column;gap:2px;color:var(--nx-ink)}
.elementor-239 .nx-bt-num{font:700 50px/1.05 var(--nx-head);letter-spacing:-.035em;background:linear-gradient(90deg,#4F46E5,#7C3AED);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.elementor-239 .nx-bt-unit{font:700 20px/1.3 var(--nx-head);letter-spacing:-.01em;color:var(--nx-ink)}
.elementor-239 .nx-bt--uptime{justify-content:center}
.elementor-239 .nx-bt--uptime .nx-bt-text{margin-top:10px}

/* suggest a new tool: Nox with a lightbulb on a warm glow (mirrors the "since 2020" tile: panda left, copy right),
   soft button to the member login */
.elementor-239 .nx-bt--suggest{min-height:220px;padding-left:196px;border-color:#F1E3B8;background:radial-gradient(62% 95% at 0% 100%,rgba(252,211,77,.38),transparent 64%),linear-gradient(200deg,#FFFFFF,#FFFBEB)}
.elementor-239 .nx-bt--suggest .nx-bt-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto}
.elementor-239 .nx-bt-idea{position:absolute;left:16px;bottom:-14px;width:160px;height:auto;pointer-events:none}
.elementor-239 .nx-bt--suggest .nx-bt-text{max-width:420px}
.elementor-239 .nx-bt-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;padding:0 18px;border-radius:12px;background:#E0E7FF;color:#4338CA;font:600 15px/1.2 var(--nx-body);text-decoration:none;transition:background-color .15s ease,color .15s ease}
.elementor-239 .nx-bt--suggest .nx-bt-text{margin-bottom:18px}
.elementor-239 .nx-bt-btn .nx-ico{width:18px;height:18px;transition:transform .18s ease}
.elementor-239 .nx-bt-btn:hover,.elementor-239 .nx-bt-btn:focus-visible{background:#4F46E5;color:#fff}
.elementor-239 .nx-bt-btn:hover .nx-ico{transform:translateX(3px)}

/* serving since 2020, with Nox */
.elementor-239 .nx-bt--since{min-height:220px;border-color:#E0E7FF;background:radial-gradient(70% 90% at 100% 100%,rgba(199,210,254,.65),transparent 62%),linear-gradient(160deg,#F8FAFF,#EEF2FF)}
.elementor-239 .nx-bt--since .nx-bt-copy{max-width:calc(100% - 170px)}
.elementor-239 .nx-bt-panda{position:absolute;right:6px;bottom:-14px;width:170px;height:auto;pointer-events:none}

/* proof line under the grid */
.elementor-239 .nx-proof{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.elementor-239 .nx-proof li{display:inline-flex;align-items:center;gap:8px;margin:0;font:500 14px/1.4 var(--nx-body);color:var(--nx-slate)}
.elementor-239 .nx-proof .nx-ico{width:18px;height:18px;padding:3px;border-radius:50%;background:#DCFCE7;color:#15803D;stroke-width:3}

/* tablets and small laptops: 2 columns */
@media (max-width:1099px){
  .elementor-239 .nx-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"tools tools" "fast suggest" "uptime video" "since since"}
  .elementor-239 .nx-cloud{grid-template-columns:repeat(6,minmax(0,1fr))}
  .elementor-239 .nx-bt--tools .nx-bt-text{max-width:640px}
  /* the full-width tile (640–1099px): copy centred vertically beside Nox, in a comfortable measure (no empty band under it) */
  .elementor-239 .nx-bt--since{min-height:180px;justify-content:center}
  .elementor-239 .nx-bt--since .nx-bt-copy{max-width:min(560px,calc(100% - 240px))}
  .elementor-239 .nx-bt--since .nx-bt-title{font-size:24px}
  .elementor-239 .nx-bt--since .nx-bt-text{text-wrap:balance}
  .elementor-239 .nx-bt-panda{width:172px;right:24px}
  .elementor-239 .nx-bt--suggest{padding-left:178px}
  .elementor-239 .nx-bt--suggest .nx-bt-copy{justify-content:center}
  .elementor-239 .nx-bt--suggest .nx-bt-btn{margin-top:0}
  .elementor-239 .nx-bt-idea{width:160px;left:8px;bottom:-14px}
}
@media (max-width:899px){
  .elementor-239 .nx-bento{grid-template-areas:"tools tools" "fast fast" "uptime video" "suggest suggest" "since since"}
  .elementor-239 .nx-bt--suggest{min-height:200px;padding-left:200px}
  .elementor-239 .nx-bt--suggest .nx-bt-copy{justify-content:flex-start}
  .elementor-239 .nx-bt--suggest .nx-bt-btn{margin-top:auto}
  .elementor-239 .nx-bt-idea{width:156px;left:22px;bottom:-14px}
  .elementor-239 .nx-cloud{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* phones: 1 column */
@media (max-width:639px){
  .elementor-239 .nx-bento{gap:12px;grid-template-columns:minmax(0,1fr);grid-template-areas:"tools" "fast" "uptime" "video" "suggest" "since"}
  .elementor-239 .nx-bt{padding:22px 20px;border-radius:18px}
  .elementor-239 .nx-bt--tools{padding:26px 20px 20px}
  .elementor-239 .nx-bt-title--xl{font-size:26px}
  .elementor-239 .nx-bt--tools .nx-bt-text{font-size:15px}
  .elementor-239 .nx-cloud{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:20px}
  .elementor-239 .nx-chip{height:50px;padding:0 5px;--cap:82cqw}
  .elementor-239 .nx-bt-title{font-size:19px}
  .elementor-239 .nx-bt-title.nx-bt-title--xl{font-size:26px}
  .elementor-239 .nx-bt--since .nx-bt-title{font-size:19px}
  .elementor-239 .nx-bt-num{font-size:44px}
  .elementor-239 .nx-bt--uptime .nx-bt-icon{top:20px;right:20px}
  .elementor-239 .nx-bt--since{min-height:0;padding-bottom:26px;justify-content:flex-start}
  .elementor-239 .nx-bt--since .nx-bt-copy{max-width:calc(100% - 112px)}
  .elementor-239 .nx-bt-panda{width:124px;right:-4px;bottom:-12px}
  .elementor-239 .nx-bt--uptime{min-height:0}
  .elementor-239 .nx-bt--suggest{display:block;min-height:0;padding:22px 20px;background:radial-gradient(70% 70% at 100% 0%,rgba(252,211,77,.36),transparent 64%),linear-gradient(200deg,#FFFFFF,#FFFBEB)}
  .elementor-239 .nx-bt--suggest .nx-bt-copy{display:block}
  .elementor-239 .nx-bt--suggest .nx-bt-text{margin-bottom:16px}
  .elementor-239 .nx-bt-idea{position:static;float:right;width:104px;margin:-8px -8px 4px 10px}
  .elementor-239 .nx-proof{flex-direction:column;align-items:flex-start;gap:10px;margin:22px 4px 0}
}

/* ============ get started: three equal, centred step cards ============ */
/* badge centred on top of each card; on wide screens a dashed connector with an arrow runs from badge to badge,
   on narrow screens the cards stack (max 540px, centred) and the connector turns downwards */
.elementor-239 .nx-hsteps{--g:32px;--b:56px;list-style:none;margin:0 auto;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);counter-reset:none}
.elementor-239 .nx-hstep{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:0;text-align:center}
.elementor-239 .nx-hstep::marker{content:none}
.elementor-239 .nx-hstep-num{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:none;width:var(--b);height:var(--b);margin:0 0 18px;border-radius:16px;background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;font:700 22px/1 var(--nx-head);box-shadow:0 10px 22px -8px rgba(79,70,229,.55)}
.elementor-239 .nx-hstep:not(:last-child)::before{content:"";position:absolute;top:calc(var(--b) / 2 - 1px);left:calc(50% + var(--b) / 2 + 14px);width:calc(100% + var(--g) - var(--b) - 28px);border-top:2px dashed #A5B4FC}
.elementor-239 .nx-hstep:not(:last-child)::after{content:"";position:absolute;top:calc(var(--b) / 2 - 5px);left:calc(150% + var(--g) - var(--b) / 2 - 24px);width:8px;height:8px;border-top:2px solid #A5B4FC;border-right:2px solid #A5B4FC;transform:rotate(45deg)}
.elementor-239 .nx-hstep-card{--pt:28px;--px:28px;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;padding:var(--pt) var(--px) 26px;overflow:hidden;background:#fff;border:1px solid var(--nx-line-card);border-radius:20px;box-shadow:var(--nx-shadow-rest);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
@media (hover:hover){.elementor-239 .nx-hstep:hover .nx-hstep-card{transform:translateY(-3px);border-color:var(--nx-indigo-l);box-shadow:var(--nx-shadow-hover)}}
@media (prefers-reduced-motion:reduce){.elementor-239 .nx-hstep-card{transition:none}.elementor-239 .nx-hstep:hover .nx-hstep-card{transform:none}}
.elementor-239 .nx-hstep-art{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;height:152px;margin:calc(-1 * var(--pt)) calc(-1 * var(--px)) 22px;border-bottom:1px solid #E0E7FF;background:radial-gradient(55% 80% at 50% 100%,rgba(199,210,254,.8),transparent 70%),linear-gradient(180deg,#FAFBFF,#EEF2FF);overflow:hidden}
.elementor-239 .nx-hstep-panda{display:block;flex:none;width:136px;height:auto;margin:0 0 -6px;pointer-events:none}
.elementor-239 .nx-hstep-title{margin:0;font:700 20px/1.3 var(--nx-head);letter-spacing:-.01em;color:var(--nx-ink);text-wrap:balance}
.elementor-239 .nx-hstep-text{margin:10px auto 20px;max-width:320px;font:400 15px/1.6 var(--nx-body);color:var(--nx-slate);text-wrap:pretty}
.elementor-239 .nx-hstep-pill{display:inline-flex;align-items:center;gap:7px;margin:auto 0 0;padding:7px 13px 7px 11px;border-radius:999px;background:#EEF2FF;color:#4338CA;font:600 13px/1.25 var(--nx-body);text-align:left}
.elementor-239 .nx-hstep-pill .nx-ico{width:16px;height:16px;stroke-width:2.1}
@media (max-width:1024px){.elementor-239 .nx-hsteps{--g:24px}.elementor-239 .nx-hstep-card{--pt:24px;--px:20px;padding-bottom:22px}}
@media (max-width:899px){
  .elementor-239 .nx-hsteps{--g:0px;--b:52px;grid-template-columns:minmax(0,1fr);max-width:540px}
  .elementor-239 .nx-hstep:not(:last-child){padding-bottom:52px}
  .elementor-239 .nx-hstep:not(:last-child)::before{top:auto;bottom:14px;left:50%;width:0;height:26px;border-top:0;border-left:2px dashed #A5B4FC;transform:translateX(-1px)}
  .elementor-239 .nx-hstep:not(:last-child)::after{top:auto;bottom:12px;left:50%;margin-left:-5px;transform:rotate(135deg)}
  .elementor-239 .nx-hstep-num{margin-bottom:16px;font-size:21px}
  .elementor-239 .nx-hstep-text{max-width:420px}
}
@media (max-width:479px){.elementor-239 .nx-hstep-card{--pt:22px;--px:18px;padding-bottom:20px;border-radius:18px}.elementor-239 .nx-hstep-art{height:128px;margin-bottom:18px}.elementor-239 .nx-hstep-panda{width:114px;margin-bottom:-5px}.elementor-239 .nx-hstep-title{font-size:19px}}

/* ============ FAQ: Nox thinking, under the contact button (wide) / beside it (narrow) ============ */
.elementor-239 .nx-faq-panda-w{margin:26px 0 0 -24px !important}
.elementor-239 .nx-faq-panda{display:block;width:200px;height:auto}
/* tablets and phones: the shared .nx-faq-intro treatment in site.css (the same on plans, affiliate and tool pages) */

/* ============ stats row ============ */
.elementor-239 .nx-stat-num .elementor-heading-title{white-space:nowrap}
@media (max-width:360px){.elementor-239 .nx-stat-num .elementor-heading-title{font-size:22px !important}}   /* "Since 2020" fits its cell at 320 */

/* ============ payments — the home band around the marquee belt (payments demo 8: demo/home-payments/payments-8.html) ============
   The section the owner picked: the wallet panda, a "CHECKOUT" eyebrow, the heading and one line of guidance, then the
   belt — nxel.pay_belt(), gen_home.py section 7 (css classes nx-paybelt nx-beltband). The belt itself (chips, logos,
   motion, the two timing tags, the full-bleed band gutter) is shared with the plans page and lives in belt.css; only
   the home band's own backdrop and head spacing stay here. */
.elementor-239 .nx-paybelt{position:relative;isolation:isolate;overflow:hidden;
  background-image:
    radial-gradient(900px 520px at 78% 10%,rgba(124,58,237,.12),transparent 60%),
    radial-gradient(640px 380px at 6% 88%,rgba(245,158,11,.10),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#F5F7FA 100%)}
.elementor-239 .nx-paybelt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(11,17,32,.08) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 85%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 85%)}
/* the head: the demo's own spacing (no Elementor widget gaps); the side gutter and the full-bleed band are belt.css .nx-beltband */
.elementor-239 .nx-eyebrow-w{margin:0 0 12px !important}
.elementor-239 .nx-eyebrow-w .elementor-widget-container{display:flex;justify-content:center}
.elementor-239 .nx-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--nx-body);
  letter-spacing:.08em;text-transform:uppercase;color:#4338CA}
.elementor-239 .nx-eyebrow i{flex:none;width:8px;height:8px;border-radius:3px;background:#4F46E5}
.elementor-239 .nx-pb-h .elementor-heading-title{text-wrap:balance}
.elementor-239 .nx-pb-sub{margin-top:10px}
.elementor-239 .nx-pb-sub > .elementor-widget-container{max-width:680px}
.elementor-239 .nx-pb-sub p{margin:0}

/* ============ closing CTA: the fine print as separate items (a wrapped line never starts or ends with a "·") ============ */
.elementor-239 .nx-cta-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.elementor-239 .nx-cta-facts li{display:inline-flex;align-items:center;gap:7px;margin:0;font:500 13px/1.45 var(--nx-body);color:#EEF2FF}
.elementor-239 .nx-cta-facts .nx-ico{width:16px;height:16px;padding:2px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;stroke-width:3}
@media (max-width:767px){.elementor-239 .nx-cta-facts{gap:8px 16px}}

/* R21 — new panda moments. All decorative (alt=""), none overlaps copy, none can widen the page. */
/* Lounge: lies on the catalog band's bottom edge; its violet ledge sits on the top edge of the stats bar. The widget is
   pulled down by the band's bottom padding (64px desktop / 44px phones, gen_home.py) plus the column's 10px inner padding so the ledge meets the edge. */
.elementor-239 .nx-lounge-w{margin:18px 0 -74px !important;line-height:0;pointer-events:none}
.elementor-239 .nx-lounge-w .elementor-widget-container{display:flex;justify-content:center}
.elementor-239 .nx-lounge{display:block;width:240px;max-width:62vw;height:auto}
@media (max-width:767px){.elementor-239 .nx-lounge-w{margin:14px 0 -54px !important}.elementor-239 .nx-lounge{width:170px}}
.elementor-239 #tools.nx-no-match .nx-lounge-w{margin-top:26px !important}
/* Wallet: small, centred above the payments heading */
.elementor-239 .nx-wallet-w{margin:0 0 16px !important;line-height:0;pointer-events:none}   /* the demo's panda-to-eyebrow gap */
.elementor-239 .nx-wallet-w .elementor-widget-container{display:flex;justify-content:center}
.elementor-239 .nx-wallet{display:block;width:118px;height:auto}
@media (max-width:767px){.elementor-239 .nx-wallet{width:96px}.elementor-239 .nx-wallet-w{margin-bottom:14px !important}}
/* Rocket: centred above the CTA heading at every width. (Not in the band's bottom corners: the footer's goodbye panda
   (right) and bamboo panda (left) peek up over those corners.) */
.elementor-239 .nx-rocket-w{margin:0 0 14px !important;line-height:0;pointer-events:none}
.elementor-239 .nx-rocket-w .elementor-widget-container{display:flex;justify-content:center}
.elementor-239 .nx-rocket{display:block;width:140px;height:auto;filter:drop-shadow(0 10px 18px rgba(15,23,42,.22))}
@media (max-width:767px){.elementor-239 .nx-rocket{width:110px}}

/* v4 pose: Nox with a shopping bag in the bottom-right corner of the plans preview band (the buy moment under the
   four plan cards). Decorative, absolute so nothing shifts, and hidden where the band has no free margin. */
.elementor-239 .nx-plans-band{position:relative}
.elementor-239 .nx-plans-bag-w{line-height:0;margin:0 !important;pointer-events:none}
/* right-aligned with the last plan card, dropped below the card row into the band's bottom padding */
.nx-site img.nx-plans-bag{position:absolute;right:10px;bottom:-62px;width:118px;height:auto;pointer-events:none}
@media (max-width:1180px){.nx-site img.nx-panda.nx-plans-bag{display:none !important}}