/* ============================================================
   NexoVirt site design system (homepage + site shell)
   Custom CSS approved by the owner for the landing redesign. Loaded after theme-overwrite.css.
   Black and white base: bands alternate paper and ink, text is always the band's opposite
   colour, no greys, no gradients, no divider lines. One blue accent (about 10%, one contrast
   point per section): Install free CTAs, stats, step arrows, active tour tab, the recommended
   plan's checks, hover and focus. Dark mode swaps paper and ink, so the
   alternation simply inverts. Every class is prefixed "nx-".
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --nx-max: 1280px;
  --nx-gutter: clamp(1.25rem, 4vw, 2rem);
  --nx-section-y: clamp(5rem, 10vw, 9rem);
  --nx-paper: #ffffff;
  --nx-ink: #000000;
  --nx-radius: 12px;
  --nx-radius-lg: 20px;
  --nx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --nx-ease: cubic-bezier(.2, .6, .2, 1);

  /* Accent, chosen per surface for WCAG AA: #2563EB on white = 5.17:1 (also as a fill with a
     white label); #60A5FA on black = 8.26:1 (also as a fill with a black label). */
  --nx-blue-600: #2563EB;
  --nx-blue-400: #60A5FA;
  --nx-accent-on-paper: var(--nx-blue-600);
  --nx-accent-fg-on-paper: #ffffff;
  --nx-accent-on-ink: var(--nx-blue-400);
  --nx-accent-fg-on-ink: #000000;
}

/* A band sets the local pair every component reads: --nx-bg (surface) and --nx-fg (text).
   Components that sit in a band as a solid block use the pair the other way round. */
.nx-band--paper { --nx-bg: var(--nx-paper); --nx-fg: var(--nx-ink); --nx-accent: var(--nx-accent-on-paper); --nx-accent-fg: var(--nx-accent-fg-on-paper); }
.nx-band--ink   { --nx-bg: var(--nx-ink);   --nx-fg: var(--nx-paper); --nx-accent: var(--nx-accent-on-ink); --nx-accent-fg: var(--nx-accent-fg-on-ink); }
.nx-band {
  /* Thin translucent strokes of the band's text colour: borders only, never text or fills. */
  --nx-line: color-mix(in srgb, var(--nx-fg) 14%, transparent);
  --nx-line-strong: color-mix(in srgb, var(--nx-fg) 32%, transparent);
  background: var(--nx-bg);
  color: var(--nx-fg);
  --tblr-body-color: var(--nx-fg);
  --tblr-link-color: var(--nx-fg);
  --tblr-link-hover-color: var(--nx-fg);
}
.nx-band .text-secondary { color: inherit !important; }
.nx-band a:not(.btn) { color: inherit; }
.nx-band .nx-logo { color: currentColor; }

html { scroll-padding-top: 5rem; }
.nx-main { display: block; }

.nx-container {
  width: 100%;
  max-width: calc(var(--nx-max) + 2 * var(--nx-gutter));
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

/* ---------- Type scale (hierarchy by size and weight, never by grey) ---------- */
.nx-display {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.875rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 750;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
.nx-h2 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.038em;
  font-weight: 750;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
.nx-lead {
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  line-height: 1.55;
  font-weight: 400;
  color: inherit;
  margin: 0;
  text-wrap: pretty;
}
.nx-lead strong { font-weight: 650; }

/* ---------- Links + buttons ---------- */
.nx-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  text-decoration: none;
}
.nx-link::after { content: "\2192"; display: inline-block; transition: transform .15s var(--nx-ease); }
.nx-link:hover { text-decoration: none; color: var(--nx-accent) !important; }
.nx-link:hover::after { transform: translateX(4px); }

/* Buttons read the band pair: primary = solid --nx-fg, secondary = outlined; hover swaps fill. */
.btn.nx-btn {
  --tblr-btn-padding-x: 1.125rem;
  --tblr-btn-padding-y: .5625rem;
  --tblr-btn-font-size: .9375rem;
  --tblr-btn-font-weight: 600;
  --tblr-btn-line-height: 1.25rem;
  --tblr-btn-border-radius: 999px;
  --tblr-btn-border-width: 1px;
  --tblr-btn-box-shadow: none;
  --tblr-btn-color: var(--nx-bg);
  --tblr-btn-bg: var(--nx-fg);
  --tblr-btn-border-color: var(--nx-fg);
  --tblr-btn-hover-color: var(--nx-fg);
  --tblr-btn-hover-bg: var(--nx-bg);
  --tblr-btn-hover-border-color: var(--nx-fg);
  --tblr-btn-active-color: var(--nx-fg);
  --tblr-btn-active-bg: var(--nx-bg);
  --tblr-btn-active-border-color: var(--nx-fg);
  white-space: nowrap;
}
.btn.nx-btn-lg {
  --tblr-btn-padding-x: 1.5rem;
  --tblr-btn-padding-y: .75rem;
  --tblr-btn-font-size: 1rem;
}
.btn.nx-btn-secondary { --tblr-btn-border-color: var(--nx-line-strong); }
.btn.nx-btn-secondary,
.btn.nx-btn-quiet {
  --tblr-btn-color: var(--nx-fg);
  --tblr-btn-bg: transparent;
  --tblr-btn-hover-color: var(--nx-bg);
  --tblr-btn-hover-bg: var(--nx-fg);
  --tblr-btn-active-color: var(--nx-bg);
  --tblr-btn-active-bg: var(--nx-fg);
}
.btn.nx-btn-quiet { --tblr-btn-border-color: transparent; }
.btn.nx-btn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; box-shadow: none; }
/* The primary "Install free" CTA: the accent fill. */
.btn.nx-btn-accent {
  --tblr-btn-color: var(--nx-accent-fg);
  --tblr-btn-bg: var(--nx-accent);
  --tblr-btn-border-color: var(--nx-accent);
  --tblr-btn-hover-color: var(--nx-accent-fg);
  --tblr-btn-hover-bg: var(--nx-accent);
  --tblr-btn-hover-border-color: var(--nx-accent);
  --tblr-btn-active-color: var(--nx-accent-fg);
  --tblr-btn-active-bg: var(--nx-accent);
  --tblr-btn-active-border-color: var(--nx-accent);
}
/* Hover: a slight lift (no shadow) and, on outlined buttons, the accent border. */
@media (prefers-reduced-motion: no-preference) {
  .btn.nx-btn { transition: transform .18s var(--nx-ease), background-color .18s var(--nx-ease), border-color .18s var(--nx-ease), color .18s var(--nx-ease); }
  .btn.nx-btn:hover { transform: translateY(-2px); }
  .btn.nx-btn:active { transform: none; }
}

