/* ==========================================================================
   Marketing site — the landing page and the six public pages that share it.
   Layers on the same tokens as the terminal (finnexus.css), so the site and
   the app cannot drift into looking like two different products. Nothing in
   this file defines a colour of its own: every value is a token or derived
   from one with color-mix.
   ========================================================================== */

/* ------------------------------------------------------- MarketingHeader */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--nx-surface-glass);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid var(--line)}
.site-header .inner{
  display:flex;align-items:center;gap:var(--sp-4);min-height:var(--nx-shell-topbar);
  max-width:var(--nx-max-marketing);margin:0 auto;
  padding:var(--sp-2) clamp(16px,4vw,48px)}
.site-header .brand{min-width:0;overflow:hidden;text-overflow:ellipsis}
.site-nav{
  display:flex;gap:2px;margin-left:auto;align-items:center;flex:none}
/* The primary action must never be the thing that gets squeezed.
   And the link rule below needs :not(.btn) — ".site-nav a" outranks
   ".btn-primary" on specificity, which is exactly how the CTA ended up
   wearing the nav's grey link colour. */
.site-nav .btn{flex:none}
.site-nav > .btn{margin-left:var(--sp-2)}
.site-nav .themetoggle{margin-left:var(--sp-2)}
.site-nav a:not(.btn){
  color:var(--ink-3);font-size:var(--fs-sm);font-weight:550;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  transition:color var(--motion-fast) var(--ease-nx),background-color var(--motion-fast) var(--ease-nx)}
.site-nav a:not(.btn):hover{
  color:var(--ink);background:var(--surface-3);text-decoration:none}
.site-nav a.active{color:var(--accent);background:var(--accent-soft)}
.site-links{display:flex;gap:2px;align-items:center}
.site-menu{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink-2);cursor:pointer;padding:0;place-items:center}
.site-menu svg{width:18px;height:18px}
.site-menu:focus-visible{outline:none;box-shadow:var(--nx-focus-ring)}
@media(max-width:760px){.site-nav a.anchor{display:none}}
@media(max-width:430px){
  .site-header .brand small{display:none}
  .site-nav .btn-primary{padding:9px var(--sp-3)}
}

.btn-primary,a.btn-primary,.site-nav a.btn-primary{
  background:var(--nx-primary-bg);color:#fff;border-color:transparent}
.btn-primary:hover,a.btn-primary:hover,.site-nav a.btn-primary:hover{
  background:var(--nx-primary-bg-hover);color:#fff;text-decoration:none;
  transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost,a.btn-ghost,.site-nav a.btn-ghost{
  background:var(--nx-surface-glass);color:var(--ink);border-color:var(--line-2);
  box-shadow:var(--shadow-sm)}
.btn-ghost:hover,a.btn-ghost:hover,.site-nav a.btn-ghost:hover{
  border-color:var(--nx-blue);color:var(--ink);text-decoration:none;
  background:var(--surface)}
.btn-lg{font-size:var(--fs-base);padding:13px var(--sp-5);border-radius:12px}

/* ---------------------------------------------------------------- sections */
.section{padding:var(--sp-8) clamp(16px,4vw,48px);position:relative}
.section.after-hero{padding-top:var(--sp-8)}
.section > *{max-width:var(--nx-max-marketing);margin-left:auto;margin-right:auto}
.section.tint{background:var(--surface-3);border-block:1px solid var(--line)}
.section.tint .card,.section.tint .step,.section.tint .catalogue section{
  background:var(--surface)}
.section-head{max-width:760px;margin-bottom:var(--sp-6)}
.section-head.centre{margin-left:auto;margin-right:auto;text-align:center}
.section-head.centre .eyebrow{justify-content:center}
.section-head.centre .eyebrow:before{display:none}
.eyebrow{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nx-teal-ink);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:8px}
.eyebrow:before{content:"";width:18px;height:1px;background:currentColor;display:block}
.section h2{
  font-size:clamp(23px,2.4vw,36px);font-weight:750;letter-spacing:-.03em;
  margin:0 0 var(--sp-3);line-height:1.15;max-width:24ch}
.section-head.centre h2{max-width:28ch;margin-left:auto;margin-right:auto}
.section p.lead{color:var(--ink-3);font-size:var(--fs-md);margin:0;line-height:1.65}

/* -------------------------------------------------------------------- hero
   Theme-aware, not a fixed dark band: blue-white in light, institutional
   navy in dark. The world network sits behind both columns. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(900px 520px at 82% 8%, color-mix(in srgb,var(--nx-cyan) 13%,transparent), transparent 70%),
    radial-gradient(760px 480px at 8% 0%, color-mix(in srgb,var(--nx-blue) 9%,transparent), transparent 66%),
    var(--nx-bg-gradient);
  border-bottom:1px solid var(--line)}
[data-theme="dark"] .hero{
  background:
    radial-gradient(900px 520px at 80% 4%, rgba(38,213,244,.12), transparent 68%),
    radial-gradient(760px 480px at 6% 0%, rgba(63,152,255,.14), transparent 66%),
    var(--nx-bg-gradient)}
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--nx-blue) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--nx-blue) 5%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}

.hero-inner{
  position:relative;z-index:1;max-width:var(--nx-max-marketing);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  gap:clamp(28px,3.6vw,64px);align-items:start;
  padding:clamp(36px,5vw,76px) clamp(16px,4vw,48px) clamp(44px,5.5vw,84px)}
.hero-copy{min-width:0}

/* The map runs as a band across the top of the hero, sized so the three
   market nodes land in open space — above the preview and beside the
   headline — at their real positions (New York, London, Mumbai). */
.hero > .nx-world svg{
  left:14vw;top:0;width:72vw;transform:translate3d(var(--nx-px,0px),var(--nx-py,0px),0)}

.hero-badge{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--sp-5);
  padding:5px 12px 5px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--nx-surface-glass);
  border:1px solid color-mix(in srgb,var(--nx-blue) 28%,transparent)}
