/* NoxTools Site Kit — design system (tokens, type, focus, cards), currency display, classic-content styling.
   Elementor pages are generated by wplocal/site-redesign/*.py (nxel.py holds the same palette and type constants);
   this file adds what Elementor settings can't express (hover / focus states, logo tiles, prices, FAQ items), styles
   what Elementor does not render (blog posts, legal pages, the theme's footer bar) and provides the currency
   show/hide rules used everywhere. */

/* a local fallback with Inter's metrics, so text wraps the same before and after the web font swaps in (no layout
   shift when a chip row or heading would otherwise re-wrap, e.g. the HeyGen hero) */
/* the ₹ sign alone (U+20B9) from a system font: it is the only character on these pages outside the Latin subset, and
   drawing it from Inter / Plus Jakarta Sans made every price page download their ~107 KB Latin-Extended files */
@font-face{font-family:'NX Rupee';src:local('Segoe UI'),local('SegoeUI'),local('Roboto'),local('Helvetica Neue'),local('HelveticaNeue'),local('Arial'),local('ArialMT'),local('Noto Sans');unicode-range:U+20B9}
@font-face{font-family:'NX Rupee';font-weight:600 800;src:local('Segoe UI Bold'),local('SegoeUI-Bold'),local('Roboto Bold'),local('Roboto-Bold'),local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),local('Arial Bold'),local('Arial-BoldMT'),local('Noto Sans Bold');unicode-range:U+20B9}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}
.nx-rs{font-family:'NX Rupee',sans-serif;font-weight:inherit}
:root {
  /* type: Plus Jakarta Sans for headings, prices and numbers (600/700; 800 on the Contact page's display headings); Inter for body and UI (400–700).
     Loaded once by the kit (NX_KIT_FONTS_URL in noxtools-site-kit.php). Both fonts include the ₹ glyph. */
  --nx-head: 'NX Rupee', 'Plus Jakarta Sans', 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-body: 'NX Rupee', 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* colour — every text colour passes WCAG AA on white and on --nx-light */
  --nx-navy: #0B1120; --nx-ink: #0F172A; --nx-text: #334155; --nx-slate: #475569; --nx-muted: #5B6B80;
  --nx-line: #E4E8EF; --nx-line-2: #CBD5E1; --nx-light: #F5F7FA; --nx-soft: #EEF2FF;
  /* card / box outline: clearly visible on white and on --nx-light (owner: "a little black"); indigo on hover and focus.
     Same value as the home page's tool cards (home.css). Hairline dividers keep --nx-line. */
  --nx-line-card: #BEC7D4;
  --nx-indigo: #4F46E5; --nx-indigo-d: #4338CA; --nx-indigo-l: #C7D2FE; --nx-violet: #7C3AED; --nx-amber: #F59E0B;
  /* surfaces */
  --nx-r-sm: 12px; --nx-r-md: 16px; --nx-r-lg: 20px;
  --nx-shadow-rest: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
  --nx-shadow-hover: 0 2px 4px rgba(15,23,42,.04), 0 16px 32px -14px rgba(30,27,75,.26);
  --nx-shadow-float: 0 1px 2px rgba(15,23,42,.05), 0 28px 56px -24px rgba(15,23,42,.26);
  --nx-ring: 0 0 0 3px rgba(99,102,241,.30);
  --nx-focus: #4F46E5;
}