.nx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}
.nx-actions--center { justify-content: center; }

.nx-check { flex-shrink: 0; }

/* Icons sit directly on the band, large, in the band's text colour. */
.nx-icon { display: block; flex-shrink: 0; }

/* ---------- Sections ---------- */
.nx-section { padding-block: var(--nx-section-y); }
.nx-section__head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.nx-section__head .nx-lead { margin-top: 1.25rem; }
/* Split header: title left, lead / CTAs / tabs on the right, so no empty top-right corner. */
@media (min-width: 992px) {
  .nx-section__head--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 2rem 4rem;
    max-width: none;
  }
  .nx-section__head--split > .nx-lead { margin-top: 0; }
  .nx-section__head--split:has(> .nx-section__aside) { grid-template-columns: minmax(0, 1fr) auto; }
  .nx-section__head--split > .nx-section__aside { max-width: 40rem; }
  .nx-section__aside { justify-content: flex-end; }
}
.nx-section__head--split > .nx-section__aside { margin-top: 2rem; }
@media (min-width: 992px) {
  .nx-section__head--split > .nx-section__aside { margin-top: 0; }
}

/* ---------- Hero ---------- */
.nx-hero__top {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
}
/* Decorative cluster network behind the hero (partials/hero_network.php): ink at low opacity, two
   accent hubs, the centre left empty for the copy. Absolutely positioned: no layout shift. */
.nx-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--nx-fg);
  pointer-events: none;
}
.nx-net__link { stroke: currentColor; stroke-opacity: .1; stroke-width: 1.25; }
.nx-net__link--hub { stroke-opacity: .13; stroke-dasharray: 4 6; }
.nx-net__link--mark { stroke-opacity: .2; stroke-width: 3; stroke-linecap: round; }
/* Nodes are opaque tints (not translucent) so the links ending in them don't show through. */
.nx-net__leaf { fill: color-mix(in srgb, var(--nx-fg) 13%, var(--nx-bg)); }
.nx-net__leaf--mark { fill: color-mix(in srgb, var(--nx-fg) 17%, var(--nx-bg)); }
.nx-net__hub { fill: color-mix(in srgb, var(--nx-fg) 17%, var(--nx-bg)); }
.nx-net__hub--accent { fill: color-mix(in srgb, var(--nx-accent) 40%, var(--nx-bg)); }
.nx-net__dot { fill: var(--nx-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nx-net__dot { animation: 9s ease-in-out infinite; }
  .nx-net__dot--1 { animation-name: nx-net-1; }
  .nx-net__dot--2 { animation-name: nx-net-2; animation-delay: 2.5s; animation-duration: 10s; }
  .nx-net__dot--3 { animation-name: nx-net-3; animation-delay: 1.2s; animation-duration: 8s; }
  .nx-net__dot--4 { animation-name: nx-net-4; animation-delay: 4s; animation-duration: 11s; }
}
@keyframes nx-net-1 { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(180px, 265px); opacity: 0; } }
@keyframes nx-net-2 { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(385px, 5px); opacity: 0; } }
@keyframes nx-net-3 { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(-85px, 235px); opacity: 0; } }
@keyframes nx-net-4 { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(280px, -55px); opacity: 0; } }

.nx-hero__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nx-hero__head .nx-display { max-width: 14ch; }
.nx-hero__lead { max-width: 40rem; margin-top: 1.75rem; }
.nx-hero__head .nx-actions { margin-top: 2.5rem; }
.nx-hero__note {
  max-width: 36rem;
  margin: 1rem 0 0;
  font-size: .9375rem;
  line-height: 1.55;
}
.nx-hero__note a { text-decoration: underline; text-underline-offset: .2em; }

/* The screenshot straddles the two bands: the stage is the opposite colour, and a full-bleed block
   in the hero colour covers its top half (50% of the screenshot's own height, so it holds at every
   width), ending in a diagonal cut behind the screenshot. */