.hero-badge .nx-ico{width:14px;height:14px}

.hero h1{
  font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.04em;
  font-weight:800;margin:0 0 var(--sp-4);color:var(--nx-navy-900);
  animation:nx-enter var(--motion-enter) var(--ease-nx) both;animation-delay:50ms}
[data-theme="dark"] .hero h1{color:var(--ink)}
.hero h1 em{
  font-style:normal;background:var(--nx-brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* the gradient must not stop at the line box or descenders lose their colour */
  padding-bottom:.06em}
.hero-tagline{
  font-family:var(--font-display);font-size:clamp(17px,1.5vw,24px);font-weight:650;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 var(--sp-3)}
.hero p.lead{
  color:var(--ink-3);font-size:clamp(14.5px,1.05vw,17px);line-height:1.65;
  margin:0 0 var(--sp-5);max-width:58ch;
  animation:nx-enter var(--motion-enter) var(--ease-nx) both;animation-delay:150ms}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.hero-note{color:var(--ink-4);font-size:var(--fs-xs);margin:var(--sp-4) 0 0;max-width:56ch}

/* stats: hairline dividers, not boxes; the number leads, the label follows */
.trustbar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;
  border-top:1px solid var(--line);padding-top:var(--sp-4)}
.trustbar > div{
  display:flex;flex-direction:column-reverse;justify-content:flex-end;
  padding:0 var(--sp-4);border-left:1px solid var(--line);min-width:0}
.trustbar > div:first-child{padding-left:0;border-left:0}
.trustbar .n{
  margin:0;font-family:var(--font-mono);font-size:clamp(20px,1.9vw,28px);font-weight:700;
  letter-spacing:-.035em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.trustbar .l{
  color:var(--ink-3);font-size:var(--fs-label);margin-top:6px;line-height:1.3;
  text-transform:uppercase;letter-spacing:.08em;font-weight:650}

/* ----------------------------------------------------- the terminal preview */
.hero-shot{margin:0;min-width:0;position:relative;padding-top:min(12.5vw,190px);
  animation:nx-enter var(--motion-enter) var(--ease-nx) both;animation-delay:150ms}
.hero-shot figcaption{
  margin-top:var(--sp-3);text-align:center;color:var(--ink-4);font-size:var(--fs-xs)}
.termwin{
  border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-lg),0 2px 0 rgba(255,255,255,.6) inset;
  font-size:12px;line-height:1.45}
[data-theme="dark"] .termwin{
  background:var(--nx-surface-glass);border-color:var(--nx-border-strong);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(38,213,244,.04)}
.termwin .chrome{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.termwin .hero-logo{width:20px;height:20px;flex:none;display:block}
.tw-brand{font-family:var(--font-display);font-weight:750;font-size:12.5px;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap}
.tw-brand b{font-weight:500;color:var(--ink-3)}
.tw-search{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;margin-left:var(--sp-3);
  border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--surface);
  color:var(--ink-4);font-size:11px;white-space:nowrap;overflow:hidden}
.tw-search svg{width:12px;height:12px;flex:none}
.tw-mkts{display:flex;gap:4px;flex:none}
.tw-mkts i{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:var(--surface)}
.tw-mkts i[data-m="IN"]{color:var(--accent);border-color:color-mix(in srgb,var(--nx-blue) 35%,transparent);
  background:var(--accent-soft)}

.termwin .screen{display:grid;grid-template-columns:118px minmax(0,1fr);background:var(--surface)}
[data-theme="dark"] .termwin .screen{background:transparent}
.tw-side{
  display:flex;flex-direction:column;gap:2px;padding:12px 8px;
  border-right:1px solid var(--line);background:var(--surface-2)}
