/* NoxTools tool pages (39 pages from gen_tools.py) — "Panda Guide" (tool demo 8, owner decision 28 Sep): Nox walks the
   visitor through the page, a different pose greeting each major section with a speech bubble.
   Loaded after site.css, on the tool pages only (noxtools-site-kit.php nx_kit_is_tool_page: the page IDs build-all.sh stores
   in the option nx_tool_page_ids). Everything is scoped to .nx-pg (each band of the template) or to classes only the
   tool-page template uses (nx-tool-*, nx-lt, nx-shot-*, nx-sbar …): without that option the file still loads on every page.
   Colours and radii come from the --nx-* tokens in site.css; the demo's own values are kept where they differ on purpose. */

.nx-pg{--pg-navy:#0B1120;--pg-navy2:#111827;--pg-green:#16A34A;--pg-line:#BEC7D4;--pg-line2:#E3E8EF;--pg-muted:#5B6B80;
  --pg-shadow:0 1px 2px rgba(11,17,32,.05),0 10px 30px -12px rgba(11,17,32,.14);
  font:400 16px/1.6 var(--nx-body);color:var(--nx-text);position:relative}
.nx-pg-sec,.nx-pg-sec>.elementor-container,.nx-pg-sec .elementor-widget-wrap{overflow:visible}
.nx-pg-w{margin:0 !important}
.nx-pg-band{padding:72px 0;background:#fff}
.nx-pg-alt{background:var(--nx-light)}
.nx-pg-wrap{box-sizing:border-box;width:100%;max-width:1248px;margin:0 auto;padding:0 24px}

/* ---- element resets inside the template (GeneratePress / Elementor kit styles stay out) ---- */
.nx-site .nx-pg :is(h1,h2,h3,p,ul,ol,li,figure){margin:0;padding:0}
.nx-site .nx-pg ul{list-style:none}
.nx-site .nx-pg :is(h1,h2,h3){font-family:var(--nx-head);color:var(--pg-navy);letter-spacing:-.01em;line-height:1.15;text-transform:none}
.nx-site .nx-pg a{text-decoration:none}
.nx-site .nx-pg img{max-width:100%;height:auto}
.nx-pg svg{flex:none}
.nx-pg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nx-pg-nw{white-space:nowrap}

/* ---- type ---- */
.nx-site .nx-pg .nx-pg-eyebrow{display:block;margin:0 0 10px;font:700 12px/1.3 var(--nx-body);letter-spacing:.12em;text-transform:uppercase;color:var(--nx-indigo-d)}
.nx-site .nx-pg .nx-pg-h2{font-size:34px;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.nx-site .nx-pg .nx-pg-lede{margin-top:8px;max-width:560px;font-size:17px;color:var(--pg-muted);text-wrap:pretty}

/* ---- buttons ---- */
.nx-site .nx-pg .nx-pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:48px;padding:12px 24px;
  border-radius:12px;border:1.5px solid transparent;font:600 15px/1.2 var(--nx-body);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.nx-pg-btn svg{width:18px;height:18px}
.nx-site .nx-pg .nx-pg-btn--primary{background:var(--nx-indigo);color:#fff;box-shadow:0 6px 16px -6px rgba(79,70,229,.6)}
.nx-site .nx-pg .nx-pg-btn--primary:is(:hover,:focus-visible){background:var(--nx-indigo-d);color:#fff}
.nx-site .nx-pg .nx-pg-btn--amber{background:var(--nx-amber);color:var(--pg-navy);box-shadow:0 6px 16px -6px rgba(245,158,11,.7)}
.nx-site .nx-pg .nx-pg-btn--amber:is(:hover,:focus-visible){background:#FBBF24;color:var(--pg-navy)}
.nx-site .nx-pg .nx-pg-btn--ghost{background:#fff;border-color:var(--pg-line);color:var(--pg-navy)}
.nx-site .nx-pg .nx-pg-btn--ghost:is(:hover,:focus-visible){border-color:var(--nx-indigo);color:var(--nx-indigo-d)}
.nx-site .nx-pg .nx-pg-btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.nx-site .nx-pg .nx-pg-btn--ghost-light:is(:hover,:focus-visible){background:rgba(11,17,32,.14);border-color:#fff;color:#fff}
.nx-site .nx-pg .nx-pg-btn--lg{min-height:54px;font-size:17px}
.nx-site .nx-pg .nx-pg-btn--sm{min-height:44px;padding:8px 14px;font-size:14px}

/* ---- Nox, the guide: a pose + a speech bubble (the image never sits over text) ---- */
.nx-pg-guide{display:flex;align-items:flex-start;gap:18px}
.nx-site .nx-pg img.nx-pg-nox{display:block;flex:none;width:130px;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;pointer-events:none}
.nx-site .nx-pg .nx-pg-say{position:relative;max-width:300px;margin-top:14px;padding:10px 16px;background:#fff;border:1px solid var(--pg-line2);
  border-radius:4px 16px 16px 16px;box-shadow:var(--pg-shadow);font:600 15px/1.4 var(--nx-body);color:var(--pg-navy);text-wrap:balance}
.nx-pg-say::before{content:"";position:absolute;left:-7px;top:12px;width:12px;height:12px;background:#fff;border-left:1px solid var(--pg-line2);
  border-bottom:1px solid var(--pg-line2);transform:rotate(45deg)}
/* the Included box: the bubble above a bigger Nox */
.nx-pg-guide--stack{flex-direction:column-reverse;align-items:center;gap:14px}
.nx-site .nx-pg .nx-pg-guide--stack img.nx-pg-nox{width:200px}
.nx-site .nx-pg .nx-pg-guide--stack .nx-pg-say{margin:0;max-width:340px;border-radius:16px;text-align:center}
.nx-pg-guide--stack .nx-pg-say::before{left:50%;top:auto;bottom:-7px;margin-left:-6px;transform:rotate(-45deg)}

/* section head: Nox + bubble on the left, eyebrow + heading on the right */
.nx-pg-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:end;margin-bottom:32px}
.nx-pg-head .nx-pg-txt{padding-bottom:10px}
.nx-pg-head--plain{grid-template-columns:minmax(0,1fr)}
.nx-pg-head--plain .nx-pg-txt{padding-bottom:0}

/* ---- hero ---- */
.nx-pg-hero{padding:44px 0 96px;background:radial-gradient(1200px 500px at 85% -10%,rgba(124,58,237,.12),transparent 60%),
  radial-gradient(900px 400px at 0% 100%,rgba(79,70,229,.10),transparent 60%),var(--nx-light)}
.nx-pg-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:48px;align-items:center}
.nx-site .nx-pg .nx-pg-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:-6px;margin-bottom:20px;font:600 14px/1.2 var(--nx-body);color:var(--pg-muted)}
.nx-site .nx-pg .nx-pg-back:hover{color:var(--nx-indigo-d)}
.nx-pg-back svg{width:16px;height:16px}
.nx-pg-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:22px}
.nx-pg-cat{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#EEF2FF;color:var(--nx-indigo-d);
  font:700 12px/1.3 var(--nx-body);letter-spacing:.08em;text-transform:uppercase}
.nx-pg-cat i{width:7px;height:7px;border-radius:50%;background:var(--nx-indigo)}
.nx-site .nx-pg .nx-pg-h1{margin-bottom:16px;font-size:52px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.nx-site .nx-pg .nx-pg-lead{max-width:600px;margin-bottom:26px;font-size:18px;color:var(--nx-text);text-wrap:pretty}
.nx-pg-bestfor{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.nx-pg-lbl{margin-right:4px;font:700 12px/1.2 var(--nx-body);letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted)}
.nx-site .nx-pg .nx-pg-bestfor ul{display:contents}
.nx-site .nx-pg .nx-pg-bestfor li{padding:7px 14px;border:1px solid var(--pg-line);border-radius:999px;background:#fff;color:var(--pg-navy2);font:500 14px/1.3 var(--nx-body)}

/* price card */
.nx-pg-price{position:relative;overflow:hidden;padding:28px;background:#fff;border:1px solid var(--pg-line2);border-radius:20px;
  box-shadow:0 2px 4px rgba(11,17,32,.04),0 24px 48px -16px rgba(79,70,229,.25)}
.nx-pg-price::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--nx-indigo),var(--nx-violet))}
.nx-pg-pt{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.nx-pg-pt>span{font:700 12px/1.3 var(--nx-body);letter-spacing:.12em;text-transform:uppercase;color:var(--pg-muted)}
.nx-pg-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-bottom:22px}
.nx-pg-amount b{font:800 52px/1 var(--nx-head);color:var(--pg-navy);letter-spacing:-.03em}
.nx-pg-amount small{font:500 15px/1.3 var(--nx-body);color:var(--pg-muted)}
.nx-site .nx-pg .nx-pg-plan{margin:2px 0 18px;font:700 26px/1.2 var(--nx-head);color:var(--pg-navy)}
.nx-site .nx-pg .nx-pg-notice{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:#FFF7ED;color:#7C2D12;font:500 14px/1.5 var(--nx-body)}
.nx-site .nx-pg .nx-pg-notice a{color:#9A3412;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.nx-site .nx-pg .nx-pg-buy{width:100%}
.nx-pg-trust{display:grid;gap:10px;margin-top:18px !important}
.nx-site .nx-pg .nx-pg-trust li{display:flex;align-items:center;gap:10px;font:500 14px/1.4 var(--nx-body);color:var(--pg-navy2)}
.nx-pg-trust svg{width:20px;height:20px;color:var(--nx-indigo)}

/* hero logo tile (the home grid's trimmed-logo method, gen_tools.py logo_tile / logo_span) */
:is(.nx-tool-hero,.nx-tool-rel) .nx-lt{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:var(--th);padding:var(--tp);overflow:hidden;text-decoration:none}
:is(.nx-tool-hero,.nx-tool-rel) .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))}
.nx-site :is(.nx-tool-hero,.nx-tool-rel) .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:0;border-radius:0;box-shadow:none}
/* logos saved on white melt into the tile; a dark-box logo is shown inverted (dark text on the tile), grey boxes whitened */
:is(.nx-tool-hero,.nx-tool-rel) :is(.nx-lg--mul,.nx-lg--invert,.nx-lg--invert-strong,.nx-lg--whiten) img{mix-blend-mode:multiply}
:is(.nx-tool-hero,.nx-tool-rel) .nx-lg--invert img{filter:invert(1) hue-rotate(180deg) brightness(1.08) contrast(1.15)}
:is(.nx-tool-hero,.nx-tool-rel) .nx-lg--invert-strong img{filter:invert(1) hue-rotate(180deg) brightness(1.2) contrast(1.2)}
:is(.nx-tool-hero,.nx-tool-rel) .nx-lg--whiten img{filter:brightness(1.12) contrast(1.08)}
:is(.nx-tool-hero,.nx-tool-rel) .nx-lg--box{border-radius:6px}
:is(.nx-tool-hero,.nx-tool-rel) .nx-lg-text{font:700 20px/1.1 var(--nx-head);color:var(--nx-ink);letter-spacing:-.01em;text-align:center}
.nx-tool-hero .nx-lt--hero{--th:66px;--tp:14px;--tx:20px;--tw:260px;--ih:calc(var(--th) - 2 * var(--tp) - 2px);
  width:min(var(--tw),calc(min(var(--ih),var(--mx)) * var(--ar) + 2 * var(--tx) + 2px));min-width:var(--th);padding:var(--tp) var(--tx);
  background:#fff;border:1px solid var(--pg-line2);border-radius:14px;box-shadow:var(--pg-shadow);container-type:inline-size}
@supports (width:1cqw){
  .nx-tool-hero .nx-lt--hero .nx-lg--fill{height:min(var(--ih),var(--mx),calc(100cqw / var(--ar)));width:min(calc(var(--ih) * var(--ar)),calc(var(--mx) * var(--ar)),100cqw)}
}
.nx-tool-hero .nx-lt--hero.nx-lt--text{width:auto;padding:0 22px;container-type:normal}
.nx-tool-hero .nx-lt--hero .nx-lg-text{font-size:22px;white-space:nowrap}
/* the Ahrefs + Semrush combo: both marks at one optical height */
.nx-tool-hero .nx-lt--duo{width:auto;gap:14px;padding:var(--tp) 20px;container-type:normal}
.nx-tool-hero .nx-lt--duo .nx-lg.nx-lg--duo{--dh:30px;--dcap:140px;height:min(var(--dh),calc(var(--dcap) / var(--ar)));width:min(calc(var(--dh) * var(--ar)),var(--dcap))}
.nx-tool-hero .nx-lt-plus{font:700 20px/1 var(--nx-head);color:var(--pg-muted)}

/* ---- "Included with <Tool>": first after the hero (owner), lifted over the hero's foot ---- */
.nx-pg-incl{padding-top:0;padding-bottom:72px;background:transparent}
.nx-pg-sec:has(.nx-pg-incl){position:relative;z-index:2}
.nx-pg-inc{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;margin-top:-52px;padding:36px 40px;
  background:#fff;border:1px solid #D1FAE5;border-radius:24px;box-shadow:0 2px 4px rgba(11,17,32,.04),0 30px 60px -24px rgba(22,163,74,.28)}
.nx-pg-inc::after{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.10),transparent 70%);pointer-events:none}
.nx-pg-inc-body{position:relative;z-index:1;min-width:0}
.nx-site .nx-pg .nx-pg-inc-h{margin-bottom:6px;font-size:30px;font-weight:700}
.nx-site .nx-pg .nx-pg-sub{margin-bottom:20px;color:var(--pg-muted)}
.nx-pg-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.nx-site .nx-pg :is(.nx-pg-ticks,.nx-pg-crosses,.nx-pg-bundle-ul) li{display:flex;align-items:flex-start;gap:12px;font:500 16px/1.45 var(--nx-body);color:var(--pg-navy2);text-wrap:pretty}
.nx-site .nx-pg .nx-pg-ticks li:first-child{font-weight:700}
.nx-pg-tick,.nx-pg-cross{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-2px;border-radius:50%;background:var(--pg-green);box-shadow:0 3px 8px -3px rgba(22,163,74,.6)}
.nx-pg-tick svg,.nx-pg-cross svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* owner 10 Oct: Font Awesome check-square ('Rounded square') as the Included tick (gen_tools.py fa_tick) */
.nx-pg-fatick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:0}
.nx-pg-fatick svg{width:24px;height:24px;fill:#16A34A}
.nx-pg-cross{background:#DC2626;box-shadow:0 3px 8px -3px rgba(220,38,38,.55)}
.nx-pg-cross svg{width:14px;height:14px;stroke-width:3}
.nx-pg-excl{margin-top:22px;padding-top:18px;border-top:1px dashed var(--pg-line)}
.nx-site .nx-pg .nx-pg-excl-h{margin-bottom:12px;font:700 13px/1.3 var(--nx-body);letter-spacing:.1em;text-transform:uppercase;color:#B91C1C}
.nx-pg-crosses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.nx-site .nx-pg .nx-pg-crosses li{color:var(--nx-slate)}
.nx-site .nx-pg .nx-pg-plan-note{margin-top:16px;font-size:15px;color:var(--nx-slate)}
.nx-site .nx-pg .nx-pg-plan-note a{color:var(--nx-indigo-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- "A look inside <Tool>": directly below the Included box (owner) ---- */
.nx-pg-shotsband{padding-top:0;padding-bottom:40px}
.nx-pg-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.nx-pg-shots--one{grid-template-columns:minmax(0,1000px);justify-content:center}
.nx-shot-fig{margin:0}
/* each screenshot opens full size (gen_tools.py): on a phone it is shown at ~18% of its real width */
.nx-site .nx-pg .nx-shot-link{display:block;cursor:zoom-in;border-radius:18px}
.nx-shot-cap{display:none;margin-top:8px;text-align:center;font:500 13px/1.4 var(--nx-body);color:var(--pg-muted)}
.nx-site .nx-pg .nx-shot-fig img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--pg-line2);box-shadow:var(--pg-shadow)}

/* ---- "Need more tools?" bundles ---- */
.nx-pg-bundles{padding-top:8px;padding-bottom:40px}
.nx-pg-bundle{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:40px 44px;
  border-radius:24px;background:linear-gradient(135deg,var(--pg-navy) 0%,#1E1B4B 60%,#312E81 100%);color:#fff;--nx-focus:#FCD34D}
.nx-pg-bundle::before{content:"";position:absolute;right:-120px;bottom:-200px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.45),transparent 65%);pointer-events:none}
.nx-pg-bundle-txt{position:relative}
.nx-site .nx-pg .nx-pg-bundle .nx-pg-eyebrow{color:#FBBF24}
.nx-site .nx-pg .nx-pg-bundle .nx-pg-h2{margin-bottom:12px;color:#fff;font-size:32px;font-weight:700}
.nx-site .nx-pg .nx-pg-bundle-p{max-width:460px;margin-bottom:24px;font-size:17px;color:rgba(255,255,255,.8)}
.nx-pg-badges{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 20px !important}
.nx-site .nx-pg .nx-pg-badges li{padding:5px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.1);font:600 13px/1.4 var(--nx-body);color:#fff}
.nx-pg-bundle-ul{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.nx-site .nx-pg .nx-pg-bundle-ul li{gap:10px;font-size:15px;color:#fff}
.nx-pg-bundle-ul .nx-pg-tick{background:#22C55E;box-shadow:none}
.nx-pg-bundle-ul .nx-pg-tick svg{stroke:#052E16}

/* ---- key features ---- */
.nx-pg-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nx-pg-fcard,.nx-pg-step,.nx-pg-rcard{background:#fff;border:1px solid var(--pg-line2);border-radius:18px;box-shadow:var(--pg-shadow);transition:transform .2s ease,border-color .2s ease}
.nx-pg-fcard{padding:26px}
.nx-pg-fcard:hover,.nx-pg-rcard:hover{transform:translateY(-3px);border-color:var(--nx-indigo-l)}
.nx-pg-fic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:16px;border-radius:12px;background:#EEF2FF}
.nx-pg-fic svg{width:22px;height:22px;fill:none;stroke:var(--nx-indigo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-site .nx-pg .nx-pg-fcard h3{margin-bottom:8px;font-size:18px;font-weight:700;line-height:1.3;text-wrap:balance}
.nx-site .nx-pg .nx-pg-fcard p{font-size:15px;color:var(--nx-text)}

/* ---- how it works ---- */
.nx-pg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nx-pg-step{position:relative;padding:28px}
.nx-pg-num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border-radius:50%;
  background:linear-gradient(135deg,var(--nx-indigo),var(--nx-violet));color:#fff;font:800 18px/1 var(--nx-head);box-shadow:0 6px 14px -6px rgba(79,70,229,.7)}
.nx-site .nx-pg .nx-pg-step h3{margin-bottom:8px;font-size:19px;font-weight:700;line-height:1.3}
.nx-site .nx-pg .nx-pg-step p{font-size:15px}
.nx-pg-step:not(:last-child)::after{content:"";position:absolute;right:-21px;top:48px;width:22px;height:2px;background:repeating-linear-gradient(90deg,#A5B4FC 0 4px,transparent 4px 8px)}
.nx-pg-pill{position:absolute;top:24px;right:24px;padding:4px 10px;border-radius:999px;background:#DCFCE7;color:#166534;font:700 12px/1.4 var(--nx-body)}

/* ---- FAQ (the site kit's disclosure buttons + FAQPage JSON-LD, nxel.accordion) ---- */
.nx-pg-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:start}
.nx-pg-faq-side{position:sticky;top:90px}
.nx-site .nx-pg .nx-pg-faq-side .nx-pg-h2{margin-bottom:12px}
.nx-site .nx-pg .nx-pg-faq-side .nx-pg-lede{max-width:360px;margin:0 0 20px}
.nx-pg-faq-side .nx-pg-btn svg{width:18px;height:18px}
.nx-pg-guide--faq{margin-top:26px}
.nx-pg-faq .nx-faq-item{margin-bottom:10px;border-color:var(--pg-line2);border-radius:14px;box-shadow:var(--pg-shadow)}
.nx-pg-faq .nx-faq-item:hover,.nx-pg-faq .nx-faq-item:has(.nx-faq-btn[aria-expanded="true"]){border-color:var(--nx-indigo-l);box-shadow:var(--pg-shadow)}
.nx-site .nx-pg-faq .nx-faq-btn{min-height:56px;padding:18px 20px;font:700 16px/1.4 var(--nx-head);color:var(--pg-navy);text-align:left}
.nx-site .nx-pg-faq .nx-faq-btn[aria-expanded="true"]{color:var(--pg-navy)}
.nx-site .nx-pg-faq .nx-faq-btn:hover{color:var(--nx-indigo-d)}
.nx-pg-faq .nx-faq-ic{background:var(--nx-light)}
.nx-pg-faq .nx-faq-ic::before,.nx-pg-faq .nx-faq-ic::after{background:var(--nx-indigo)}
.nx-pg-faq .nx-faq-btn[aria-expanded="true"] .nx-faq-ic{background:#EEF2FF;transform:rotate(45deg)}
.nx-pg-faq .nx-faq-btn[aria-expanded="true"] .nx-faq-ic::after{transform:rotate(90deg)}
.nx-pg-faq .nx-faq-ic{transition:transform .2s ease,background-color .2s ease}
.nx-site .nx-pg-faq .nx-faq-a{padding:0 20px 18px;font:400 15px/1.65 var(--nx-body);color:var(--nx-text)}
.nx-site .nx-pg-faq .nx-faq-a p{margin:0}

/* ---- alternatives & related tools (catalog-driven) ---- */
.nx-pg-head--rel{margin-bottom:28px}
.nx-pg-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nx-pg-rcard{display:flex;flex-direction:column;min-width:0;padding:18px}
.nx-tool-rel .nx-lt--card{--th:78px;--tp:17px;margin-bottom:14px;border-radius:12px;background:var(--nx-light);container-type:inline-size}
@supports (width:1cqw){
  .nx-tool-rel .nx-lt--card .nx-lg--fill{--ih:calc(var(--th) - 2 * var(--tp));
    height:min(var(--ih),var(--mx),calc(100cqw / var(--ar)));width:min(calc(var(--ih) * var(--ar)),calc(var(--mx) * var(--ar)),100cqw)}
}
.nx-site .nx-pg .nx-pg-rcard h3{margin-bottom:6px;font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:break-word;text-wrap:balance}
.nx-site .nx-pg .nx-pg-rcard h3 a{color:var(--pg-navy);display:block;padding:12px 0;margin:-12px 0}   /* tap area ≥ 44px, text stays put */
.nx-site .nx-pg .nx-pg-rcard h3 a:hover{color:var(--nx-indigo-d)}
.nx-pg-rprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin-bottom:14px}
.nx-pg-rprice b{font:700 22px/1.2 var(--nx-head);color:var(--pg-navy);letter-spacing:0}
.nx-pg-rprice small{font:500 13px/1.3 var(--nx-body);color:var(--pg-muted)}
.nx-site .nx-pg .nx-pg-rcard .nx-pg-btn{margin-top:auto;width:100%}
.nx-pg-rel-more{margin-top:28px;text-align:center}

/* ---- about (the legacy article): title column + article; the rest of a long article opens with "Read the full article" ---- */
.nx-pg-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}
.nx-pg-about-side{position:sticky;top:90px}
.nx-site .nx-pg .nx-pg-about-side .nx-pg-h2{margin-bottom:12px}
.nx-pg-guide--about{margin-top:26px}
.nx-readtime{margin:0;display:inline-flex;align-items:center;gap:8px;font:600 14px/1.3 var(--nx-body);color:var(--pg-muted)}
.nx-readtime::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-radius:50%;box-sizing:border-box;
  background:linear-gradient(currentColor,currentColor) 5px 2px/2px 5px no-repeat,linear-gradient(currentColor,currentColor) 5px 5px/4px 2px no-repeat}
.nx-pg-article{max-width:720px;font:400 17px/1.75 var(--nx-body);color:var(--nx-text)}
.nx-site .nx-pg .nx-pg-article p{margin:0 0 1.1em}
.nx-site .nx-pg .nx-pg-article h3{margin:1.3em 0 .5em;font-size:24px;font-weight:700;line-height:1.3}
.nx-site .nx-pg .nx-pg-article h4{margin:1.2em 0 .4em;font:700 18px/1.35 var(--nx-head);color:var(--nx-ink)}
.nx-site .nx-pg .nx-pg-article :is(ul,ol){margin:0 0 1.1em;padding-left:1.25em}
.nx-site .nx-pg .nx-pg-article ul{list-style:disc}
.nx-site .nx-pg .nx-pg-article ol{list-style:decimal}
.nx-site .nx-pg .nx-pg-article li{margin:0 0 .6em}
.nx-pg-article li::marker{color:var(--nx-indigo)}
.nx-site .nx-pg .nx-pg-article strong{color:var(--nx-ink)}
.nx-site .nx-pg .nx-pg-article a{color:var(--nx-indigo-d);text-decoration:underline;text-underline-offset:3px}
.nx-site .nx-pg .nx-pg-article>:first-child{margin-top:0}
.nx-more{margin:0}
.nx-more>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:6px 0 0;padding:0 18px;border:1px solid var(--nx-line-2);
  border-radius:12px;background:#fff;color:var(--nx-ink);font:600 15px/1 var(--nx-body);cursor:pointer;list-style:none;user-select:none}
.nx-more>summary::-webkit-details-marker{display:none}
.nx-more>summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nx-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.nx-more>summary:hover{border-color:var(--nx-indigo-l);color:var(--nx-indigo-d)}
.nx-more .nx-more-close,.nx-more[open] .nx-more-open{display:none}
.nx-more[open] .nx-more-close{display:inline}
.nx-more[open]{display:flex;flex-direction:column}
.nx-more[open]>summary{order:2;align-self:flex-start;margin:10px 0 0}

/* ---- final CTA ---- */
.nx-pg-cta{overflow:hidden;padding:72px 0;background:linear-gradient(120deg,var(--nx-indigo),var(--nx-violet));color:#fff;text-align:center;--nx-focus:#FCD34D}
.nx-pg-cta::before,.nx-pg-cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.nx-pg-cta::before{width:520px;height:520px;left:-200px;top:-260px}
.nx-pg-cta::after{width:420px;height:420px;right:-160px;bottom:-240px}
.nx-pg-cta .nx-pg-wrap{position:relative;z-index:1}
.nx-site .nx-pg .nx-pg-cta .nx-pg-h2,.nx-site .nx-pg-cta .nx-pg-h2{margin-bottom:12px;color:#fff;font-size:40px;font-weight:700}
.nx-site .nx-pg .nx-pg-cta-p{max-width:680px;margin:0 auto 28px;font-size:17px;color:#fff;text-wrap:balance}
.nx-pg-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nx-site .nx-pg .nx-pg-cta-row .nx-pg-btn{min-height:54px;padding:12px 30px;font-size:16px}

/* ---- phones: slim price + buy bar once the hero has scrolled away (JS in the page toggles .is-on;
   it hides again over the CTA band and the footer, so it never covers them) ---- */
.nx-sbar{display:none}
@media (max-width:767px){
  .nx-sbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);border-top:1px solid var(--nx-line);box-shadow:0 -10px 30px -12px rgba(11,17,32,.2);text-align:left;
    transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .nx-sbar.is-on{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  /* keyboard focus is scrolled clear of the bar (WCAG 2.4.11): the bar's 67px + air */
  html.nx-sbar-on{scroll-padding-bottom:84px}
  .nx-sbar-in{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto}
  .nx-chat-on .nx-sbar-in{padding-right:72px}
  .nx-sbar-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .nx-sbar-name{font:600 12px/1.2 var(--nx-body);color:var(--pg-muted,#5B6B80);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nx-sbar-price{font:800 20px/1.15 var(--nx-head);color:#0B1120;letter-spacing:-.01em;white-space:nowrap}
  .nx-sbar-price small{font:500 12px/1 var(--nx-body);color:var(--pg-muted,#5B6B80);letter-spacing:0;margin-left:5px}
  .nx-site .nx-sbar-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:12px;
    background:var(--nx-indigo);color:#fff;font:600 15px/1 var(--nx-body);text-decoration:none;box-shadow:0 6px 16px -6px rgba(79,70,229,.6)}
  .nx-site .nx-sbar-btn:is(:hover,:focus,:active){background:var(--nx-indigo-d);color:#fff}
}
@media (prefers-reduced-motion:reduce){.nx-sbar,.nx-sbar.is-on{transition:none}.nx-pg-fcard,.nx-pg-rcard,.nx-pg-faq .nx-faq-ic{transition:none}}

/* ===================== tablets ===================== */
@media (max-width:1024px){
  .nx-pg-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .nx-site .nx-pg .nx-pg-h1{font-size:42px}
  .nx-pg-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-pg-steps{gap:16px}
  .nx-pg-step{padding:24px}
  .nx-pg-step:not(:last-child)::after{right:-17px;width:18px}
  .nx-pg-bundle{grid-template-columns:minmax(0,1fr);padding:32px}
  .nx-pg-faq-grid,.nx-pg-about{grid-template-columns:minmax(0,1fr);gap:24px}
  .nx-pg-faq-side,.nx-pg-about-side{position:static}
  .nx-pg-guide--faq,.nx-pg-guide--about{display:none}
  .nx-pg-head{grid-template-columns:minmax(0,1fr);gap:12px}
  .nx-pg-inc{gap:28px;padding:32px}
  .nx-site .nx-pg .nx-pg-guide--stack img.nx-pg-nox{width:160px}
  .nx-site .nx-pg .nx-pg-guide--stack .nx-pg-say{max-width:220px}
  .nx-pg-ticks{gap:14px 24px}
  .nx-tool-hero .nx-lt--hero{--tw:240px}
}
/* small tablets: the Included box stacks Nox beside its bubble on top */
@media (max-width:900px){
  .nx-pg-inc{grid-template-columns:minmax(0,1fr)}
  .nx-pg-guide--stack{flex-direction:row;align-items:flex-start;gap:16px}
  .nx-site .nx-pg .nx-pg-guide--stack img.nx-pg-nox{width:120px}
  .nx-site .nx-pg .nx-pg-guide--stack .nx-pg-say{margin-top:14px;max-width:300px;border-radius:4px 16px 16px 16px;text-align:left}
  .nx-pg-guide--stack .nx-pg-say::before{left:-7px;top:12px;bottom:auto;margin-left:0;transform:rotate(45deg)}
  /* the three steps as a compact list: number beside the text */
  .nx-pg-steps{grid-template-columns:minmax(0,1fr);gap:14px}
  .nx-pg-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start}
  .nx-pg-step:not(:last-child)::after{display:none}
  .nx-pg-num{grid-column:1;grid-row:1 / span 2;margin:0}
  .nx-pg-step>:not(.nx-pg-num){grid-column:2}
  .nx-site .nx-pg .nx-pg-step h3{margin-top:9px}
  .nx-pg-pill{position:static;justify-self:start;margin-bottom:8px}
  .nx-pg-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===================== phones ===================== */
@media (max-width:767px){
  .nx-pg-band{padding:52px 0}
  .nx-pg-wrap{padding:0 20px}
  .nx-pg-hero{padding:24px 0 72px}
  .nx-pg-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .nx-site .nx-pg .nx-pg-back{margin-bottom:12px}
  .nx-site .nx-pg .nx-pg-h1{font-size:36px}
  .nx-site .nx-pg .nx-pg-lead{font-size:17px}
  .nx-pg-amount b{font-size:44px}
  .nx-pg-price{padding:24px 20px}
  .nx-tool-hero .nx-lt--hero{--th:60px;--tp:12px;--tx:16px;--tw:220px}
  .nx-tool-hero .nx-lt--duo .nx-lg.nx-lg--duo{--dh:24px;--dcap:110px}.nx-tool-hero .nx-lt--duo{gap:10px;padding:var(--tp) 14px}
  .nx-site .nx-pg .nx-pg-h2{font-size:28px}
  .nx-site .nx-pg .nx-pg-lede{font-size:16px}
  .nx-pg-incl{padding-top:0;padding-bottom:52px}
  .nx-pg-inc{margin-top:-40px;padding:24px 20px 26px;gap:18px;border-radius:20px}
  .nx-site .nx-pg .nx-pg-inc-h{font-size:26px}
  .nx-site .nx-pg .nx-pg-guide--stack img.nx-pg-nox{width:96px}
  .nx-pg-ticks,.nx-pg-crosses,.nx-pg-bundle-ul{grid-template-columns:minmax(0,1fr)}
  .nx-pg-ticks{gap:14px}
  .nx-pg-shotsband{padding-top:0;padding-bottom:28px}
  .nx-pg-shots{grid-template-columns:minmax(0,1fr);gap:18px}
  .nx-shot-cap{display:block}
  .nx-pg-shotsband .nx-pg-guide{display:none}
  .nx-pg-bundles{padding-top:8px;padding-bottom:28px}
  .nx-pg-bundle{padding:28px 22px;border-radius:20px;gap:26px}
  .nx-site .nx-pg .nx-pg-bundle .nx-pg-h2{font-size:26px}
  .nx-site .nx-pg .nx-pg-bundle-p{font-size:16px}
  .nx-pg-feat{grid-template-columns:minmax(0,1fr);gap:14px}
  .nx-pg-fcard{padding:22px}
  .nx-pg-step{padding:22px 20px;column-gap:16px}
  .nx-pg-rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .nx-pg-rcard{padding:14px}
  .nx-tool-rel .nx-lt--card{--th:64px;--tp:14px}
  .nx-pg-rprice b{font-size:19px}
  .nx-site .nx-pg .nx-pg-rcard h3{font-size:15px}
  .nx-site .nx-pg .nx-pg-rcard .nx-pg-btn{padding:8px 10px;font-size:14px;white-space:normal}
  .nx-pg-head{margin-bottom:24px}
  .nx-site .nx-pg img.nx-pg-nox{width:88px}
  .nx-pg-guide{gap:14px}
  .nx-site .nx-pg .nx-pg-say{margin-top:8px;font-size:14px}
  .nx-pg-about{gap:16px}
  .nx-pg-article{font-size:16px}
  .nx-pg-cta{padding:52px 0}
  .nx-site .nx-pg .nx-pg-cta .nx-pg-h2,.nx-site .nx-pg-cta .nx-pg-h2{font-size:30px}
  .nx-site .nx-pg .nx-pg-cta-p{font-size:16px}
  .nx-site .nx-pg .nx-pg-cta-row .nx-pg-btn{width:100%;white-space:normal}
}
@media (max-width:400px){
  .nx-pg-wrap{padding:0 16px}
  .nx-site .nx-pg .nx-pg-h1{font-size:32px}
  .nx-site .nx-pg .nx-pg-h2{font-size:26px}
  .nx-pg-amount b{font-size:40px}
  .nx-pg-price{padding:22px 18px}
  .nx-pg-pt{gap:10px}
  .nx-pg-inc{padding:22px 16px 24px}
  .nx-pg-bundle{padding:26px 18px}
  .nx-pg-rel{gap:10px}
  .nx-pg-rcard{padding:12px}
  .nx-site .nx-pg img.nx-pg-nox{width:76px}
  .nx-site .nx-pg .nx-pg-guide--stack img.nx-pg-nox{width:84px}
  .nx-site .nx-pg .nx-pg-say{padding:9px 13px}
}

/* ===================== fixes after the demo-8 review (28 Sep) ===================== */
/* tablets: site.css gives every top-level section's container a 16px gutter at 768–1259px; the tool bands paint their own
   background edge to edge (demo 8), and .nx-pg-wrap already holds the gutter, so the band sections drop it */
@media (min-width:768px) and (max-width:1259px){
  .nx-site .nx-pg-sec.elementor-top-section:not(.nx-header):not(.nx-hero) > .elementor-container{padding-left:0;padding-right:0}
}
/* the footer pandas' reserve (site.css: the last section's padding-bottom, 150px at 768–1024 and 88px on phones) moves inside the
   purple CTA band, so the band meets the footer and Nox sits on purple as on desktop */
@media (max-width:1024px){.nx-site .nx-main > .elementor > .elementor-top-section.nx-pg-sec:last-child{padding-bottom:0}}
@media (min-width:768px) and (max-width:1024px){.nx-pg-band.nx-pg-cta{padding-bottom:calc(72px + 150px)}}
@media (max-width:767px){.nx-pg-band.nx-pg-cta{padding-bottom:calc(52px + 88px)}}

/* ===================== "<Tool> direct vs with NoxTools" (owner, 7 Oct 2026) ===================== */
/* The comparison table from Ahrefs demo 7 (/demo/ahrefs-pages/ahrefs-7.html, div.cmp) in the Panda Guide's look, inside the
   "Included" band right after the Included box (gen_tools.py compare_html; only tools with a checked official price).
   No "You save" row and no source note (owner, 7 Oct): the small "Save X%" badge sits in the NoxTools column head.
   Every rule is scoped to .nx-pg-cmp.
   Phones (<=600px): the table becomes a two-column grid — each row label sits above the official value and the NoxTools cell
   spans both lines, so its column stays one unbroken highlight and nothing scrolls sideways. */
.nx-pg-cmp{position:relative;margin-top:32px;padding:32px 36px;background:#fff;border:1px solid var(--pg-line2);border-radius:24px;box-shadow:var(--pg-shadow)}
.nx-pg-cmp .nx-pg-cmp-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;margin-bottom:22px}
.nx-site .nx-pg-cmp .nx-pg-h2.nx-pg-cmp-h{font-size:28px;font-weight:700}
.nx-site .nx-pg-cmp .nx-pg-cmp-intro{max-width:440px;font:400 16px/1.5 var(--nx-body);color:var(--pg-muted);text-wrap:pretty}
/* table (GeneratePress's table/td/th borders, padding and margin reset) */
.nx-site .nx-pg-cmp .nx-pg-cmp-t{width:100%;margin:0;border:0;border-collapse:separate;border-spacing:0;table-layout:fixed;background:none}
.nx-site .nx-pg-cmp .nx-pg-cmp-t :is(th,td){padding:16px 20px;border:0;border-bottom:1px solid var(--pg-line2);background:none;text-align:left;vertical-align:top;
  font:500 15px/1.5 var(--nx-body);color:var(--nx-text);overflow-wrap:break-word}
.nx-site .nx-pg-cmp .nx-pg-cmp-t .nx-pg-cmp-c0{width:20%}
.nx-site .nx-pg-cmp .nx-pg-cmp-t thead .nx-pg-cmp-of{width:38%}
.nx-site .nx-pg-cmp .nx-pg-cmp-t thead th{vertical-align:bottom;font:700 17px/1.3 var(--nx-head);color:var(--pg-navy)}
.nx-pg-cmp .nx-pg-cmp-t thead small{display:block;margin-top:5px;font:500 13px/1.4 var(--nx-body);color:var(--pg-muted)}
.nx-site .nx-pg-cmp .nx-pg-cmp-t tbody th{padding-top:18px;font:600 14px/1.45 var(--nx-body);color:var(--pg-muted)}
.nx-site .nx-pg-cmp .nx-pg-cmp-t tbody tr:last-child>*{border-bottom:0}
/* the NoxTools column: one indigo-framed highlight from its head to the last row */
.nx-site .nx-pg-cmp .nx-pg-cmp-t .nx-pg-cmp-nx{background:#F5F6FF;border-left:2px solid var(--nx-indigo);border-right:2px solid var(--nx-indigo);border-bottom-color:#E0E7FF;
  color:var(--pg-navy2);font-weight:600}
.nx-site .nx-pg-cmp .nx-pg-cmp-t thead .nx-pg-cmp-nx{background:var(--nx-indigo);border-bottom-color:var(--nx-indigo);border-radius:14px 14px 0 0;color:#fff;font-weight:700}
.nx-pg-cmp .nx-pg-cmp-t thead .nx-pg-cmp-nx small{color:#E0E7FF}
.nx-site .nx-pg-cmp .nx-pg-cmp-t tbody tr:last-child .nx-pg-cmp-nx{border-bottom:2px solid var(--nx-indigo);border-radius:0 0 14px 14px}
.nx-pg-cmp .nx-pg-cmp-nxh{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.nx-pg-cmp .nx-pg-cmp-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--nx-amber);color:var(--pg-navy);
  font:700 12px/1 var(--nx-body);letter-spacing:.02em;white-space:nowrap}
/* prices */
.nx-pg-cmp .nx-pg-cmp-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px}
.nx-pg-cmp .nx-pg-cmp-p b{font:800 24px/1.15 var(--nx-head);letter-spacing:-.02em;color:var(--pg-navy2)}
.nx-pg-cmp .nx-pg-cmp-nx .nx-pg-cmp-p b{font-size:28px;color:var(--nx-indigo-d)}
.nx-pg-cmp .nx-pg-cmp-p small{font:500 14px/1.2 var(--nx-body);color:var(--pg-muted)}
.nx-pg-cmp .nx-pg-cmp-nx .nx-pg-cmp-p small{color:var(--nx-slate)}
.nx-pg-cmp .nx-pg-cmp-apx{margin-right:4px;font:600 18px/1 var(--nx-body);color:var(--pg-muted)}
.nx-pg-cmp .nx-pg-cmp-more{display:block;margin-top:4px;font:500 13px/1.45 var(--nx-body);color:var(--nx-slate)}
@media (max-width:1024px){
  .nx-pg-cmp{padding:28px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t :is(th,td){padding:14px 16px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t tbody th{padding-top:16px}
}
@media (max-width:767px){
  .nx-pg-cmp{margin-top:24px;padding:24px 18px 18px;border-radius:20px}
  .nx-pg-cmp .nx-pg-cmp-head{margin-bottom:18px}
  .nx-site .nx-pg-cmp .nx-pg-h2.nx-pg-cmp-h{font-size:24px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-intro{font-size:15px}
}
@media (max-width:600px){
  .nx-site .nx-pg-cmp .nx-pg-cmp-t,.nx-pg-cmp .nx-pg-cmp-t thead,.nx-pg-cmp .nx-pg-cmp-t tbody{display:block}
  .nx-pg-cmp .nx-pg-cmp-t tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nx-pg-cmp .nx-pg-cmp-t tbody tr{grid-template-rows:auto 1fr}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t .nx-pg-cmp-c0{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t :is(th,td),.nx-site .nx-pg-cmp .nx-pg-cmp-t thead .nx-pg-cmp-of{width:auto;padding:12px;font-size:14px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t thead th,.nx-site .nx-pg-cmp .nx-pg-cmp-t thead .nx-pg-cmp-of{font-size:15px}
  .nx-pg-cmp .nx-pg-cmp-t thead small{font-size:12px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t tbody th{grid-column:1;grid-row:1;padding:12px 12px 0;border-bottom:0;font-size:13px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t tbody td.nx-pg-cmp-of{grid-column:1;grid-row:2;padding-top:4px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t tbody td.nx-pg-cmp-nx{grid-column:2;grid-row:1 / 3;padding-top:calc(16px + 13px * 1.45)}
  .nx-pg-cmp .nx-pg-cmp-p b{font-size:19px}
  .nx-pg-cmp .nx-pg-cmp-nx .nx-pg-cmp-p b{font-size:21px}
  .nx-pg-cmp .nx-pg-cmp-p small{font-size:13px}
  .nx-pg-cmp .nx-pg-cmp-apx{margin-right:3px;font-size:15px}
  .nx-pg-cmp .nx-pg-cmp-more{font-size:12px}
}
@media (max-width:400px){
  .nx-pg-cmp{padding:22px 12px 16px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t :is(th,td),.nx-site .nx-pg-cmp .nx-pg-cmp-t thead .nx-pg-cmp-of{padding:10px}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t tbody th{padding:10px 10px 0}
  .nx-site .nx-pg-cmp .nx-pg-cmp-t tbody td.nx-pg-cmp-nx{padding-top:calc(14px + 13px * 1.45)}
}