.nx-hero__stage {
  --nx-stage-pt: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
  padding-block: var(--nx-stage-pt) clamp(3.5rem, 7vw, 6rem);
}
.nx-hero__shot { position: relative; }
.nx-hero__shot::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nx-stage-pt));
  left: 50%;
  width: 100vw;
  height: calc(50% + var(--nx-stage-pt));
  transform: translateX(-50%);
  background: var(--nx-fg);
}
.nx-hero__shot .nx-laptop { z-index: 1; }
.nx-stats { position: relative; }

/* Under the hero: one strong claim, then the core features as a quiet text line (no frames). */
.nx-section.nx-compat { padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.nx-compat__claim {
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 68rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.nx-keyline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: clamp(1rem, .9rem + .35vw, 1.2rem);
  font-weight: 600;
  color: var(--nx-fg);
}
.nx-keyline li { min-width: 0; white-space: nowrap; display: flex; align-items: center; gap: .55rem; }
.nx-keyline__check { flex: 0 0 auto; color: var(--nx-accent); }
@media (max-width: 991.98px) { .nx-keyline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .nx-keyline { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: .95rem; } .nx-keyline li { white-space: normal; align-items: flex-start; } .nx-keyline__check { margin-top: .15rem; } }

/* Header above the laptop, on the paper band that continues into the stage's paper top. */
.nx-stage-head { padding-top: clamp(4rem, 8vw, 6.5rem); }
.nx-stage-head .nx-section__head { margin-bottom: 0; }
.nx-stage-head__more { margin: 1.5rem 0 0; }

/* Stats bar (Config\Stats): big numbers on the stage band. */
.nx-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2.5rem 3rem;
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
}
.nx-stats__item { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; }
.nx-stats__value {
  color: var(--nx-accent);
  margin: 0;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.nx-stats__label { margin-top: .75rem; font-size: 1.0625rem; font-weight: 500; }

/* Install one-liner: a solid block in the band's opposite colour. */
.nx-cmd {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 100%;
  margin-top: 2.25rem;
  padding: .5rem .5rem .5rem 1.25rem;
  background: var(--nx-fg);
  color: var(--nx-bg);
  border-radius: var(--nx-radius);
  text-align: left;
}
.nx-cmd::before { content: "$"; font-family: var(--nx-mono); user-select: none; }
.nx-cmd__code {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: .375rem 0;
  overflow-x: auto;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--nx-mono);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre;
  scrollbar-width: none;
}
.nx-cmd__code::-webkit-scrollbar { display: none; }
.nx-cmd__code code { color: inherit; background: transparent; padding: 0; font-size: inherit; }
.nx-cmd__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nx-cmd__copy .icon { width: 1.375rem; height: 1.375rem; }
.nx-cmd__copy:hover,
.nx-cmd__copy:focus-visible { background: var(--nx-bg); color: var(--nx-fg); }
.nx-cmd__copy.text-green { color: inherit !important; }

/* Window frame: refined, a thin translucent edge and a soft neutral shadow for depth. */
.nx-window {
  overflow: hidden;
  background: var(--nx-bg);
  border: 1px solid var(--nx-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 60px -24px rgba(0, 0, 0, .28);
}
.nx-window__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 2.5rem;
  padding-inline: 1rem;
  color: var(--nx-fg);
}
.nx-window__dots { display: inline-flex; gap: .4375rem; }
.nx-window__dots i { width: .625rem; height: .625rem; border-radius: 50%; border: 1px solid var(--nx-line-strong); }
.nx-window__bar::after {
  content: attr(data-url);
  flex: 1;
  overflow: hidden;
  margin-right: 3rem;
  font-size: .8125rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nx-window__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--nx-bg);
}

/* ---------- Diagonal cuts between bands (partials/nx_slant.php) ----------
   A band's top cut sits just above it in the band's own colour, so it always matches. The edge
   rises 5vw over the full width (about 3 degrees) and every cut tilts the same way, so the bands
   between them are parallelograms. 5vw stays well inside every band's padding, even at 360px. */
.nx-section { position: relative; }
.nx-slant {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 5vw;
  pointer-events: none;
}
.nx-slant--top { bottom: 100%; margin-bottom: -1px; color: var(--nx-bg); }
.nx-slant--bottom { bottom: -1px; color: var(--nx-paper); }
.nx-slant--straddle {
  top: calc(50% - 1px);
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  color: var(--nx-fg);
}
/* On the non-homepage pages the band above is plain content with no bottom padding: make room. */
.page-body > .nx-section { margin-top: 5vw; }

/* ---------- Laptop mockup for the hero screenshot (partials/nx_window.php, shotDevice=laptop) ----
   The one place neutral device tones (aluminium silver, bezel black) are used, inside the mockup
   only. The lid is sized so the wider base (116%) still fits the container. */