.tw-side span{padding:6px 10px;border-radius:8px;color:var(--ink-3);font-size:11.5px;font-weight:550}
.tw-side span.on{color:var(--accent);background:var(--accent-soft);font-weight:650;
  box-shadow:inset 2px 0 0 var(--nx-blue)}
[data-theme="dark"] .tw-side span.on{box-shadow:inset 2px 0 0 var(--nx-cyan)}
.tw-main{padding:12px 14px 14px;min-width:0}

.termwin .hdr{
  border:0;box-shadow:none;background:transparent;padding:0;margin:0 0 10px;gap:12px;
  align-items:center}
.termwin .hdr .name{font-size:16px;font-weight:750;font-family:var(--font-display)}
.termwin .hdr .meta{font-size:11px;margin-top:2px;font-family:var(--font-mono);color:var(--ink-3)}
.termwin .hdr .px{font-size:20px;font-weight:700}
.termwin .hdr .px small{margin-top:4px;font-size:10.5px}

.tw-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:10px;overflow:hidden}
.tw-tabs span{padding:6px 9px;font-size:11px;font-weight:600;color:var(--ink-3);
  border-bottom:2px solid transparent;white-space:nowrap}
.tw-tabs span.on{color:var(--accent);border-bottom-color:var(--nx-blue)}

.tw-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;margin-bottom:10px}
.tw-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);min-width:0}
[data-theme="dark"] .tw-card{background:var(--nx-surface-soft)}
/* .scorebadge is reused for its meaning, not its legacy layout */
.termwin .scorebadge{display:block;text-align:left;border:0;padding:0;min-width:0}
.tw-h{font-weight:700;font-size:11.5px;color:var(--ink);margin-bottom:8px;display:flex;
  gap:6px;align-items:baseline;flex-wrap:wrap}
.tw-h span{font-weight:500;color:var(--ink-4);font-size:10px}
.tw-score{display:flex;gap:12px;align-items:center}
.tw-subs{flex:1;min-width:0}
.termwin .subscore{border:0;padding:2px 0}
.termwin .subscore .top{gap:6px}
.termwin .subscore .nm{min-width:0;flex:0 0 92px;font-size:10.5px;font-weight:550;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.termwin .subscore .wt{min-width:26px;font-size:9.5px}
.termwin .subscore .sc{min-width:22px;font-size:10.5px}
.termwin .bar{height:5px;min-width:20px}
/* score components are analytical: one neutral brand colour, not traffic lights */
.termwin .bar i{background:linear-gradient(90deg,var(--nx-blue),var(--nx-teal))}
.tw-fx{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line-2);
  font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.tw-fx b{color:var(--ink)}
.tw-chart svg{display:block;width:100%;height:118px}
.tw-gridlines path{stroke:var(--chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.tw-area{fill:url(#tw-area)}
.tw-line{fill:none;stroke:var(--chart-primary);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:tw-draw var(--motion-chart) var(--ease-nx) 300ms forwards}
@keyframes tw-draw{to{stroke-dashoffset:0}}

.termwin .kpi{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:10px}
.termwin .kpi div{padding:6px 8px;border-radius:8px;background:var(--surface-2)}
.termwin .kpi div div{background:none;border:0;padding:0;border-radius:0}
.termwin .kpi .k{font-size:9px}
.termwin .kpi .v{font-size:13px;margin-top:2px}

.tw-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.termwin .flag{padding:7px 9px;border-radius:8px;border-left-width:3px}
.termwin .flag .lab{font-size:11px}
.termwin .flag .hl{font-size:10.5px;margin-top:3px;color:var(--ink-3);line-height:1.35}
.termwin .flag .row{gap:6px;align-items:flex-start}
.termwin .flag .nx-status{font-size:8.5px;padding:1px 6px 1px 4px}
.termwin .flag .nx-status::before{width:11px;height:11px;font-size:8px}
/* N/A is never allowed to resemble PASS: dashed rail, no tint */
.flag.NA{border-left-style:dashed}

/* ---------------------------------------------------------- capabilities */
.caps-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3)}
.cap{display:flex;flex-direction:column;padding:var(--sp-4)}
.cap .nx-card__head{margin-bottom:var(--sp-2)}
.cap .nx-card__title{font-size:var(--fs-base);font-weight:700}
.cap .nx-card__action{font-size:20px;line-height:1;transition:transform var(--motion-fast) var(--ease-nx)}
.cap:hover .nx-card__action{transform:translateX(2px);color:var(--accent)}
.cap p{color:var(--ink-3);font-size:var(--fs-sm);margin:0;line-height:1.58}
.mkt-counts{list-style:none;margin:var(--sp-3) 0 0;padding:var(--sp-3) 0 0;display:flex;gap:var(--sp-3);
  border-top:1px solid var(--line);flex-wrap:wrap}
.mkt-counts li{font-size:var(--fs-xs);color:var(--ink-3);display:flex;gap:5px;align-items:baseline}
.mkt-counts b{font-weight:650;color:var(--ink-2)}
.mkt-counts .num{color:var(--ink)}

/* --------------------------------------------------------- evidence pipeline */
.pipeline{list-style:none;padding:0;margin:0 auto;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);counter-reset:none}
.pipeline li{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px}
/* the connector between steps: a hairline with an arrowhead, purely visual */
.pipeline li:not(:last-child):after{
  content:"";position:absolute;top:50%;right:calc(var(--sp-3) * -1);width:var(--sp-3);height:1px;
  background:var(--line-3)}
.pl-n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-4);font-weight:600}
.pipeline b{font-family:var(--font-display);font-size:var(--fs-base);color:var(--ink);letter-spacing:-.01em}
.pipeline p{margin:0;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.55;flex:1}
.pl-tag{align-self:flex-start;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);border:1px solid}
/* deterministic steps share one neutral brand tag; AI is visibly the odd one
   out, and dashed — it must not look more authoritative than the arithmetic */
