/* ═══════════════════════════════════════════════════════════════════════════
   The redesigned sections.

   Scoped under .nxs so nothing here can reach the ported reference markup,
   which has its own class system and its own opinions. One prefix, one file,
   removable in one line if a section is dropped.

   Light by design: the reference site is light and these were drawn light.
   Colours are literal rather than tokenised because the previz pages do not
   load the product's token sheet — mixing the two systems is how a section
   ends up half-themed.
   ═══════════════════════════════════════════════════════════════════════ */

.nxs {
  --ink: #0B0B14;
  --ink2: #3F4152;
  --muted: #6B6E80;
  --faint: #9A9DAC;
  --line: #E8E9EF;
  --line2: #DFE1EA;
  --wash: #F7F8FA;
  /* Brand purple, not blue.
     These were #2563EB / #1D4ED8 / #EFF4FE — a blue that belongs to no part
     of this brand. Everything above these sections is indigo: the wordmark,
     the hero gradient, both Try NEXPMX buttons, the focus ring in the
     reference's own embedded stylesheet. So the page introduced itself in
     purple and then switched to blue halfway down, section by section, for
     every pill, every step number and every accent rule. */
  --accent: #3D7BF7;
  --accent-deep: #2C6BE0;
  --accent-wash: #EEF4FE;
  --ok: #16A34A;
  --warn: #B45309;
  --bad: #DC2626;

  background: #fff;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.nxs *, .nxs *::before, .nxs *::after { box-sizing: border-box; }

/* Every icon gets a size, whether or not a rule below names it.
   An inline SVG with no width expands to its container, and one of them filled
   an entire viewport with a smiley the size of a billboard. Same specificity as
   the rules that follow, so each of those still wins by order. */
.nxs svg { width: 18px; height: 18px; flex: 0 0 auto; }

.nxs-sec { padding: 96px 24px; }
.nxs-in { max-width: 1200px; margin: 0 auto; }
.nxs-sec.tint { background: var(--wash); }

/* ── Section heads ─────────────────────────────────────────────────────── */

.nxs-head { text-align: center; max-width: 860px; margin: 0 auto 54px; }
.nxs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line2); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 26px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); background: #fff;
}
.nxs-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.nxs-pill.flat { background: var(--accent-wash); border-color: transparent; }

.nxs-h2 {
  font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -1.4px;
  line-height: 1.1; margin: 0 0 18px; color: var(--ink);
}
.nxs-lead {
  font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.7; color: var(--muted);
  max-width: 720px; margin: 0 auto;
}
.nxs-head.left { text-align: left; margin-left: 0; }

/* ── Icon tiles ────────────────────────────────────────────────────────── */

.nxs-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--wash); border: 1px solid var(--line);
  color: var(--ink2);
}
.nxs-tile svg { width: 22px; height: 22px; }
.nxs-tile.accent { background: var(--accent-wash); border-color: transparent; color: var(--accent); }

/* ── 01 · Pillars ──────────────────────────────────────────────────────── */

.nxs-pillars {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
/* ── The principles, as flip cards ───────────────────────────────────────
   Front: the icon, the number and the principle. Back: what it means.

   The card is the perspective box and carries no background of its own — the
   two faces do, or the flip shows a white slab rotating behind them. A fixed
   min-height because absolutely-positioned faces contribute nothing to the
   grid's row height, and without one every card collapses to nothing.

   Opens on hover and on focus. Hover alone would make this a feature the
   whole of mobile cannot use.
   ──────────────────────────────────────────────────────────────────────── */
.nxs-pillar {
  border: 0; background: none; padding: 0; border-radius: 15px;
  perspective: 1100px;
  min-height: 244px;
  cursor: default;
}
.nxs-pillar:focus { outline: none; }
.nxs-pillar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 15px; }

.nxs-pillar-inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.22, .61, .36, 1);
}
.nxs-pillar:hover .nxs-pillar-inner,
.nxs-pillar:focus-within .nxs-pillar-inner { transform: rotateY(180deg); }

.nxs-pillar-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid var(--line); border-radius: 15px; background: #fff;
  padding: 24px 20px 26px;
  display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nxs-pillar:hover .nxs-pillar-face { box-shadow: 0 16px 34px -22px rgba(16, 18, 40, .55); }

/* The front face fills its height on purpose: icon at the top, the principle
   at the bottom. Left top-aligned, a 244px card holding four short lines reads
   as an empty box with something in one corner — most obvious on a phone,
   where the cards are one per row. */
.nxs-pillar-face.is-front .nxs-pillar-n { margin-top: auto; }

.nxs-pillar-face.is-back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: 16px;
  background: linear-gradient(158deg, #fff 0%, var(--accent-wash) 100%);
  border-color: var(--accent-wash);
}
.nxs-pillar-face.is-back .nxs-pillar-b {
  font-size: 14px; color: var(--ink2);
}

/* Safari keeps painting the hidden face through its sibling unless the
   rotating element is given its own layer. */
.nxs-pillar-inner, .nxs-pillar-face { will-change: transform; }

/* A flip is decorative. Where motion is unwelcome the back face still has to
   be reachable, so it cross-fades in place instead of rotating. */
@media (prefers-reduced-motion: reduce) {
  .nxs-pillar-inner { transition: none; }
  .nxs-pillar:hover .nxs-pillar-inner,
  .nxs-pillar:focus-within .nxs-pillar-inner { transform: none; }
  .nxs-pillar-face { backface-visibility: visible; transition: opacity .2s ease; }
  .nxs-pillar-face.is-back { transform: none; opacity: 0; }
  .nxs-pillar:hover .nxs-pillar-face.is-back,
  .nxs-pillar:focus-within .nxs-pillar-face.is-back { opacity: 1; }
  .nxs-pillar:hover .nxs-pillar-face.is-front,
  .nxs-pillar:focus-within .nxs-pillar-face.is-front { opacity: 0; }
}