/* ---- base: one type system everywhere (also maps Elementor's kit globals and overrides GeneratePress' body font) ---- */
body.nx-site {
  --e-global-typography-primary-font-family: 'Plus Jakarta Sans'; --e-global-typography-secondary-font-family: 'Plus Jakarta Sans';
  --e-global-typography-text-font-family: 'Inter'; --e-global-typography-accent-font-family: 'Inter';
  font-family: var(--nx-body); color: var(--nx-text); background-color: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.nx-site button, .nx-site input, .nx-site select, .nx-site textarea { font-family: var(--nx-body); }
.nx-site ::selection { background: #E0E7FF; color: #1E1B4B; }
.nx-site .elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
/* readable measure (~70 characters): nxel text() tags widgets nx-text / nx-text--center. The cap sits on the inner
   container so the widget still fills its row (inline buttons after it must not wrap up beside it); the side margins
   are forced because Elementor's per-widget margin rule (always 0 left/right in the generators) outranks this file. */
.nx-site .nx-text > .elementor-widget-container { max-width: 680px; text-wrap: pretty; }
.nx-site .nx-text--center > .elementor-widget-container { max-width: 660px; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }

/* ---- keyboard focus: a clear ring for keyboard users only (amber on dark backgrounds) ---- */
.nx-site a:focus-visible, .nx-site button:focus-visible, .nx-site [role="button"]:focus-visible, .nx-site [tabindex]:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 3px; }
/* "Back to top" target: the header wrapper (id="top" tabindex="-1") takes focus without drawing a ring */
#top:focus, #top:focus-visible { outline: none; }
.nx-site input:focus-visible, .nx-site select:focus-visible, .nx-site textarea:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 1px; }
.nx-cta, .nx-footer, .nx-plan--dark { --nx-focus: #FCD34D; }

/* ---- buttons: the icon sits right next to its label (Elementor stretches the label and parks the icon at the edge) ---- */
.nx-site .elementor-button .elementor-button-text { flex-grow: 0; }
.nx-site .elementor-button { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }

/* ---- cards: one surface for tool, related, plan, feature, step, contact and price cards ----
   Resting look (white, 1px border, radius) comes from nxel.card_style(); here: the clearly visible --nx-line-card
   outline, a soft two-layer shadow, hover = 3px lift + indigo border + deeper shadow, keyboard focus inside = indigo
   ring. The selectors outrank Elementor's per-element CSS on purpose. Use class nx-card (tool cards, searchable) or
   nx-lift (others). The dark plan card keeps its own dark border. Every top-level card on the page background uses
   --nx-line-card (#BEC7D4), bento, step and affiliate cards included; tiles nested inside a card may use --nx-line.
   Radii: --nx-r-lg (20px) for feature, plan, price, bento, step, contact and affiliate cards; --nx-r-md (16px) for
   the compact repeated items (tool cards in the grids, FAQ rows, payout tiles, logo tiles) — nxel.R_MD / R_LG. */
.nx-site .elementor-column.nx-card > .elementor-widget-wrap.elementor-element-populated,
.nx-site .elementor-column.nx-lift > .elementor-widget-wrap.elementor-element-populated {
  box-shadow: var(--nx-shadow-rest);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.nx-site .elementor-column.nx-card > .elementor-widget-wrap.elementor-element-populated,
.nx-site .elementor-column.nx-lift:not(.nx-plan--dark) > .elementor-widget-wrap.elementor-element-populated { border-color: var(--nx-line-card); }
.nx-site .elementor-column.nx-card:hover > .elementor-widget-wrap.elementor-element-populated,
.nx-site .elementor-column.nx-lift:hover > .elementor-widget-wrap.elementor-element-populated {
  transform: translateY(-3px); border-color: var(--nx-indigo); box-shadow: var(--nx-shadow-hover);
}
.nx-site .elementor-column.nx-plan--dark:hover > .elementor-widget-wrap.elementor-element-populated { border-color: #4338CA; box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 20px 40px -16px rgba(49,46,129,.55); }
.nx-site .elementor-column.nx-card:has(:focus-visible) > .elementor-widget-wrap.elementor-element-populated { border-color: var(--nx-indigo); box-shadow: var(--nx-ring), var(--nx-shadow-hover); }
.nx-site .elementor-column.nx-lift:has(:focus-visible) > .elementor-widget-wrap.elementor-element-populated { border-color: var(--nx-indigo); box-shadow: var(--nx-ring), var(--nx-shadow-hover); }
/* soft card CTA (nxel 'soft' button) turns solid while its card is hovered */
.nx-site .nx-card:hover .elementor-widget-button .elementor-button { background-color: var(--nx-indigo); color: #fff; }
@media (hover: none) {
  .nx-site .elementor-column.nx-card:hover > .elementor-widget-wrap.elementor-element-populated,
  .nx-site .elementor-column.nx-lift:hover > .elementor-widget-wrap.elementor-element-populated { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-site .elementor-column.nx-card > .elementor-widget-wrap.elementor-element-populated,
  .nx-site .elementor-column.nx-lift > .elementor-widget-wrap.elementor-element-populated { transition: none; }
  .nx-site .elementor-column.nx-card:hover > .elementor-widget-wrap.elementor-element-populated,
  .nx-site .elementor-column.nx-lift:hover > .elementor-widget-wrap.elementor-element-populated { transform: none; }
}
/* equal-height cards with the button pinned to the bottom (plan cards keep their button right under the price).
   Tool cards pin the price + button block, so prices line up across a row even when a name wraps to two lines. */
.nx-card > .elementor-widget-wrap, .nx-lift > .elementor-widget-wrap { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; }
.nx-card .elementor-widget-button, .nx-lift:not(.nx-plan) .elementor-widget-button { margin-top: auto !important; }
.nx-card .nx-card-price { margin-top: auto !important; }
.nx-card .nx-card-price ~ .elementor-widget-button { margin-top: 0 !important; }
.nx-card .elementor-widget-button { padding-top: 14px; }

/* tablets and small laptops: sections are built edge-to-edge (0 side padding) for wide screens, so between 768px and
   the widest content width give every top-level section a 16px gutter (phones get theirs from the generators) */
@media (min-width: 768px) and (max-width: 1259px) {
  .nx-site .elementor-top-section:not(.nx-header):not(.nx-hero) > .elementor-container { padding-left: 16px; padding-right: 16px; }
}

/* side-by-side buttons (e.g. the contact hero) keep a gap; stacked full-width ones (every CTA band too) get one on
   phones. Elementor zeroes margin-bottom on width-auto widgets, so the gap is the second button's margin-top. */
@media (min-width: 768px) { .nx-site .elementor-top-section:not(.nx-header):not(.nx-cta) .elementor-widget-button.elementor-widget__width-auto + .elementor-widget-button.elementor-widget__width-auto { margin-left: 12px; } }
@media (max-width: 767px) { .nx-site .elementor-top-section:not(.nx-header) .elementor-widget-button.elementor-widget__width-auto + .elementor-widget-button.elementor-widget__width-auto { margin-top: 12px; } }

/* ---- currency: exactly one of the two is visible, decided before first paint ---- */
.nx-only-inr, .nx-only-usd { }
html.nx-cur-inr .nx-only-usd, html.nx-cur-usd .nx-only-inr { display: none !important; }
html:not(.nx-cur-inr):not(.nx-cur-usd) .nx-only-inr { display: none !important; }
html.nx-cur-inr .nx-cur-btn[data-cur="INR"], html.nx-cur-usd .nx-cur-btn[data-cur="USD"] { background: #fff; color: var(--nx-indigo-d); box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.nx-cur-btn:focus-visible { outline: 2px solid var(--nx-indigo); outline-offset: 2px; }
/* anchors land below the sticky header (59px desktop, 65px with the 44px burger on tablets, 61px on phones) */
html { scroll-padding-top: 76px; }

.nx-price { margin: 0; }
.nx-price .nx-main { font: 700 26px/1.1 var(--nx-head); color: var(--nx-ink); letter-spacing: -.02em; }
.nx-price .nx-main small { font: 600 13px/1 var(--nx-body); color: var(--nx-muted); margin-left: 6px; letter-spacing: .02em; }
.nx-price .nx-main .nx-per { font: 500 13px/1 var(--nx-body); color: var(--nx-muted); margin-left: 6px; letter-spacing: 0; }
.nx-price .nx-alt { margin-top: 6px; font: 500 13px/1.5 var(--nx-body); color: var(--nx-muted); }
.nx-price--lg .nx-main { font-size: 44px; letter-spacing: -.03em; }
.nx-price--lg .nx-alt { font-size: 15px; margin-top: 8px; }
.nx-price--sm .nx-main { font-size: 22px; }
.nx-on-dark .nx-price .nx-main { color: #fff; }
.nx-on-dark .nx-price .nx-main small, .nx-on-dark .nx-price .nx-alt, .nx-on-dark .nx-price .nx-per { color: #CBD5E1; }

.nx-cur-switch { display: inline-flex; align-items: center; background: #F1F5F9; border: 1px solid var(--nx-line); border-radius: 999px; padding: 3px; gap: 2px; }
.nx-cur-btn { appearance: none; border: 0; background: transparent; color: var(--nx-slate); font: 600 13px/1 var(--nx-body); padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: .15s; letter-spacing: .2px; white-space: nowrap; }
.nx-cur-btn:hover { color: var(--nx-ink); }
.nx-cur-btn.is-active { background: #fff; color: var(--nx-indigo-d); box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.nx-cur-switch--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.nx-cur-switch--dark .nx-cur-btn { color: #CBD5E1; }
.nx-cur-switch--dark .nx-cur-btn.is-active { background: #fff; color: var(--nx-indigo-d); }
/* GeneratePress paints every <button> dark grey (#3F4047) with black text on :hover / :focus / :active, which made the
   unselected option unreadable. Every state sets both colours here; the selected option (rules above) stays white. */
.nx-site .nx-cur-btn:is(:hover, :focus, :active) { background-color: rgba(255,255,255,.7); color: var(--nx-ink); }
.nx-site .nx-cur-switch--dark .nx-cur-btn:is(:hover, :focus, :active) { background-color: rgba(255,255,255,.14); color: #fff; }
html.nx-cur-inr .nx-site .nx-cur-btn[data-cur="INR"], html.nx-cur-usd .nx-site .nx-cur-btn[data-cur="USD"],
.nx-site .nx-cur-btn.is-active { background-color: #fff; color: var(--nx-indigo-d); }
@media (max-width: 1024px), (pointer: coarse) { .nx-cur-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; } }

/* ---- theme footer bar (GeneratePress) matches the navy footer ---- */
.nx-site .site-footer, .nx-site .site-info { background: var(--nx-navy) !important; color: #94A3B8 !important; font: 500 13px/1.6 var(--nx-body) !important; border-top: 1px solid rgba(255,255,255,.08); }
.nx-site .site-info a { color: #CBD5E1 !important; }
.nx-site .site-info .inside-site-info { padding-top: 22px; padding-bottom: 26px; }

/* ---- classic content (legal pages, blog posts) ---- */
.nx-site.page:not(.elementor-page) .site-content, .nx-site.single-post .site-content { font-family: var(--nx-body); }
.nx-site.page:not(.elementor-page) .entry-header, .nx-site.single-post .entry-header { text-align: center; padding-top: 24px; }
.nx-site.page:not(.elementor-page) .entry-title, .nx-site.single-post .entry-title { font: 700 40px/1.15 var(--nx-head); color: var(--nx-ink); letter-spacing: -.02em; margin-bottom: 8px; text-wrap: balance; }
.nx-site.single-post .entry-meta { font: 500 13px/1.5 var(--nx-body); color: var(--nx-muted); }
.nx-site .entry-content { font: 400 17px/1.75 var(--nx-body); color: var(--nx-text); max-width: 760px; margin: 0 auto; }
.nx-site .entry-content h1, .nx-site .entry-content h2, .nx-site .entry-content h3, .nx-site .entry-content h4, .nx-site .entry-content h5, .nx-site .entry-content h6 { font-family: var(--nx-head); color: var(--nx-ink); letter-spacing: -.01em; line-height: 1.25; margin: 1.6em 0 .6em; text-align: left !important; text-wrap: balance; }
.nx-site .entry-content h2 { font-size: 30px; } .nx-site .entry-content h3 { font-size: 24px; } .nx-site .entry-content h4, .nx-site .entry-content h5 { font-size: 20px; }
.nx-site .entry-content p, .nx-site .entry-content li { text-align: left !important; }
.nx-site .entry-content p { margin: 0 0 1.1em; }
.nx-site .entry-content a { color: var(--nx-indigo); text-decoration: underline; text-underline-offset: 3px; }
.nx-site .entry-content ul, .nx-site .entry-content ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.nx-site .entry-content li { margin: .35em 0; }
.nx-site .entry-content img { border-radius: 14px; height: auto; max-width: 100%; }
.nx-site .entry-content blockquote { border-left: 4px solid var(--nx-indigo); background: var(--nx-light); padding: 16px 20px; border-radius: 0 var(--nx-r-sm) var(--nx-r-sm) 0; margin: 1.4em 0; }
.nx-site .entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.4em 0; }
.nx-site .entry-content th, .nx-site .entry-content td { border: 1px solid var(--nx-line); padding: 10px 12px; }
.nx-site .entry-content th { background: var(--nx-light); font-family: var(--nx-head); color: var(--nx-ink); }
.nx-site .entry-content span[style*="color"], .nx-site .entry-content strong[style*="color"] { color: inherit !important; }
.nx-site .entry-content [style*="font-size"] { font-size: inherit !important; }
.nx-site.single-post .inside-article, .nx-site.page:not(.elementor-page) .inside-article { padding: 40px 32px 56px; }
@media (max-width: 767px) {
  .nx-site.page:not(.elementor-page) .entry-title, .nx-site.single-post .entry-title { font-size: 30px; }
  .nx-site .entry-content { font-size: 16px; }
  .nx-site.single-post .inside-article, .nx-site.page:not(.elementor-page) .inside-article { padding: 24px 18px 40px; }
}

/* ---- panda mascot helpers ---- */
.nx-panda { display: inline-block; line-height: 0; }
.nx-panda img, .nx-panda svg, img.nx-panda { height: auto; }
.nx-panda img, .nx-panda svg { width: 100%; }
.nx-panda--float { animation: nx-float 4s ease-in-out infinite; }
@keyframes nx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .nx-panda--float { animation: none; } }

/* ===================== shared page components (home, tool pages, plans, contact) ===================== */
/* hero band — the home page is the only page with one, and since the owner picked design 10 it is LIGHT.
   Everything that paints it (background glow, grid, pill, gradient word, search box, floating tool cards) lives in
   home.css under "hero — light premium"; what stays here is what the panda and the layout need on any hero. */
.nx-hero{position:relative;overflow:hidden}
.nx-hero>.elementor-container{position:relative;z-index:1}
.nx-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;font:600 13px/1 var(--nx-body)}
.nx-grad{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nx-hero-panda{width:min(360px,100%);height:auto}
.nx-band{border-top:1px solid #EAEEF3}
body:not(.elementor-editor-active) .nx-grid,body:not(.elementor-editor-active) .nx-grid>.elementor-container{display:contents}
.nx-flow>.elementor-container>.elementor-column>.elementor-widget-wrap{align-items:stretch}
.nx-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#F59E0B;color:#111827;font:700 13px/1 var(--nx-body);letter-spacing:.01em}
.nx-badge--soft{background:#EEF2FF;color:#4338CA}
.nx-plan .elementor-widget-text-editor a,.nx-catalog .elementor-widget-text-editor a,.nx-note a{color:#4F46E5;text-decoration:underline;text-underline-offset:3px}
.nx-plan .elementor-widget-text-editor a:hover,.nx-catalog .elementor-widget-text-editor a:hover,.nx-note a:hover{color:#4338CA}
.nx-plan--dark .elementor-widget-text-editor a{color:#C7D2FE}.nx-plan--dark .elementor-widget-text-editor a:hover{color:#fff}
.nx-search{position:relative;max-width:600px}
.nx-search input{width:100%;height:54px;border:1px solid var(--nx-line);border-radius:14px;padding:0 76px 0 48px;font:500 16px/1 var(--nx-body);color:#0F172A;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748B' 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 17px center;box-shadow:0 1px 2px rgba(15,23,42,.05);-webkit-appearance:none}
.nx-search input:focus{outline:none;border-color:#6366F1;box-shadow:0 0 0 4px rgba(99,102,241,.25)}
.nx-search input::placeholder{color:var(--nx-muted);opacity:1}
.nx-count{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:600 13px/1 var(--nx-body);color:var(--nx-muted);white-space:nowrap;pointer-events:none}
.nx-count:empty{display:none}
/* logo tile: one borderless tinted tile; multiply lets logos saved on white backgrounds melt into it (no white boxes) */
.nx-card .nx-logo .elementor-widget-container{height:64px;padding:8px 12px;background:var(--nx-light);border-radius:var(--nx-r-sm);display:flex;align-items:center;justify-content:center;text-align:center}
.nx-card .nx-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.nx-card .nx-logo img{max-height:40px;width:auto;max-width:100%;object-fit:contain;margin:0 auto;display:block;mix-blend-mode:multiply}
.nx-logo-text{height:64px;padding:8px 12px;background:var(--nx-light);border-radius:var(--nx-r-sm);display:flex;align-items:center;justify-content:center;font:700 20px/1.1 var(--nx-head);color:#0F172A;letter-spacing:-.01em;text-align:center}
.nx-card-title .elementor-heading-title{overflow-wrap:anywhere}
#nx-empty{display:none;text-align:center;padding:24px 16px 28px;color:var(--nx-slate);font:500 15px/1.5 var(--nx-body);background:#fff;border:1px dashed var(--nx-line-2);border-radius:var(--nx-r-md)}
#nx-empty img{width:140px;height:auto;margin:0 auto 8px;display:block}
.nx-stats-row .elementor-column+.elementor-column>.elementor-widget-wrap{border-left:1px solid var(--nx-line)}
.nx-pay .elementor-icon-list-items{justify-content:center}
.nx-pay .elementor-icon-list-items .elementor-icon-list-item{background:#fff;border:1px solid var(--nx-line-card);border-radius:999px;padding:10px 16px !important;margin:6px !important;box-shadow:var(--nx-shadow-rest)}
/* buttons: filled variants get a transparent 1px border, the same box as the outlined ones, so pairs match in height;
   gradients start at the border edge (no 1px seam) */
.nx-site .elementor-button{border:1px solid transparent;background-origin:border-box}
/* Elementor's inline SVG icons (e_font_icon_svg): no baseline gap, so a button with an icon is no taller than one without */
.nx-site .elementor-button .elementor-button-icon{display:inline-flex;align-items:center;line-height:0}
.nx-site .elementor-button .elementor-button-icon svg{display:block}
/* (payment chips removed 27 Sep: home and plans both use the logo belt, assets/belt.css) */
/* FAQ (nxel.accordion): separate rounded items, a quiet round +/- badge, indigo ring on the open one. Each question is
   an <h3> holding a real <button aria-expanded>; the answer is a [hidden] region toggled by the site kit's script. */
.nx-faq-item{border:1px solid var(--nx-line-card);border-radius:var(--nx-r-md);margin-bottom:12px;overflow:hidden;background:#fff;box-shadow:var(--nx-shadow-rest);transition:border-color .2s ease,box-shadow .2s ease}
.nx-faq-item:last-child{margin-bottom:0}
.nx-faq-item:hover{border-color:var(--nx-indigo)}
.nx-faq-item:has(.nx-faq-btn[aria-expanded="true"]){border-color:var(--nx-indigo);box-shadow:0 0 0 3px rgba(99,102,241,.10),var(--nx-shadow-rest)}
.nx-site .nx-faq-q{margin:0;padding:0;font:inherit;border:0}
.nx-site .nx-faq-btn{display:flex;align-items:center;gap:16px;width:100%;margin:0;padding:18px 22px;border:0;border-radius:0;background:#fff;color:var(--nx-ink,#0F172A);
  font:600 17px/1.45 var(--nx-head);letter-spacing:0;text-align:left;text-transform:none;cursor:pointer;box-shadow:none;transition:color .2s ease}
.nx-site .nx-faq-btn:hover,.nx-site .nx-faq-btn:focus{background:#fff;color:#4338CA}
.nx-site .nx-faq-btn[aria-expanded="true"]{color:#4338CA}
.nx-site .nx-faq-btn:focus-visible{outline:2px solid var(--nx-focus);outline-offset:-4px;border-radius:var(--nx-r-md)}
.nx-faq-t{flex:1 1 auto;min-width:0;text-wrap:balance}
.nx-faq-ic{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:#F1F5F9;transition:background-color .2s ease}
.nx-faq-ic::before,.nx-faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:1px;background:#475569;transition:transform .2s ease,background-color .2s ease}
.nx-faq-ic::after{transform:rotate(90deg)}
.nx-faq-btn[aria-expanded="true"] .nx-faq-ic{background:var(--nx-soft)}
.nx-faq-btn[aria-expanded="true"] .nx-faq-ic::before{background:#4F46E5}
.nx-faq-btn[aria-expanded="true"] .nx-faq-ic::after{transform:rotate(0);background:#4F46E5}
.nx-faq-a{padding:0 22px 20px;color:var(--nx-text,#334155);font:400 16px/1.7 var(--nx-body)}
.nx-faq-a[hidden]{display:none}
.nx-faq-a > :last-child{margin-bottom:0}
.nx-faq-a a{color:#4338CA;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.nx-faq-item,.nx-faq-ic,.nx-faq-ic::before,.nx-faq-ic::after{transition:none}}
.nx-cta{position:relative;overflow:hidden}
.nx-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 90% 10%,rgba(255,255,255,.14),transparent 60%),radial-gradient(30% 50% at 8% 90%,rgba(255,255,255,.10),transparent 60%);pointer-events:none}
.nx-cta>.elementor-container{position:relative;z-index:1}
.nx-cta .elementor-widget-button{margin:0 6px}
/* header (sticky at every width: gen_header.py switches it on for all of Elementor's device modes) */
.nx-header{transition:box-shadow .2s}
.nx-header.elementor-sticky--effects{box-shadow:0 8px 24px rgba(15,23,42,.08)}
.nx-hcol-actions>.elementor-widget-wrap{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center}
.nx-hcol-actions .elementor-widget{width:auto;margin-bottom:0}
.nx-nav .elementor-nav-menu--dropdown{box-shadow:0 20px 40px rgba(15,23,42,.12);border-top:1px solid #EEF2F7}
/* burger: a 44x44 tap target with a hairline ring like the Login button */
.nx-header .nx-nav .elementor-menu-toggle{margin-left:10px;width:44px;height:44px;padding:0;box-sizing:border-box;border-color:var(--nx-line-2)}
.elementor-nav-menu--main li.nx-mobile-only{display:none !important}
/* brand: the NoxTools SVG logo (plugin assets/brand/noxtools-logo.svg, 141x26 viewBox), 150px wide (124px on phones) */
.nx-header .nx-brand .elementor-widget-container{display:flex;align-items:center}
.nx-header .nx-brand__link{display:inline-flex;align-items:center;line-height:0;padding:4px 0;margin:-4px 0;border-radius:6px}
.nx-header .nx-brand__img{display:block;width:150px;max-width:100%;height:auto;aspect-ratio:141/26}
/* the full nav (with Login / Sign Up) fits from 900px, so the burger only shows below that */
@media (min-width:900px) and (max-width:1024px){
  .nx-header .nx-nav.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main{display:block}
  .nx-header .nx-nav.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,
  .nx-header .nx-nav.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown{display:none}
  .nx-header .elementor-widget.nx-login,.nx-header .elementor-widget.nx-signup{display:block}
}
@media (max-width:899px){.nx-hcol-actions .elementor-widget-nav-menu{order:9}}
/* open burger menu: the page behind is scroll-locked and dimmed; a tap on the backdrop closes the menu (panda-motion.js) */
html.nx-menu-open,html.nx-menu-open body{overflow:hidden}
.nx-menu-backdrop{display:none}
html.nx-menu-open .nx-menu-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:9990}
html.nx-menu-open .nx-header:not(.elementor-sticky__spacer){z-index:9995 !important}
html.nx-menu-open .nx-header:not(.elementor-sticky__spacer):not(.elementor-sticky--active){position:relative}
@media (max-width:767px){.nx-header .nx-brand__img{width:124px}}
/* footer (gen_footer.py): the owner's "Line Wordmark" footer (demo/footers-wordmark-texture/texture-4.html) — the white
   SVG logo + tagline, the site's pages, © line + "Back to top", and a giant "NoxTools" drawn in fine vertical
   lines that fade downward and bleed off the bottom edge. Owner rules: no quick links, no ₹/$ toggle, no payment list,
   no headings. Links are 44px tap targets. */
.nx-footer{position:relative}
.nx-site .site-footer:has(.nx-ft){border-top:0}   /* the footer draws its own hairline (below), not the theme bar's grey rule */
.nx-ft-section{background-image:radial-gradient(60% 70% at 50% 108%,rgba(79,70,229,.20),transparent 70%),linear-gradient(180deg,#0B1120 0%,#080C18 55%,#05070D 100%)}
/* hairline of light where the pandas' ledges meet the footer */
.nx-ft-section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(167,139,250,.45) 20%,rgba(129,140,248,.45) 80%,transparent)}
.nx-footer a{color:#CBD5E1;transition:color .15s}.nx-footer a:hover{color:#fff}
.nx-ft-section>.elementor-container>.elementor-column>.elementor-widget-wrap{padding:0 !important}
.nx-ft{position:relative}
.nx-ft__top{display:grid;grid-template-columns:minmax(0,440px) auto;justify-content:space-between;align-items:start;gap:24px 56px;padding:72px 0 40px}
.nx-ft__brand{min-width:0}
.nx-footer .nx-ft__logo{display:inline-flex;align-items:center;padding:4px 0;text-decoration:none;vertical-align:top}
.nx-ft__logo img{display:block;height:26px;width:auto;aspect-ratio:141/26}   /* noxtools-logo-white.svg: white text, the mark in its own colours */
.nx-ft__tagline{margin:16px 0 0;font:400 15px/1.7 var(--nx-body);color:#94A3B8;text-wrap:pretty}
.nx-ft__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 30px}
.nx-ft__links li{margin:0;padding:0}
.nx-footer .nx-ft__links a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1.3 var(--nx-body);color:#CBD5E1;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.nx-footer .nx-ft__links a:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(165,180,252,.8)}
.nx-ft__meta{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:14px 0;border-top:1px solid rgba(255,255,255,.09)}
.nx-ft__copy{margin:0;font:500 13px/1.5 var(--nx-body);color:#94A3B8}
.nx-footer .nx-ft__totop{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 13px/1 var(--nx-body);color:#CBD5E1;text-decoration:none}
.nx-ft__totop span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);transition:border-color .15s,background .15s}
.nx-ft__totop svg{display:block;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nx-footer .nx-ft__totop:hover{color:#fff}.nx-ft__totop:hover span{border-color:rgba(165,180,252,.7);background:rgba(129,140,248,.12)}
/* the oversized wordmark, drawn in fine vertical lines: decorative (aria-hidden), low contrast, bleeding off the bottom
   edge. The line pitch is set in em so it scales with the letters, then rounded to whole pixels so every line lands
   crisply on the pixel grid (no moire, no soft half-lines) at any width. The box clips the letters' lowest .13em (and
   anything wider than the footer, so it never scrolls sideways); its .12em top padding keeps the letter tops unclipped. */
.nx-ft__markbox{overflow:hidden;font:800 min(286px,calc(23.6vw - 15px))/.8 var(--nx-head);padding-top:.12em;margin-top:calc(6px - .12em)}
.nx-ft__mark{display:block;margin:0 0 -.13em;padding:0;text-align:center;white-space:nowrap;letter-spacing:-.055em;
  --ink-line:rgba(199,210,254,.52);          /* the rules */
  --ink-fill:rgba(129,140,248,.07);          /* a faint tint that keeps each letter's silhouette whole */
  background-image:linear-gradient(90deg,var(--ink-line) 0 var(--rule,.007em),transparent var(--rule,.007em)),linear-gradient(var(--ink-fill),var(--ink-fill));
  background-size:.021em 100%,100% 100%;background-repeat:repeat-x,no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.52) 50%,rgba(0,0,0,.08) 90%);
          mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.52) 50%,rgba(0,0,0,.08) 90%);
  user-select:none;pointer-events:none}
@supports (width:round(nearest,1.5px,1px)){
  .nx-ft__mark{--rule:max(1px,round(nearest,.007em,1px));background-size:max(3px,round(nearest,.021em,1px)) 100%,100% 100%}
}
/* Two pandas peek over the footer's top edge, each on its own violet ledge lined up with the edge at every width:
   "bamboo" (760x507, ledge 482/760 of the width from the top: top = -.6342 x width) on the left and "goodbye" (760x487,
   ledge 433/760: top = -.5697 x width) on the right. --nox-in = their distance from the screen edge, capped to the
   1264px frame on wide screens. Decorative only. */
.nx-ft-nox{position:absolute;z-index:3;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;--nox-in:28px;
  --nox-x:calc(max(var(--nox-in),(100vw - 1264px) / 2 + var(--nox-in)) - (100vw - 100%) / 2)}
.nx-ft-nox--left{--nox-w:232px;width:var(--nox-w);left:var(--nox-x);top:calc(var(--nox-w) * -.6342)}
.nx-ft-nox--right{--nox-w:228px;width:var(--nox-w);right:var(--nox-x);top:calc(var(--nox-w) * -.5697)}
@media (max-width:1200px){
  .nx-ft-nox{--nox-in:20px}
  .nx-ft-nox--left{--nox-w:200px}.nx-ft-nox--right{--nox-w:196px}
}
@media (max-width:1024px){
  .nx-ft-nox--left{--nox-w:176px}.nx-ft-nox--right{--nox-w:172px}
  .nx-ft__top{grid-template-columns:minmax(0,1fr);padding-top:64px;gap:22px}
  .nx-ft__tagline{max-width:540px}
  .nx-ft__links{justify-content:flex-start}
}
@media (max-width:767px){
  .nx-ft{padding:0 16px}
  .nx-ft-nox--left{--nox-in:8px;--nox-w:clamp(108px,34vw,140px)}
  .nx-ft-nox--right{--nox-in:10px;--nox-w:clamp(100px,31vw,128px)}
  .nx-ft__top{padding:48px 0 22px;gap:14px}
  .nx-ft__tagline{margin-top:14px}
  .nx-ft__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .nx-footer .nx-ft__links a{display:flex;width:100%}
  .nx-ft__meta{padding:6px 0}
  .nx-ft__markbox{font-size:calc(23.6vw - 8px);margin-top:calc(20px - .12em)}
  .nx-ft__mark{--ink-line:rgba(199,210,254,.66);--ink-fill:rgba(129,140,248,.09)}
}
@media (max-width:340px){.nx-footer .nx-ft__links a{font-size:14px}.nx-ft__copy{font-size:12.5px}}
.nx-feat-list .elementor-icon-list-items{columns:2;column-gap:24px}.nx-feat-list .elementor-icon-list-item{break-inside:avoid}
.nx-hero-feats .elementor-icon-list-item{margin-bottom:6px}
/* plans */
.nx-plan-list.is-collapsed .elementor-icon-list-item:nth-child(n+9){display:none}
.nx-site .nx-showall-note{display:flex;align-items:center;min-height:40px;margin:12px 0 0;color:#64748B;font:500 14px/1.2 var(--nx-body)}
/* plan blurbs (gen_plans.py, at most two lines down to 1025px) are two lines tall in every card, so a one-line blurb never
   lifts its card's price and button above the others in the row */
@media (min-width:768px){.nx-plan .nx-plan-blurb>.elementor-widget-container{min-height:calc(2em * 1.65)}}
/* "Show all N tools" / "Show less" under a plan's tool list (gen_plans.py): a soft pill with a chevron that turns when
   the list is open. GeneratePress paints <button>s dark grey with black text on :hover / :focus, so every state here
   sets its own background and text colour — the label stays clearly readable on the white and the dark plan cards. */
.nx-site .nx-showall{display:inline-flex;align-items:center;gap:9px;min-height:40px;margin:12px 0 0;padding:0 15px;border:1px solid #C7D2FE;border-radius:10px;background:#EEF2FF;color:#4338CA;font:600 14px/1.2 var(--nx-body);letter-spacing:0;text-decoration:none;text-transform:none;cursor:pointer;box-shadow:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.nx-site .nx-showall::after{content:"";flex:none;width:7px;height:7px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease,margin .2s ease}
.nx-site .nx-showall[aria-expanded="true"]::after{margin-top:4px;transform:rotate(-135deg)}
.nx-site .nx-showall:hover,.nx-site .nx-showall:focus-visible{background:#E0E7FF;border-color:#A5B4FC;color:#3730A3}
.nx-site .nx-showall:active{background:#C7D2FE;border-color:#818CF8;color:#312E81}
.nx-site .nx-showall:focus-visible{outline:2px solid var(--nx-focus);outline-offset:2px}
.nx-site .nx-plan--dark .nx-showall{background:rgba(255,255,255,.08);border-color:rgba(199,210,254,.38);color:#E0E7FF}
.nx-site .nx-plan--dark .nx-showall:hover,.nx-site .nx-plan--dark .nx-showall:focus-visible{background:rgba(255,255,255,.15);border-color:rgba(199,210,254,.65);color:#fff}
.nx-site .nx-plan--dark .nx-showall:active{background:rgba(255,255,255,.22);border-color:#C7D2FE;color:#fff}
@media (prefers-reduced-motion:reduce){.nx-site .nx-showall,.nx-site .nx-showall::after{transition:none}}
@media (max-width:767px){.nx-stats-row .elementor-column:nth-child(3)>.elementor-widget-wrap{border-left:0}.nx-stats-row .elementor-column:nth-child(n+3)>.elementor-widget-wrap{border-top:1px solid #EEF2F7}
  .nx-search input{height:50px;padding-right:64px}.nx-card .nx-logo .elementor-widget-container{height:54px;padding:6px 10px}.nx-card .nx-logo img{max-height:34px}.nx-logo-text{height:54px;font-size:18px}
  .nx-cta .elementor-widget-button{margin:0}.nx-feat-list .elementor-icon-list-items{columns:1}.nx-card-panda{width:78px;top:-46px}
  .nx-price .nx-alt{font-size:13px}.nx-price--lg .nx-main{font-size:38px}.nx-price--sm .nx-main{font-size:21px}}

/* ---- classic pages rendered inside the full-width template (legal pages) ---- */
.nx-classic{max-width:808px;margin:0 auto;padding:56px 24px 80px;font-family:var(--nx-body)}
.nx-classic-head{text-align:center;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--nx-line)}
.nx-classic-title{font:700 42px/1.15 var(--nx-head);color:var(--nx-ink);letter-spacing:-.022em;margin:0 0 10px;text-wrap:balance}
.nx-classic-updated{font:500 13px/1.5 var(--nx-body);color:var(--nx-muted);margin:0}
.nx-classic-body{font:400 17px/1.75 var(--nx-body);color:var(--nx-text)}
.nx-classic-body h1,.nx-classic-body h2,.nx-classic-body h3,.nx-classic-body h4,.nx-classic-body h5,.nx-classic-body h6{font-family:var(--nx-head);color:var(--nx-ink);letter-spacing:-.01em;line-height:1.25;margin:1.7em 0 .55em;text-align:left !important;font-weight:700}
.nx-classic-body h1{font-size:30px}.nx-classic-body h2{font-size:28px}.nx-classic-body h3{font-size:24px}.nx-classic-body h4,.nx-classic-body h5,.nx-classic-body h6{font-size:20px}
.nx-classic-body p,.nx-classic-body li{text-align:left !important;margin:0 0 1.05em}
.nx-classic-body p:empty,.nx-classic-body h5:empty,.nx-classic-body h4:empty{display:none}
.nx-classic-body a{color:var(--nx-indigo);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.nx-classic-body ul,.nx-classic-body ol{padding-left:1.3em;margin:0 0 1.2em}
.nx-classic-body span[style*="color"],.nx-classic-body strong[style*="color"]{color:inherit !important}
.nx-classic-body [style*="font-size"]{font-size:inherit !important}
@media (max-width:767px){.nx-classic{padding:36px 18px 56px}.nx-classic-title{font-size:30px}.nx-classic-body{font-size:16px}}

/* ---- blog archive / single post (GeneratePress markup) ---- */
.nx-site.blog .site-content,.nx-site.archive .site-content,.nx-site.single-post .site-content,.nx-site.search .site-content{padding-top:40px;padding-bottom:64px}
.nx-site.blog article .inside-article,.nx-site.archive article .inside-article,.nx-site.search article .inside-article{background:#fff;border:1px solid var(--nx-line-card);border-radius:var(--nx-r-lg);padding:30px 32px;box-shadow:var(--nx-shadow-rest);transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
.nx-site.blog article:hover .inside-article,.nx-site.archive article:hover .inside-article{box-shadow:var(--nx-shadow-hover);border-color:var(--nx-indigo);transform:translateY(-2px)}
.nx-site.blog .entry-title,.nx-site.archive .entry-title,.nx-site.search .entry-title{font:700 26px/1.25 var(--nx-head);letter-spacing:-.015em;margin-bottom:6px;text-wrap:balance}
.nx-site.blog .entry-title a,.nx-site.archive .entry-title a{color:var(--nx-ink);text-decoration:none}.nx-site.blog .entry-title a:hover,.nx-site.archive .entry-title a:hover{color:var(--nx-indigo)}
.nx-site .entry-meta,.nx-site .entry-meta a{font:500 13px/1.5 var(--nx-body);color:var(--nx-muted)}
.nx-site .post-image{margin:18px 0}.nx-site .post-image a{display:block}.nx-site .post-image img{border-radius:14px;width:100%;height:auto}
.nx-site .featured-image.page-header-image-single img{border-radius:16px;height:auto}
.nx-site .entry-summary{font:400 16px/1.7 var(--nx-body);color:var(--nx-slate)}
.nx-site .read-more{color:var(--nx-indigo);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nx-site footer.entry-meta .cat-links,.nx-site footer.entry-meta .tags-links{display:block;margin-top:6px;font-size:13px}
.nx-site .widget-area .widget{background:#fff;border:1px solid var(--nx-line-card);border-radius:var(--nx-r-lg);padding:22px 24px;margin-bottom:22px;box-shadow:var(--nx-shadow-rest)}
.nx-site .widget-title,.nx-site .widget-area .wp-block-heading,.nx-site .wp-block-search__label{font:700 17px/1.3 var(--nx-head);color:var(--nx-ink);letter-spacing:-.01em;margin:0 0 12px}
.nx-site .wp-block-search__inside-wrapper{display:flex;gap:8px;border:0}.nx-site .wp-block-search__input{flex:1;min-width:0}
.nx-site .widget ul li{font:500 14px/1.5 var(--nx-body);padding:6px 0;border-bottom:1px solid #F1F5F9}.nx-site .widget ul li a{color:var(--nx-slate);text-decoration:none}.nx-site .widget ul li a:hover{color:var(--nx-indigo)}
.nx-site .search-field,.nx-site .wp-block-search__input{border:1px solid var(--nx-line-2);border-radius:var(--nx-r-sm);padding:10px 14px;font:500 16px/1.4 var(--nx-body);background:#fff}.nx-site .search-submit,.nx-site .wp-block-search__button{background:var(--nx-indigo);color:#fff;border:0;border-radius:12px;font:600 14px/1 var(--nx-body);padding:12px 16px;cursor:pointer}.nx-site .search-submit:hover,.nx-site .wp-block-search__button:hover{background:var(--nx-violet,#7C3AED)}
.nx-site .paging-navigation .page-numbers{border-radius:10px;border:1px solid var(--nx-line);padding:8px 12px;font:600 14px/1 var(--nx-body);color:var(--nx-slate)}.nx-site .paging-navigation .page-numbers.current{background:var(--nx-indigo);color:#fff;border-color:var(--nx-indigo)}
.nx-site .entry-content h1,.nx-site .entry-content h2,.nx-site .entry-content h3,.nx-site .entry-content h4{font-weight:700}
.nx-site .widget-area .widget:empty,.nx-site .widget-area .widget:not(:has(*)){display:none}
.nx-site .widget-area .widget_block:not(:has(h1,h2,h3,p,ul,ol,form,img,a)){display:none}

/* ---- currency toggle rows ---- */
.nx-cat-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.nx-cat-tools--center{justify-content:center}
.nx-cat-label{font:600 13px/1 var(--nx-body);color:var(--nx-muted)}
.nx-cat-plans{font:600 15px/1.3 var(--nx-body);color:var(--nx-indigo-d);text-decoration:none}.nx-cat-plans:hover{text-decoration:underline}
/* phones / tablets / touch screens: a 40px tall tap target (like the ₹/$ buttons); the negative margins cancel the extra
   padding, so the text stays exactly where it was (no flex here: it would drop the space after "Want a bundle?") */
@media (max-width:1024px),(pointer:coarse){.nx-cat-plans{display:inline-block;box-sizing:border-box;min-height:40px;padding:10.25px 0;margin:-10.25px 0}}
@media (max-width:767px){.nx-cat-tools{justify-content:flex-start;margin-top:12px}.nx-cat-tools.nx-cat-tools--center{justify-content:center}}

/* ---- QA fixes ---- */
@media (max-width:767px){.nx-hero-panda{width:min(220px,60%);display:block;margin:0 auto}.nx-hero .elementor-column:last-child>.elementor-widget-wrap{padding-top:0}.nx-hero .elementor-column:last-child .elementor-widget-html{text-align:center}}
.nx-blog-head{max-width:820px;margin:8px auto 28px}
/* Page headers with Nox beside the title (R21): the blog page (reading pose) and the legal pages (shield pose).
   A centred row — Nox, then the title + intro left-aligned; on phones Nox sits above the centred title. Decorative (alt=""). */
.nx-head-row{display:flex;align-items:center;justify-content:center;gap:28px;text-align:left}
.nx-head-row .nx-head-text{min-width:0}
.nx-head-nox{display:block;flex:0 0 auto;height:auto;max-width:none;object-fit:contain;border-radius:0}
.nx-head-nox--reading{width:124px}
.nx-head-nox--shield{width:112px}
.nx-head-row .nx-classic-title{margin-bottom:8px}
@media (max-width:599px){
  .nx-head-row{flex-direction:column;gap:12px;text-align:center}
  .nx-head-nox--reading{width:100px}
  .nx-head-nox--shield{width:92px}
}
/* Single posts: author box after the article (R21) — Nox writing in a notebook in a soft round frame, "NoxTools Team". */
.nx-site .entry-content .nx-author{display:flex;align-items:center;gap:24px;margin:48px 0 8px;padding:24px 28px;background:var(--nx-light);border:1px solid var(--nx-line-card);border-radius:var(--nx-r-lg)}
.nx-author__pic{flex:0 0 auto;width:112px;height:112px;border-radius:50%;background:#EEF2FF;border:1px solid #E0E7FF;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.nx-site .entry-content .nx-author__nox{display:block;width:104px;max-width:none;height:auto;border-radius:0;margin:0 0 -6px}
.nx-author__text{min-width:0}
.nx-site .entry-content .nx-author p{margin:0;text-align:left!important}
.nx-site .entry-content .nx-author__label{font:600 12px/1.4 var(--nx-body);letter-spacing:.06em;text-transform:uppercase;color:var(--nx-muted)}
.nx-site .entry-content .nx-author__name{font:700 20px/1.3 var(--nx-head);color:var(--nx-ink);margin-top:2px}
.nx-site .entry-content .nx-author__bio{font:400 15px/1.6 var(--nx-body);color:var(--nx-slate);margin-top:6px}
.nx-site .entry-content .nx-author__link{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:4px;font:600 15px/1.3 var(--nx-body);color:var(--nx-indigo-d,#4338CA);text-decoration:none}
.nx-site .entry-content .nx-author__link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:599px){
  .nx-site .entry-content .nx-author{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .nx-author__pic{width:88px;height:88px}
  .nx-site .entry-content .nx-author__nox{width:80px;margin-bottom:-4px}
}


/* Nox mascot (realistic): images in /wp-content/uploads/nox-panda/real/ — built by wplocal/panda/real/build-real.php */
.nx-panda,.nx-hero-panda,.nx-ft-nox{object-fit:contain;filter:none!important}
.nx-hero-panda{width:350px;max-width:100%;height:auto;animation:none!important}
.nx-mascot-added{display:block;object-fit:contain;max-width:100%;height:auto;width:120px;flex-shrink:0}
.nx-mascot-heading{display:flex;align-items:center;justify-content:center;gap:24px}
.nx-mascot-heading>div{min-width:0}
.nx-mascot-heading .elementor-heading-title{margin:0}
.nx-cta .nx-mascot-heading{margin-bottom:12px}
@media(max-width:767px){
 .nx-hero-panda{width:250px!important;max-width:80%;height:auto!important}
 .nx-mascot-heading{gap:14px;text-align:left}
 .nx-mascot-added{width:84px}
}
@media(prefers-reduced-motion:reduce){.nx-panda,.nx-panda--float{animation:none!important}}

/* ===================== v4 polish (global) ===================== */
.nx-main{display:block}
/* FAQ questions wrap evenly (no one-word last line on phones) */
/* short text links in cards (plan cards' tool-list link, related-card titles): 40px+ tap targets without moving the text around them */
.nx-plan .elementor-widget-text-editor a,.nx-card-title .elementor-heading-title a{display:inline-block;padding:10px 0;margin:-10px 0}
/* big pandas on phones: centred and smaller (the hero panda has its own rule above) */
@media (max-width:767px){
  .nx-site img.nx-panda:not(.nx-hero-panda){display:block;width:min(200px,56%) !important;height:auto;margin-left:auto !important;margin-right:auto !important}
}
/* FAQ intro (home, plans, affiliate, tool pages): once the intro column is stacked above the questions, Nox thinks along
   at its bottom-right, beside the contact button, instead of adding a block of his own under it. The heading and the
   line keep clear of him. Plans (--side) keeps its two columns down to 768, so it joins below that. */
@media (max-width:1024px){
  .nx-site .nx-faq-intro > .elementor-widget-wrap{position:relative}
  .nx-site .nx-faq-intro .elementor-widget-heading,.nx-site .nx-faq-intro .elementor-widget-text-editor{padding-right:160px}
  .nx-site .nx-faq-intro .nx-faq-panda-w{position:absolute !important;right:6px;bottom:18px;width:auto !important;margin:0 !important;display:block}
  .nx-site .nx-faq-intro .nx-faq-panda-w img.nx-faq-panda{display:block;width:150px !important;max-width:none;height:auto;margin:0 !important}
}
/* plans keeps two columns on tablets: Nox stays in the flow under the contact button there */
@media (min-width:768px) and (max-width:1024px){
  .nx-site .nx-faq-intro.nx-faq-intro--side .elementor-widget-heading,.nx-site .nx-faq-intro.nx-faq-intro--side .elementor-widget-text-editor{padding-right:0}
  .nx-site .nx-faq-intro.nx-faq-intro--side .nx-faq-panda-w{position:static !important}
  .nx-site .nx-faq-intro.nx-faq-intro--side .nx-faq-panda-w img.nx-faq-panda{width:min(220px,100%) !important;margin-top:28px !important}
}
@media (max-width:639px){
  .nx-site .nx-faq-intro .elementor-widget-heading{padding-right:0}
  .nx-site .nx-faq-intro .elementor-widget-text-editor{padding-right:96px}
  .nx-site .nx-faq-intro .nx-faq-panda-w{right:0;bottom:22px}
  .nx-site .nx-faq-intro .nx-faq-panda-w img.nx-faq-panda{width:98px !important}
}

/* ---- blog, archives, search, single posts (GeneratePress templates) ---- */
/* side gutters below the container width (the theme's cards otherwise touch the screen edge) */
@media (max-width:1259px){
  .nx-site.blog .site-content,.nx-site.archive .site-content,.nx-site.search .site-content,.nx-site.single-post .site-content{padding-left:24px;padding-right:24px}
}
@media (max-width:767px){
  .nx-site.blog .site-content,.nx-site.archive .site-content,.nx-site.search .site-content,.nx-site.single-post .site-content{padding-left:16px;padding-right:16px;padding-top:28px}
  .nx-site.blog article .inside-article,.nx-site.archive article .inside-article,.nx-site.search article .inside-article{padding:22px 20px}
  .nx-site.blog .entry-title,.nx-site.archive .entry-title,.nx-site.search .entry-title{font-size:22px}
  .nx-site.single-post .inside-article{padding:16px 0 36px}
  .nx-site .widget-area .widget{padding:20px}
}
/* search / archive / author titles match the Blog heading */
.nx-site .site-main .page-header{max-width:820px;margin:8px auto 28px;padding:0 0 26px;background:none;border:0;border-bottom:1px solid var(--nx-line);text-align:center}
.nx-site .site-main .page-header .page-title{font:700 40px/1.15 var(--nx-head);color:var(--nx-ink);letter-spacing:-.022em;margin:0;text-wrap:balance}
.nx-site.search .site-main .page-header .page-title span{color:var(--nx-indigo-d)}
.nx-site .site-main .page-header .taxonomy-description{margin-top:10px;font:400 16px/1.6 var(--nx-body);color:var(--nx-slate)}
.nx-site .site-main .page-header .taxonomy-description p{margin:0}
@media (max-width:767px){.nx-site .site-main .page-header{margin-bottom:22px;padding-bottom:20px}.nx-site .site-main .page-header .page-title{font-size:28px}}
/* post meta and pagination: comfortable tap targets */
.nx-site .entry-meta a{display:inline-block;padding:4px 0}
.nx-site .paging-navigation .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
/* a tag/category comma stays on the line of the link before it (an inline-block link is an atomic box, so a line could
   break in front of the comma), and a two-line previous/next title wraps beside its arrow instead of under it */
.nx-site footer.entry-meta .tags-links a,.nx-site footer.entry-meta .cat-links a{display:inline}
.nx-site .post-navigation .nav-previous,.nx-site .post-navigation .nav-next{display:flex;align-items:flex-start;gap:8px}
.nx-site .post-navigation .gp-icon{flex:none;align-self:flex-start;margin:3px 0 0}
.nx-site .post-navigation a{display:inline;padding:0}
.nx-site footer.entry-meta .cat-links,.nx-site footer.entry-meta .tags-links{line-height:2.2}
/* phones and touch screens: ~40px tap targets on the meta links, with the tag lines spaced to match */
@media (max-width:767px),(pointer:coarse){
  .nx-site .entry-meta a{padding:12px 0}
  .nx-site .post-navigation a{padding:0}
  .nx-site footer.entry-meta .cat-links,.nx-site footer.entry-meta .tags-links{line-height:3.2}
}
/* blog archive and single posts: the sidebar's widgets follow the reader instead of scrolling away up top */
@media (min-width:1024px){
  .nx-site .sidebar .inside-right-sidebar{position:sticky;top:88px;align-self:flex-start;max-height:calc(100vh - 104px);overflow:auto}
}
/* tablets: the last Elementor section above the footer keeps room for Nox peeking over the footer (on 768–1024px screens
   the centred CTA buttons of the plans and tool pages reach the spot where his ears are) */
@media (min-width:768px) and (max-width:1024px){.nx-site .nx-main > .elementor > .elementor-top-section:last-child{padding-bottom:150px}}
/* room for Nox peeking over the footer (tablet + desktop) where a sidebar or text column can reach the footer's right edge.
   The left "bamboo" Nox rises 147px above the footer edge on desktop and 112px on tablets, so these are floors with air. */
@media (min-width:768px) and (max-width:1024px){.nx-site.blog .site-content,.nx-site.archive .site-content,.nx-site.search .site-content,.nx-site.single-post .site-content{padding-bottom:150px}}
@media (min-width:1025px){.nx-site.blog .site-content,.nx-site.archive .site-content,.nx-site.search .site-content,.nx-site.single-post .site-content{padding-bottom:196px}}
@media (min-width:768px) and (max-width:1024px){.nx-classic{padding-bottom:150px}}
@media (min-width:1025px){.nx-classic{padding-bottom:196px}}
/* phones: the same room for the two pandas (the bamboo one rises up to ~89px above the footer's top edge), so he never sits on a button,
   card or line of text: the last section above the footer and the theme's templates keep 88px at the bottom */
@media (max-width:767px){
  .nx-site .nx-main > .elementor > .elementor-top-section:last-child{padding-bottom:88px}
  .nx-site.blog .site-content,.nx-site.archive .site-content,.nx-site.search .site-content,.nx-site.single-post .site-content{padding-bottom:88px}
  .nx-site .nx-classic{padding-bottom:88px}
}
/* small buttons: 40px tall on tablets and touch screens (phones already get 42px from nxel.button's mobile padding) */
@media (min-width:768px) and (max-width:1024px), (pointer:coarse){.nx-site .elementor-button.elementor-size-sm{display:inline-flex;align-items:center;justify-content:center;min-height:40px}}
/* legal pages: one section level (h2, see nx_kit_normalize_classic) at a calmer size; article headings scale down on phones */
.nx-classic-body h2{font-size:24px;line-height:1.3}
@media (max-width:767px){
  .nx-classic-body h2{font-size:20px}
  .nx-site .entry-content h2{font-size:24px}.nx-site .entry-content h3{font-size:20px}.nx-site .entry-content h4,.nx-site .entry-content h5{font-size:18px}
}
/* header on the home page: while the Tools section is in view Elementor highlights "Tools"; don't keep "Home" highlighted too */
.nx-nav .elementor-nav-menu:has(> li > a.elementor-item-anchor.elementor-item-active) > li > a.elementor-item-active:not(.elementor-item-anchor):not(:hover):not(:focus-visible){color:var(--nx-ink) !important}
.nx-nav .elementor-nav-menu:has(> li > a.elementor-item-anchor.elementor-item-active) > li > a.elementor-item-active:not(.elementor-item-anchor):not(:hover):not(:focus-visible)::after{opacity:0 !important}

/* ===================== v5: plans, 404 / nothing found (the contact page has its own contact.css) ===================== */
/* plans hero: copy + toggle on the left, Nox with the gift boxes on the right (first and smaller on phones) */
.nx-cat-tools--start{justify-content:flex-start}
.nx-site img.nx-plans-panda{display:block;width:min(250px,90%);height:auto;margin:0 0 0 auto}
@media (min-width:768px) and (max-width:1024px){.nx-site img.nx-plans-panda{width:min(220px,90%);margin-right:6px}}
@media (max-width:767px){
  .nx-cat-tools.nx-cat-tools--start{justify-content:center;margin-top:0}
  .nx-site img.nx-panda.nx-plans-panda{width:128px !important;margin:0 auto !important}
}
/* ---- v4 panda poses: % tag + clock (plans); the bag is in home.css -----------------------------
   All of them are decorative (alt=""), absolutely placed so they never move copy, and they step down or disappear on
   narrow screens. The <img> is the only positioned thing; its HTML widget keeps zero height in the flow. */
.nx-incl-art-w,.nx-plans-tag-w,.nx-plans-bag-w{line-height:0;margin:0 !important;pointer-events:none}
/* the wrapping widget must not become the containing block, or the panda anchors to the widget instead of the card/band */
.nx-incl-art-w,.nx-plans-tag-w,.nx-plans-bag-w,
.nx-incl-art-w > .elementor-widget-container,.nx-plans-tag-w > .elementor-widget-container,
.nx-plans-bag-w > .elementor-widget-container{position:static !important}
/* plans: Nox hugging a % price tag under the four bundles (band bottom-left) */
.elementor-1906 .nx-plans-cards{position:relative}
/* left-aligned with the first plan card, and dropped below the card row into the band's bottom padding */
.nx-site img.nx-plans-tag{position:absolute;left:18px;bottom:-56px;width:120px;height:auto;pointer-events:none}
@media (max-width:1180px){.nx-site img.nx-panda.nx-plans-tag{display:none !important}}
/* plans: Nox pointing at a clock, peeking over the "Instant activation" card in "Every plan includes" */
.elementor-1906 .nx-incl-clock > .elementor-element-populated{position:relative}
.nx-site img.nx-incl-clock-art{position:absolute;right:22px;top:-36px;width:100px;height:auto;pointer-events:none}
@media (max-width:1024px){.nx-site img.nx-incl-clock-art{width:88px;top:-30px}}
/* phones: the cards stack, so the clock sits just inside its own card's top-right corner (beside the icon tile,
   above the title) instead of floating in the gap between two cards */
@media (max-width:767px){.nx-site img.nx-panda.nx-incl-clock-art{width:84px !important;top:-4px;right:12px;margin:0 !important}}

/* 404 and nothing-found results (body.nx-nf, noxtools-site-kit.php): one centred card — Nox, title, message, search, two ways back.
   Bottom padding leaves room for Nox peeking over the footer. */
.nx-site.nx-nf .site-content{padding:48px 24px 148px}
.nx-site.nx-nf .content-area{width:100%;float:none}
.nx-site.nx-nf .site-main{max-width:680px;margin:0 auto}
.nx-site.nx-nf .inside-article,.nx-site.nx-nf .no-results .inside-article{background:#fff;border:1px solid var(--nx-line-card);border-radius:24px;padding:36px 40px 40px;box-shadow:var(--nx-shadow-float);text-align:center}
.nx-nf-nox{display:block;width:200px;max-width:60%;height:auto;margin:0 auto 14px}
.nx-site.nx-nf .entry-header{padding:0;margin:0;text-align:center}
.nx-site.nx-nf .entry-title{font:700 36px/1.15 var(--nx-head);letter-spacing:-.022em;color:var(--nx-ink);margin:0 0 12px;text-wrap:balance;overflow-wrap:anywhere}
.nx-site.nx-nf .entry-content{max-width:500px;margin:0 auto;font:400 17px/1.65 var(--nx-body);color:var(--nx-slate)}
.nx-site.nx-nf .entry-content p{margin:0 0 22px;text-align:center !important;text-wrap:pretty}
.nx-site.nx-nf .search-form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.nx-site.nx-nf .search-form label{flex:1;min-width:0}
.nx-site.nx-nf .search-field{width:100%;height:50px;border:1px solid var(--nx-line-card);border-radius:12px;padding:0 16px;font:500 16px/1 var(--nx-body);color:var(--nx-ink);background:#fff}
.nx-site.nx-nf .search-field:focus{outline:none;border-color:var(--nx-indigo);box-shadow:var(--nx-ring)}
.nx-site.nx-nf .search-field::placeholder{color:var(--nx-muted);opacity:1}
.nx-site.nx-nf .search-submit{display:inline-flex;align-items:center;justify-content:center;height:50px;min-width:54px;padding:0 16px;border-radius:12px}
.nx-site.nx-nf .search-submit .gp-icon svg{width:18px;height:18px;fill:currentColor}
/* search with no results: "20+ more tools inside the dashboard" + Sign up (owner request), between the form and the ways back */
.nx-nf-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 18px;max-width:520px;margin:24px auto 0;padding:16px 16px 16px 20px;background:var(--nx-soft);border:1px solid var(--nx-indigo-l);border-radius:16px;text-align:left}
.nx-nf-more__text{flex:1 1 250px;margin:0;font:400 15px/1.55 var(--nx-body);color:var(--nx-text);text-wrap:pretty}
.nx-nf-more__text strong{display:block;margin-bottom:2px;font:700 16px/1.35 var(--nx-head);color:var(--nx-ink)}
.nx-nf-more .nx-nf-btn{flex:none}
.nx-nf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px;padding-top:26px;border-top:1px solid var(--nx-line)}
.nx-nf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;font:600 15px/1 var(--nx-body);text-decoration:none !important;transition:background-color .18s ease,border-color .18s ease}
.nx-nf-btn--primary{background:var(--nx-indigo);color:#fff !important}
.nx-nf-btn--primary:hover{background:var(--nx-indigo-d)}
.nx-nf-btn--ghost{background:#fff;color:var(--nx-ink) !important;border:1px solid var(--nx-line-2)}
.nx-nf-btn--ghost:hover{background:var(--nx-light);border-color:var(--nx-line-card)}
@media (max-width:767px){
  .nx-site.nx-nf .site-content{padding:28px 16px 88px}
  .nx-site.nx-nf .inside-article,.nx-site.nx-nf .no-results .inside-article{padding:26px 20px 28px;border-radius:20px}
  .nx-nf-nox{width:150px}
  .nx-site.nx-nf .entry-title{font-size:28px}
  .nx-site.nx-nf .entry-content{font-size:16px}
  .nx-nf-actions{flex-direction:column;align-items:stretch}
  .nx-nf-more{flex-direction:column;align-items:stretch;padding:16px;text-align:center}
  .nx-nf-more__text{flex-basis:auto;text-align:center}
}

/* ===================== affiliate program page (gen_affiliate.py, slug affiliate-program) ===================== */
/* One light "ladder" world, taken from the hero the owner picked (demo/affiliate-heroes/hero-4.html): white and #F8FAFC
   bands, the rate steps always indigo -> violet -> amber, and the same border / radius / shadow on every card as on the
   hero's chart strip. Every selector starts with .nx-aff (a class on each of the page's sections), so nothing here
   reaches another page. The chart is pure CSS — no JavaScript anywhere on this page. */
.nx-aff{
  --a1:#4F46E5;--a1b:#6366F1;--a1d:#4338CA;--a1l:#EEF2FF;   /* step 1 Starter */
  --a2:#5B4BE6;--a2b:#7061EC;--a2d:#4338CA;--a2l:#EDECFE;   /* step 2 Bronze  */
  --a3:#7C3AED;--a3b:#8B5CF6;--a3d:#6D28D9;--a3l:#F3E8FF;   /* step 3 Silver  */
  --a4:#F59E0B;--a4b:#FBBF24;--a4d:#92400E;--a4l:#FEF3C7;   /* step 4 Gold    */
  --a5:#F0A92E;--a5d:#9A6206;--a5t:#8A5B06;                 /* the dashed 50% creator step beyond Gold */
  --a-card:0 1px 3px rgba(15,23,42,.05),0 12px 30px -20px rgba(11,17,32,.34);
}
.nx-aff .nx-aff-ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-aff .nx-aff-ico--fill{fill:currentColor;stroke-width:1.1}

/* ---- hero: the tier ladder (light) ---- */
.nx-aff-h4{position:relative;overflow:hidden;
  background:radial-gradient(900px 480px at 88% 8%,rgba(245,158,11,.16),transparent 62%),
             radial-gradient(760px 520px at 6% 96%,rgba(79,70,229,.15),transparent 66%),
             linear-gradient(170deg,#FFFFFF 0%,#F5F7FA 52%,#EEF1F8 100%)}
.nx-aff-h4::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* owner 6 Oct: grid as visible as the home hero (same colour; .33 here because this band is whiter and fades sooner) */
  background-image:linear-gradient(rgba(190,199,212,.33) 1px,transparent 1px),linear-gradient(90deg,rgba(190,199,212,.33) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1100px 640px at 60% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(1100px 640px at 60% 30%,#000 0%,transparent 78%)}
.nx-aff-h4>.elementor-container{position:relative;z-index:2}
/* copy left, ladder right, both centred on each other (the hero section is 1140 wide, like every band below it,
   so the inner row Elementor caps at the kit's 1140 content width lines up with the strip under them) */
.nx-aff-h4__grid>.elementor-container{align-items:center}
/* badge + eyebrow */
.nx-aff-h4__badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 9px;border-radius:999px;background:#fff;border:1px solid #DCE2EC;box-shadow:0 2px 10px rgba(11,17,32,.05);font:600 13.5px/1.25 var(--nx-body);color:var(--nx-navy)}
.nx-aff-h4__dot{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,#FBBF24,#F59E0B);color:#2A1904}
.nx-aff-h4__dot .nx-aff-ico{width:13px;height:13px;stroke-width:3.2}
.nx-aff-h4__eyebrow{display:block;margin:22px 0 0;font:700 12.5px/1.3 var(--nx-body);letter-spacing:.16em;text-transform:uppercase;color:#4338CA}
/* headline: "one step up" runs the indigo -> violet -> amber ramp of the ladder */
.nx-aff-h4__up{background:linear-gradient(100deg,#4F46E5 0%,#7C3AED 55%,#CC680A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nx-aff-h4__copy .elementor-widget-text-editor b,.nx-aff-h4__copy .elementor-widget-text-editor strong{color:var(--nx-ink);font-weight:600}
.nx-aff-h4__go .elementor-button{background-image:linear-gradient(135deg,#FBBF24,#F59E0B);box-shadow:0 10px 24px -6px rgba(245,158,11,.5),inset 0 1px 0 rgba(255,255,255,.45)}
.nx-aff-h4__go .elementor-button:hover{background-image:linear-gradient(135deg,#FCD34D,#FBBF24)}
.nx-aff-h4__how .elementor-button{box-shadow:0 8px 20px -6px rgba(11,17,32,.4)}
/* the ladder itself: five columns, four solid bars and the dashed creator step */
.nx-aff-lad{position:relative}
.nx-aff-lad__rows{position:relative;display:flex;align-items:flex-end;gap:10px;padding-top:112px}
.nx-aff-lad__head{position:absolute;left:0;top:2px;z-index:2;max-width:46%}
.nx-aff-lad__t{display:block;font:700 13px/1.3 var(--nx-head);letter-spacing:.14em;text-transform:uppercase;color:var(--nx-navy)}
.nx-aff-lad__s{display:block;margin-top:4px;font:400 12.5px/1.4 var(--nx-body);color:var(--nx-muted)}
.nx-aff-lad__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.nx-aff-lad__bar{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:14px 8px 12px;border-radius:14px 14px 4px 4px;box-shadow:0 14px 28px -10px rgba(11,17,32,.4)}
.nx-aff-lad__bar::after{content:"";position:absolute;left:8px;right:8px;top:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.nx-aff-lad__pct{font:700 30px/1 var(--nx-head);letter-spacing:-.02em}
.nx-aff-lad__tier{font:700 11px/1.2 var(--nx-body);letter-spacing:.12em;text-transform:uppercase}
.nx-aff-lad__range{margin:10px 0 0;font:400 12px/1.35 var(--nx-body);color:var(--nx-slate);text-align:center}
.nx-aff-lad__range b{display:block;font-weight:600;font-size:12.5px;color:var(--nx-navy)}
.nx-aff-lad__col--s1 .nx-aff-lad__bar{height:128px;background:linear-gradient(180deg,var(--a1b),var(--a1));color:#fff}
.nx-aff-lad__col--s2 .nx-aff-lad__bar{height:174px;background:linear-gradient(180deg,var(--a2b),var(--a2));color:#fff}
.nx-aff-lad__col--s3 .nx-aff-lad__bar{height:220px;background:linear-gradient(180deg,var(--a3b),var(--a3));color:#fff}
.nx-aff-lad__col--s4 .nx-aff-lad__bar{height:270px;background:linear-gradient(180deg,var(--a4b),var(--a4));color:#2A1904;box-shadow:0 16px 34px -12px rgba(245,158,11,.9)}
.nx-aff-lad__col--s4 .nx-aff-lad__bar::after{background:rgba(255,255,255,.6)}
.nx-aff-lad__col--s1 .nx-aff-lad__tier,.nx-aff-lad__col--s2 .nx-aff-lad__tier,.nx-aff-lad__col--s3 .nx-aff-lad__tier{color:#EEF2FF}
.nx-aff-lad__col--s4 .nx-aff-lad__tier{color:#5A3B05}
.nx-aff-lad__col--ghost .nx-aff-lad__bar{height:318px;background:rgba(245,158,11,.07);border:2px dashed var(--a5);box-shadow:none}
.nx-aff-lad__col--ghost .nx-aff-lad__bar::after{display:none}
.nx-aff-lad__col--ghost .nx-aff-lad__pct{color:var(--a5d)}
.nx-aff-lad__col--ghost .nx-aff-lad__tier{color:var(--a5t)}
.nx-aff-lad__col--ghost .nx-aff-lad__range{color:var(--nx-muted)}
.nx-aff-lad__ground{height:3px;border-radius:3px;opacity:.55;background:linear-gradient(90deg,rgba(79,70,229,.5),rgba(124,58,237,.5) 55%,rgba(245,158,11,.6))}
/* Nox stands on top of the Gold bar — his own column, never over the copy */
.nx-site img.nx-aff-lad__nox{position:absolute;z-index:3;pointer-events:none;left:50%;bottom:100%;width:150px;max-width:none;height:auto;margin-bottom:-8px;transform:translateX(-50%);filter:drop-shadow(0 14px 20px rgba(11,17,32,.22))}
/* the strip under both columns: the creator rule and the payout methods */
.nx-aff-h4__band{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;padding:16px 22px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid var(--nx-line-card);box-shadow:0 8px 24px -10px rgba(11,17,32,.22)}
.nx-aff-h4__bi{display:flex;align-items:center;gap:11px;margin:0;font:400 14px/1.5 var(--nx-body);color:var(--nx-slate);text-wrap:pretty}
.nx-aff-h4__bi--pay{padding-left:22px;border-left:1px solid #E6EAF2}
.nx-aff-h4__band b{color:var(--nx-navy);font-weight:700}
.nx-aff-h4__ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,#FBBF24,#F59E0B);color:#2A1904}
.nx-aff-h4__ico--b{background:linear-gradient(140deg,#6366F1,#4F46E5);color:#fff}
.nx-aff-h4__ico .nx-aff-ico{width:15px;height:15px}

/* ---- the trust row that closes the CTA band ---- */
.nx-aff .nx-aff-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.nx-aff .nx-aff-trust li{display:inline-flex;align-items:center;gap:8px;margin:0;font:500 14px/1.4 var(--nx-body);color:#EEF2FF}
.nx-aff .nx-aff-trust .nx-aff-ico{width:16px;height:16px;color:#FBBF24;stroke-width:2.6}
.nx-aff .nx-aff-trust--center{justify-content:center}
/* the footer's left "bamboo" Nox rises into this last band on wide screens, so keep the centred benefit row clear of him */
@media (min-width:1025px){.nx-aff-cta .nx-aff-trust--center{max-width:620px;margin-left:auto;margin-right:auto}
.nx-site .nx-main > .elementor > .elementor-top-section.nx-aff-cta{padding-bottom:120px}}
@media (min-width:768px) and (max-width:1024px){.nx-aff-cta .nx-aff-trust--center{max-width:560px;margin-left:auto;margin-right:auto}}

/* ---- tiers: the same four steps as the hero ladder, as cards ---- */
.nx-aff-tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.nx-aff-tier{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;padding:28px 20px 24px;background:#fff;border:1px solid var(--nx-line-card);border-radius:var(--nx-r-lg);box-shadow:var(--a-card);text-align:center;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.nx-aff-tier::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--cb),var(--c))}
.nx-aff-tier:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:var(--nx-shadow-hover)}
/* the cards space the hero's ramp out a little further, so four steps read as four (--c accent, --cb the light end
   of the top rail, --cd the text colour — every --cd is at least 4.9:1 on its own --cl tint) */
.nx-aff-tier--s1{--c:#4F46E5;--cb:#818CF8;--cd:#4338CA;--cl:#EEF2FF}
.nx-aff-tier--s2{--c:#5B2FD4;--cb:#9E86F5;--cd:#5B2FD4;--cl:#EDE9FE}
.nx-aff-tier--s3{--c:#7C3AED;--cb:#C4B5FD;--cd:#7C3AED;--cl:#F3E8FF}
.nx-aff-tier--s4{--c:#F59E0B;--cb:#FCD34D;--cd:#92400E;--cl:#FEF3C7}
/* four little bars that fill up to this tier's step — the ladder, one card at a time */
.nx-aff-tier__glyph{display:flex;align-items:flex-end;gap:4px;height:26px}
.nx-aff-tier__glyph i{display:block;width:7px;border-radius:2px;background:#DEE4EE}
.nx-aff-tier__glyph i:nth-child(1){height:11px}
.nx-aff-tier__glyph i:nth-child(2){height:16px}
.nx-aff-tier__glyph i:nth-child(3){height:21px}
.nx-aff-tier__glyph i:nth-child(4){height:26px}
.nx-aff-tier--s1 .nx-aff-tier__glyph i:nth-child(-n+1),
.nx-aff-tier--s2 .nx-aff-tier__glyph i:nth-child(-n+2),
.nx-aff-tier--s3 .nx-aff-tier__glyph i:nth-child(-n+3),
.nx-aff-tier--s4 .nx-aff-tier__glyph i:nth-child(-n+4){background:var(--c)}
.nx-aff-tier__step{margin-top:14px;font:700 11.5px/1 var(--nx-body);letter-spacing:.12em;text-transform:uppercase;color:var(--cd)}
.nx-site .nx-aff-tier__name{margin:10px 0 6px;font:700 19px/1.3 var(--nx-head);color:var(--nx-ink);letter-spacing:0}
.nx-aff-tier__rate{margin:0 0 16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.nx-aff-tier__pct{font:700 46px/1 var(--nx-head);letter-spacing:-.03em;color:var(--cd)}
.nx-aff-tier__unit{font:500 14px/1.3 var(--nx-body);color:var(--nx-slate)}
.nx-aff-tier__sales{display:inline-block;margin:0;margin-top:auto;padding:7px 12px;border-radius:999px;background:var(--cl);font:600 13px/1.3 var(--nx-body);color:var(--cd)}
/* the owner's example, with Nox taking off beside it */
.nx-aff-tiers-foot{display:flex;align-items:center;justify-content:center;gap:22px;max-width:920px;margin:34px auto 0}
.nx-site img.nx-aff-rocket{display:block;flex:0 0 auto;width:150px;height:auto}
.nx-aff-example{display:flex;align-items:flex-start;gap:14px;flex:1 1 auto;min-width:0;padding:18px 20px;background:#F6F7FF;border:1px solid #D5DAF6;border-left:4px solid var(--a1);border-radius:var(--nx-r-md)}
.nx-aff-example__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--nx-indigo-d)}
.nx-aff-example p{margin:0;font:400 16px/1.6 var(--nx-body);color:var(--nx-text);text-wrap:pretty}
.nx-aff-example strong{color:var(--nx-ink);font-weight:600}

/* ---- the 50% creator step: the hero's dashed column, told in full ---- */
.nx-aff-cr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:30px;padding:40px 44px;overflow:hidden;border-radius:24px;border:2px dashed var(--a5);
  background:linear-gradient(180deg,rgba(245,158,11,.10),rgba(245,158,11,.045));box-shadow:0 18px 44px -30px rgba(11,17,32,.5)}
.nx-aff-cr__kick{display:inline-block;padding:7px 13px;border-radius:999px;background:#F59E0B;color:#241504;font:700 12px/1 var(--nx-body);letter-spacing:.06em;text-transform:uppercase}
.nx-aff-cr__ladder{display:flex;align-items:center;gap:10px;margin:18px 0 0}
.nx-aff-cr__st{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:78px;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid #E6D6B4}
.nx-aff-cr__st b{font:700 21px/1 var(--nx-head);letter-spacing:-.02em}
.nx-aff-cr__st i{font-style:normal;font:700 10.5px/1 var(--nx-body);letter-spacing:.12em;text-transform:uppercase}
.nx-aff-cr__st--gold b{color:var(--a4d)}
.nx-aff-cr__st--gold i{color:var(--a5d)}
.nx-aff-cr__st--cre{background:rgba(255,255,255,.55);border:2px dashed var(--a5)}
.nx-aff-cr__st--cre b{color:var(--a5d)}
.nx-aff-cr__st--cre i{color:var(--a5t)}
.nx-aff-cr__arrow{display:inline-flex;color:#B4740A}
.nx-aff-cr__arrow .nx-aff-ico{width:22px;height:22px;stroke-width:2.4}
.nx-site .nx-aff-cr__title{margin:18px 0 12px;font:700 36px/1.15 var(--nx-head);letter-spacing:-.022em;color:var(--nx-ink);text-wrap:balance}
.nx-aff-cr__text{margin:0;max-width:620px;font:400 17px/1.65 var(--nx-body);color:var(--nx-text);text-wrap:pretty}
.nx-aff-cr__text strong{color:var(--nx-ink);font-weight:700}
.nx-aff-cr__facts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.nx-aff-cr__facts li{display:flex;align-items:flex-start;gap:10px;margin:0;font:400 15px/1.5 var(--nx-body);color:var(--nx-text)}
.nx-aff-cr__facts strong{color:var(--nx-ink);font-weight:600}
.nx-aff-cr__facts .nx-aff-ico{margin-top:2px;color:#B4740A;stroke-width:2.6}
.nx-aff-cr__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.nx-aff-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:12px;font:600 16px/1 var(--nx-body);text-decoration:none !important;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.nx-aff-btn--amber{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#241504 !important;box-shadow:0 10px 22px -10px rgba(245,158,11,.85)}
.nx-aff-btn--amber:hover{background:linear-gradient(135deg,#FCD34D,#FBBF24)}
.nx-aff-btn--ghost{background:#fff;color:var(--nx-ink) !important;border:1px solid var(--nx-line-2);box-shadow:var(--nx-shadow-rest)}
.nx-aff-btn--ghost:hover{background:#F8FAFC;border-color:#94A3B8}
.nx-aff-cr__note{margin:14px 0 0;font:500 13px/1.5 var(--nx-body);color:var(--nx-muted)}
.nx-aff-cr__art{align-self:end;margin-bottom:-40px;text-align:center}
.nx-site img.nx-aff-cr__nox{display:block;width:250px;max-width:100%;height:auto;margin:0 auto}

/* ---- lifetime: Nox with the piggy bank over the heading; the three cards keep equal heights ---- */
.nx-aff-piggy-w{text-align:center;margin-bottom:4px !important}
.nx-site img.nx-aff-piggy{display:inline-block;width:140px;height:auto}
.nx-aff-life>.elementor-widget-wrap{height:100%}

/* ---- how it works: three steps that climb the same ramp ---- */
.nx-aff-steps{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nx-aff-step{position:relative;z-index:1;margin:0;padding:34px 24px 28px;border:1px solid var(--nx-line-card);border-radius:var(--nx-r-lg);box-shadow:var(--a-card);text-align:center;
  /* the step's colour rail is a background, so the card's own radius clips it (the numbered circle sits above the
     card, so overflow:hidden is not an option) */
  background:linear-gradient(90deg,var(--cb),var(--c)) top left/100% 5px no-repeat,#fff;background-origin:border-box}
.nx-aff-step--1{--c:var(--a1);--cb:var(--a1b);--cd:var(--a1d);--cl:var(--a1l);--cn:#fff}
.nx-aff-step--2{--c:var(--a3);--cb:var(--a3b);--cd:var(--a3d);--cl:var(--a3l);--cn:#fff}
.nx-aff-step--3{--c:var(--a4);--cb:var(--a4b);--cd:var(--a4d);--cl:var(--a4l);--cn:#241504}
.nx-aff-step__num{position:absolute;top:-17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--cb),var(--c));color:var(--cn);font:700 15px/1 var(--nx-head);box-shadow:0 8px 18px -6px rgba(11,17,32,.45)}
.nx-aff-step__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:6px;border-radius:14px;background:var(--cl);color:var(--cd)}
.nx-aff-step__icon .nx-aff-ico{width:24px;height:24px;stroke-width:1.9}
.nx-site .nx-aff-step__title{margin:16px 0 8px;font:700 19px/1.3 var(--nx-head);color:var(--nx-ink);letter-spacing:-.01em}
.nx-aff-step__text{margin:0 auto;max-width:280px;font:400 15px/1.65 var(--nx-body);color:var(--nx-slate);text-wrap:pretty}
/* one dashed rail behind the cards, so only the two gaps between the numbered steps show it */
@media (min-width:1025px){.nx-aff-steps::before{content:"";position:absolute;z-index:0;top:0;left:17%;right:17%;border-top:2px dashed #C7CFF3}}

/* ---- payouts + the one rule: one grid of two matched boxes, so the pair always ends level ---- */
.nx-aff-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.nx-aff-box{display:flex;flex-direction:column;min-width:0;padding:30px 28px;background:#fff;border:1px solid var(--nx-line-card);border-radius:var(--nx-r-lg);box-shadow:var(--a-card)}
.nx-aff-box__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.nx-aff-box__copy{flex:1 1 auto;min-width:0}
.nx-site .nx-aff-box__title{margin:0;font:700 27px/1.2 var(--nx-head);letter-spacing:-.018em;color:var(--nx-ink);text-wrap:balance}
.nx-aff-box__copy .nx-aff-rule-kicker{margin-bottom:12px}
.nx-aff-box__intro{margin:8px 0 0;font:400 16px/1.6 var(--nx-body);color:var(--nx-slate);text-wrap:pretty}
.nx-site img.nx-aff-box__nox{display:block;flex:0 0 auto;width:118px;height:auto;margin-top:-6px}
/* the four payout methods: an even 2 x 2 of tiles, icon + name + one-line hint */
.nx-aff-pays{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.nx-aff-pay{display:flex;flex-direction:column;min-width:0;margin:0;padding:16px 16px 18px;background:#F8FAFC;border:1px solid var(--nx-line);border-radius:var(--nx-r-md)}
.nx-aff-pay__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:flex-start;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--nx-indigo-l);color:var(--nx-indigo-d);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.nx-aff-pay__icon .nx-aff-ico{width:22px;height:22px;stroke-width:1.9}
.nx-aff-pay__txt{display:block;min-width:0}
.nx-aff-pay__name{display:block;margin-top:12px;font:700 16px/1.3 var(--nx-head);letter-spacing:-.01em;color:var(--nx-ink)}
.nx-aff-pay__hint{display:block;margin-top:4px;font:400 13.5px/1.5 var(--nx-body);color:var(--nx-muted);text-wrap:pretty}
/* the note that closes each box: the $10 minimum on the left, the sharing reminder on the right */
.nx-aff-note{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:14px 16px;border-radius:var(--nx-r-md);font:400 15px/1.55 var(--nx-body);color:var(--nx-text);text-align:left;text-wrap:pretty}
.nx-aff-note strong{color:var(--nx-ink);font-weight:700}
.nx-aff-note__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:#fff}
.nx-aff-note--key{background:var(--nx-soft);border:1px solid var(--nx-indigo-l);border-left:4px solid var(--nx-indigo)}
.nx-aff-note--key .nx-aff-note__icon{color:var(--nx-indigo-d)}
.nx-aff-note--soft{margin-top:16px;padding:12px 14px;background:#F8FAFC;border:1px solid var(--nx-line);font-size:14px;color:var(--nx-slate)}
.nx-aff-note--soft .nx-aff-note__icon{flex-basis:32px;width:32px;height:32px;border:1px solid var(--nx-line);color:var(--nx-slate)}
.nx-aff-note--soft .nx-aff-ico{width:16px;height:16px}
/* the amber notice takes whatever height is left over and Nox fills it, so the rule box never ends on an empty gap */
.nx-aff-rule{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:14px;padding:20px;background:#FFFBEB;border:1px solid #FCD34D;border-left:4px solid #F59E0B;border-radius:var(--nx-r-md)}
.nx-aff-rule__row{display:flex;align-items:flex-start;gap:14px;min-width:0}
.nx-site img.nx-aff-rule__nox{display:block;flex:0 0 auto;width:150px;height:auto;margin:auto auto 0}
.nx-aff-rule__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:#FEF3C7;color:#B45309}
.nx-aff-rule__icon .nx-aff-ico{width:22px;height:22px}
.nx-aff-rule__main{margin:0;min-width:0;font:600 17px/1.5 var(--nx-body);color:var(--nx-ink);text-wrap:pretty}
.nx-aff-rule__warn{display:block;margin-top:7px;font:700 15px/1.5 var(--nx-body);color:#92400E}
.nx-aff-rule-kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:#FEF3C7;color:#92400E;font:700 12px/1 var(--nx-body);letter-spacing:.04em;text-transform:uppercase}

/* ---- FAQ: Nox thinks along in the left column, under the contact button (decorative, never over the copy) ---- */
.nx-aff-faq .nx-aff-faq-panda{margin-top:30px}
.nx-site img.nx-aff-faq-nox{display:block;width:240px;max-width:100%;height:auto}

/* ---- 1260 and below: the ladder loses a little air while the hero is still two columns ---- */
@media (max-width:1259px){
.nx-aff-lad__rows{gap:8px}
.nx-aff-lad__pct{font-size:26px}
.nx-aff-lad__bar{padding:12px 6px 11px}
.nx-aff-lad__head{max-width:52%}
}
/* ---- 1024 and below: the hero stacks, so the ladder gets the full width back ---- */
@media (max-width:1024px){
.nx-aff-lad__rows{padding-top:96px;gap:14px}
.nx-aff-lad__pct{font-size:28px}
.nx-aff-lad__bar{padding:14px 8px 12px}
.nx-aff-lad__head{top:0;max-width:46%}
.nx-aff-lad__col--s1 .nx-aff-lad__bar{height:104px}
.nx-aff-lad__col--s2 .nx-aff-lad__bar{height:142px}
.nx-aff-lad__col--s3 .nx-aff-lad__bar{height:182px}
.nx-aff-lad__col--s4 .nx-aff-lad__bar{height:224px}
.nx-aff-lad__col--ghost .nx-aff-lad__bar{height:266px}
.nx-site img.nx-aff-lad__nox{width:136px}
.nx-aff-tiers{gap:12px}
.nx-aff-tier{padding:26px 12px 20px}
.nx-aff-tier__pct{font-size:40px}
.nx-site .nx-aff-tier__name{font-size:18px}
.nx-site img.nx-aff-rocket{width:120px}
.nx-aff-tiers-foot{gap:16px}
.nx-aff-cr{grid-template-columns:minmax(0,1fr) 210px;padding:34px 30px;gap:20px}
.nx-aff-cr__art{margin-bottom:-34px}
.nx-site img.nx-aff-cr__nox{width:200px}
.nx-site .nx-aff-cr__title{font-size:31px}
.nx-aff-steps{gap:16px}
.nx-aff-step{padding:32px 18px 24px}
.nx-aff-duo{gap:18px}
.nx-aff-box{padding:26px 22px}
.nx-aff-box__head{gap:12px;margin-bottom:20px}
.nx-site .nx-aff-box__title{font-size:25px}
.nx-aff-box__intro{font-size:15px}
.nx-site img.nx-aff-box__nox{width:104px}
.nx-aff-pays{gap:12px}
.nx-aff-pay{padding:14px 13px 16px}
.nx-aff-pay__icon{width:38px;height:38px;border-radius:11px}
.nx-aff-pay__icon .nx-aff-ico{width:20px;height:20px}
.nx-aff-pay__name{margin-top:10px;font-size:15px}
.nx-aff-pay__hint{font-size:13px}
.nx-aff-rule{padding:18px;gap:12px}
.nx-aff-rule__row{gap:12px}
.nx-site img.nx-aff-rule__nox{width:132px}
.nx-aff-rule__main{font-size:16px}
.nx-aff-rule__warn{font-size:14.5px}
.nx-aff-note{gap:10px;padding:13px 14px;font-size:14px}
.nx-site img.nx-aff-faq-nox{width:180px}
}
@media (max-width:879px){.nx-aff-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.nx-aff-duo{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto}}
/* ---- phones ---- */
@media (max-width:767px){
.nx-aff-h4__badge{font-size:12.5px;padding:7px 14px 7px 8px}
.nx-aff-h4__eyebrow{margin-top:18px;font-size:12px}
.nx-aff-h4__how .elementor-button{background-color:#fff !important;color:var(--nx-navy) !important;border:1.5px solid var(--nx-line-2);box-shadow:0 2px 8px rgba(11,17,32,.06)}
.nx-aff-h4__how .elementor-button:hover{background-color:#F1F5F9 !important}
.nx-aff-lad__rows{padding-top:104px;gap:6px}
.nx-aff-lad__head{max-width:58%}
.nx-aff-lad__t{font-size:12px;letter-spacing:.1em}
.nx-aff-lad__s{font-size:13px}
.nx-aff-lad__bar{padding:10px 3px 9px;border-radius:10px 10px 3px 3px}
.nx-aff-lad__pct{font-size:19px}
.nx-aff-lad__tier{font-size:11px;letter-spacing:.02em}
.nx-aff-lad__range{margin-top:8px;font-size:12px}
.nx-aff-lad__range b{font-size:12.5px}
.nx-aff-lad__col--s1 .nx-aff-lad__bar{height:84px}
.nx-aff-lad__col--s2 .nx-aff-lad__bar{height:114px}
.nx-aff-lad__col--s3 .nx-aff-lad__bar{height:146px}
.nx-aff-lad__col--s4 .nx-aff-lad__bar{height:180px}
.nx-aff-lad__col--ghost .nx-aff-lad__bar{height:212px}
.nx-site img.nx-panda.nx-aff-lad__nox,.nx-site img.nx-aff-lad__nox{width:96px !important;margin-bottom:-5px}
.nx-aff-h4__band{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
.nx-aff-h4__bi{align-items:flex-start;font-size:13.5px}
.nx-aff-h4__bi--pay{padding-left:0;padding-top:14px;border-left:0;border-top:1px solid #E6EAF2}
.nx-aff .nx-aff-trust{justify-content:center;gap:8px 16px}
.nx-aff .nx-aff-trust li{font-size:13px}
.nx-aff-tiers{gap:12px}
.nx-aff-tier{padding:24px 12px 18px}
.nx-aff-tier__glyph{height:22px}
.nx-aff-tier__glyph i{width:6px}
.nx-aff-tier__glyph i:nth-child(1){height:9px}
.nx-aff-tier__glyph i:nth-child(2){height:13px}
.nx-aff-tier__glyph i:nth-child(3){height:18px}
.nx-aff-tier__glyph i:nth-child(4){height:22px}
.nx-aff-tier__step{margin-top:12px;font-size:11px}
.nx-site .nx-aff-tier__name{font-size:17px;margin-top:8px}
.nx-aff-tier__pct{font-size:38px}
.nx-aff-tier__rate{margin-bottom:12px}
.nx-aff-tier__sales{padding:6px 10px;font-size:12px}
.nx-aff-tiers-foot{margin-top:24px}
.nx-site img.nx-aff-rocket{display:none}
.nx-aff-example{padding:14px 16px;gap:12px}
.nx-aff-example p{font-size:15px}
.nx-aff-cr{grid-template-columns:minmax(0,1fr);padding:28px 20px 0;gap:8px;border-radius:20px;text-align:center}
.nx-aff-cr__ladder{justify-content:center;margin-top:16px}
.nx-site .nx-aff-cr__title{font-size:26px;margin-top:16px}
.nx-aff-cr__text{font-size:16px;margin:0 auto}
.nx-aff-cr__facts{text-align:left;max-width:340px;margin-left:auto;margin-right:auto}
.nx-aff-cr__actions{flex-direction:column;align-items:stretch}
.nx-aff-cr__art{margin:10px 0 0}
.nx-site img.nx-aff-cr__nox{width:150px}
.nx-aff-steps{grid-template-columns:minmax(0,1fr);gap:30px;max-width:440px}
.nx-aff-step__text{max-width:none}
.nx-site img.nx-aff-piggy{width:96px}
/* both boxes: Nox sits above the heading, centred, so he never takes width from the copy */
.nx-aff-duo{gap:16px}
.nx-aff-box{padding:24px 18px}
.nx-aff-box__head{flex-direction:column-reverse;align-items:center;text-align:center;gap:6px;margin-bottom:18px}
.nx-aff-box__copy{width:100%}
.nx-site .nx-aff-box__title{font-size:24px}
.nx-aff-box__intro{margin-top:6px;font-size:15px}
.nx-site img.nx-panda.nx-aff-box__nox,.nx-site img.nx-aff-box__nox{display:none}
.nx-aff-rule{padding:16px;gap:12px}
.nx-site img.nx-panda.nx-aff-rule__nox,.nx-site img.nx-aff-rule__nox{width:110px}
.nx-aff-rule__main{font-size:15.5px}
.nx-aff-note{margin-top:16px;padding:12px 13px;font-size:14px}
/* stacked cards keep a gap between them */
.nx-aff-life-band .elementor-column.nx-aff-life:not(:last-child){margin-bottom:14px}
}
/* narrow phones: one column of payout tiles, icon beside the name so the hint keeps the full width */
@media (max-width:479px){
.nx-aff-pays{grid-template-columns:minmax(0,1fr);gap:10px}
.nx-aff-pay{flex-direction:row;align-items:center;gap:13px;padding:13px 14px}
.nx-aff-pay__icon{align-self:center}
.nx-aff-pay__txt{flex:1 1 auto}
.nx-aff-pay__name{margin-top:0;font-size:15.5px}
.nx-aff-pay__hint{margin-top:2px;font-size:13px}
}
@media (max-width:400px){
.nx-aff-lad__rows{gap:4px}
.nx-aff-lad__bar{padding:9px 2px 8px}
.nx-aff-lad__tier{font-size:10.5px;letter-spacing:0}
.nx-aff-lad__range{font-size:11px}
.nx-aff-lad__range b{font-size:11.5px}
.nx-aff-tier__pct{font-size:34px}
.nx-aff-tier{padding-left:8px;padding-right:8px}
.nx-aff-tier__sales{white-space:nowrap;padding:5px 8px;font-size:11px}
.nx-aff-cr__st{min-width:70px;padding:8px 10px}
/* narrow phones: the podium scales with the bars (21.5vw = 84px at 390, 77px at 360) so its base keeps the
   same "just touches" relation to the dashed CREATOR box as at 1440 instead of covering its border */
.nx-site img.nx-panda.nx-aff-lad__nox,.nx-site img.nx-aff-lad__nox{width:21.5vw !important}
}
@media (prefers-reduced-motion:reduce){.nx-aff-tier{transition:none}.nx-aff-tier:hover{transform:none}}
/* the narrowest phones: CREATOR still fits inside its dashed bar */
@media (max-width:340px){.nx-aff-lad__tier{font-size:10px}}

/* Elementor 4.x (Oct 2026 update) lays icon boxes out with a flex gap; 3.8 also had ~10.5px of line space under the icon.
   Keep the original icon-to-title spacing so Plans and Affiliate look exactly as they did before the update. */
.nx-site .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper{row-gap:calc(var(--icon-box-icon-margin,15px) + 10.5px)}