.pl-tag.pure{color:var(--nx-teal-ink);border-color:color-mix(in srgb,var(--nx-teal) 40%,transparent);
  background:color-mix(in srgb,var(--nx-teal) 8%,transparent)}
.pl-tag.ai{color:var(--ink-3);border-style:dashed;border-color:var(--line-3)}
.pl-tag.check{color:var(--accent);border-color:color-mix(in srgb,var(--nx-blue) 35%,transparent);
  background:var(--accent-soft)}
.pipeline-links{display:flex;gap:var(--sp-5);justify-content:center;margin-top:var(--sp-5)!important;
  font-size:var(--fs-sm);font-weight:600;flex-wrap:wrap}

/* ------------------------------------------------- product preview (pages) */
.preview{
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-lg);overflow:hidden}
.preview-chrome{
  display:flex;align-items:center;gap:6px;padding:9px var(--sp-4);
  border-bottom:1px solid var(--line);background:var(--surface-3)}
.preview-chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-3);display:block}
.preview-chrome span{
  margin-left:var(--sp-3);color:var(--ink-4);font-family:var(--font-mono);
  font-size:10px;letter-spacing:.02em}
.preview-body{padding:var(--sp-4)}
.preview-row{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.preview-row .nm{font-weight:650;font-size:var(--fs-base);letter-spacing:-.02em}
.preview-row .sub{color:var(--ink-4);font-size:var(--fs-xs);font-family:var(--font-mono)}
.preview-score{margin-left:auto;text-align:right}
.preview-score .v{
  font-family:var(--font-mono);font-size:30px;font-weight:700;line-height:1;
  letter-spacing:-.04em;color:var(--nx-teal-ink)}
.preview-score .o{color:var(--ink-4);font-size:10px}
.preview-line{
  display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);
  padding:5px 0;color:var(--ink-3);font-family:var(--font-mono)}
.preview-line .lab{min-width:118px;color:var(--ink-2)}
.preview-line .val{margin-left:auto;font-variant-numeric:tabular-nums}
.tagf,.tagw,.tagp,.tagn{
  font-size:9px;font-weight:750;letter-spacing:.07em;padding:1px 6px;border-radius:999px}
.tagf{color:var(--neg);background:var(--neg-soft)}
.tagw{color:var(--warn);background:var(--warn-soft)}
.tagp{color:var(--pos);background:var(--pos-soft)}
.tagn{color:var(--nx-nodata-ink);background:transparent;border:1px dashed var(--nx-nodata)}

/* -------------------------------------------------------------- how it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);position:relative}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);box-shadow:var(--shadow-sm);position:relative}
.step .n{
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3)}
.step h3{font-size:var(--fs-base);font-weight:650;margin:0 0 var(--sp-2);letter-spacing:-.015em}
.step p{color:var(--ink-3);font-size:var(--fs-sm);margin:0;line-height:1.6}
.step .tag{
  display:inline-block;margin-top:var(--sp-3);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.step .tag.pure{color:var(--nx-teal-ink);background:color-mix(in srgb,var(--nx-teal) 10%,transparent)}
.step .tag.ai{color:var(--ink-3);background:transparent;border:1px dashed var(--line-3)}
.step .tag.check{color:var(--accent);background:var(--accent-soft)}

/* ------------------------------------------------------------- capabilities
   (.cards / .card are the public pages' grid; the home page uses .nx-card) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:940px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.card h3{
  font-size:var(--fs-base);font-weight:650;margin:0 0 var(--sp-2);letter-spacing:-.015em;
  display:flex;align-items:center;gap:var(--sp-2)}
.card h3 .dot{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);flex:none}
.card p{color:var(--ink-3);font-size:var(--fs-sm);margin:0;line-height:1.62}
.card ul{margin:var(--sp-3) 0 0;padding:0;list-style:none}
.card li{
  color:var(--ink-3);font-size:var(--fs-xs);padding-left:var(--sp-4);position:relative;
  margin-bottom:5px;line-height:1.5}
.card li:before{
  content:"";position:absolute;left:3px;top:7px;width:4px;height:4px;border-radius:50%;
  background:var(--line-3)}
.card .foot{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);
  color:var(--ink-4);font-size:var(--fs-xs);font-family:var(--font-mono)}
/* only cards that are links move */
a.card{text-decoration:none;color:inherit;display:block;
  transition:transform var(--motion-normal) var(--ease-nx),box-shadow var(--motion-normal) var(--ease-nx),
    border-color var(--motion-normal) var(--ease-nx)}