.nx-laptop {
  --nx-alu: #d9dadc;
  --nx-alu-edge: #b9babd;
  --nx-alu-dark: #8e8f93;
  --nx-bezel: #0d0d0f;
  position: relative;
  width: calc(100% / 1.16);
  max-width: 68rem;
  margin-inline: auto;
}
.nx-laptop__lid {
  position: relative;
  padding: 2.4% 1.6% 1.6%;
  background: var(--nx-bezel);
  border-radius: clamp(10px, 1.8vw, 22px) clamp(10px, 1.8vw, 22px) 0 0;
  /* the thin aluminium rim around the lid */
  box-shadow: 0 0 0 clamp(1px, .18vw, 2px) var(--nx-alu-edge);
}
.nx-laptop__camera {
  position: absolute;
  top: .85%;
  left: 50%;
  width: clamp(4px, .55%, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2a2b30;
  box-shadow: inset 0 0 0 1px #3a3b42;
  transform: translateX(-50%);
}
.nx-laptop__screen { overflow: hidden; border-radius: 3px; background: #000; }
.nx-laptop__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Base seen from the front: a thin aluminium slab, wider than the lid, with the opening lip. */
.nx-laptop__base {
  position: relative;
  width: 116%;
  margin-left: -8%;
  height: 0;
  padding-bottom: 2.6%;
  background: var(--nx-alu);
  border-radius: 3px 3px 3.5% 3.5% / 3px 3px 100% 100%;
  box-shadow:
    inset 0 -2px 0 var(--nx-alu-edge),
    inset 0 1px 0 #f2f2f3,
    0 28px 40px -22px rgba(0, 0, 0, .45);
}
.nx-laptop__lip {
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 42%;
  background: var(--nx-alu-edge);
  border-radius: 0 0 10px 10px / 0 0 100% 100%;
  box-shadow: inset 0 -1px 0 var(--nx-alu-dark);
  transform: translateX(-50%);
}

/* ---------- Proof row (objections): 2 x 2 on the stage band, big bare icons ---------- */
.nx-proof { padding-block: 0 var(--nx-section-y); }
.nx-proof__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 6rem);
  max-width: 68rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nx-proof__item { display: flex; align-items: flex-start; gap: 1.75rem; }
.nx-proof__title,
.nx-proof__text { display: block; }
.nx-proof__title { margin-top: .375rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.nx-proof__text { margin-top: .625rem; font-size: 1.0625rem; line-height: 1.6; max-width: 26rem; }

/* ---------- Audiences: pricing cards (the homepage's only cards, by the owner's choice) ----------
   Outlined in the band's text colour; the recommended plan is the inverted, solid card. */
.nx-section__head--center { margin-inline: auto; text-align: center; }
.nx-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-plan {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 16px 40px -20px rgba(0, 0, 0, .22);
}
.nx-plan__name { margin: 0; font-size: 1.25rem; font-weight: 700; color: inherit; }
.nx-plan__price {
  margin: 1rem 0 0;
  font-size: clamp(2.5rem, 1.8rem + 1.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 750;
  white-space: nowrap;
}
.nx-plan__per { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; margin-left: .125rem; }
.nx-plan__nodes { margin: .875rem 0 0; font-size: 1rem; font-weight: 700; }
.nx-plan__list {
  flex: 1 1 auto;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
}
.nx-plan__list li { display: flex; gap: .625rem; padding-block: .3125rem; font-size: .9375rem; line-height: 1.45; }
.nx-plan__list .nx-check { margin-top: .0625rem; }
.btn.nx-plan__cta { width: 100%; }
.nx-plan--rec .nx-check { color: var(--nx-accent); }
.nx-plan__badge {
  align-self: flex-start;
  margin: 0 0 1rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--nx-fg);
  color: var(--nx-bg);
  font-size: .8125rem;
  line-height: 1.25rem;
  font-weight: 700;
}
/* Cards without a badge keep the same top offset (badge 1.75rem + 1rem margin), so names and
   prices line up across the row. */
@media (min-width: 576px) {
  .nx-plan:not(:has(> .nx-plan__badge))::before { content: ""; display: block; height: 2.75rem; }
}
/* Community leads the row: its price and "forever" carry a little more weight. */
.nx-plan--rec .nx-plan__per { font-size: 1.25rem; font-weight: 700; margin-left: 0; }

/* ---------- Staircase (how it works): each step one stair further right ---------- */
.nx-stairs {
  --nx-stair-gap: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: var(--nx-stair-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-stair {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  grid-column: 1 / span 6;
}
.nx-stair:nth-child(2) { grid-column: 4 / span 6; }
.nx-stair:nth-child(3) { grid-column: 7 / span 6; }
.nx-stair__title {
  margin: .75rem 0 .625rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 700;
  color: inherit;
}
.nx-stair__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

/* L-shaped arrow from each icon (4rem) down and right to the next step's icon. The next stair
   starts at 50% of this stair's width (3 of 6 grid columns), its icon centre 2rem below its top. */
@media (min-width: 992px) {
  .nx-stair:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(2rem - 1px);
    top: 4.75rem;
    width: calc(50% - 2rem - .75rem - 11px);
    height: calc(100% + var(--nx-stair-gap) + 2rem + 1px - 4.75rem);
    border-left: 2px solid var(--nx-accent);
    border-bottom: 2px solid var(--nx-accent);
    border-bottom-left-radius: 16px;
    pointer-events: none;
  }
  .nx-stair:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(50% - .75rem - 12px);
    top: calc(100% + var(--nx-stair-gap) + 2rem - 7px);
    width: 12px;
    height: 14px;
    background: var(--nx-accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
  }
}

/* ---------- Product tour ---------- */
.nx-tour__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.nx-tour__tab {
  padding: .625rem 1.125rem;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s var(--nx-ease);
}
.nx-tour__tab:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.nx-tour__tab[aria-selected="true"] { background: var(--nx-accent); color: var(--nx-accent-fg); }
.nx-tour__tab:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.nx-tour__panel:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 6px; border-radius: var(--nx-radius-lg); }
.nx-tour__copy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem 4rem;
  padding-top: 3rem;
}
.nx-tour__title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 700;
  color: inherit;
}
.nx-tour__lead { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.6; }
.nx-tour__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
.nx-tour__list li { display: flex; gap: .875rem; font-size: 1.0625rem; line-height: 1.5; }