.nxs-pillar-n {
  display: block; margin: 30px 0 10px;
  font-size: 12.5px; font-weight: 650; color: var(--accent);
}
.nxs-pillar-rule { height: 1px; background: var(--line); margin-bottom: 14px; }
.nxs-pillar-h {
  font-size: 16.5px; font-weight: 650; line-height: 1.3; margin: 0 0 10px;
  white-space: pre-line; letter-spacing: -.2px;
}
.nxs-pillar-b { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* One card per row on a phone, so six at desktop height is a long scroll past
   mostly-empty boxes. The longest back copy still fits at this height. */
@media (max-width: 640px) {
  .nxs-pillar { min-height: 186px; }
  .nxs-pillar-face { padding: 20px 18px 22px; }
}

.nxs .nxs-footline {
  margin-top: 58px; padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 15px; color: var(--ink2);
}
.nxs .nxs-footline i {
  width: 3px; height: 19px; border-radius: 2px; background: var(--accent); display: inline-block;
}

/* ── 02 · AI crew ──────────────────────────────────────────────────────── */

/* Five equal columns, because there are five agents. The old two-plus-three
   split across a centre column could never balance. Below 1180px they wrap in
   pairs rather than dropping straight to one, so a tablet does not get a
   five-storey stack. */
.nxs-crew {
  display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1180px) { .nxs-crew { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .nxs-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .nxs-crew { grid-template-columns: 1fr; } }

.nxs-agent {
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  padding: 20px 18px; display: flex; flex-direction: column; gap: 2px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.nxs-agent:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(16,18,40,.5); }

/* The colour is the employee's own, set inline from the product's catalog, so
   Vikram is the same green here as he is inside the app. The fallback matters
   for the other places this class is reused, which have no employee behind
   them. */
.nxs-av {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; color: #fff;
  margin-bottom: 13px; font-size: 20px; line-height: 1;
  background: linear-gradient(150deg, #A5B4FC, #2C6BE0);
  display: inline-flex; align-items: center; justify-content: center;
}
.nxs-av svg { width: 21px; height: 21px; }
.nxs-agent-n { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.nxs-agent-h { font-size: 16px; font-weight: 650; margin: 2px 0 12px; letter-spacing: -.2px; }
.nxs-handles { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nxs-handles li { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--ink2); }
.nxs-handles svg { width: 14px; height: 14px; color: var(--faint); flex: 0 0 auto; margin-top: 2px; }

/* The line from the crew down into the approval gate. */
.nxs-funnel {
  width: 1px; height: 46px; margin: 26px auto 0;
  background: linear-gradient(180deg, transparent, var(--line) 40%, var(--line));
}
@media (max-width: 820px) { .nxs-funnel { height: 30px; margin-top: 20px; } }

.nxs-gate {
  display: grid; gap: 24px; align-items: center; margin-top: 26px;
  grid-template-columns: 240px minmax(0, 1fr);
}
@media (max-width: 900px) { .nxs-gate { grid-template-columns: 1fr; } }

.nxs-gate-body { display: grid; gap: 16px; min-width: 0; }

.nxs-you {
  width: 200px; height: 200px; margin: 0 auto; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 20px 50px -34px rgba(16, 18, 40, .55);
}
.nxs-you svg { width: 27px; height: 27px; color: var(--ink); }
.nxs-you b { font-size: 17px; font-weight: 700; letter-spacing: .4px; }
.nxs-you span { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); }

.nxs-inbox { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.nxs-inbox-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint);
}
.nxs-inbox-row {
  display: grid; grid-template-columns: 128px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 15px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.nxs-inbox-row:last-child { border-bottom: 0; }
.nxs-inbox-who { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
/* Its own box, so a wrapped second line stays in the name's column instead of
   returning to the row's left edge and landing under the avatar. */
.nxs-inbox-name { min-width: 0; }
.nxs-inbox-who .nxs-av { width: 22px; height: 22px; }
.nxs-inbox-who .nxs-av svg { width: 13px; height: 13px; }
.nxs-inbox-what { color: var(--ink2); }
.nxs-state { font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.nxs-state.waiting { background: var(--accent-wash); color: var(--accent-deep); }
.nxs-state.ready { background: var(--wash); color: var(--muted); }
.nxs-state.escalated { background: #FEF1F1; color: var(--bad); }

.nxs-crewpills {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.nxs-crewpill {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
}
.nxs-crewpill svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; }

.nxs .nxs-close {
  margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 17px; font-weight: 650; line-height: 1.45; text-align: left;
}
.nxs .nxs-close svg { width: 27px; height: 27px; color: var(--accent); flex: 0 0 auto; }

/* ── 03 · Context ──────────────────────────────────────────────────────── */

.nxs-split { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 900px) { .nxs-split { grid-template-columns: 1fr; } }

.nxs-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 16px;
}

.nxs-panels { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); margin-top: 46px; }
.nxs-panel { border: 1px solid var(--line); border-radius: 17px; background: #fff; padding: 26px; }
.nxs-panel-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.nxs-panel-h { font-size: 20px; font-weight: 650; margin: 0 0 7px; letter-spacing: -.3px; }
.nxs-panel-b { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }

.nxs-query {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 1px solid var(--line2); border-radius: 11px; font-size: 13.5px; color: var(--ink2);
}
.nxs-query svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.nxs-query .x { margin-left: auto; color: var(--faint); }

.nxs-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 16px; }
.nxs-filter {
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.nxs-filter.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.nxs-hits { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.nxs-hit {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.nxs-hit:last-child { border-bottom: 0; }
.nxs-hit-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.nxs-hit-ic svg { width: 16px; height: 16px; }
.nxs-hit-ic.project { background: #F1F4FE; color: var(--accent); }
.nxs-hit-ic.decision { background: #FEF6E7; color: var(--warn); }
.nxs-hit-ic.document { background: #F4F1FE; color: #6D4AE0; }
.nxs-hit-ic.invoice { background: #ECFAF1; color: var(--ok); }
.nxs-hit-ic.note { background: var(--wash); color: var(--muted); }
.nxs-hit-kind { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.nxs-hit-t { font-size: 14px; font-weight: 600; margin: 2px 0 2px; }
.nxs-hit-m { font-size: 11.5px; color: var(--faint); }
.nxs-badge { font-size: 11px; font-weight: 650; color: var(--ok); display: inline-flex; align-items: center; gap: 5px; }
.nxs-badge svg { width: 14px; height: 14px; }

.nxs-tiles { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.nxs-mini { border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; }
.nxs-mini-l { font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 6px; }
.nxs-mini-v { font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.nxs-mini.danger .nxs-mini-v { color: var(--bad); }

.nxs-bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin: 18px 0 6px; }
.nxs-bars i { flex: 1; background: var(--line2); border-radius: 2px 2px 0 0; }
.nxs-bars i.on { background: var(--accent); }
.nxs-bars i.ghost { background: transparent; border-top: 2px dashed var(--line2); }

.nxs-attn { display: grid; gap: 9px; margin-top: 16px; }
.nxs-attn-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center;
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px;
}
.nxs-attn-row svg { width: 17px; height: 17px; }
.nxs-attn-row.warn svg { color: var(--warn); }
.nxs-attn-row.bad svg { color: var(--bad); }
.nxs-attn-row.info svg { color: var(--accent); }
.nxs-attn-t { font-size: 13.5px; font-weight: 600; }
.nxs-attn-m { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.nxs-tag { font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.nxs-tag.warn { background: #FEF6E7; color: var(--warn); }
.nxs-tag.bad { background: #FEF1F1; color: var(--bad); }
.nxs-tag.info { background: var(--accent-wash); color: var(--accent-deep); }

.nxs-panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px;
  font-size: 12.5px; color: var(--muted);
}
.nxs-cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 650;
  padding: 11px 17px; border-radius: 10px;
}
.nxs-cta svg { width: 16px; height: 16px; }
.nxs-cta:hover { background: var(--accent-deep); }

/* ── 04 · Why agencies switch ──────────────────────────────────────────── */

.nxs-why { display: grid; gap: 40px; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 950px) { .nxs-why { grid-template-columns: 1fr; } }
.nxs-why-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.nxs-why-card { border: 1px solid var(--line); border-radius: 15px; background: #fff; padding: 22px; }
.nxs-why-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 14px;
  background: var(--accent-wash); color: var(--accent);
  font-size: 12.5px; font-weight: 700;
}
.nxs-why-h { font-size: 16.5px; font-weight: 650; margin: 0 0 9px; letter-spacing: -.2px; }
.nxs-why-b { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.nxs-wordmark { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
.nxs-wordmark svg { width: 26px; height: 26px; color: var(--accent); }

/* ── 05 · Intake to payment ────────────────────────────────────────────── */

.nxs-app {
  border: 1px solid var(--line2); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 30px 70px -50px rgba(16, 18, 40, .6);
}

/* ── A real screen, framed ────────────────────────────────────────────────
   The CIO section shows an actual capture of the application rather than a
   dashboard drawn in JSX. The frame exists so a screenshot on a dark page
   reads as a window and not as a floating rectangle of unrelated colour: a
   title bar it belongs to, an edge, and a shadow that puts it above the
   section rather than printed on it.

   Tokens rather than literals, so this works if it is ever used on a light
   section too — the same image would not, but the frame would. */
.nxs-shot {
  margin: 0;
  border: 1px solid var(--line2);
  border-radius: 16px;
  overflow: hidden;
  background: var(--wash);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .85);
}
.nxs-shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
}
.nxs-shot-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line2);
  flex: 0 0 auto;
}
.nxs-shot-name {
  display: flex; align-items: center; gap: 7px;
  margin-left: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--faint);
  /* The bar is chrome, not content: it must not wrap and grow the frame. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxs-shot-name svg { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.nxs-shot-img {
  display: block;
  width: 100%;
  height: auto;
  /* The capture is 2880x1800. Without this the intrinsic ratio is honoured
     but the box jumps from zero to full height as it decodes, which moves
     everything below it while the page is still settling. */
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top center;
}
.nxs-app-body { padding: 22px; }
.nxs-strip-h, .nxs-layer-h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--accent);
}
.nxs-strip-h svg, .nxs-layer-h svg { width: 15px; height: 15px; }
.nxs-strip-sub { font-size: 12px; color: var(--faint); margin: 0 0 14px; }
.nxs-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); margin-bottom: 26px; }
.nxs-strip-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--wash); }
.nxs-strip-t { font-size: 12.5px; font-weight: 650; }
.nxs-strip-m { font-size: 10.5px; color: var(--faint); margin-top: 3px; }

.nxs-pipe { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); margin-bottom: 26px; }
.nxs-stage { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
.nxs-stage.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.nxs-stage-l { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); }
.nxs-stage-t { font-size: 15px; font-weight: 650; margin: 7px 0 8px; letter-spacing: -.2px; }
.nxs-stage-m { font-size: 11px; color: var(--faint); }
.nxs-stage-s {
  display: inline-block; font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-deep); margin-bottom: 8px;
}

.nxs-layer { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.nxs-layer-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.nxs-layer-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.nxs-layer-top .nxs-av { width: 26px; height: 26px; }
.nxs-layer-top .nxs-av svg { width: 15px; height: 15px; }
.nxs-layer-n { font-size: 13.5px; font-weight: 650; }
.nxs-layer-w { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.nxs-layer-f {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--faint);
}
.nxs-review { font-size: 10.5px; font-weight: 650; color: var(--accent); border: 1px solid var(--line2); border-radius: 7px; padding: 3px 9px; }
.nxs-app-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--wash);
  font-size: 12.5px; color: var(--muted);
}
.nxs-app-foot svg { width: 15px; height: 15px; }

/* ── 06 · Ask your business ────────────────────────────────────────────── */

.nxs-asks { display: grid; gap: 12px; }
.nxs-ask {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 18px;
}
@media (max-width: 820px) { .nxs-ask { grid-template-columns: 28px 1fr; } }
.nxs-ask-n { font-size: 11.5px; font-weight: 700; color: var(--faint); }
.nxs-ask-l { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 6px; }
.nxs-ask-q { font-size: 15px; font-weight: 650; line-height: 1.4; letter-spacing: -.2px; }
.nxs-ask-a { font-size: 15px; font-weight: 650; line-height: 1.4; white-space: pre-line; }
.nxs-ask-d { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 4px; }
.nxs-ask-d li { font-size: 12.5px; color: var(--muted); display: flex; gap: 7px; }
.nxs-ask-d li::before { content: "·"; color: var(--accent); }
.nxs-ask-s { font-size: 11px; color: var(--faint); margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.nxs-ask-act { font-size: 12.5px; font-weight: 650; color: var(--accent); white-space: nowrap; }

.nxs-flow { display: flex; align-items: center; gap: 14px; margin: 28px 0; flex-wrap: wrap; }
.nxs-flow-step { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.nxs-flow-step span { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); }
.nxs-flow-arrow { color: var(--line2); }
.nxs-flow-arrow svg { width: 30px; height: 18px; }
.nxs-hr { height: 1px; background: var(--line); margin: 26px 0; }

/* ── 07 · Chief Intelligence Officer ───────────────────────────────────── */

.nxs-cio { display: grid; gap: 34px; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 1000px) { .nxs-cio { grid-template-columns: 1fr; } }
.nxs-traits { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.nxs-traits li { display: flex; gap: 12px; align-items: flex-start; }
.nxs-traits svg { width: 19px; height: 19px; color: var(--accent); margin-top: 2px; flex: 0 0 auto; }
.nxs-trait-t { font-size: 14px; font-weight: 650; }
.nxs-trait-m { font-size: 12px; color: var(--faint); }

.nxs-dash { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
@media (max-width: 820px) { .nxs-dash { grid-template-columns: 1fr; } }
.nxs-rail { background: #0E1018; color: #C9CDDA; padding: 18px 13px; }
.nxs-rail-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.nxs-rail-ws { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #6B7186; }
.nxs-rail-name { font-size: 12.5px; font-weight: 600; color: #fff; margin: 3px 0 18px; }
.nxs-rail-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; font-size: 12.5px; }
.nxs-rail-item.on { background: rgba(37, 99, 235, .22); color: #fff; }
.nxs-rail-item svg { width: 15px; height: 15px; opacity: .8; }

.nxs-dash-main { padding: 20px; background: var(--wash); }
.nxs-dash-h { font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 3px; }
.nxs-dash-s { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.nxs-cio-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: 18px; }
.nxs-cio-tile { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; }
.nxs-cio-v { font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.nxs-cio-l { font-size: 11.5px; color: var(--muted); white-space: pre-line; margin: 5px 0 8px; line-height: 1.35; }
.nxs-cio-a { font-size: 11.5px; font-weight: 600; color: var(--accent); }

.nxs-dash-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .nxs-dash-split { grid-template-columns: 1fr; } }
.nxs-box { border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 15px; }
.nxs-box-h { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); margin-bottom: 11px; }
.nxs-askbox { border: 1px solid var(--line2); border-radius: 11px; padding: 14px; font-size: 13px; color: var(--faint); margin-bottom: 11px; }
.nxs-prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.nxs-prompt { font-size: 11.5px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--ink2); }
.nxs-src { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.nxs-src:last-child { border-bottom: 0; }
.nxs-src svg { width: 15px; height: 15px; color: var(--faint); flex: 0 0 auto; }
.nxs-src-m { font-size: 10.5px; color: var(--faint); }
.nxs-intel { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.nxs-intel:last-child { border-bottom: 0; }
.nxs-intel svg { width: 16px; height: 16px; color: var(--accent); margin-top: 2px; flex: 0 0 auto; }
.nxs-intel-t { font-size: 13px; font-weight: 600; }
.nxs-intel-m { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.nxs-intel-w { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.nxs-dash-foot {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line);
}
.nxs-dash-foot > div { display: flex; gap: 12px; align-items: flex-start; }
.nxs-dash-foot svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* ═══ Motion ══════════════════════════════════════════════════════════════
   Reveals, and the states the interactive parts need. Everything here is
   suppressed under prefers-reduced-motion at the bottom of the file — a
   marketing page is not worth making someone ill over.
   ═══════════════════════════════════════════════════════════════════════ */

/* Only hidden once JavaScript says it can put them back. Without the
   attribute a card is visible, which is what a background tab, a failed
   bundle and a stalled observer all look like. */
[data-nxs-motion] .nxs-rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, .8, .3, 1) var(--d, 0ms),
              transform .55s cubic-bezier(.22, .8, .3, 1) var(--d, 0ms);
}
[data-nxs-motion] .nxs-rv.in { opacity: 1; transform: none; }

/* The drifting point field. Behind everything, and never in the way of a
   pointer — the section above it still has to be clickable. */
.nxs-sec.has-field { position: relative; overflow: hidden; }
.nxs-sec.has-field > .nxs-in { position: relative; z-index: 1; }
.nxs-field {
  position: absolute; inset: 0; pointer-events: none;
  /* Faded at the edges so the field reads as depth rather than as a box. */
  -webkit-mask-image: radial-gradient(120% 85% at 50% 45%, #000 42%, transparent 78%);
  mask-image: radial-gradient(120% 85% at 50% 45%, #000 42%, transparent 78%);
}
.nxs-field canvas { width: 100%; height: 100%; display: block; }

/* ── Inbox ─────────────────────────────────────────────────────────────── */

/* The name column sizes to the longest name rather than a guessed 124px.
   At 124px, minus the 22px avatar and its 8px gap, a name had 94px — and
   "Knowledge Agent" needs about 118px, so it wrapped to two lines on every
   viewport, pushing that row taller than its neighbours and reading as the
   avatar and the text running into each other. max-content measures the real
   longest name, so adding a longer one later widens the column instead of
   silently wrapping. */
.nxs-inbox-row {
  grid-template-columns: minmax(124px, max-content) 1fr auto auto;
  transition: opacity .3s ease;
}
.nxs-inbox-row.done { opacity: .55; }
.nxs-inbox-row.done .nxs-inbox-what { text-decoration: line-through; }
.nxs-state.approved { background: #ECFAF1; color: var(--ok); }
.nxs-approve {
  font-size: 11px; font-weight: 650; padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--line2); background: #fff; color: var(--accent); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.nxs-approve:hover { background: var(--accent-wash); border-color: var(--accent); }
.nxs-approve:active { transform: scale(.96); }
.nxs-inbox-clear {
  display: flex; align-items: center; gap: 9px; padding: 14px 15px;
  font-size: 12.5px; color: var(--ok); background: #F6FCF8; border-top: 1px solid var(--line);
}
.nxs-inbox-clear svg { color: var(--ok); }

/* ── Search ────────────────────────────────────────────────────────────── */

.nxs-query.live { transition: border-color .18s ease, box-shadow .18s ease; }
.nxs-query.live:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.nxs-query input {
  flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink);
  min-width: 0;
}
.nxs-query input::placeholder { color: var(--faint); }
.nxs-query .x { background: none; border: 0; cursor: pointer; color: var(--faint); font-size: 13px; }
.nxs-filter { cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.nxs-filter:hover:not(.on) { border-color: var(--line2); color: var(--ink2); }
.nxs-empty { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--faint); }

/* ── Pipeline ──────────────────────────────────────────────────────────── */

.nxs-stage {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  font: inherit; color: inherit; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nxs-stage:hover { transform: translateY(-2px); border-color: var(--line2); }
.nxs-stage.past { background: var(--wash); }
.nxs-stage.on { transform: translateY(-3px); }
.nxs-progress { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-bottom: 26px; }
.nxs-progress i {
  display: block; height: 100%; background: var(--accent); border-radius: 2px;
  transition: width .45s cubic-bezier(.22, .8, .3, 1);
}

/* ── Ask list ──────────────────────────────────────────────────────────── */

.nxs-ask { display: block; padding: 0; overflow: hidden; transition: border-color .2s ease; }
.nxs-ask.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.nxs-ask-btn {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  width: 100%; padding: 18px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.nxs-ask-btn .nxs-ask-l, .nxs-ask-btn .nxs-ask-q { display: block; }
.nxs-ask-chev { color: var(--faint); transition: transform .28s cubic-bezier(.22, .8, .3, 1); }
.nxs-ask.open .nxs-ask-chev { transform: rotate(90deg); color: var(--accent); }
/* Height, capped.
   The 0fr/1fr grid trick was here first and collapsed to an 18px row instead
   of sizing to its 258px of content — fr resolves against the container, and
   this container has no height of its own to resolve against. A max-height
   large enough to clear the tallest answer always opens; the cost is that the
   easing is very slightly off for the shorter ones, which nobody can see. */
.nxs-ask-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .38s cubic-bezier(.22, .8, .3, 1), opacity .26s ease;
}
.nxs-ask.open .nxs-ask-body { max-height: 420px; opacity: 1; }
.nxs-ask-inner { padding: 0 18px; }
.nxs-ask.open .nxs-ask-inner { padding-bottom: 18px; }

/* ── CIO ask ───────────────────────────────────────────────────────────── */

.nxs-prompt { cursor: pointer; background: #fff; font: inherit; transition: border-color .15s ease, background .15s ease; }
.nxs-prompt:hover { border-color: var(--accent); color: var(--accent); }
.nxs-prompt.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nxs-askbox { min-height: 92px; transition: border-color .2s ease; }
.nxs-answer strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 7px; }
.nxs-answer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nxs-answer li { font-size: 12px; color: var(--muted); display: flex; gap: 7px; }
.nxs-answer li::before { content: "·"; color: var(--accent); }
.nxs-thinking { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.nxs-thinking i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: nxs-pulse 1.05s infinite ease-in-out;
}
.nxs-thinking i:nth-child(2) { animation-delay: .16s; }
.nxs-thinking i:nth-child(3) { animation-delay: .32s; margin-right: 6px; }
@keyframes nxs-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ── Bars ──────────────────────────────────────────────────────────────── */

.nxs-bars i { transition: height .7s cubic-bezier(.22, .8, .3, 1); }

/* ═══ Reduced motion ══════════════════════════════════════════════════════
   Not "less" — none. The reveals resolve, the transitions stop, and
   FloatingField never loads three.js at all.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .nxs *, .nxs *::before, .nxs *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .nxs-rv { opacity: 1; transform: none; }
}

/* ── The point field behind the revenue globe ──────────────────────────── */

/* The wrapper is the reference's, so it is given a stacking context here
   rather than in their stylesheet — the field has to sit behind the globe
   canvas without either of them being repositioned. */
.nxs-globe-host { position: relative; }
.nxs-globe-host > .nxs-field { z-index: 0; }
.nxs-globe-host > #jb-outer, .nxs-globe-host > .globe-frame { position: relative; z-index: 1; }
/* Its own background must not paint over the field. */
.nxs-globe-host { background: transparent; }

/* ═══ Dark sections ═══════════════════════════════════════════════════════
   Seven white sections in a row read as one long slab, and the reference
   alternates. This inverts the palette rather than restyling anything: every
   rule above reads from the same custom properties, so a section becomes dark
   by redefining them, and nothing below needs to know.
   ═══════════════════════════════════════════════════════════════════════ */

.nxs-sec.dark {
  --ink: #F2F3F8;
  --ink2: #C3C7D6;
  --muted: #9297AB;
  --faint: #6E748A;
  --line: #23273A;
  --line2: #2E3348;
  --wash: #14172480;
  --accent: #7FA6FF;
  --accent-deep: #A8C3FF;
  --accent-wash: #1B2440;

  background: #0B0D16;
  color: var(--ink);
}
.nxs-sec.dark.tint { background: #0E111C; }

/* Surfaces that were white have to follow, since white is the one value not
   expressed as a token — it is the page, not a colour choice. */
.nxs-sec.dark .nxs-pillar,
.nxs-sec.dark .nxs-agent,
.nxs-sec.dark .nxs-inbox,
.nxs-sec.dark .nxs-panel,
.nxs-sec.dark .nxs-why-card,
.nxs-sec.dark .nxs-app,
.nxs-sec.dark .nxs-box,
.nxs-sec.dark .nxs-ask,
.nxs-sec.dark .nxs-stage,
.nxs-sec.dark .nxs-crewpill,
.nxs-sec.dark .nxs-mini,
.nxs-sec.dark .nxs-attn-row,
.nxs-sec.dark .nxs-layer-card,
.nxs-sec.dark .nxs-cio-tile,
.nxs-sec.dark .nxs-pill,
.nxs-sec.dark .nxs-prompt,
.nxs-sec.dark .nxs-approve { background: #12151F; }

/* The human-approval circle carries the illustration.
   ──────────────────────────────────────────────────
   Layered, not replaced: the scrim gradient is listed first so YOU and HUMAN
   APPROVAL stay legible over whatever the artwork is doing underneath, and the
   flat colour stays last so the circle still looks deliberate if the image is
   missing or has not loaded. Drop the file in as the path below and it
   appears; nothing else has to change. */
.nxs-sec.dark .nxs-you {
  /* The caption sits along the base, not across the middle.
     Centred, it landed squarely on the face — the one thing the illustration
     is about — and a scrim strong enough to carry white text turned that face
     into a smudge. This gradient rises from the bottom and is gone by 58%, so
     the person and the ring of icons are untouched and YOU still reads.

     A 512px WebP, 22KB, derived from the 1254px 209KB source next to it —
     about ten times the pixels and ten times the bytes this circle needs at
     the 200px it is drawn.

     One image layer, not two. Listing the JPEG underneath as a fallback looks
     free and is not: a browser fetches every background layer it is given,
     not just the one that ends up on top, so the pair downloaded 231KB to
     show 22KB of it. Every browser that can render this page reads WebP. The
     JPEG stays in the repo as the source the WebP is made from. */
  background:
    linear-gradient(to top, rgba(6, 8, 18, .94) 0%, rgba(6, 8, 18, .86) 22%, rgba(6, 8, 18, .40) 42%, rgba(6, 8, 18, .06) 58%, rgba(6, 8, 18, 0) 72%),
    url("/previz/assets/usericon.webp") center / cover no-repeat,
    #12151F;
  justify-content: flex-end;
  padding-bottom: 19px;
  gap: 2px;
  box-shadow: 0 20px 50px -30px #000;
  overflow: hidden;
}
/* The illustration has a person at its centre, so the circle's own person
   glyph was a second one drawn on top of the first. The caption is what this
   circle is for; the artwork is behind it. */
.nxs-sec.dark .nxs-you svg { display: none; }
.nxs-sec.dark .nxs-you b {
  color: #fff; font-size: 19px; letter-spacing: .6px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.nxs-sec.dark .nxs-you span {
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.nxs-sec.dark .nxs-strip-card,
.nxs-sec.dark .nxs-stage.past { background: #161A26; }
.nxs-sec.dark .nxs-dash-main { background: #0E111C; }
.nxs-sec.dark .nxs-app-foot { background: #0E111C; }
.nxs-sec.dark .nxs-hit-ic.project,
.nxs-sec.dark .nxs-hit-ic.decision,
.nxs-sec.dark .nxs-hit-ic.document,
.nxs-sec.dark .nxs-hit-ic.invoice,
.nxs-sec.dark .nxs-hit-ic.note { background: #1A1F2E; }
.nxs-sec.dark .nxs-inbox-clear { background: #10201880; }
.nxs-sec.dark .nxs-askbox,
.nxs-sec.dark .nxs-query { background: #12151F; border-color: var(--line2); }
.nxs-sec.dark .nxs-query input { color: var(--ink); }
.nxs-sec.dark .nxs-filter { background: #12151F; }
.nxs-sec.dark .nxs-filter.on,
.nxs-sec.dark .nxs-prompt.on { background: var(--accent); color: #0B0D16; }
.nxs-sec.dark .nxs-cta { background: var(--accent); color: #0B0D16; }
.nxs-sec.dark .nxs-cta:hover { background: var(--accent-deep); }
.nxs-sec.dark .nxs-rail { background: #060810; }
.nxs-sec.dark .nxs-tag.warn { background: #2A1F0C; }
.nxs-sec.dark .nxs-tag.bad,
.nxs-sec.dark .nxs-state.escalated { background: #2A1416; color: #FF9AA2; }
.nxs-sec.dark .nxs-state.approved,
.nxs-sec.dark .nxs-badge { color: #5BD69A; }
.nxs-sec.dark .nxs-state.approved { background: #0F2418; }
.nxs-sec.dark .nxs-bars i { background: var(--line2); }
.nxs-sec.dark .nxs-bars i.on { background: var(--accent); }
.nxs-sec.dark .nxs-tableRowAlt, .nxs-sec.dark .nxs-stage.on { box-shadow: 0 0 0 3px var(--accent-wash); }

/* ── Product screenshots ───────────────────────────────────────────────── */

.nxs-shot {
  margin: 0; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden;
  background: var(--wash);
  box-shadow: 0 40px 80px -60px rgba(10, 12, 30, .65);
}
.nxs-shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--wash);
}
.nxs-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.nxs-shot-bar i:first-child { background: #FF5F57; }
.nxs-shot-bar i:nth-child(2) { background: #FEBC2E; }
.nxs-shot-bar i:nth-child(3) { background: #28C840; }
.nxs-shot img { display: block; width: 100%; height: auto; }
.nxs-sec.dark .nxs-shot { border-color: #262B3D; background: #0E111C; }
.nxs-sec.dark .nxs-shot-bar { background: #0E111C; border-color: #23273A; }

/* Screenshots sit apart from the content above them, and never wider than the
   column — a 2880px capture at its natural size would break the page. */
.nxs-shot { margin-top: 46px; max-width: 100%; }
.nxs-panels + .nxs-shot, .nxs-why + .nxs-shot { margin-top: 40px; }

/* ═══ Header nav ══════════════════════════════════════════════════════════
   The open states the reference never had. It animated the mega-nav from
   GSAP with inline styles, so its stylesheet carries no rule for an open
   panel — the markup ported across and arrived inert.

   Not under .nxs: these have to reach the generated header, which is outside
   that wrapper. Every selector is anchored to .mega-nav instead.
   ═══════════════════════════════════════════════════════════════════════ */

.mega-nav .mega-nav__dropdown-container {
  height: 0;
  overflow: hidden;
  transition: height .32s cubic-bezier(.22, .8, .3, 1);
}
.mega-nav .mega-nav__dropdown-panel {
  visibility: hidden;
  opacity: 0;
  /* The reference sets pointer-events: none here and turns it back on from
     GSAP, which was never ported. Restated so the closed panel cannot swallow
     clicks meant for the page behind it. */
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s;
}
/* Each toggle owns a panel; only the open one is shown.
   ─────────────────────────────────────────────────────
   pointer-events is the one that matters. Without it the open panel was
   visible and completely transparent to the mouse: nothing in it could be
   clicked, and because the panel never received mouseenter, the 180ms grace
   period in MegaNav.tsx that is supposed to survive the trip from the button
   down into the panel never got cancelled — so the menu closed under the
   cursor on the way to it. Two symptoms, one missing line. */
.mega-nav .mega-nav__dropdown-panel[data-panel-open] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mega-nav .mega-nav__dropdown-panel[data-panel-open] .mega-nav__panel-col {
  visibility: visible;
}

.mega-nav [data-dropdown-toggle] { cursor: pointer; }
.mega-nav [data-dropdown-toggle].is-open { color: var(--nx-accent, #3D7BF7); }

/* The burger, and the list it opens. Hidden above the breakpoint, where the
   bar itself is the navigation. */
.mega-nav .mega-nav__burger { cursor: pointer; }
@media (max-width: 900px) {
  .mega-nav [data-nav-list] {
    display: none;
  }
  /* Fixed, so the nesting stops mattering.
     The list lives inside the brand block, which is position: relative, so an
     absolute "top: 100%" meant "below the logo" — 53px — and the menu opened
     halfway up the header. Making that block static did fix the offset and
     took the logo out of the header with it. Positioning against the viewport
     sidesteps the whole question; the header is fixed at the top and 72px
     tall, so that is where the menu starts. */
  .mega-nav[data-mobile-open] [data-nav-list] {
    display: block;
    position: fixed;
    left: 0; right: 0; top: 72px;
    /* bottom: auto, or the reference's own inset stretches this to the floor
       and the menu becomes a full white screen with four links at the top. */
    bottom: auto;
    /* The reference pins this to a 33px-tall bar and scrolls the overflow, so
       the open menu was a 33px letterbox with the links scrolled out of it. */
    height: auto;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid #E8E9EF;
    padding: 12px 20px 20px;
    box-shadow: 0 24px 48px -32px rgba(10, 12, 30, .45);
  }

  /* display was not enough.
     At this width the reference hides the bar with opacity and visibility as
     well, and animated all three back with GSAP — which was never ported. So
     the burger opened a menu that took up space, held its links, reported
     them to the accessibility tree, and could not be seen or tapped. The
     children carry their own visibility: hidden, so each level needs saying.
     Same omission as the dropdown panel's pointer-events, one breakpoint
     down. */
  .mega-nav[data-mobile-open] [data-nav-list],
  .mega-nav[data-mobile-open] [data-nav-list] .mega-nav__bar-list,
  .mega-nav[data-mobile-open] [data-nav-list] .mega-nav__bar-list-item,
  .mega-nav[data-mobile-open] [data-nav-list] .mega-nav__bar-link {
    opacity: 1;
    visibility: visible;
  }

  /* Stacked, not in a row: this is a column of links now, not a bar. */
  .mega-nav[data-mobile-open] [data-nav-list] .mega-nav__bar-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .mega-nav[data-mobile-open] [data-nav-list] .mega-nav__bar-list.is--actions {
    flex-direction: row;
    gap: 10px;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-nav .mega-nav__dropdown-container,
  .mega-nav .mega-nav__dropdown-panel { transition-duration: .001ms !important; }
}

/* ── Product gallery ──────────────────────────────────────────────────────
   Replaces the simulated desktop that used to sit under "Everything your
   business runs on". The section is transparent down to the white body — the
   purple above it is the hero's fade — so this is a light surface. */
.nxs-gallery { margin-top: 36px; }
.nxs-gallery-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 26px;
}
.nxs-gallery-tab {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  color: #444B60;
  background: #fff;
  border: 1px solid #E3E6EF;
  border-radius: 999px; padding: 11px 20px;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nxs-gallery-tab:hover { color: #12162A; border-color: #C4CADB; }
.nxs-gallery-tab.is-active {
  color: #fff; background: #12162A; border-color: #12162A;
}
.nxs-gallery-tab:focus-visible { outline: 2px solid #3d7bf7; outline-offset: 2px; }
.nxs-gallery-panel .nxs-shot {
  margin-top: 0; max-width: 1100px; margin-inline: auto;
}
@media (max-width: 600px) {
  .nxs-gallery-tab { font-size: 13px; padding: 9px 15px; }
}

/* The credit allowance, stated on each plan card where a reader looks for the
   price. Shared by the homepage and the pricing page so the two cannot drift. */
.nx-price-credits {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: #2C6BE0; background: #EEF4FE;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 22px;
}

/* ── The Modules dropdown, redesigned ─────────────────────────────────────
   It was built for five columns and now holds two, so it kept the width of
   the old one and spread ten links across a third of it — a 3/3/3/1 grid with
   a ragged last row, and a flat blue rectangle standing in for a video beside
   it. Whatever was there before, the panel now reads as something left over
   from a bigger menu.

   Redrawn for what it actually contains: the modules, in an even grid that
   fills its rows. "How it works" and the video that sat beside them are gone
   too — a menu is for going somewhere, not for watching something.
   ──────────────────────────────────────────────────────────────────────── */

.mega-nav .mega-nav__dropdown-inner {
  /* One column. "How it works" and its video came out — the panel is a
     module list and nothing else, so it should not be laid out as a grid
     with a hole where the second column used to be. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 60rem;
  padding: 2.25rem 0 2rem;
}

/* Two columns, not three.
   Ten modules across three columns is three full rows and one orphan sitting
   alone at the bottom — which is what it looked like, and auto-fit did not
   help because the orphan is arithmetic, not width. Two columns of five is
   even, and leaves the rows long enough for the descriptions to sit on one
   line instead of wrapping. */
.mega-nav .mega-nav__panel-list._3-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 1.25rem;
  grid-row-gap: 0.25rem;
}

.mega-nav .mega-nav__panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint, #9A9DAC);
  margin-bottom: .85rem;
  display: block;
}

/* Each row becomes a target rather than a line of text with a picture. */
.mega-nav .mega-nav__panel-link {
  border-radius: 11px;
  padding: 9px 12px;
  align-items: flex-start;
  transition: background-color .14s ease, color .14s ease;
}
.mega-nav .mega-nav__panel-link:hover { background: #F4F5FB; }

/* ── The icons come off ───────────────────────────────────────────────────
   Every module carried one and not one of them was drawn for this product.
   Ten links, and the pictures beside them were an ad-tool template's
   ("Ad Library", "Advertiser Tracker", "Sales Tracker", "Shop library") mixed
   with stock photography from a bar supplier — projector.webp, bottle.webp,
   shots.webp, glass.webp, wine-dispenser-1.webp, ice-breaker.webp,
   candy-gun.webp, drone.webp, atm.webp.

   So somebody opening Modules on a business operations platform was shown a
   wine dispenser next to GST Invoicing. That is not decoration that could be
   better, it is decoration that argues against the product, and ten words set
   properly say more than ten wrong pictures.

   The tags are gone from the markup as well — 450 of them across 45 files,
   because this header is duplicated into every generated page. Hiding them in
   CSS alone was not enough: display:none does not stop a browser fetching an
   image, so all ten were still downloaded on every page load to be painted
   nowhere.

   This rule stays as a backstop. The generated files come from a port script,
   and if anybody ever re-runs it the icons return; better that they return
   invisible than that a wine dispenser turns up next to GST Invoicing again. */
.mega-nav .mega-nav__panel-icon { display: none; }

/* ── The badges quieten down ──────────────────────────────────────────────
   HOT, TRENDING and NEW came from the same template, and HOT arrived with a
   flame that animates on a keyframe loop. A navigation menu is a thing people
   read on the way somewhere else; something flickering in it is not urgency,
   it is an obstacle. The words stay, small and still, because "NEW" beside a
   module is worth knowing. The flame goes. */
.mega-nav .mega-nav__panel-item .badge-icon-wrap,
.mega-nav .mega-nav__panel-item .badge-inner-icon { display: none; }
.mega-nav .mega-nav__panel-item .badge {
  border-radius: 999px;
  padding: 1px 7px;
}
.mega-nav .mega-nav__panel-item .badge-text {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* With no picture holding the left edge, the type has to hold it instead. */
.mega-nav .mega-nav__panel-text-wrap { width: 100%; }
.mega-nav .mega-nav__panel-top-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega-nav .mega-nav__panel-link-text {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.008em;
}
.mega-nav .mega-nav__panel-link:hover .mega-nav__panel-link-text { color: #2C6BE0; }
.mega-nav .mega-nav__panel-link-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #6B6E80);
}
/* The reference animates a background block behind each row on hover. With a
   real hover state above it, two things now fight over the same rectangle. */
.mega-nav .mega-nav__link-bg { display: none; }


@media (max-width: 1100px) {
  .mega-nav .mega-nav__panel-list._3-column { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Intelligence — the long-form section.

   Quieter than the rest of the site by design. Everything else here is a
   landing page and behaves like one: full-bleed artwork, a CTA every second
   screen, sections competing for attention. This is nine minutes of prose, and
   prose has one requirement the marketing pages do not — you have to be able
   to stay in it.

   So the column is narrow, the leading is long, and the accent appears in
   exactly three places: the eyebrow, the section marks, and the rule beside a
   pulled line. The photographs carry the visual weight instead, which is what
   photographs are for.
   ═════════════════════════════════════════════════════════════════════════ */

.nxi,
.nxi-index {
  --nxi-ink: #111118;
  --nxi-body: #2E3140;
  --nxi-muted: #6B6E80;
  --nxi-line: #E6E7EE;
  --nxi-blue: #2C6BE0;
  --nxi-tint: rgba(44, 107, 224, .08);
  --nxi-wash: #F8F8FA;
}

/* ── The index ──────────────────────────────────────────────────────────── */

.nxi-index { padding: 4.5rem 0 6rem; }
.nxi-index__head { max-width: 44rem; margin-bottom: 2.5rem; }
.nxi-index__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nxi-blue); margin: 0 0 1rem;
}
.nxi-index__title {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em;
  color: var(--nxi-ink); text-wrap: balance; margin: 0 0 1rem;
}
.nxi-index__deck {
  font-size: 1.125rem; line-height: 1.6; color: var(--nxi-muted); margin: 0;
}

/* ── Memory → Intelligence → Action, drawn ─────────────────────────────── */

.nxi-spine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 2.5rem 0 3rem;
}
.nxi-spine__step {
  position: relative;
  padding: 1.25rem 1.1rem;
  border: 1px solid var(--nxi-line);
  border-radius: 14px;
  background: var(--nxi-wash);
}
.nxi-spine__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--nxi-tint); color: var(--nxi-blue);
  margin-bottom: .75rem;
}
.nxi-spine__mark svg { width: 17px; height: 17px; }
.nxi-spine__label {
  display: block; font-size: 1rem; font-weight: 700; color: var(--nxi-ink);
  letter-spacing: -.01em; margin-bottom: .2rem;
}
.nxi-spine__q { display: block; font-size: .875rem; line-height: 1.45; color: var(--nxi-muted); }
/* The arrow sits in the gap between cards, not inside one. */
.nxi-spine__arrow {
  position: absolute; top: 50%; right: -.75rem; width: .75rem;
  transform: translate(50%, -50%);
  text-align: center; color: #C3C6D4; font-size: .9rem; line-height: 1;
}
.nxi-body .nxi-spine { margin: 2rem 0 2.25rem; }

/* ── The featured essay ─────────────────────────────────────────────────── */

.nxi-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--nxi-line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nxi-feature:hover {
  border-color: var(--nxi-blue);
  box-shadow: 0 18px 40px -28px rgba(17, 17, 24, .5);
}
.nxi-feature__img { position: relative; display: block; min-height: 20rem; }
.nxi-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nxi-feature__body {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2.25rem;
}
.nxi-feature__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nxi-blue); margin-bottom: .9rem;
}
.nxi-feature__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.16; letter-spacing: -.02em;
  color: var(--nxi-ink); text-wrap: balance; margin-bottom: .75rem;
}
.nxi-feature__deck {
  font-size: 1rem; line-height: 1.55; color: var(--nxi-muted); margin-bottom: 1.75rem;
}
.nxi-feature__meta {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  font-size: .875rem; margin-top: auto;
  padding-top: 1.25rem; border-top: 1px solid var(--nxi-line);
}
.nxi-feature__go {
  margin-top: 1.25rem; font-size: .9375rem; font-weight: 650; color: var(--nxi-blue);
}

/* ── A card in a list ───────────────────────────────────────────────────── */

.nxi-index__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 900px) { .nxi-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nxi-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--nxi-line); border-radius: 16px; overflow: hidden;
  background: #fff; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.nxi-card:hover { border-color: var(--nxi-blue); transform: translateY(-2px); }
.nxi-card__img { display: block; }
.nxi-card__img img { display: block; width: 100%; height: 12rem; object-fit: cover; }
.nxi-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.nxi-card__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nxi-blue); margin-bottom: .6rem;
}
.nxi-card__title {
  font-size: 1.1875rem; line-height: 1.28; letter-spacing: -.015em;
  color: var(--nxi-ink); text-wrap: balance; margin-bottom: .55rem;
}
.nxi-card__deck { font-size: .9375rem; line-height: 1.55; color: var(--nxi-muted); margin-bottom: 1.35rem; }
.nxi-card .nxi-byline { margin-top: auto; }

/* ── The byline ─────────────────────────────────────────────────────────── */

.nxi-byline { display: flex; align-items: center; gap: .7rem; font-size: .875rem; }
.nxi-byline__mark {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--nxi-tint); color: var(--nxi-blue);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.nxi-byline__who { display: flex; flex-direction: column; line-height: 1.3; }
.nxi-byline__name { color: var(--nxi-ink); font-weight: 600; }
.nxi-byline__role { color: var(--nxi-muted); font-size: .8125rem; }
.nxi-byline__read {
  margin-left: auto; color: var(--nxi-muted); font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
/* Over the hero photograph, the same byline has to survive a dark ground. */
.nxi-byline.is-light .nxi-byline__mark { background: rgba(255,255,255,.16); color: #fff; }
.nxi-byline.is-light .nxi-byline__name { color: #fff; }
.nxi-byline.is-light .nxi-byline__role,
.nxi-byline.is-light .nxi-byline__read { color: rgba(255,255,255,.72); }

/* ── The article ────────────────────────────────────────────────────────── */

.nxi { padding-bottom: 5rem; }

/* Full-bleed photograph with the title on it. The scrim is a gradient rather
   than a flat tint so the picture still reads at the top while the type at the
   bottom sits on something solid enough to hold white. */
.nxi-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(30rem, 68vh);
  margin-bottom: 3.5rem;
  overflow: hidden;
  background: #0B0B14;
}
.nxi-hero__img { position: absolute; inset: 0; }
.nxi-hero__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,11,20,.30) 0%, rgba(11,11,20,.55) 45%, rgba(11,11,20,.88) 100%);
}
.nxi-hero__body {
  position: relative; z-index: 1;
  width: 100%; max-width: 46rem;
  margin: 0 auto; padding: 3rem 1.25rem 2.5rem;
}
.nxi-back {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #9DBBF7; text-decoration: none; margin-bottom: 1rem;
}
.nxi-back:hover { color: #fff; }
.nxi-title {
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.03em;
  color: #fff; text-wrap: balance; margin: 0 0 .9rem;
}
.nxi-deck {
  font-size: 1.125rem; line-height: 1.55; color: rgba(255,255,255,.82);
  text-wrap: pretty; margin: 0 0 1.75rem; max-width: 34rem;
}

.nxi-body {
  /* 62-ish characters. Long enough not to feel like a phone, short enough that
     the eye finds the next line without hunting for it. */
  max-width: 40rem; margin: 0 auto; padding-inline: 1.25rem;
  color: var(--nxi-body);
}
.nxi-body p { font-size: 1.0625rem; line-height: 1.75; margin: 0 0 1.4rem; }

/* The opening paragraph gets a drop cap. One, on the first paragraph only —
   it marks where the piece starts and then gets out of the way. */
.nxi-body > p:first-of-type::first-letter {
  float: left; font-size: 3.4rem; line-height: .82; font-weight: 700;
  color: var(--nxi-ink); padding: .35rem .55rem 0 0;
}

.nxi-h2 {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em;
  color: var(--nxi-ink); text-wrap: balance; margin: 3rem 0 1.1rem;
}
.nxi-h2__mark {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px; margin-top: .15rem;
  background: var(--nxi-tint); color: var(--nxi-blue);
}
.nxi-h2__mark svg { width: 16px; height: 16px; }

.nxi-body ul { margin: 0 0 1.4rem; padding-left: 1.15rem; }
.nxi-body li { font-size: 1.0625rem; line-height: 1.7; margin-bottom: .5rem; }
.nxi-body li::marker { color: var(--nxi-blue); }
.nxi-body strong { color: var(--nxi-ink); font-weight: 650; }
.nxi-body em { font-style: italic; }

/* A pulled line. Not a quote — the piece uses it for the sentence a section was
   written to arrive at, so it is set apart rather than decorated. */
.nxi-body .nxi-lead {
  font-size: 1.25rem; line-height: 1.5; letter-spacing: -.01em; color: var(--nxi-ink);
  margin: 2rem 0; padding-left: 1.25rem; border-left: 3px solid var(--nxi-blue);
}
.nxi-body blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem;
  background: var(--nxi-tint); border-radius: 12px;
}
.nxi-body blockquote p {
  margin: 0; font-size: 1.1875rem; line-height: 1.5; color: var(--nxi-ink);
}

/* Photographs break the measure on purpose — a picture the same width as the
   text reads as an illustration of the paragraph above it rather than a beat
   in the piece. */
.nxi-fig { margin: 2.5rem -2.5rem; }
.nxi-fig img { display: block; width: 100%; height: auto; border-radius: 14px; }
.nxi-fig figcaption {
  margin: .75rem 2.5rem 0; font-size: .8125rem; line-height: 1.5;
  color: var(--nxi-muted); text-wrap: pretty;
}

.nxi-foot {
  max-width: 40rem; margin: 3.5rem auto 0; padding: 1.75rem 1.25rem 0;
  border-top: 1px solid var(--nxi-line);
}
.nxi-foot__brand { margin: 0 0 .25rem; font-weight: 650; color: var(--nxi-ink); }
.nxi-foot__tag { margin: 0 0 1.5rem; color: var(--nxi-muted); font-style: italic; }
.nxi-foot__cta {
  display: inline-flex; align-items: center; padding: .7rem 1.35rem;
  border-radius: 999px; background: var(--nxi-blue); color: #fff;
  font-size: .9375rem; font-weight: 650; text-decoration: none;
}
.nxi-foot__cta:hover { background: #1B4CA8; }

/* ── Phone ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .nxi-index { padding: 2.5rem 0 3.5rem; }
  .nxi-spine { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 1.75rem 0 2rem; }
  .nxi-spine__arrow { display: none; }
  .nxi-feature { grid-template-columns: minmax(0, 1fr); }
  .nxi-feature__img { min-height: 0; }
  .nxi-feature__img img { height: 13rem; }
  .nxi-feature__body { padding: 1.5rem; }
  .nxi-hero { min-height: 22rem; margin-bottom: 2.25rem; }
  .nxi-hero__body { padding: 2rem 1.25rem 1.75rem; }
  .nxi-h2 { font-size: 1.3rem; margin-top: 2.25rem; }
  /* The figure's negative margin becomes a full bleed rather than an overhang
     the page has to absorb. */
  .nxi-fig { margin: 2rem -1.25rem; }
  .nxi-fig img { border-radius: 0; }
  .nxi-fig figcaption { margin-inline: 1.25rem; }
  .nxi-body > p:first-of-type::first-letter { font-size: 2.8rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   The product showcase on a phone.

   Sized so the whole thing — rail, caption, screenshot, pager — fits in about
   one screen rather than the two thousand pixels the desktop mock occupied.
   ═════════════════════════════════════════════════════════════════════════ */

.nxm {
  --nxm-line: #E6E7EE;
  --nxm-ink: #111118;
  --nxm-muted: #6B6E80;
  --nxm-blue: #2C6BE0;
}

/* The rail bleeds to both edges so it reads as scrollable — a strip that stops
   short of the margin looks like a list that happens to be cut off. */
.nxm-rail {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: -1.25rem;
  padding: .25rem 1.25rem 1rem;
}
.nxm-rail::-webkit-scrollbar { display: none; }

.nxm-chip {
  flex: none;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border: 1px solid var(--nxm-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nxm-muted);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nxm-chip__icon { width: 15px; height: 15px; }
.nxm-chip.is-on {
  background: var(--nxm-blue);
  border-color: var(--nxm-blue);
  color: #fff;
}

.nxm-panel {
  border: 1px solid var(--nxm-line);
  border-radius: 18px;
  background: #fff;
  padding: 1.1rem 1.1rem 1.25rem;
}
.nxm-head { display: flex; align-items: center; gap: .7rem; }
.nxm-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
}
.nxm-mark svg { width: 19px; height: 19px; }
.nxm-head__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nxm-title { font-size: 1.0625rem; font-weight: 700; color: var(--nxm-ink); line-height: 1.2; }
.nxm-count {
  font-size: .75rem;
  color: var(--nxm-muted);
  font-variant-numeric: tabular-nums;
}
.nxm-blurb {
  margin: .8rem 0 1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--nxm-muted);
  text-wrap: pretty;
}

/* A window bar over the screenshot, so a desktop capture on a phone reads as
   "this is the desktop app" rather than as a small confusing image. */
.nxm-shot {
  margin: 0;
  border: 1px solid var(--nxm-line);
  border-radius: 12px;
  overflow: hidden;
  background: #F8F8FA;
}
.nxm-shot__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .5rem .65rem;
  background: #0B0B14;
}
.nxm-shot__bar i {
  width: 8px; height: 8px; border-radius: 50%; background: #3a3a46;
}
.nxm-shot__bar i:first-child { background: #ff5f57; }
.nxm-shot__bar i:nth-child(2) { background: #febc2e; }
.nxm-shot__bar i:nth-child(3) { background: #28c840; }
.nxm-shot__bar em {
  margin-left: auto;
  font-style: normal;
  font-size: .6875rem;
  color: #8b8b99;
}
.nxm-shot__img { display: block; width: 100%; height: auto; }

.nxm-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.nxm-step {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--nxm-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nxm-ink);
  font-size: 1rem;
  cursor: pointer;
}
.nxm-step:active { background: #F0F0F4; }
.nxm-dots { display: flex; gap: 5px; }
.nxm-dots i { width: 5px; height: 5px; border-radius: 50%; background: #D4D6E0; }
.nxm-dots i.is-on { background: var(--nxm-blue); width: 16px; border-radius: 3px; }


/* ── Pricing: wider cards, and a section that ends ────────────────────────
   The grid was capped at 1040px inside a 1200px container, which made each of
   the three cards 314px — narrow enough that features wrapped — and the nine
   feature rows then occupied 668 of the card's 1,112 pixels for what is one
   line of text each.

   Every selector here is doubled. The reference ships these rules in an inline
   <style> inside the page body, which lands after every linked sheet, so a
   single class ties on specificity and loses on order. Doubling wins without
   reaching for !important, which would then have to be undone by the next
   person who needs to override it.
   ──────────────────────────────────────────────────────────────────────── */
.nx-price-cards.nx-price-cards {
  max-width: 1200px;
  gap: 20px;
}

/* A row is a tick and a line of text. It does not need the height of three. */
.nx-price-card-features.nx-price-card-features { gap: 2px; }
.nx-price-card-features.nx-price-card-features > li {
  padding-block: 3px;
  margin-bottom: 0;
}

/* The description reserved a third line so the prices below it would line up
   across the three cards. At 380px wide it is two lines, and the reserved
   third is a hole. */
.nx-price-card-desc.nx-price-card-desc {
  min-height: 0;
  margin-bottom: .75rem;
}


/* The show more / show less control. One button, appended after whichever
   list it opens, styled to read as a control rather than as another row. */
.nx-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  padding: .5rem .95rem;
  border: 1px solid #E6E7EE;
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 600;
  color: #2C6BE0;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.nx-more:hover { border-color: #2C6BE0; background: #F6F9FF; }
/* Inside a plan card the button is the width of the card, so it does not sit
   oddly against a left-aligned list of ticks. */
.nx-price-card .nx-more { width: 100%; justify-content: center; }
/* On the dark plan card the same button has to survive a blue ground. */
.nx-price-card.featured .nx-more,
.nx-price-card.is-featured .nx-more {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
/* The comparison table scrolls sideways in its own wrapper; its control
   belongs outside that, centred under the table. */
.nx-cmp-grid + .nx-more { margin: 1rem auto 0; display: flex; }


/* ── The product section's heading ────────────────────────────────────────
   Lost once already: it was appended after the footer block, and rewriting
   that block from its comment to the end of the file took this with it. Kept
   above the footer now so the end of the file is not a cliff.

   Two things about the position. It is centred, because the thing it
   introduces — the product mock — is centred, and a left-aligned label over a
   centred object reads as a mistake. And it sits below the cone rather than
   inside it: the cone descends out of the hero and tapers to a point, and dark
   text crossing mid-blue is the same contrast problem that made the original
   white version unreadable, just inverted. The padding clears the tip.
   ──────────────────────────────────────────────────────────────────────── */
.nx-tabs-head {
  text-align: center;
  max-width: 38rem;
  /* No bottom margin. The row separating this from the product screen is a
     flex gap on .layout-block, and carrying a margin as well meant the space
     was paid for twice — 28px of margin under 48px of gap, 76px between a
     heading and the thing it introduces. */
  margin: 0 auto;
  padding-top: .5rem;
}

/* The heading and the screen it introduces belong together, so the gap between
   them is closer than the page's default 48px row rhythm. */
.section.is-tabs .layout-block {
  row-gap: 1.5rem;
}

/* Three lines, always the same three.
   Left to wrap on its own the heading is one 565px line between 900 and
   1200px — wider than the 465px cone underneath it — and three lines only by
   accident on a phone. Breaking on the spans makes the longest line "your
   business runs on." at every width, which is the number the padding below is
   set against. */
.nx-tabs-title span { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   The two headings that were pure black.
   ─────────────────────────────────────────────────────────────────────────
   "Give clients clarity without giving them your inbox." and "Know where the
   money is. And where it's going." are the only two #000 headings on the page.
   Every other heading is a near-black (#0B0B14, #0B0B1A, #111118), a navy, or
   white — so these two are not a darker style, they are the browser default
   arriving because nothing set a colour. Pure black is not in this palette.

   Both sit over the same pale blue beam, so they take the same navy as the
   tabs heading above, for the same reason: it reads as the theme's blue and
   still clears contrast where the beam fades to the white page.

   Targeted on the Webflow variant class rather than the section, because the
   two sections have nothing else in common — one carries the curve artwork and
   the other does not — and this variant is used by exactly these two headings
   and nothing else. */
.heading-style-x.w-variant-d8cb559a-0e1a-3989-1949-6adbe8654b44 h2 {
  color: #0A1F4D;
}
.nx-tabs-title {
  margin: 0;
  /* 22/32 plus three pixels at both ends, and on the fluid middle too. */
  font-size: clamp(1.5625rem, calc(2.4vw + 3px), 2.1875rem);
  line-height: 1.2;
  letter-spacing: -.022em;
  font-weight: 600;
  /* Deep navy, not the near-black #111118 this used to be — that is not a
     colour the palette contains and read as a default rather than a choice.

     White was tried first and is wrong: the heading is wider than the cone it
     sits on, so its middle line runs off the blue and onto the page, where
     white measures 1:1 and disappears. Brand blue #2C6BE0 fails the other way,
     at 1:1 against the cone itself.

     The only values that clear 3:1 on both surfaces are deep navies. This is
     the bluest of them that does — 3.26 on the cone's saturated blue, 12.7 on
     the white page — so it reads as the theme's colour rather than as black
     while staying legible wherever the line happens to fall. */
  /* Reversed out of the slab above. 15.3:1 against its darkest stop. */
  color: #fff;
  text-transform: uppercase;
  /* Capitals lose the shape a lowercase word has, so they need air between
     them to stay readable at this size; the negative tracking that suited the
     mixed-case setting closes them up into a wall. */
  letter-spacing: .01em;
  text-wrap: balance;
}

/* The client portal's supporting line is dropped below 900px.
   ─────────────────────────────────────────────────────────────────────────
   It sits on a beam that narrows as it descends, and the copy starts where
   the blue has already closed in. Measured: at 375px the beam is 182px across
   and the line is 343; at 768px the beam is 230 and the line is 477. Both run
   off the artwork onto the white page on both sides.

   There is no measure that fixes it. Narrow enough to fit 230px is three or
   four words a line, six lines deep, descending further into the taper as it
   goes — worse than not having the sentence. The heading already says the
   thing and the button underneath says where to go, so below 900px the
   section is heading, button, artwork.

   1500px, because that is where it stops overflowing and not a pixel sooner.
   Measured across the range: at 1000px the beam is 253 and the line is 545, at
   1280 it is 324 against 545, at 1440 still 61px over, and only past about
   1500 does the beam finally outrun the text. Two other fixes were tried and
   both were worse — narrowing the measure and tucking it under the heading
   halves the overflow without clearing it, and shortening the curves makes it
   worse, because a shorter ellipse is a steeper one and the beam closes faster
   exactly where the copy sits.

   So the sentence appears only where it fits. Above 1500 it reads as intended;
   below, the heading says the thing and the button says where to go. This is
   one media query and nothing else depends on it, so restoring the sentence
   everywhere is a one-line revert if the section is ever redrawn to hold it.

   display:none rather than visibility or zero height, so the flex gap above
   it collapses with it and the button moves up into the wide part of the beam
   instead of leaving a hole where the copy used to be. */
@media (max-width: 1500px) {
  .section:has(.extension_bg) .paragraph-style-x {
    display: none;
  }
}

@media (max-width: 900px) {
  /* The cone has NOT tapered off here — that claim was wrong, and 1rem of
     padding parked the heading on the narrow stem, where the blue is 138px
     across and the text is 233. Measured at 768px: the cone is 125px wide at
     the old position and 300px sixty pixels lower. The padding buys the width. */
  /* The descent stays here and is removed again for phones in nx-mobile.css.
     Between 768 and 900 it is still needed: the phone font rule has ended, the
     measure is capped at 22rem, and the cone at .5rem of padding is 271px wide
     against 352px of text — 81px of spill, forty a side, straight off the
     artwork. Above 900 the base rule's .5rem is fine because the cone is wide
     enough by then; below 768 it is fine because the funnel opens almost at
     once. This band is the only place the padding still buys anything. */
  .nx-tabs-head {
    padding-top: 4.5rem;
    margin-bottom: 0;
    max-width: 22rem;
  }
  .section.is-tabs .layout-block {
    row-gap: 1.25rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   The footer.

   Deep Ink ground so it closes the page rather than glowing at the bottom of
   it, one row of everything you might need, one hairline, one legal line.

   The two link columns are gone. A footer full of navigation is a second nav
   bar and this site already has one; what a footer is actually for is a way to
   reach somebody and the policies, which is what is left.
   ═════════════════════════════════════════════════════════════════════════ */

.nxf {
  --nxf-line: rgba(255, 255, 255, .12);
  --nxf-dim: rgba(255, 255, 255, .62);
  background: #111118;
  color: #fff;
}
.nxf-in {
  max-width: 76rem;
  margin: 0 auto;
  padding: 3rem 2.5rem 1.75rem;
}

.nxf-top {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nxf-logo { display: inline-flex; color: #fff; }

/* The middle of the row, and the only part that scales — so the logo stays
   left and the call to action stays right at every width above a phone. */
.nxf-reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.75rem;
  margin-left: auto;
}
.nxf-reach__item {
  font-size: .9375rem;
  color: var(--nxf-dim);
  text-decoration: none;
}
.nxf-reach__item:hover { color: #fff; }

.nxf-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.25rem;
  border-radius: 999px;
  background: #2C6BE0;
  color: #fff;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
}
.nxf-cta:hover { background: #3D7BF7; }

.nxf-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nxf-line);
}
.nxf-copy { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .45); }
.nxf-legal {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
}
.nxf-legal a {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
}
.nxf-legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .nxf-in { padding: 2.25rem 1.25rem 1.5rem; }
  /* Stacked, and the action goes full width — it is the only thing here anyone
     taps on purpose. */
  .nxf-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .nxf-reach { margin-left: 0; gap: .35rem 1.25rem; }
  .nxf-cta { width: 100%; justify-content: center; }
  .nxf-base { margin-top: 1.75rem; }
  .nxf-legal { margin-left: 0; }
  .nxf-reach__item,
  .nxf-legal a { display: inline-flex; align-items: center; min-height: 32px; }
}




/* ═══════════════════════════════════════════════════════════════════════════
   The billing toggle on /pricing.
   ─────────────────────────────────────────────────────────────────────────
   The dedicated pricing page had no toggle at all. Every card rendered
   PlanPrice, which defaults to monthly, so the one page whose entire job is
   pricing never showed an annual rate — and never mentioned that a year is
   ten percent cheaper. The landing page has carried that control for months.

   The markup and the id match the landing page's exactly, so the behaviour
   already shipped in LandingWidgets drives this page with no new JavaScript.
   The styling lives here rather than being copied inline, because a second
   copy of a design is a second thing to keep in step — this file is already
   loaded on both pages. The landing page keeps its inline block and wins
   there on document order; nothing about it changes.
   ═══════════════════════════════════════════════════════════════════════ */

.nx-price-hero-section .nx-price-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: 4px;
  border-radius: 999px;
  background: rgba(11, 11, 26, .06);
  position: relative;
}
.nx-price-hero-section .nx-price-toggle-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 96px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(11, 11, 26, .12);
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1),
              width .35s cubic-bezier(.34, 1.4, .64, 1);
  pointer-events: none;
}
/* Single quotes deliberately. This rule is written into a stylesheet here
   rather than a JS string, but the landing page's copy lives inside one and
   its escaped \"yearly\" reached CSS with the backslashes intact — a selector
   asking for an attribute whose value includes the quote marks, which nothing
   has. Keeping both copies in the same form keeps them comparable. */
.nx-price-hero-section .nx-price-toggle[data-billing='yearly'] .nx-price-toggle-pill {
  width: 124px;
  transform: translateX(96px);
}
.nx-price-hero-section .nx-price-toggle button {
  position: relative;
  z-index: 1;
  width: 96px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease;
}
.nx-price-hero-section .nx-price-toggle button[data-value='yearly'] { width: 124px; }
.nx-price-hero-section .nx-price-toggle .active   { color: #2C6BE0; }
.nx-price-hero-section .nx-price-toggle .inactive { color: #6B6E80; }
.nx-price-hero-section .nx-price-save {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #E7EFFE;
  color: #1E56BE;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  vertical-align: 1px;
}

/* The comparison header repeats the price in a much smaller space than a
   card does, and TogglingPlanPrice writes the full "/ user / month" wording
   because that is the only phrasing true of both cycles. It has to be quiet
   here rather than absent — an abbreviated label that stops being true when
   the toggle moves is the thing this replaced. */
.nx-cmp-sub .amount { font-weight: 700; }
.nx-cmp-sub .period {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  opacity: .72;
  letter-spacing: .01em;
}

@media (prefers-reduced-motion: reduce) {
  .nx-price-hero-section .nx-price-toggle-pill { transition: none; }
}