a.card:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
a.card .foot{color:var(--accent);font-family:var(--font-sans);font-weight:600}

/* --------------------------------------------------------------- methodology */
.method{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
@media(max-width:860px){.method{grid-template-columns:1fr}}
.method h3{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:650;margin:0 0 var(--sp-4)}
.method dl{margin:0}
.method dt{
  font-weight:600;font-size:var(--fs-sm);color:var(--ink);margin-top:var(--sp-4)}
.method dt:first-child{margin-top:0}
.method dd{
  margin:var(--sp-1) 0 0;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.62}
.limits{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--nx-warning);
  border-radius:var(--r-md);padding:var(--sp-5)}
.limits li{margin-bottom:var(--sp-3)}
.limits li:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- closing band
   mirrors the hero — same world network, same gradient — so the page
   bookends rather than trails off */
.cta{
  position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line);
  background:
    radial-gradient(760px 320px at 50% 118%, color-mix(in srgb,var(--nx-cyan) 14%,transparent), transparent 68%),
    var(--nx-bg-gradient)}
.cta .nx-world svg{top:40%}
/* behind the buttons the map is texture only: labels would sit on the actions */
.cta .nx-world__node text,.cta .nx-world__node rect{display:none}
.cta .nx-world__node{opacity:.5}
.cta-inner{position:relative;z-index:1;max-width:var(--nx-max-marketing);margin:0 auto;
  padding:var(--sp-7) clamp(16px,4vw,48px);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-6);align-items:center}
.cta h2{font-size:clamp(23px,2.4vw,34px);font-weight:750;letter-spacing:-.03em;
  margin:0 0 var(--sp-2);max-width:none}
.cta p{color:var(--ink-3);margin:0;font-size:var(--fs-md)}
.cta .hero-cta{margin:0;justify-content:flex-end}
.cta-trust{grid-column:1 / -1;list-style:none;margin:0;padding:var(--sp-4) 0 0;
  border-top:1px solid var(--line);display:flex;gap:var(--sp-6);flex-wrap:wrap;
  color:var(--ink-3);font-size:var(--fs-sm)}
.cta-trust li{display:flex;align-items:center;gap:8px}
.cta-trust svg{width:18px;height:18px;color:var(--nx-teal-ink);flex:none}
/* the public pages still use a centred, single-column closing band */
.cta-inner:has(> img){display:block;max-width:720px;text-align:center}
.cta-inner:has(> img) .hero-cta{justify-content:center;margin-top:var(--sp-5)}

/* ---------------------------------------------------------------- footer */
/* ------------------------------------------------------------------ footer
   Brand and the one-line statement on the left, three titled columns on the
   right, the long disclaimer and the copyright in a quiet base bar. */
.site-footer{border-top:1px solid var(--line);background:var(--surface);
  padding:var(--sp-7) clamp(16px,4vw,48px) 0}
.site-footer .inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:var(--sp-7);
  max-width:var(--nx-max-marketing);margin:0 auto;align-items:start}