/* ---------- Hosting points ---------- */
.nx-spec {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-spec__row {
  display: grid;
  grid-template-columns: auto minmax(0, 4fr) minmax(0, 6fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.nx-spec__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -.032em;
  font-weight: 700;
  color: inherit;
}
.nx-spec__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.nx-spec__cta { margin-top: clamp(3rem, 5vw, 4.5rem); }

/* ---------- Prose (about) ---------- */
.nx-prose { max-width: 68ch; }
@media (min-width: 992px) {
  .nx-prose--split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    max-width: none;
  }
  .nx-prose--split > div { max-width: 68ch; }
  .nx-prose--split > div > .nx-lead:first-child { margin-top: .5rem; }
}
.nx-prose .nx-lead { margin-top: 1.75rem; }
.nx-prose p:not(.nx-lead) { margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.7; }
.nx-prose a:not(.nx-link) { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.nx-prose p.nx-prose__more { margin-top: 2.25rem; }

/* ---------- Final CTA ---------- */
.nx-final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nx-final__title { max-width: 14ch; }
.nx-final .nx-lead { max-width: 40rem; margin-top: 1.5rem; }
.nx-final .nx-actions { margin-top: 2.5rem; }

/* ---------- Related pages (layout partial on the money pages) ---------- */
.nx-related { padding-block: clamp(4rem, 8vw, 6rem); }
.nx-related__title {
  margin: 0 0 2.5rem;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -.035em;
  font-weight: 750;
  color: inherit;
}
.nx-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-related__link { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; }
.nx-related__label { font-size: 1.125rem; font-weight: 700; }
.nx-related__label::after { content: " \2192"; display: inline-block; white-space: pre; transition: transform .15s var(--nx-ease); }
.nx-related__blurb { font-size: 1rem; }
.nx-related__link:hover { text-decoration: none; }
.nx-related__link:hover .nx-related__label::after { transform: translateX(4px); }
.nx-related__link:hover .nx-related__label { color: var(--nx-accent); }

/* ============================================================
   Page kit (subpages). Docs: docs/landing-page-kit.md. Partials: app/Views/partials/kit/*.
   Rules: paper/ink bands only, text is the band's opposite colour (no grey), blue accent ~10%,
   no eyebrows, no divider lines except 1px translucent --nx-line edges, no icon tiles, no cards
   except the pricing cards, slant cuts (partials/nx_slant.php) between bands.
   ============================================================ */

/* Redesigned pages (main.nx-main) sit on paper, not Tabler's off-white body. */
body:has(.nx-main) { background: var(--nx-paper); }

/* Page hero (kit/page_hero.php) */
.nx-page-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.nx-page-hero--center .nx-page-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nx-page-hero__title { max-width: 18ch; font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem); }
.nx-page-hero__lead { max-width: 44rem; margin-top: 1.5rem; }
.nx-page-hero .nx-actions { margin-top: 2.25rem; }
.nx-page-hero .nx-callout { margin-top: 2.25rem; max-width: 44rem; text-align: left; }
.nx-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .875rem; }
.nx-crumbs li + li::before { content: "/"; margin-right: .5rem; }
.nx-crumbs a { text-decoration: underline; text-underline-offset: .2em; }
.nx-crumbs a:hover { color: var(--nx-accent) !important; }
.nx-crumbs [aria-current] { font-weight: 600; }
/* A section that continues the band above it without its own top padding. */
.nx-section.nx-section--flush-top { padding-top: 0; }

/* Callout (kit/callout.php): thin translucent edge, accent icon. */
.nx-callout {
  display: flex;
  gap: .875rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--nx-line-strong);
  border-radius: 16px;
}
.nx-callout__icon { flex-shrink: 0; color: var(--nx-accent); }
.nx-callout__title { margin: 0 0 .25rem; font-weight: 700; }
.nx-callout__body { font-size: .9375rem; line-height: 1.55; }
.nx-callout__body a { text-decoration: underline; }

/* Pricing page extras around the shared cards. */
.nx-plan__note { margin: .5rem 0 0; font-size: .875rem; }
.nx-plans__after { margin-top: 2.5rem; text-align: center; font-size: .9375rem; }
.nx-plans__after p { margin: .25rem 0 0; }
.nx-plans__after .nx-plans__lead { font-size: 1.0625rem; font-weight: 700; }
.nx-plans__after a { text-decoration: underline; text-underline-offset: .2em; }
.nx-plan .btn.nx-plan__cta:disabled { opacity: 1; cursor: not-allowed; }

/* Feature list (kit/features.php): bare icons, plain text, no cards. */
.nx-features {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-feature__icon { margin-bottom: 1.25rem; }
.nx-feature__title { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 700; color: inherit; }
.nx-feature__text { margin: .75rem 0 0; font-size: 1.0625rem; line-height: 1.65; }

/* FAQ (kit/faq.php): native details, plus/minus marker, spacing instead of lines. */
.nx-faq { max-width: 52rem; margin-inline: auto; }
.nx-faq__item { padding-block: .25rem; }
.nx-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}
.nx-faq__q::-webkit-details-marker { display: none; }
.nx-faq__q::after {
  /* Chevron drawn with two borders (no image, CSP-safe); points down, flips up when open. */
  content: "";
  flex-shrink: 0;
  width: .7rem;
  height: .7rem;
  margin-right: .5rem;
  border-right: 2.5px solid var(--nx-accent);
  border-bottom: 2.5px solid var(--nx-accent);
  transform: translateY(-25%) rotate(45deg);
  transition: transform .2s ease;
}
.nx-faq__item[open] > .nx-faq__q::after { transform: translateY(25%) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .nx-faq__q::after { transition: none; } }
.nx-faq__q:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 4px; border-radius: 8px; }
.nx-faq__title { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 650; letter-spacing: -.015em; color: inherit; }
.nx-faq__a { padding: 0 3.25rem 1.25rem 0; font-size: 1.0625rem; line-height: 1.65; }
.nx-faq__a p { margin: 0; }

/* Related reading (kit/related.php) reuses .nx-related__* from the layout partial. */
.nx-related-kit .nx-related__title { text-align: left; }

/* Screenshot figure (kit/shot.php) */
.nx-shot { margin: 0; }
.nx-shot__caption { margin-top: 1rem; font-size: .9375rem; text-align: center; }

/* Comparison table: wrap in .nx-table-wrap (scrolls on narrow screens). Rows separated by thin
   translucent rules only; .nx-yes / .nx-no for check and cross cells. */
.nx-table-wrap { overflow-x: auto; }
.nx-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 1rem; }
.nx-table th,
.nx-table td { padding: .875rem 1rem; text-align: left; vertical-align: top; }
.nx-table thead th { font-weight: 700; }
.nx-table tbody tr { border-top: 1px solid var(--nx-line); }
.nx-table tbody th { font-weight: 600; }
.nx-yes { color: var(--nx-accent); font-weight: 700; }
.nx-no { font-weight: 400; }

/* Longform prose for guides and blog posts (.nx-longform). */
.nx-longform { max-width: 70ch; font-size: 1.125rem; line-height: 1.75; }
.nx-longform > * + * { margin-top: 1.25em; }
.nx-longform h2 { margin-top: 2.5em; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 750; color: inherit; }
.nx-longform h3 { margin-top: 2em; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; color: inherit; }
.nx-longform p, .nx-longform ul, .nx-longform ol { margin-bottom: 0; }
.nx-longform ul, .nx-longform ol { padding-left: 1.5em; }
.nx-longform li + li { margin-top: .4em; }
.nx-longform li::marker { color: var(--nx-accent); }
.nx-longform a { text-decoration: underline; text-underline-offset: .2em; font-weight: 500; }
.nx-longform a:hover { color: var(--nx-accent) !important; }
.nx-longform code { padding: .1em .35em; border: 1px solid var(--nx-line-strong); border-radius: 6px; font-family: var(--nx-mono); font-size: .875em; background: transparent; color: inherit; }
.nx-longform pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--nx-fg);
  color: var(--nx-bg);
  font-family: var(--nx-mono);
  font-size: .9375rem;
  line-height: 1.6;
}
.nx-longform pre code { padding: 0; border: 0; font-size: inherit; color: inherit; }
.nx-longform blockquote { margin-inline: 0; padding-left: 2.25rem; position: relative; font-size: 1.25rem; line-height: 1.55; font-weight: 500; }
.nx-longform blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.25rem; font-size: 3rem; line-height: 1; color: var(--nx-accent); }
.nx-longform table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.nx-longform th, .nx-longform td { padding: .75rem 1rem .75rem 0; text-align: left; vertical-align: top; }
.nx-longform tbody tr { border-top: 1px solid var(--nx-line); }
.nx-longform figure { margin-inline: 0; }
.nx-longform img { max-width: 100%; height: auto; border-radius: 14px; }
.nx-longform figcaption { margin-top: .75rem; font-size: .9375rem; text-align: center; }
.nx-longform .nx-callout { margin-block: 1.75rem; }

@media (max-width: 991.98px) {
  .nx-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .nx-features--2,
  .nx-features--3 { grid-template-columns: 1fr; }
  .nx-faq__a { padding-right: 0; }
  .nx-longform { font-size: 1.0625rem; }
}

/* ---------- Top navigation ---------- */
.navbar.nx-nav {
  --tblr-navbar-color: var(--nx-fg);
  --tblr-navbar-hover-color: var(--nx-fg);
  --tblr-navbar-active-color: var(--nx-fg);
  --tblr-navbar-padding-y: 0;
  --tblr-navbar-bg: var(--nx-bg);
  --tblr-navbar-active-bg: transparent;
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 4.25rem;
  border: 0;
  box-shadow: none;
}
/* Homepage: the nav overlaps the hero and is transparent while the page sits at the very top
   (nav-top.js toggles .is-top). Without JS it stays solid; an open menu or dropdown makes it solid. */