.sf-brand .brand{display:inline-flex;margin-bottom:var(--sp-3)}
.sf-tag{color:var(--ink-3);font-size:var(--fs-sm);line-height:1.6;margin:0 0 var(--sp-3);max-width:46ch}
.sf-note{color:var(--ink-3);font-size:var(--fs-xs);line-height:1.6;margin:0;max-width:46ch}
.sf-note b{color:var(--ink-2)}
.sf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.sf-col{display:flex;flex-direction:column;gap:10px}
.sf-col h4{margin:0 0 4px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.sf-col a{color:var(--ink-2);font-size:var(--fs-sm);text-decoration:none;line-height:1.35}
.sf-col a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.sf-base{max-width:var(--nx-max-marketing);margin:var(--sp-6) auto 0;padding:var(--sp-4) 0 var(--sp-5);
  border-top:1px solid var(--line);display:flex;gap:var(--sp-4) var(--sp-6);align-items:flex-start;justify-content:space-between}
.site-footer .disclaimer{color:var(--ink-4);font-size:var(--fs-2xs);line-height:1.7;margin:0;max-width:110ch}
.sf-copy{color:var(--ink-4);font-size:var(--fs-2xs);margin:0;white-space:nowrap}
@media(max-width:860px){
  .site-footer .inner{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
}
@media(max-width:560px){
  .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-col:last-child{grid-column:1 / -1}
  .sf-base{flex-direction:column;gap:var(--sp-2)}
}


@media print{
  .site-header,.site-nav,.cta,.hero-cta{display:none!important}
  .hero-logo{width:34mm}
  .hero{background:#fff!important}
  .site-footer{border-top:1px solid #c8ced6;background:#fff!important}
  .site-footer .disclaimer{color:#4a5560!important}
}

/* ==========================================================================
   Responsive ladder — recompose, never shrink a desktop layout until it is
   unreadable
   ========================================================================== */
@media(max-width:1280px){
  .caps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .caps-grid > :nth-child(9),.caps-grid > :nth-child(10){grid-column:span 2}
}
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero-shot{padding-top:0}
  /* one column: the map stays a texture; labels would sit on the headline */
  .hero > .nx-world svg{left:50%;width:max(100%,900px);transform:translateX(-50%)}
  .hero .nx-world__node text,.hero .nx-world__node rect{display:none}
  .hero .nx-world__node{opacity:.5}
  .hero .nx-world__arc{opacity:.22}
  .hero-copy{max-width:720px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .caps-grid > :nth-child(9),.caps-grid > :nth-child(10){grid-column:auto}
  .caps-grid > :nth-child(10){grid-column:span 2}
  .pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pipeline li:nth-child(3):after{display:none}
}
@media(max-width:1100px) and (min-width:861px){
  .site-nav a:not(.btn){padding:var(--sp-2)}
}
@media(max-width:900px){
  .termwin .screen{grid-template-columns:1fr}
  .tw-side{display:none}
  .tw-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .showcase{grid-template-columns:1fr}
  .method{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
  .cta .hero-cta{justify-content:flex-start}
  /* the links become a drawer under the header; toggle and CTA stay put */
  .site-header .inner{position:relative}
  .site-menu{display:grid;order:2}
  .site-nav .themetoggle{order:1}
  .site-nav .btn{order:3}
  .site-nav .nx-user{order:4}              /* the account button is always the far right */
  .site-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;padding:var(--sp-2) clamp(16px,4vw,48px) var(--sp-4);
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
  .site-nav.is-open .site-links{display:flex;animation:nx-enter var(--motion-panel) var(--ease-nx) both}
  .site-links a:not(.btn),.site-nav .site-links a[data-nav]{display:block;padding:var(--sp-3) var(--sp-2);
    border-radius:0;border-bottom:1px solid var(--line);font-size:var(--fs-base)}
}
@media(max-width:760px){
  .site-nav a.anchor{display:none}
  .statband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps-grid > :nth-child(10){grid-column:auto}
  .pipeline{grid-template-columns:1fr 1fr}
  .pipeline li:after{display:none}
  .termwin .kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tw-mkts{display:none}
}
@media(max-width:620px){
  .cards{grid-template-columns:1fr}
  .caps-grid{grid-template-columns:1fr}
  .pipeline{grid-template-columns:1fr}
  .catalogue{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .btn-lg{padding:13px var(--sp-4)}
  .trustbar{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-4)}
  .trustbar > div:nth-child(3){padding-left:0;border-left:0}
  .tw-flags{grid-template-columns:1fr}
  .tw-search{display:none}
  .compare{display:block}
  .compare thead,.compare th{display:none}
  .compare tr{display:block;border-bottom:1px solid var(--line-2);
    padding:var(--sp-3) 0}
  .compare td{display:block;border:0;padding:3px 0}
  .compare td:first-child{font-size:var(--fs-base);margin-bottom:var(--sp-2)}
  .compare td:nth-child(2):before{content:"Typical report — ";color:var(--ink-4);
    font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase}
  .compare td:nth-child(3):before{content:"FinNexus — ";color:var(--pos);
    font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase}
  .statband{grid-template-columns:1fr}
  .site-header .inner{padding:var(--sp-2) var(--sp-4)}
}
@media(max-width:480px){
  .nx-lockup .nx-word small{display:none}
  /* the hero carries the same two actions one scroll below; the brand keeps the room */
  .site-nav .btn-primary{display:none}
}
@media(pointer:coarse){
  .btn{min-height:44px}
  .faq summary{padding:var(--sp-4)}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero p.lead,.hero-shot{animation:none}
  .tw-line{animation:none;stroke-dashoffset:0}
  .btn-primary:hover,a.btn-primary:hover,a.card:hover{transform:none}
}

/* ----------------------------------------------------------- page hero
   The six public pages open the same way the home page does — same
   gradient, same world network — at a smaller scale, so the site reads as
   one product. Labels are hidden: they would sit on the headline. */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(40px,6vw,88px) clamp(16px,4vw,48px) clamp(32px,4.5vw,64px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(800px 380px at 50% -10%, color-mix(in srgb,var(--nx-cyan) 12%,transparent), transparent 70%),
    var(--nx-bg-gradient)}
.page-hero .nx-world svg{top:46%}
.page-hero .nx-world__node text,.page-hero .nx-world__node rect{display:none}
.page-hero .nx-world__arc{opacity:calc(var(--nx-map-arc-opacity) * .5)}
.page-hero__in{position:relative;z-index:1;max-width:820px;margin:0 auto}
.page-hero .eyebrow{justify-content:center}
.page-hero .eyebrow:before{display:none}
.page-hero h1{font-family:var(--font-display);font-size:clamp(28px,3.4vw,48px);font-weight:800;
  letter-spacing:-.035em;line-height:1.08;margin:0 auto var(--sp-4);max-width:24ch;color:var(--nx-navy-900)}
[data-theme="dark"] .page-hero h1{color:var(--ink)}
.page-hero .lead{color:var(--ink-3);font-size:var(--fs-md);line-height:1.65;margin:0 auto;max-width:62ch}
.page-hero h1,.page-hero .lead{animation:nx-enter var(--motion-enter) var(--ease-nx) both}
.page-hero .lead{animation-delay:90ms}
@media(prefers-reduced-motion:reduce){.page-hero h1,.page-hero .lead{animation:none}}
@media print{.page-hero{background:#fff!important;padding:6mm 0}}

/* ---- the 3D globe rises behind the terminal preview ---- */
.hero-shot .nx-globe{position:absolute;z-index:0;top:calc(min(12.5vw,190px) - min(30vw,330px));
  left:50%;transform:translateX(-50%);width:min(660px,48vw);pointer-events:auto}
.hero-shot .termwin{position:relative;z-index:1}
/* wide screens only: on a stacked layout the globe would sit over the
   headline, so phones and narrow tablets keep the 2D map (and the battery) */
@media(min-width:961px){
  .hero:has(.nx-globe.is-ready) > .nx-world{opacity:0;transition:opacity 900ms ease}
}
@media(max-width:960px){ .hero-shot .nx-globe{display:none} }

/* =====================================================================
   The scroll story — one sticky stage, the scroll position is the clock
   ===================================================================== */
.nx-story{position:relative;height:720vh;
  background:radial-gradient(1200px 700px at 70% 40%,color-mix(in srgb,var(--nx-blue) 10%,transparent),transparent 70%),
    linear-gradient(180deg,var(--nx-bg) 0%,var(--nx-bg-secondary) 100%);
  border-bottom:1px solid var(--line)}
[data-theme="dark"] .nx-story{background:radial-gradient(1200px 700px at 70% 40%,rgba(38,140,244,.16),transparent 70%),
    linear-gradient(180deg,#020B17 0%,#03172B 100%)}
.nx-story__stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;perspective:1600px}
.nx-story__captions{position:absolute;inset:0;z-index:2;pointer-events:none}
.nx-cap{position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(40px,12vh,140px);max-width:min(560px,86vw);
  opacity:0;will-change:transform,opacity}
.nx-cap.is-on{pointer-events:auto}
.nx-cap__eyebrow{margin:0 0 12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nx-teal-ink)}
.nx-cap__title{margin:0;font-family:var(--font-display);font-size:clamp(34px,4.6vw,72px);line-height:1.02;
  font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.nx-cap__title b{background:var(--nx-brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.nx-cap__body{margin:16px 0 0;font-size:clamp(15px,1.15vw,19px);line-height:1.55;color:var(--ink-3);max-width:46ch}
.nx-cap__cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}
/* centred with `translate`, not `transform`: landing-story.js owns every caption's transform */
.nx-cap--end{left:50%;bottom:auto;top:clamp(28px,7vh,80px);translate:-50% 0;text-align:center;max-width:760px;
  width:max-content}
.nx-cap--end .nx-cap__cta{justify-content:center}
.nx-story__dots{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:10px}
.nx-story__dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 25%,transparent);
  transition:transform 300ms var(--depth-ease),background-color 300ms}
.nx-story__dots i.on{background:var(--nx-blue);transform:scale(1.7)}
/* the assembly: the preview window, centred, its panels flying in from depth */
.nx-story__assembly{position:absolute;left:50%;top:56%;z-index:1;width:min(980px,90vw);
  translate:-50% -50%;opacity:0;transform-style:preserve-3d;will-change:transform,opacity}
.nx-story__assembly .termwin{transform-style:preserve-3d;overflow:visible;
  box-shadow:0 50px 120px -40px rgba(10,34,66,.45)}
.nx-story__assembly .screen,.nx-story__assembly .tw-main,.nx-story__assembly .tw-grid,
.nx-story__assembly .kpi,.nx-story__assembly .tw-flags{transform-style:preserve-3d}
.nx-piece{will-change:transform,opacity;backface-visibility:hidden}
/* no story without motion or WebGL: the captions read as an ordinary section */
html:not(.nx-story-on) .nx-story{height:auto}
html:not(.nx-story-on) .nx-story__stage{position:relative;height:auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}
html:not(.nx-story-on) .nx-story__captions{position:relative;display:grid;gap:40px;max-width:1100px;margin:0 auto}
html:not(.nx-story-on) .nx-cap{position:relative;inset:auto;transform:none;opacity:1;max-width:none;text-align:left}
html:not(.nx-story-on) .nx-story__dots,
html:not(.nx-story-on) .nx-story__assembly{display:none}
@media(max-width:700px){
  .nx-story{height:620vh}
  .nx-cap{bottom:clamp(24px,8vh,80px)}
  /* the phone's window is taller than the screen: hang it below the closing caption, not behind it */
  .nx-story__assembly{top:max(32vh,260px);translate:-50% 0;width:96vw}
  .nx-cap--end{width:auto;left:16px;right:16px;top:84px;translate:none;max-width:none}   /* clear of the sticky header */
  .nx-story__dots{display:none}
}
@media print{ .nx-story{height:auto} .nx-story__stage{position:relative;height:auto} .nx-backdrop,.nx-story__assembly{display:none} .nx-cap{position:relative;opacity:1!important;transform:none!important} }
.nx-story__assembly{--shell:0}
.nx-story__assembly .termwin{
  background:color-mix(in srgb,var(--surface) calc(var(--shell) * 100%),transparent);
  border-color:color-mix(in srgb,var(--line-2) calc(var(--shell) * 100%),transparent);
  box-shadow:0 50px 120px -40px rgba(10,34,66,calc(var(--shell) * .45))}
[data-theme="dark"] .nx-story__assembly .termwin{
  background:color-mix(in srgb,var(--nx-surface) calc(var(--shell) * 100%),transparent)}
.nx-story__assembly .tw-side,.nx-story__assembly .chrome{background:color-mix(in srgb,var(--surface-2) 92%,transparent)}

/* =====================================================================
   One globe behind the whole page (landing-story.js)
   The sections go transparent over it, so hero, story and content read as
   one continuous scene; surfaces that carry text keep their own fill.
   ===================================================================== */
.nx-backdrop{display:none}
html.nx-backdrop-on .nx-backdrop{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1100px 760px at 74% 36%,color-mix(in srgb,var(--nx-blue) 9%,transparent),transparent 70%),
    linear-gradient(180deg,var(--nx-bg) 0%,var(--nx-bg-secondary) 100%)}
html.nx-backdrop-on[data-theme="dark"] .nx-backdrop{
  background:radial-gradient(1100px 760px at 74% 36%,rgba(38,140,244,.15),transparent 70%),
    linear-gradient(180deg,#020B17 0%,#03172B 100%)}
.nx-backdrop__globe{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none;
  transform-origin:50% 55%;will-change:transform,opacity;transition:none;cursor:default}
/* the host's opacity follows the scroll; the canvas fades in once, when the land has loaded */
.nx-backdrop__globe canvas{opacity:0;transition:opacity 900ms ease}
.nx-backdrop__globe.is-ready canvas{opacity:1}
html.nx-backdrop-on body.nx-home > section,html.nx-backdrop-on body.nx-home > .site-footer{position:relative;z-index:1}
html.nx-backdrop-on .hero,html.nx-backdrop-on .nx-story,html.nx-backdrop-on .cta{background:transparent}
html.nx-backdrop-on .hero{border-bottom:0}
html.nx-backdrop-on .nx-story{border-bottom:0}
html.nx-backdrop-on .section.tint{background:color-mix(in srgb,var(--surface-3) 70%,transparent)}
/* the 2D maps and the hero's own globe stand down: there is one globe now */
html.nx-backdrop-on .hero > .nx-world,html.nx-backdrop-on .cta > .nx-world,
html.nx-backdrop-on .hero-shot .nx-globe{display:none}
@media print{ html.nx-backdrop-on .hero,html.nx-backdrop-on .cta{background:#fff} }
/* the window's screen fills in with its frame, not before its panels land */
.nx-story__assembly .screen{background:color-mix(in srgb,var(--surface) calc(var(--shell) * 100%),transparent)}
html:not(.nx-story-on) .nx-cap__hint{display:none}   /* nothing to travel when the story is stacked */