.navbar.nx-nav { transition: background-color .2s var(--nx-ease); }
body.nx-home .navbar.nx-nav { margin-bottom: -4.25rem; }
body.nx-home .nx-hero__top { padding-top: calc(clamp(3.5rem, 7vw, 6.5rem) + 4.25rem); }
body.nx-home .navbar.nx-nav.is-top:not(:has(.navbar-collapse.show, .navbar-collapse.collapsing, .dropdown-menu.show)) {
  background: transparent;
}
.nx-nav__inner {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
}
.nx-nav .navbar-brand { padding-block: 0; margin-right: 1.5rem; }
.nx-nav .nav-link { font-size: .9375rem; font-weight: 500; }
.nx-nav .navbar-nav .nav-link,
.nx-nav .navbar-nav .nav-link.show,
.nx-nav .navbar-nav .nav-link:focus { background: transparent; }
.nx-nav .nav-link:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
.nx-nav .nav-item.active .nav-link { font-weight: 700; }
.nx-nav .nav-item.active::after { display: none; }
@media (min-width: 992px) {
  .nx-nav .navbar-nav .nav-link { padding: .5rem .75rem; }
}
/* Narrow desktop: tighter links and no social icons, so the bar never overflows. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nx-nav .navbar-nav .nav-link { padding: .5rem .5rem; }
  .nx-nav a.nx-iconbtn { display: none !important; }
  .nx-nav .navbar-brand { margin-right: .75rem; }
}
.btn.nx-iconbtn {
  --tblr-btn-color: var(--nx-fg);
  --tblr-btn-hover-color: var(--nx-bg);
  --tblr-btn-hover-bg: var(--nx-fg);
  --tblr-btn-border-radius: 999px;
  --tblr-btn-box-shadow: none;
}
.nx-nav .navbar-toggler { border: 0; margin-right: .5rem; color: var(--nx-fg); }

/* Mega menu (Solutions, Resources): a full-width solid white panel under the bar, grouped columns,
   a one-line description per link, no dividers. Bootstrap's dropdown handles click, keyboard and
   aria-expanded (data-bs-display="static"); nav-mega.js adds hover on pointer devices. */
.dropdown-menu.nx-mega {
  --tblr-dropdown-bg: var(--nx-paper);
  --tblr-dropdown-color: var(--nx-ink);
  --tblr-dropdown-border-width: 0;
  --tblr-dropdown-box-shadow: none;
  --tblr-dropdown-link-color: var(--nx-ink);
  --tblr-dropdown-link-hover-color: var(--nx-accent);
  --tblr-dropdown-link-hover-bg: transparent;
  --tblr-dropdown-link-active-color: var(--nx-accent);
  --tblr-dropdown-link-active-bg: transparent;
  background: var(--nx-paper);
  color: var(--nx-ink);
}
.nx-mega__heading { margin: 0 0 .5rem; padding-inline: .75rem; font-size: .8125rem; font-weight: 700; }
.nx-nav .nx-mega .dropdown-item.nx-mega__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .125rem;
  padding: .5rem .75rem;
  text-align: left;
  border-radius: 10px;
  white-space: normal;
  color: var(--nx-ink);
  background: transparent;
}
.nx-mega__label { font-size: .9375rem; font-weight: 600; }
.nx-nav .nav-link:focus { outline: none; box-shadow: none; }
.nx-nav .nav-link:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; border-radius: 8px; }
.nx-mega__desc { font-size: .8125rem; line-height: 1.4; }
.nx-nav .nx-mega .dropdown-item.nx-mega__link:hover,
.nx-nav .nx-mega .dropdown-item.nx-mega__link:focus-visible { color: var(--nx-accent); background: transparent; }
.nx-nav .nx-mega .dropdown-item.nx-mega__link:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 0; }
.nx-mega__highlight {
  align-self: start;
  padding: 1.5rem;
  border-radius: 16px;
}
.nx-mega__hl-title { margin: 0; font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; }
.nx-mega__hl-text { margin: .5rem 0 1.25rem; font-size: .9375rem; line-height: 1.5; }
@media (min-width: 992px) {
  .nx-nav .nav-item.nx-mega-item { position: static; }
  .nx-nav .dropdown-menu.nx-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 1.75rem 0 2.25rem;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 28px 48px -28px rgba(0, 0, 0, .25);
  }
  .nx-mega__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }
}
@media (max-width: 991.98px) {
  .nx-nav__menu { padding-bottom: 1rem; }
  .nx-nav .navbar-brand { margin-right: auto; }
  .nx-nav__inner { flex-wrap: wrap; }
  .nx-nav .navbar-collapse .dropdown-menu.nx-mega { padding: 0 0 .5rem 1rem; margin: 0; background: transparent; }
  .nx-mega__inner { padding: 0; }
  .nx-mega__col + .nx-mega__col { margin-top: .75rem; }
  .nx-mega__desc,
  .nx-mega__highlight { display: none; }
  .nx-nav .navbar-collapse .nx-mega .dropdown-item.nx-mega__link { padding: .375rem .75rem; }
}
}

/* ---------- Footer ---------- */
.nx-footer {
  padding-block: clamp(4rem, 8vw, 6rem) 2.5rem;
  font-size: .9375rem;
}
.nx-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 3rem 4rem;
}
.nx-footer__logo { display: inline-block; }
.nx-footer__about { margin: 1.5rem 0 0; max-width: 22rem; line-height: 1.6; }
.nx-footer__social { display: flex; gap: .375rem; margin: 1.25rem 0 0 -.5rem; }
.nx-iconlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
}
.nx-iconlink .icon { width: 1.5rem; height: 1.5rem; }
.nx-band a.nx-iconlink:hover { background: var(--nx-fg); color: var(--nx-bg); }
.btn.nx-footer__withdraw { margin-top: 1.5rem; }
.nx-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.nx-footer__heading { margin: 0 0 1.125rem; font-size: 1rem; font-weight: 750; }
.nx-footer__links { margin: 0; padding: 0; list-style: none; }
.nx-footer__links li + li { margin-top: .625rem; }
.nx-footer a:not(.btn):not(.nx-iconlink):hover { text-decoration: underline; text-underline-offset: .25em; }
/* Trust highlights: one solid inverted strip. */
.nx-footer__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 4rem 0 0;
  padding: 1.5rem 2rem;
  list-style: none;
  border-radius: var(--nx-radius-lg);
  background: var(--nx-fg);
  color: var(--nx-bg);
}
.nx-footer__trust li { display: flex; align-items: center; justify-content: center; gap: .75rem; font-weight: 650; font-size: 1rem; }
.nx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 2rem;
}
.nx-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }

/* ---------- Cookie banner: an inverted solid block ---------- */
.card.nx-cookie {
  max-width: 64rem;
  margin-inline: auto;
  border: 0;
  border-radius: var(--nx-radius-lg);
  /* A ring in the opposite colour keeps the banner distinct when it floats over an ink band. */
  box-shadow: 0 0 0 2px var(--nx-fg);
}
.nx-cookie__title { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; color: inherit; }
.nx-cookie a { text-decoration: underline; }
.nx-cookie .btn-link { --tblr-btn-color: var(--nx-fg); --tblr-btn-hover-color: var(--nx-fg); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .nx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-tour__copy { grid-template-columns: 1fr; }
  .nx-stair,
  .nx-stair:nth-child(2),
  .nx-stair:nth-child(3) { grid-column: span 12; }
  .nx-stair:nth-child(2) { margin-left: 12%; }
  .nx-stair:nth-child(3) { margin-left: 24%; }
  .nx-spec__row { grid-template-columns: auto 1fr; }
  .nx-spec__text { grid-column: 2; }
  .nx-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-footer__top { grid-template-columns: 1fr; }
  .nx-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-footer__trust li { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
  .nx-tour__list { grid-template-columns: 1fr; }
  .nx-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-stair:nth-child(2),
  .nx-stair:nth-child(3) { margin-left: 0; }
  .nx-proof__list { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .nx-proof__item { gap: 1.25rem; }
  .nx-proof__item .nx-icon { width: 44px; height: 44px; }
  .nx-plans { grid-template-columns: 1fr; }
  .nx-stats { flex-direction: column; align-items: center; }
  .nx-nav .btn.nx-btn { --tblr-btn-padding-x: .875rem; }
  .nx-nav .navbar-toggler { margin-right: .25rem; }
  .nx-stair { flex-direction: column; gap: 1.25rem; }
  .nx-spec__row { grid-template-columns: 1fr; }
  .nx-spec__text { grid-column: auto; }
  .nx-related__list { grid-template-columns: 1fr; }
  .nx-footer__trust { grid-template-columns: 1fr; padding: 1.25rem 1.5rem; }
  .nx-actions--center { align-self: stretch; }
  .nx-actions--center .btn.nx-btn-lg { flex: 1 1 100%; }
  .nx-window { border-radius: 12px; }
  .nx-window__bar { height: 2.25rem; }
  .nx-window__bar::after { margin-right: 0; }
  .nx-cmd__code { font-size: .8125rem; }
  .nx-net { display: none; }
}

/* ---------- Motion (motion.js adds html.nx-motion only when motion is allowed; without it the
   page is static and complete) ---------- */
html.nx-motion .nx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--nx-ease), transform .6s var(--nx-ease);
}
html.nx-motion .nx-reveal.is-in { opacity: 1; transform: none; }
/* Step arrows draw themselves: down first, then right; the head appears last. */
@media (min-width: 992px) {
  html.nx-motion .nx-stair.nx-reveal:not(:last-child)::after { clip-path: inset(0 calc(100% - 2px) 100% 0); }
  html.nx-motion .nx-stair.nx-reveal:not(:last-child)::before { opacity: 0; }
  html.nx-motion .nx-stair.nx-reveal.is-in:not(:last-child)::after { animation: nx-draw-l .9s var(--nx-ease) .35s forwards; }
  html.nx-motion .nx-stair.nx-reveal.is-in:not(:last-child)::before { animation: nx-fade-in .2s linear 1.2s forwards; }
}
@keyframes nx-draw-l {
  0%   { clip-path: inset(0 calc(100% - 2px) 100% 0); }
  50%  { clip-path: inset(0 calc(100% - 2px) 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes nx-fade-in { to { opacity: 1; } }
/* Product tour: a soft crossfade when a panel is shown. */
html.nx-motion .nx-tour__panel:not([hidden]) { animation: nx-fade-up .35s var(--nx-ease); }
@keyframes nx-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .nx-link::after,
  .nx-related__label::after { transition: none; }
  .nx-link:hover::after,
  .nx-related__link:hover .nx-related__label::after { transform: none; }
}