/* exp_ns2_revamp treatment (light redesign of the homepage + six product pages). Loaded by _ns2_home.html and
   teams/_ns2_product.html, and by _ns2_header.html when the treatment header replaces the old one on any other page
   (_header_new_global.html / _header_chatllm.html). One token scale; everything is scoped under body.ns2 (or the
   header itself) because the shared page shell also loads bootstrap / uikit / semantic.
   Type: the site's own faces — Matter (display, 600) and IBM Plex Sans (body). Space Grotesk / Inter are not loaded
   anywhere on the site, so the design's display/body fonts map onto these. */

/* Tokens (v6). Every colour on the treatment pages comes from here. Light is the default; the dark set applies when the
   visitor picks dark (html[data-ns2-theme="dark"], the header toggle, stored in localStorage 'ns2-theme'), or when the
   system is dark and they haven't picked light. The dark header variant (ns2-header--dark, header-only pages that are
   dark in control) always carries the dark set, so in dark mode the light header turns into exactly that variant.
   Buttons keep #5b3df5 with white text in both themes; the terminal and code cards stay dark in both. */
:root,
.ns2-header--light {
  --ns2-bg: #f6f6fb;
  --ns2-card: #ffffff;
  --ns2-border: #e6e6f0;
  --ns2-border-strong: #d4d4e4;
  --ns2-text: #14143a;
  --ns2-body: #3d3d5c;
  --ns2-muted: #6b6b85;
  --ns2-accent: #5b3df5;
  --ns2-accent-hover: #4b2fe0;
  --ns2-badge-ink: #5b3df5;
  --ns2-btn: #5b3df5;
  --ns2-btn-hover: #4b2fe0;
  --ns2-on-btn: #ffffff;
  --ns2-on-btn-muted: rgba(255, 255, 255, 0.85);
  --ns2-focus: #5b3df5;
  --ns2-glow: rgba(91, 61, 245, 0.16);
  --ns2-inverse: #14143a;
  --ns2-on-inverse: #ffffff;
  --ns2-footer: #0f0f2e;
  --ns2-footer-edge: transparent;
  --ns2-term: #0f0f2e;
  --ns2-term-bar: #1a1b45;
  --ns2-term-edge: rgba(255, 255, 255, 0.1);
  --ns2-on-dark: #ffffff;
  --ns2-dark-muted: #b8b8d0;
  --ns2-green: #1fa56b;
  --ns2-lavender: #e9e6fb;
  --ns2-mint: #ddf3ec;
  --ns2-peach: #fbe6d6;
  --ns2-sky: #e1e9fb;
  --ns2-blush: #f9dde4;
  --ns2-lilac: #eee5f8;
  --ns2-cream: #fbf5e6;
  --ns2-glow-a: #cdc2ff;
  --ns2-glow-b: #bfe0ff;
  --ns2-glow-c: #ffd9c9;
  --ns2-header-bg: #ffffff;
  --ns2-nav: #3d3d5c;
  --ns2-nav-hover: #14143a;
  --ns2-nav-hover-bg: #f6f6fb;
  --ns2-dd-hover: #f6f6fb;
  --ns2-logo-filter: brightness(0) invert(0.3);
  --ns2-press-filter: none;
  --ns2-logo-opacity: 0.75;
  --ns2-scrim: rgba(20, 20, 58, 0.55);
  --ns2-scan: #ffffff;
  --ns2-mask: #000000;
  --ns2-shadow: 0 8px 30px rgba(20, 20, 58, 0.08);
  --ns2-shadow-xs: 0 1px 2px rgba(20, 20, 58, 0.08);
  --ns2-shadow-hover: 0 12px 32px rgba(20, 20, 58, 0.1);
  --ns2-shadow-lift: 0 18px 40px rgba(20, 20, 58, 0.12);
  --ns2-shadow-lg: 0 24px 60px rgba(20, 20, 58, 0.08);
  --ns2-shadow-pop: 0 24px 60px rgba(20, 20, 58, 0.18);
  --ns2-shadow-dd: 0 8px 30px rgba(20, 20, 58, 0.08);
  --ns2-radius: 16px;
  --ns2-radius-sm: 10px;
  --ns2-display: Matter, "IBM Plex Sans", sans-serif;
  --ns2-font: "IBM Plex Sans", sans-serif;
}
:root[data-ns2-theme="dark"],
.ns2-header--dark {
  --ns2-bg: #0f0f2e;
  --ns2-card: #15163a;
  --ns2-border: rgba(255, 255, 255, 0.1);
  --ns2-border-strong: rgba(255, 255, 255, 0.2);
  --ns2-text: #edeef6;
  --ns2-body: #c9ccdd;
  --ns2-muted: #9a9eb8;
  --ns2-accent: #8b85f2;
  --ns2-accent-hover: #aaa5f7;
  --ns2-badge-ink: #d4d1fc;
  --ns2-btn: #5b3df5;
  --ns2-btn-hover: #4b2fe0;
  --ns2-on-btn: #ffffff;
  --ns2-on-btn-muted: rgba(255, 255, 255, 0.85);
  --ns2-focus: #ffffff;
  --ns2-glow: rgba(139, 133, 242, 0.28);
  --ns2-inverse: #edeef6;
  --ns2-on-inverse: #0f0f2e;
  --ns2-footer: #0a0a22;
  --ns2-footer-edge: rgba(255, 255, 255, 0.1);
  --ns2-term: #0f0f2e;
  --ns2-on-dark: #ffffff;
  --ns2-dark-muted: #b8b8d0;
  --ns2-green: #2fbf7f;
  --ns2-lavender: color-mix(in srgb, #e9e6fb 20%, #15163a);
  --ns2-mint: color-mix(in srgb, #ddf3ec 20%, #15163a);
  --ns2-peach: color-mix(in srgb, #fbe6d6 20%, #15163a);
  --ns2-sky: color-mix(in srgb, #e1e9fb 20%, #15163a);
  --ns2-blush: color-mix(in srgb, #f9dde4 20%, #15163a);
  --ns2-lilac: color-mix(in srgb, #eee5f8 20%, #15163a);
  --ns2-cream: color-mix(in srgb, #fbf5e6 14%, #15163a);
  --ns2-glow-a: rgba(99, 91, 255, 0.55);
  --ns2-glow-b: rgba(56, 132, 255, 0.4);
  --ns2-glow-c: rgba(255, 140, 120, 0.25);
  --ns2-header-bg: #0f0f2e;
  --ns2-nav: rgba(255, 255, 255, 0.72);
  --ns2-nav-hover: #ffffff;
  --ns2-nav-hover-bg: rgba(255, 255, 255, 0.08);
  --ns2-dd-hover: rgba(255, 255, 255, 0.06);
  --ns2-logo-filter: brightness(0) invert(1);
  --ns2-press-filter: brightness(1.7);
  --ns2-logo-opacity: 0.7;
  --ns2-scrim: rgba(5, 5, 20, 0.72);
  --ns2-scan: #ffffff;
  --ns2-mask: #000000;
  --ns2-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --ns2-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ns2-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.45);
  --ns2-shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.5);
  --ns2-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
  --ns2-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55);
  --ns2-shadow-dd: 0 16px 40px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) {
    --ns2-bg: #0f0f2e;
    --ns2-card: #15163a;
    --ns2-border: rgba(255, 255, 255, 0.1);
    --ns2-border-strong: rgba(255, 255, 255, 0.2);
    --ns2-text: #edeef6;
    --ns2-body: #c9ccdd;
    --ns2-muted: #9a9eb8;
    --ns2-accent: #8b85f2;
    --ns2-accent-hover: #aaa5f7;
    --ns2-badge-ink: #d4d1fc;
    --ns2-btn: #5b3df5;
    --ns2-btn-hover: #4b2fe0;
    --ns2-on-btn: #ffffff;
    --ns2-on-btn-muted: rgba(255, 255, 255, 0.85);
    --ns2-focus: #ffffff;
    --ns2-glow: rgba(139, 133, 242, 0.28);
    --ns2-inverse: #edeef6;
    --ns2-on-inverse: #0f0f2e;
    --ns2-footer: #0a0a22;
    --ns2-footer-edge: rgba(255, 255, 255, 0.1);
    --ns2-term: #0f0f2e;
    --ns2-on-dark: #ffffff;
    --ns2-dark-muted: #b8b8d0;
    --ns2-green: #2fbf7f;
    --ns2-lavender: color-mix(in srgb, #e9e6fb 20%, #15163a);
    --ns2-mint: color-mix(in srgb, #ddf3ec 20%, #15163a);
    --ns2-peach: color-mix(in srgb, #fbe6d6 20%, #15163a);
    --ns2-sky: color-mix(in srgb, #e1e9fb 20%, #15163a);
    --ns2-blush: color-mix(in srgb, #f9dde4 20%, #15163a);
    --ns2-lilac: color-mix(in srgb, #eee5f8 20%, #15163a);
    --ns2-cream: color-mix(in srgb, #fbf5e6 14%, #15163a);
    --ns2-glow-a: rgba(99, 91, 255, 0.55);
    --ns2-glow-b: rgba(56, 132, 255, 0.4);
    --ns2-glow-c: rgba(255, 140, 120, 0.25);
    --ns2-header-bg: #0f0f2e;
    --ns2-nav: rgba(255, 255, 255, 0.72);
    --ns2-nav-hover: #ffffff;
    --ns2-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --ns2-dd-hover: rgba(255, 255, 255, 0.06);
    --ns2-logo-filter: brightness(0) invert(1);
    --ns2-press-filter: brightness(1.7);
    --ns2-logo-opacity: 0.7;
    --ns2-scrim: rgba(5, 5, 20, 0.72);
    --ns2-scan: #ffffff;
    --ns2-mask: #000000;
    --ns2-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    --ns2-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ns2-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.45);
    --ns2-shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.5);
    --ns2-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
    --ns2-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55);
    --ns2-shadow-dd: 0 16px 40px rgba(0, 0, 0, 0.35);
  }
}
:root[data-ns2-theme="dark"] body.ns2 {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) body.ns2 {
    color-scheme: dark;
  }
}
.ns2 {
  margin: 0;
  background: var(--ns2-bg);
  color: var(--ns2-body);
  font-family: var(--ns2-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The shared shell wraps the page in an overflow:hidden div, which would stop the header sticking. */
body.ns2 > div:first-of-type {
  overflow: clip !important;
}

.ns2 *,
.ns2 *::before,
.ns2 *::after,
.ns2-header,
.ns2-header * {
  box-sizing: border-box;
}
/* bootstrap / uikit / general.css set p to Roboto 300 and headings to letter-spaced faces; reset inside the page. */
.ns2
  :where(main, header, footer)
  :where(p, li, dt, dd, label, span, a, button, input, textarea, h1, h2, h3) {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}
.ns2 main,
.ns2 header,
.ns2 footer {
  font-family: var(--ns2-font);
  font-weight: 400;
  color: var(--ns2-body);
}
.ns2 main p,
.ns2 main h1,
.ns2 main h2,
.ns2 main h3,
.ns2 main ul,
.ns2 main dl,
.ns2 main dd,
.ns2 footer p {
  margin: 0;
}
.ns2 main ul {
  padding: 0;
  list-style: none;
}
.ns2 a {
  color: var(--ns2-accent);
  text-decoration: none;
}
.ns2 a:hover {
  color: var(--ns2-accent-hover);
  text-decoration: none;
}
.ns2 [hidden] {
  display: none !important;
}
.ns2 :focus-visible,
.ns2-header :focus-visible {
  outline: 2px solid var(--ns2-focus);
  outline-offset: 2px;
}
.ns2 .ns2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ns2-container {
  width: 100%;
  max-width: 1088px;
  margin: 0 auto;
  padding: 0 24px;
}
.ns2-center {
  text-align: center;
}
.ns2-section {
  margin-top: 96px;
}

/* Type scale */
.ns2 .ns2-h1 {
  font-family: var(--ns2-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  color: var(--ns2-text);
  letter-spacing: -0.01em;
}
.ns2 .ns2-h2 {
  font-family: var(--ns2-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  color: var(--ns2-text);
}
.ns2 .ns2-h3 {
  font-family: var(--ns2-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ns2-text);
}
.ns2 .ns2-accent {
  color: var(--ns2-accent);
}
.ns2 .ns2-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ns2-body);
}
.ns2 .ns2-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ns2-muted);
  max-width: 620px;
  margin-top: 20px;
}
.ns2 .ns2-small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ns2-body);
}
.ns2 .ns2-muted {
  color: var(--ns2-muted);
}
.ns2 .ns2-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns2-accent);
}
.ns2 .ns2-eyebrow--muted {
  color: var(--ns2-muted);
}
.ns2 .ns2-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.ns2 .ns2-split .ns2-head {
  margin-bottom: 20px;
}
.ns2 .ns2-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ns2 .ns2-head .ns2-h2 {
  margin-top: 12px;
}
.ns2 .ns2-head .ns2-sub {
  margin-top: 12px;
  font-size: 17px;
  color: var(--ns2-muted);
}
.ns2 .ns2-note {
  margin-top: 24px;
}

/* Buttons + links */
.ns2 .ns2-btn,
.ns2-header .ns2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--ns2-btn);
  border-radius: var(--ns2-radius-sm);
  background: var(--ns2-btn);
  color: var(--ns2-on-btn);
  font-family: var(--ns2-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.ns2 .ns2-btn:hover,
.ns2-header .ns2-btn:hover {
  background: var(--ns2-btn-hover);
  border-color: var(--ns2-btn-hover);
  color: var(--ns2-on-btn);
}
.ns2 .ns2-btn--ghost {
  background: var(--ns2-card);
  color: var(--ns2-text);
  border-color: var(--ns2-border);
}
.ns2 .ns2-btn--ghost:hover {
  background: var(--ns2-card);
  color: var(--ns2-accent);
  border-color: var(--ns2-accent);
}
.ns2-header .ns2-btn--pill {
  border-radius: 999px;
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
}
.ns2 .ns2-btn--block {
  display: flex;
  width: 100%;
  margin-top: auto;
}
.ns2 .ns2-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ns2-accent);
}
.ns2 .ns2-link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--ns2-font);
}
.ns2 .ns2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Header */
.ns2-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 72px;
  background: var(--ns2-header-bg);
  border-bottom: 1px solid var(--ns2-border);
  font-family: var(--ns2-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ns2-body);
  text-align: left;
}
/* On pages that aren't treatment templates the header is fixed with an in-flow 72px spacer: those pages nest their
   header inside wrappers (fixed-height or overflow:hidden) that would stop a sticky one. */
.ns2-header--global {
  position: fixed;
  left: 0;
  right: 0;
}
.ns2-header-spacer {
  height: 72px;
}
html:has(.ns2-header) {
  scroll-padding-top: 72px;
}
.ns2-header :where(p, li, a, button, span, nav, div) {
  font-family: var(--ns2-font);
  letter-spacing: normal;
}
.ns2-header a,
.ns2-header a:hover {
  text-decoration: none;
}
.ns2-header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}
.ns2-logo {
  display: flex;
  flex-shrink: 0;
}
.ns2-logo img {
  width: 148px;
  height: auto;
  display: block;
}
.ns2-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.ns2-header .ns2-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ns2-radius-sm);
  background: none;
  color: var(--ns2-nav);
  font-family: var(--ns2-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.ns2-header .ns2-nav-link:hover,
.ns2-header .ns2-dd.is-open > .ns2-nav-link {
  color: var(--ns2-nav-hover);
  background: var(--ns2-nav-hover-bg);
}
.ns2-nav-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.ns2-dd {
  position: relative;
}
.ns2-dd.is-open .ns2-nav-link svg {
  transform: rotate(180deg);
}
.ns2-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  z-index: 1001;
  padding: 12px;
  background: var(--ns2-card);
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius);
  box-shadow: var(--ns2-shadow-dd);
}
.ns2-dd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.ns2-dd.is-open .ns2-dd-panel {
  display: block;
}
.ns2-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ns2-header .lang-switcher__btn {
  background: transparent;
  border-color: var(--ns2-border);
  color: var(--ns2-nav);
}

/* Theme toggle (v6): moon in light mode (switches to dark), sun in dark mode. */
.ns2-header .ns2-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ns2-nav);
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}
.ns2-header .ns2-theme-btn:hover {
  color: var(--ns2-nav-hover);
  background: var(--ns2-nav-hover-bg);
}
.ns2-theme-btn svg {
  width: 18px;
  height: 18px;
}
.ns2-theme-btn .ns2-theme-sun,
:root[data-ns2-theme="dark"] .ns2-theme-btn .ns2-theme-moon {
  display: none;
}
:root[data-ns2-theme="dark"] .ns2-theme-btn .ns2-theme-sun {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) .ns2-theme-btn .ns2-theme-moon {
    display: none;
  }
  :root:not([data-ns2-theme="light"]) .ns2-theme-btn .ns2-theme-sun {
    display: block;
  }
}

/* Products dropdown items (renderSolDropdown markup, restyled light) */
/* v14 menus: themed icon tiles (lavender / accent) that light up and tilt on hover; items stagger in when the panel
   opens. Icons are ns2Icon SVGs (currentColor), so both themes and the fixed light/dark headers just work. */
.ns2-menu {
  display: grid;
  gap: 8px;
  min-width: 300px;
}
.ns2-menu--cols {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}
.ns2-menu-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ns2-menu--cols .ns2-menu-col + .ns2-menu-col {
  border-left: 1px solid var(--ns2-border);
  padding-left: 8px;
}
.ns2-menu-col li {
  padding: 0;
  border: 0;
}
.ns2-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ns2-radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease-out;
}
.ns2-menu-item:hover,
.ns2-menu-item:focus-visible {
  background: var(--ns2-dd-hover);
}
.ns2-menu-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--ns2-lavender);
  color: var(--ns2-accent);
  overflow: hidden;
  transition:
    background 200ms ease-out,
    color 200ms ease-out,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
:root[data-ns2-theme="dark"] .ns2-menu-tile,
.ns2-header--dark .ns2-menu-tile {
  background: rgba(139, 133, 242, 0.16);
}
.ns2-menu-tile img,
.ns2-menu-tile i {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.ns2-menu-tile img {
  object-fit: contain;
}
/* The Research / Company line icons are the control header's SVGs drawn through a mask, so they take currentColor. */
.ns2-menu-tile i {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ns2-mask) center / contain no-repeat;
  mask: var(--ns2-mask) center / contain no-repeat;
}
.ns2-menu-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45),
    transparent 70%
  );
  translate: -100% 0;
}
.ns2-menu-item:hover .ns2-menu-tile,
.ns2-menu-item:focus-visible .ns2-menu-tile {
  background: var(--ns2-btn);
  color: var(--ns2-on-btn);
  transform: rotate(-6deg) scale(1.06);
}
.ns2-menu-item:hover .ns2-menu-tile img,
.ns2-menu-item:hover .ns2-menu-tile i {
  transform: rotate(6deg) scale(1.1);
}
.ns2-menu-item:hover .ns2-menu-tile--logo {
  background: var(--ns2-lilac);
  color: var(--ns2-accent);
}
.ns2-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ns2-menu-text b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ns2-text);
}
.ns2-menu-text span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ns2-muted);
}
.ns2-menu-item:hover .ns2-menu-text b {
  color: var(--ns2-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .ns2-dd.is-open .ns2-menu-col li {
    animation: ns2-menu-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--ns2-i, 0) * 35ms) both;
  }
  .ns2-menu-item:hover .ns2-menu-tile::after {
    animation: ns2-sweep 600ms ease-out;
  }
}
@keyframes ns2-menu-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* Dark variant (header-only pages that are dark in control, and every header in dark mode): the dark tokens above do
   the work; only the logo differs. */
.ns2-logo .ns2-logo-white {
  display: none;
}
.ns2-header--dark .ns2-logo .ns2-logo-ink,
:root[data-ns2-theme="dark"] .ns2-logo .ns2-logo-ink {
  display: none;
}
.ns2-header--dark .ns2-logo .ns2-logo-white,
:root[data-ns2-theme="dark"] .ns2-logo .ns2-logo-white {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) .ns2-logo .ns2-logo-ink {
    display: none;
  }
  :root:not([data-ns2-theme="light"]) .ns2-logo .ns2-logo-white {
    display: block;
  }
}
/* v12: a header-only page that is light keeps the light header (and ink logo) whatever the visitor's theme; the page
   body can't follow the toggle, so the header follows the page. */
.ns2-header.ns2-header--light .ns2-logo .ns2-logo-ink {
  display: block;
}
.ns2-header.ns2-header--light .ns2-logo .ns2-logo-white {
  display: none;
}

/* Hero */
.ns2-hero {
  position: relative;
  isolation: isolate;
  padding-top: 80px;
  overflow-x: clip; /* the glow reaches past the container */
}
/* v7 glow (round 4's "blue light"): three blurred ellipses behind the whole hero, dissolving under the prompt box.
   Colours are the --ns2-glow-* tokens (light: pastel; dark: translucent, set in the dark blocks). */
.ns2-glow {
  position: absolute;
  inset: -140px 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ns2-glow i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.8;
  translate: calc(var(--ns2-mx, 0) * 80px) calc(var(--ns2-my, 0) * 50px);
  transition: translate 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ns2-glow i:nth-child(2) {
  translate: calc(var(--ns2-mx, 0) * -60px) calc(var(--ns2-my, 0) * -40px);
}
.ns2-glow i:nth-child(1) {
  top: 0;
  left: calc(50% - 560px);
  width: 720px;
  height: 520px;
  background: var(--ns2-glow-a);
}
.ns2-glow i:nth-child(2) {
  top: 40px;
  left: calc(50% - 120px);
  width: 720px;
  height: 480px;
  background: var(--ns2-glow-b);
}
.ns2-glow i:nth-child(3) {
  top: -60px;
  left: calc(50% - 200px);
  width: 420px;
  height: 320px;
  background: var(--ns2-glow-c);
}
.ns2-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, var(--ns2-bg) 78%);
}
.ns2-hero-head {
  position: relative;
}
.ns2-hero .ns2-center .ns2-lead {
  margin-left: auto;
  margin-right: auto;
}
.ns2-hero .ns2-h1 {
  margin-top: 12px;
}
.ns2-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ns2 .ns2-hero-grid .ns2-checks--row {
  justify-content: flex-start;
  margin-top: 20px;
}
.ns2-hero-grid .ns2-small.ns2-muted {
  margin-top: 12px;
}

/* Composer */
.ns2 .ns2-composer {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 20px 20px 16px;
  text-align: left;
  background: var(--ns2-card);
  border: 1px solid var(--ns2-border);
  border-radius: 22px;
  box-shadow: var(--ns2-shadow);
}
.ns2 .ns2-composer textarea {
  min-height: 60px;
}
.ns2-composer-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ns2-text);
}
.ns2 .ns2-composer textarea,
.ns2 .ns2-composer input[type="text"] {
  width: 100%;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--ns2-text);
  font-family: var(--ns2-font);
  font-size: 17px;
  line-height: 1.5;
  outline: none;
}
.ns2 .ns2-composer textarea::placeholder,
.ns2 .ns2-composer input::placeholder {
  color: var(--ns2-muted);
}
.ns2-composer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.ns2-composer-row .ns2-btn {
  margin-left: auto;
}
.ns2 .ns2-composer--inline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 8px 8px 8px 16px;
  max-width: 560px;
}
.ns2-segment {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
  background: var(--ns2-bg);
}
.ns2 .ns2-segment button {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: none;
  color: var(--ns2-muted);
  font-family: var(--ns2-font);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.ns2 .ns2-segment button[aria-pressed="true"] {
  background: var(--ns2-card);
  color: var(--ns2-text);
  box-shadow: var(--ns2-shadow-xs);
}
.ns2 .ns2-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
  background: var(--ns2-card);
  color: var(--ns2-muted);
  cursor: pointer;
}
.ns2-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Checks */
.ns2 .ns2-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ns2-body);
}
.ns2 .ns2-checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ns2 .ns2-checks--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 24px;
}
.ns2 .ns2-checks--stack {
  margin-top: 16px;
}
.ns2 .ns2-checks--lg {
  font-size: 17px;
  margin-top: 8px;
}
.ns2-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--ns2-green);
}
.ns2-checks--lg .ns2-check {
  margin-top: 5px;
}

/* Cards + grids */
.ns2-grid {
  display: grid;
  gap: 24px;
}
.ns2-grid--1 {
  grid-template-columns: 1fr;
}
.ns2-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.ns2-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.ns2-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.ns2 .ns2-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--ns2-card);
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius);
  min-width: 0;
}
.ns2 .ns2-card--big {
  padding: 32px;
}
.ns2 .ns2-card .ns2-h3 + .ns2-small {
  margin-top: 8px;
}
.ns2 .ns2-card .ns2-small + .ns2-small {
  margin-top: 12px;
}
.ns2 .ns2-card .ns2-link {
  margin-top: auto;
  padding-top: 16px;
}
.ns2 .ns2-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns2-muted);
  margin-bottom: 8px;
}
.ns2 .ns2-card-label img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: contain;
}
/* v24: a compact section (Agent's "How it works"): narrower, less tall. */
.ns2 .ns2-section--compact .ns2-container {
  max-width: 880px;
}
.ns2 .ns2-section--compact .ns2-head {
  margin-bottom: 24px;
}
.ns2 .ns2-section--compact .ns2-card {
  padding: 16px;
}
.ns2 .ns2-section--compact .ns2-card .ns2-h3 {
  font-size: 16px;
}
.ns2 .ns2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--ns2-radius-sm);
  background: var(--ns2-lavender);
  color: var(--ns2-accent);
}
.ns2-icon svg {
  width: 20px;
  height: 20px;
}
.ns2 .ns2-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--ns2-lavender);
  color: var(--ns2-accent);
  font-size: 14px;
  font-weight: 700;
}
.ns2 .ns2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.ns2 .ns2-tags li {
  padding: 4px 10px;
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
  background: var(--ns2-bg);
  font-size: 12px;
  color: var(--ns2-body);
}
.ns2 .ns2-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ns2-lavender);
  color: var(--ns2-badge-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.ns2 .ns2-badge--solid {
  background: var(--ns2-card);
  color: var(--ns2-text);
}

.ns2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Comparison */
.ns2-compare-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ns2-border);
  font-size: 17px;
  color: var(--ns2-body);
}
.ns2-compare-row--total {
  font-weight: 700;
  color: var(--ns2-text);
  border-bottom: 0;
}
.ns2-compare-ours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 20px;
  border-radius: var(--ns2-radius-sm);
  background: var(--ns2-btn);
  color: var(--ns2-on-btn);
}
.ns2 .ns2-compare-ours .ns2-small {
  color: var(--ns2-on-btn-muted);
  margin-top: 4px;
}
.ns2 .ns2-compare-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--ns2-on-btn);
}
.ns2-compare-price {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--ns2-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
.ns2 .ns2-footnote {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ns2-muted);
}

/* Plans */
.ns2-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ns2-plan--pop {
  border: 2px solid var(--ns2-accent) !important;
}
.ns2 .ns2-plan-price {
  margin-top: 16px;
  font-family: var(--ns2-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ns2-text);
}
.ns2 .ns2-plan-price span {
  font-family: var(--ns2-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--ns2-muted);
}
.ns2-plan .ns2-checks {
  margin-bottom: 24px;
}

/* Examples */
.ns2-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.ns2 .ns2-tab {
  padding: 8px 16px;
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
  background: var(--ns2-card);
  color: var(--ns2-body);
  font-family: var(--ns2-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.ns2 .ns2-tab[aria-pressed="true"] {
  background: var(--ns2-inverse);
  border-color: var(--ns2-inverse);
  color: var(--ns2-on-inverse);
}
.ns2-example-cover {
  position: relative;
  margin: -8px -8px 16px;
  padding: 16px 16px 0;
  border-radius: var(--ns2-radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ns2-example-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 8px 8px 0 0;
}
.ns2-example-cover .ns2-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}
.ns2 .ns2-example-prompt {
  margin-top: 8px;
  color: var(--ns2-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ns2 .ns2-media .ns2-example-prompt {
  display: block;
  overflow: visible;
}
.ns2 [data-ns2-more-btn] {
  display: block;
  margin: 24px auto 0;
}
.ns2-tint--lavender {
  background: var(--ns2-lavender);
}
.ns2-tint--mint {
  background: var(--ns2-mint);
}
.ns2-tint--peach {
  background: var(--ns2-peach);
}
.ns2-tint--sky {
  background: var(--ns2-sky);
}
.ns2-tint--blush {
  background: var(--ns2-blush);
}
.ns2-tint--lilac {
  background: var(--ns2-lilac);
}

/* FAQ */
.ns2-faq-wrap {
  max-width: 808px;
}
.ns2 .ns2-faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--ns2-border);
}
.ns2 .ns2-faq-item:first-child {
  padding-top: 0;
}
.ns2 .ns2-faq dt {
  font-size: 17px;
  font-weight: 700;
  color: var(--ns2-text);
}
.ns2 .ns2-faq dd {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ns2-muted);
}
.ns2 .ns2-faq dd p + p,
.ns2 .ns2-faq dd ul {
  margin-top: 8px;
}
.ns2 .ns2-faq dd ul {
  padding-left: 20px;
  list-style: disc;
}
.ns2 .ns2-faq dd a {
  color: var(--ns2-accent) !important;
}
.ns2-faq-wrap .ns2-center {
  margin-top: 24px;
}

/* Banner */
.ns2-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  border-radius: var(--ns2-radius);
  background: var(--ns2-cream);
  border: 1px solid var(--ns2-border);
}
.ns2 .ns2-banner .ns2-body {
  margin-top: 12px;
  max-width: 640px;
}

/* Product proof cards */
.ns2-proof {
  box-shadow: var(--ns2-shadow);
}
.ns2-search {
  padding: 10px 14px;
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius-sm);
  color: var(--ns2-muted);
  font-size: 14px;
}
.ns2 .ns2-model-list {
  margin-top: 12px;
}
.ns2 .ns2-model-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ns2-radius-sm);
  font-size: 15px;
  color: var(--ns2-text);
}
.ns2 .ns2-model-list li.is-active {
  background: var(--ns2-lavender);
}
.ns2 .ns2-model-list li .ns2-muted {
  font-size: 14px;
}
.ns2 .ns2-task-prompt {
  font-size: 17px;
  font-weight: 600;
  color: var(--ns2-text);
}
.ns2 .ns2-pending {
  color: var(--ns2-muted);
}
.ns2-browser {
  margin-top: 20px;
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius-sm);
  overflow: hidden;
}
.ns2-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--ns2-bg);
  font-size: 12px;
  color: var(--ns2-muted);
}
.ns2-browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ns2-border);
}
.ns2-browser-bar span {
  margin-left: 8px;
}
.ns2-browser-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}
.ns2-browser-body span {
  height: 48px;
  border-radius: 8px;
}
.ns2-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.ns2 .ns2-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius-sm);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ns2-text);
}
.ns2-feature img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Purpose-built proof cards (SuperComputer machine, Desktop window, Personal Agents thread, AutoBots run log) */
.ns2-split--center {
  align-items: center;
}
.ns2-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ns2-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ns2-border);
}
.ns2 .ns2-proof-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ns2-text);
}
.ns2 .ns2-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ns2-muted);
  white-space: nowrap;
}
.ns2-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--ns2-green);
}
.ns2-status-dot--busy {
  background: var(--ns2-accent);
}
.ns2 .ns2-proof-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ns2-border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ns2-text);
}
.ns2 .ns2-proof-rows li:last-child {
  border-bottom: 0;
}
.ns2-proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--ns2-lavender);
  color: var(--ns2-accent);
}
.ns2 .ns2-proof-detail {
  margin-left: auto;
  font-size: 14px;
  color: var(--ns2-muted);
  white-space: nowrap;
}
.ns2 .ns2-proof-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
}
.ns2 .ns2-proof-text b {
  font-weight: 600;
  color: var(--ns2-text);
}
.ns2 .ns2-proof-text > span {
  color: var(--ns2-muted);
}
.ns2 .ns2-term {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--ns2-radius-sm);
  background: var(--ns2-term);
  color: var(--ns2-on-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.ns2 .ns2-term > span:first-child {
  color: var(--ns2-green);
}
.ns2-term-caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -3px;
  background: var(--ns2-dark-muted);
}
.ns2-bar {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ns2-bg);
  overflow: hidden;
}
.ns2-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ns2-accent);
}
.ns2 .ns2-proof--window,
.ns2 .ns2-proof--thread {
  padding: 0;
  overflow: hidden;
}
.ns2 .ns2-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--ns2-bg);
  border-bottom: 1px solid var(--ns2-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--ns2-muted);
}
.ns2-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ns2-border);
}
.ns2-window-bar span {
  flex: 1;
  margin-right: 34px;
  text-align: center;
}
.ns2 .ns2-proof-rows--app {
  padding: 8px 24px 12px;
}
.ns2 .ns2-proof-rows--app li {
  padding: 16px 0;
}
.ns2-proof-rows--app img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}
.ns2-thread {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 320px;
}
.ns2 .ns2-contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-right: 1px solid var(--ns2-border);
  background: var(--ns2-bg);
}
.ns2 .ns2-contacts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--ns2-radius-sm);
}
.ns2 .ns2-contacts li.is-active {
  background: var(--ns2-card);
  box-shadow: var(--ns2-shadow-xs);
}
.ns2 .ns2-contacts .ns2-proof-text > span,
.ns2 .ns2-contacts .ns2-proof-text b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns2 .ns2-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ns2-text);
}
.ns2-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
}
.ns2 .ns2-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.ns2 .ns2-msg--agent {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--ns2-bg);
  color: var(--ns2-text);
}
.ns2 .ns2-msg--you {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--ns2-btn);
  color: var(--ns2-on-btn);
}
.ns2 .ns2-proof--runlog .ns2-proof-title {
  margin-top: 8px;
  padding-bottom: 4px;
}
.ns2 .ns2-runs li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ns2-border);
}
.ns2 .ns2-runs .ns2-proof-text > span:first-child {
  color: var(--ns2-text);
}
.ns2 .ns2-run-name {
  width: 48px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ns2-muted);
}
.ns2 .ns2-proof-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--ns2-radius-sm);
  background: var(--ns2-lavender);
  color: var(--ns2-accent);
  font-size: 14px;
  font-weight: 600;
}

/* Feature rows (Desktop "Three apps, one download") */
.ns2-rows {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.ns2-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: center;
}
.ns2-row:nth-child(even) > :first-child {
  order: 2;
}
.ns2-row-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  object-fit: contain;
}
.ns2 .ns2-row .ns2-body {
  margin-top: 8px;
}
.ns2-shot {
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius);
  background: var(--ns2-card);
  overflow: hidden;
}
.ns2-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.ns2 .ns2-badge--caps {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Footer */
.ns2 .ns2-footer {
  margin-top: 96px;
  padding: 56px 0;
  background: var(--ns2-footer);
  border-top: 1px solid var(--ns2-footer-edge);
  color: var(--ns2-dark-muted);
  font-size: 14px;
}
.ns2-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.ns2-footer-brand img {
  width: 176px;
  height: auto;
}
.ns2 .ns2-footer-brand p {
  margin-top: 12px;
  max-width: 320px;
}
.ns2 .ns2-footer-copy {
  font-size: 12px;
}
.ns2 .ns2-social {
  display: flex;
  gap: 8px;
  margin: 20px 0 16px;
  padding: 0;
  list-style: none;
}
.ns2 .ns2-social li {
  padding: 0;
  border: 0;
}
.ns2 .ns2-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ns2-footer-edge);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  transition:
    background 200ms ease-out,
    border-color 200ms ease-out,
    transform 200ms ease-out;
}
.ns2 .ns2-social a:hover {
  border-color: var(--ns2-accent);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.ns2 .ns2-social img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.ns2-footer-cols {
  display: flex;
  gap: 64px;
}
.ns2-footer-cols div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ns2 .ns2-footer-h {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns2-on-dark);
}
.ns2 .ns2-footer a {
  color: var(--ns2-dark-muted);
}
.ns2 .ns2-footer a:hover {
  color: var(--ns2-on-dark);
}

/* Proof block under the hero (v5): stats (homepage), customer-logo marquee, press line (homepage) */
.ns2-proofband {
  margin-top: 72px;
  padding: 32px 0;
  border-top: 1px solid var(--ns2-border);
  border-bottom: 1px solid var(--ns2-border);
}
/* Product pages (v8.1): the band closes the page, so only its top rule shows before the footer. */
.ns2 main > .ns2-proofband:last-child {
  margin-top: 96px;
  border-bottom: 0;
}
.ns2-statsband {
  margin-top: 64px;
}
.ns2 .ns2-stats {
  display: flex;
  justify-content: center;
}
.ns2 .ns2-stats li {
  display: flex;
  flex: 1 1 0;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ns2-muted);
}
.ns2 .ns2-stats li > span {
  max-width: 130px;
  text-wrap: balance;
}
.ns2 .ns2-stats li + li {
  border-left: 1px solid var(--ns2-border);
}
.ns2 .ns2-stat-num {
  white-space: nowrap;
  font-family: var(--ns2-display);
  font-size: 44px;
  background: linear-gradient(120deg, var(--ns2-text), var(--ns2-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ns2-text);
  font-variant-numeric: tabular-nums;
}
.ns2 .ns2-stat-num--text {
  font-size: 24px;
  white-space: normal;
  text-align: center;
}
/* v8: two aligned rows, customers (marquee) and press (linked logos), sharing one label column. */
.ns2-band-rows {
  display: grid;
  gap: 24px;
}
.ns2-logos {
  display: grid;
  grid-template-columns: 168px 1fr;
  align-items: center;
  gap: 32px;
}
.ns2 .ns2-logos-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns2-muted);
}
.ns2 .ns2-logos-label a {
  color: inherit;
  text-decoration: none;
}
.ns2 .ns2-logos-label a:hover {
  color: var(--ns2-text);
}
.ns2 .ns2-press {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
}
.ns2 .ns2-press a {
  display: block;
  border-radius: 6px;
}
.ns2 .ns2-press a:focus-visible {
  outline: 2px solid var(--ns2-accent);
  outline-offset: 4px;
}
/* The press logos are mid-grey on transparent (drawn for a white page): as-is in light, lifted in dark. */
.ns2 .ns2-press img {
  display: block;
  filter: var(--ns2-press-filter);
  opacity: 0.8;
  transition: opacity 200ms ease-out;
}
.ns2 .ns2-press a:hover img {
  opacity: 1;
}
.ns2-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    var(--ns2-mask) 6%,
    var(--ns2-mask) 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    var(--ns2-mask) 6%,
    var(--ns2-mask) 94%,
    transparent
  );
}
.ns2-marquee-track {
  display: flex;
  width: max-content;
  animation: ns2-marquee 30s linear infinite;
}
.ns2-marquee:hover .ns2-marquee-track {
  animation-play-state: paused;
}
.ns2 .ns2-marquee-set {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.ns2 .ns2-marquee-set li,
.ns2 .ns2-press li {
  padding: 0;
  border: 0; /* the generic list rule draws a hairline under each item */
}
/* The case-studies logos are white (drawn for a dark page): a mid grey in light mode, white at .7 in dark mode. */
.ns2-marquee-set img {
  display: block;
  filter: var(--ns2-logo-filter);
  opacity: var(--ns2-logo-opacity);
}

/* Proof-card pieces the motion drives (static = final state) */
.ns2 .ns2-pending {
  position: relative;
}
.ns2-spin {
  position: absolute;
  top: 3px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ns2-lavender);
  border-top-color: var(--ns2-accent);
  border-radius: 999px;
  opacity: 0;
}
.ns2 .ns2-term-note {
  display: block;
  margin-top: 4px;
  color: var(--ns2-dark-muted);
}
.ns2-msg-slot {
  position: relative;
  max-width: 88%;
}
.ns2-msg-slot--agent {
  align-self: flex-start;
}
.ns2-msg-slot--you {
  align-self: flex-end;
}
.ns2 .ns2-msg-slot .ns2-msg {
  max-width: none;
}
.ns2-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 4px;
  padding: 16px 14px;
  border-radius: 14px;
  background: var(--ns2-bg);
  opacity: 0;
}
.ns2-typing i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ns2-muted);
}

/* Motion (v5). Transform / opacity only, once. The hero fades up by CSS alone; everything else waits for ns2Script to
   set html.ns2-motion (which it skips under prefers-reduced-motion), so without it every element shows its final state.
   Reveals use the `translate` property so card hover lifts (`transform`) never fight them. */
.ns2 .ns2-grid > .ns2-card {
  transition:
    opacity 500ms ease-out var(--ns2-d, 0ms),
    translate 500ms ease-out var(--ns2-d, 0ms),
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}
.ns2 .ns2-grid > .ns2-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ns2-shadow-hover);
}
.ns2 .ns2-grid > .ns2-card.ns2-tilt:hover {
  transform: perspective(900px) rotateX(var(--ns2-rx, 0deg))
    rotateY(var(--ns2-ry, 0deg)) translateY(-2px);
}
/* v26: the hero paints complete. Its old block fade (ns2-up, 380ms + a stagger) played after first paint on prod,
   behind the deferred scripts, and read as a second load. The word rise (ns2Script) is the only entrance left, and it
   runs only when the script gets there within 250ms of first paint. */
@media (prefers-reduced-motion: reduce) {
  .ns2-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ns2-marquee-track {
    animation: none;
    width: auto;
  }
  .ns2 .ns2-marquee-set {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    padding-right: 0;
  }
  .ns2-marquee-set[aria-hidden] {
    display: none !important;
  }
}
.ns2-motion [data-ns2-reveal] > * {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 500ms ease-out var(--ns2-d, 0ms),
    translate 500ms ease-out var(--ns2-d, 0ms);
}
.ns2-motion [data-ns2-reveal] > .ns2-card {
  transition:
    opacity 500ms ease-out var(--ns2-d, 0ms),
    translate 500ms ease-out var(--ns2-d, 0ms),
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}
.ns2-motion [data-ns2-reveal].ns2-in > * {
  opacity: 1;
  translate: none;
}
/* ChatLLM (v25): RouteLLM pinned, the models scroll continuously beneath it; pauses on hover; still under reduced
   motion. */
.ns2 .ns2-model-list--pinned {
  margin-top: 12px;
}
.ns2-model-scroll {
  height: 280px;
  margin-top: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    transparent,
    #000 10%,
    #000 70%,
    transparent
  );
  mask-image: linear-gradient(transparent, #000 10%, #000 70%, transparent);
}
.ns2-model-track .ns2-model-list {
  margin-top: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ns2-model-track {
    animation: ns2-model-scroll 28s linear infinite;
  }
  .ns2-proof--models:hover .ns2-model-track {
    animation-play-state: paused;
  }
}
@keyframes ns2-model-scroll {
  to {
    translate: 0 -50%;
  }
}
/* Agent: steps tick in, the deploy row spins then checks, the browser frame fades in with its tiles. */
.ns2-motion .ns2-proof--task .ns2-checks li,
.ns2-motion .ns2-proof--task .ns2-browser,
.ns2-motion .ns2-proof--task .ns2-browser-body span {
  opacity: 0;
}
.ns2-motion .ns2-proof--task .ns2-check path,
.ns2-motion .ns2-proof--window .ns2-check path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.ns2-play.ns2-proof--task .ns2-checks li {
  animation: ns2-up 300ms ease-out both;
}
.ns2-play.ns2-proof--task .ns2-check path {
  animation: ns2-draw 300ms ease-out 150ms forwards;
}
.ns2-play.ns2-proof--task .ns2-checks li:nth-child(2) {
  animation-delay: 350ms;
}
.ns2-play.ns2-proof--task .ns2-checks li:nth-child(2) .ns2-check path {
  animation-delay: 500ms;
}
.ns2-play.ns2-proof--task .ns2-checks li:nth-child(3) {
  animation-delay: 700ms;
}
.ns2-play.ns2-proof--task .ns2-checks li:nth-child(3) .ns2-check path {
  animation-delay: 850ms;
}
.ns2-play.ns2-proof--task .ns2-checks li:nth-child(4) {
  animation-delay: 1050ms;
}
.ns2-play.ns2-proof--task .ns2-checks li:nth-child(4) .ns2-check path {
  animation-delay: 1200ms;
}
.ns2-play.ns2-proof--task .ns2-checks li.ns2-pending {
  animation-delay: 1400ms;
}
.ns2-play.ns2-proof--task .ns2-pending .ns2-check path {
  animation-delay: 2150ms;
}
.ns2-play .ns2-spin {
  animation:
    ns2-show 1ms linear 1400ms both,
    ns2-rot 700ms linear 1400ms 1,
    ns2-hide 150ms ease-out 2100ms forwards;
}
.ns2-play.ns2-proof--task .ns2-browser {
  animation: ns2-up 400ms ease-out 2200ms both;
}
.ns2-play.ns2-proof--task .ns2-browser-body span {
  animation: ns2-show 300ms ease-out 2400ms both;
}
.ns2-play.ns2-proof--task .ns2-browser-body span:nth-child(2) {
  animation-delay: 2480ms;
}
.ns2-play.ns2-proof--task .ns2-browser-body span:nth-child(3) {
  animation-delay: 2560ms;
}
.ns2-play.ns2-proof--task .ns2-browser-body span:nth-child(4) {
  animation-delay: 2640ms;
}
/* SuperComputer: the command types out (ns2Script wraps each character), the note follows, then the dot pulses. */
.ns2-motion .ns2-term-cmd > span,
.ns2-motion .ns2-proof--machine .ns2-term-caret,
.ns2-motion .ns2-term-note {
  opacity: 0;
}
.ns2-play .ns2-term-cmd > span {
  animation: ns2-show 1ms linear both;
}
.ns2-play .ns2-term-caret {
  animation: ns2-show 1ms linear var(--ns2-typed, 0ms) both;
}
.ns2-play .ns2-term-note {
  animation: ns2-up 300ms ease-out calc(var(--ns2-typed, 0ms) + 300ms) both;
}
.ns2-proof--machine .ns2-status-dot {
  position: relative;
}
.ns2-play.ns2-proof--machine .ns2-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ns2-green);
  animation: ns2-pulse 2s ease-out calc(var(--ns2-typed, 0ms) + 700ms) infinite
    both;
}
/* Desktop: CoWork fills to 60%, the coding-agent dot blinks twice, the Listener check draws in. */
.ns2-motion .ns2-proof--window .ns2-bar > span,
.ns2-motion .ns2-proof--runlog .ns2-bar > span {
  transform: scaleX(0);
  transform-origin: left;
}
.ns2-play.ns2-proof--window .ns2-bar > span {
  animation: ns2-grow 1000ms ease-out 100ms both;
}
.ns2-play .ns2-status-dot--busy {
  animation: ns2-blink 500ms ease-in-out 1200ms 2;
}
.ns2-play.ns2-proof--window .ns2-check path {
  animation: ns2-draw 400ms ease-out 2200ms forwards;
}
/* Personal Agents: messages in order, a typing indicator before each agent message. */
.ns2-motion .ns2-proof--thread .ns2-msg {
  opacity: 0;
}
.ns2-play .ns2-msg-slot:nth-child(1) .ns2-typing {
  animation: ns2-flash 700ms ease-out both;
}
.ns2-play .ns2-msg-slot:nth-child(1) .ns2-msg {
  animation: ns2-up 300ms ease-out 650ms both;
}
.ns2-play .ns2-msg-slot:nth-child(2) .ns2-msg {
  animation: ns2-up 300ms ease-out 1150ms both;
}
.ns2-play .ns2-msg-slot:nth-child(3) .ns2-typing {
  animation: ns2-flash 700ms ease-out 1500ms both;
}
.ns2-play .ns2-msg-slot:nth-child(3) .ns2-msg {
  animation: ns2-up 300ms ease-out 2150ms both;
}
.ns2-play .ns2-typing i {
  animation: ns2-bob 600ms ease-in-out 0ms 2;
}
.ns2-play .ns2-msg-slot:nth-child(3) .ns2-typing i {
  animation-delay: 1500ms;
}
.ns2-play .ns2-typing i:nth-child(2) {
  animation-delay: 100ms;
}
.ns2-play .ns2-typing i:nth-child(3) {
  animation-delay: 200ms;
}
/* AutoBots: bars grow in sequence while the percentages count (ns2Script, data-ns2-at); the memory chip comes last. */
.ns2-play.ns2-proof--runlog .ns2-runs li .ns2-bar > span {
  animation: ns2-grow 600ms ease-out both;
}
.ns2-play.ns2-proof--runlog .ns2-runs li:nth-child(2) .ns2-bar > span {
  animation-delay: 500ms;
}
.ns2-play.ns2-proof--runlog .ns2-runs li:nth-child(3) .ns2-bar > span {
  animation-delay: 1000ms;
}
.ns2-motion .ns2-proof--runlog .ns2-proof-foot {
  opacity: 0;
}
.ns2-play.ns2-proof--runlog .ns2-proof-foot {
  animation: ns2-up 300ms ease-out 1800ms both;
}
@keyframes ns2-up {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}
@keyframes ns2-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ns2-hide {
  to {
    opacity: 0;
  }
}
@keyframes ns2-flash {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
}
@keyframes ns2-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ns2-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ns2-rot {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ns2-blink {
  50% {
    opacity: 0.15;
  }
}
@keyframes ns2-bob {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes ns2-pulse {
  from {
    transform: scale(1);
    opacity: 0.5;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes ns2-marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes ns2-drift {
  from {
    transform: translate(-4%, -3%);
  }
  to {
    transform: translate(4%, 3%) scale(1.08);
  }
}
@keyframes ns2-pop {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* RouteLLM (v6): the router proof card. HTML nodes sit in % of the same 480x400 box as the SVG wires. */
.ns2 .ns2-proof--router {
  padding: 24px;
}
.ns2-router-stage {
  position: relative;
  aspect-ratio: 480 / 400;
  margin-top: 12px;
}
.ns2-router-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ns2-wire,
.ns2-wire-hot {
  fill: none;
  stroke-linecap: round;
}
.ns2-wire {
  stroke: var(--ns2-border-strong);
  stroke-width: 1.5;
}
.ns2-wire-hot {
  stroke: var(--ns2-accent);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--ns2-accent));
}
.ns2-wire-hot.is-on {
  stroke-dashoffset: 0;
  opacity: 1;
}
.ns2-packet {
  fill: var(--ns2-accent);
  opacity: 0;
}
.ns2-packet.is-on {
  opacity: 1;
}
.ns2 .ns2-router-prompts li,
.ns2 .ns2-router-models li {
  position: absolute;
  isolation: isolate;
  transform: translateY(-50%);
  padding: 7px 10px;
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius-sm);
  background: var(--ns2-card);
  font-size: 13px;
  line-height: 1.35;
}
.ns2 .ns2-router-prompts li {
  left: 0;
  width: 28%;
  color: var(--ns2-body);
}
.ns2 .ns2-router-models li {
  left: 60%;
  width: 40%;
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}
.ns2-router-models b {
  font-weight: 600;
  color: var(--ns2-text);
  white-space: nowrap;
}
.ns2 .ns2-router-models li > span {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ns2-muted);
}
/* A node lights up: an accent outline + glow layer under its text (opacity only); a lit model leans toward the hub. */
.ns2-router-prompts li::before,
.ns2-router-models li::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1.5px solid var(--ns2-accent);
  border-radius: inherit;
  background: var(--ns2-glow);
  opacity: 0;
}
.ns2-router-prompts li.is-on::before,
.ns2-router-models li.is-on::before {
  opacity: 1;
}
.ns2-router-models li.is-on {
  translate: -6px 0;
  box-shadow: var(--ns2-shadow);
}
.ns2-router-prompts li.is-on {
  translate: 6px 0;
}
.ns2-router-hub {
  position: absolute;
  left: 44%;
  top: 50%;
  width: 17%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--ns2-btn);
  color: var(--ns2-on-btn);
  box-shadow: var(--ns2-shadow);
}
.ns2-router-hub b {
  font-size: 13px;
  font-weight: 600;
}
.ns2-router-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ns2-accent);
  border-radius: 999px;
  opacity: 0;
}
.ns2-router.is-live .ns2-wire-hot {
  transition:
    stroke-dashoffset 600ms ease-in-out,
    opacity 400ms ease-out;
}
.ns2-router.is-live .ns2-packet {
  transition: opacity 150ms ease-out;
}
.ns2-router.is-live li::before {
  transition: opacity 300ms ease-out;
}
.ns2-router.is-live .ns2-router-prompts li,
.ns2-router.is-live .ns2-router-models li {
  transition:
    translate 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 350ms ease-out;
}
/* Current flows along a lit wire (dash offset keeps moving while it is on). */
.ns2-router.is-live .ns2-wire-hot.is-on {
  stroke-dasharray: 0.06 0.04;
  animation: ns2-current 900ms linear infinite;
}
@keyframes ns2-current {
  to {
    stroke-dashoffset: -0.1;
  }
}
.ns2-router-hub.is-pulse {
  animation: ns2-bump 500ms ease-out;
}
.ns2-router-hub.is-pulse .ns2-router-ring {
  animation: ns2-ring 700ms ease-out;
}
@keyframes ns2-bump {
  40% {
    scale: 1.08;
  }
}
@keyframes ns2-ring {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* RouteLLM: quickstart steps + code card (stays dark in both themes, like the terminal) and the one price card. */
.ns2 .ns2-steps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.ns2 .ns2-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
}
.ns2 .ns2-steps .ns2-step {
  margin: 0;
  flex-shrink: 0;
}
.ns2 .ns2-steps .ns2-proof-text b {
  font-size: 17px;
}
.ns2-code {
  overflow: hidden;
  border: 1px solid var(--ns2-term-edge);
  border-radius: var(--ns2-radius);
  background: var(--ns2-term);
  box-shadow: var(--ns2-shadow);
}
.ns2 .ns2-code .ns2-window-bar {
  background: var(--ns2-term-bar);
  border-bottom-color: var(--ns2-term-edge);
  color: var(--ns2-dark-muted);
}
.ns2 .ns2-code .ns2-window-bar i {
  background: var(--ns2-term-edge);
}
.ns2 .ns2-code .ns2-window-bar span {
  margin: 0 0 0 8px;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ns2 .ns2-copy {
  padding: 4px 10px;
  border: 1px solid var(--ns2-term-edge);
  border-radius: 8px;
  background: transparent;
  color: var(--ns2-dark-muted);
  font-family: var(--ns2-font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ns2 .ns2-copy:hover {
  color: var(--ns2-on-dark);
}
.ns2 .ns2-code pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ns2-on-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}
.ns2 .ns2-code pre code {
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.ns2 .ns2-code-note {
  margin-top: 16px;
}
.ns2 .ns2-code-note b {
  font-weight: 600;
  color: var(--ns2-text);
}
.ns2 .ns2-pricecard {
  max-width: 720px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  box-shadow: var(--ns2-shadow);
}
.ns2 .ns2-pricecard .ns2-head {
  margin-bottom: 8px;
}
.ns2 .ns2-pricecard .ns2-plan-price s {
  margin-right: 4px;
  font-size: 28px;
}
.ns2 .ns2-pricecard .ns2-body {
  max-width: 560px;
  margin-top: 16px;
}
.ns2 .ns2-pricecard .ns2-actions {
  justify-content: center;
}

/* v9 motion: cards tilt toward the pointer, primary buttons get a light sweep on hover. Static states are the final
   states. (The word rise went in v26: the hero text must be complete at first paint.) */
.ns2 .ns2-tilt {
  transform: perspective(900px) rotateX(var(--ns2-rx, 0deg))
    rotateY(var(--ns2-ry, 0deg));
  transition: transform 250ms ease-out;
  will-change: transform;
}
.ns2 .ns2-tilt:hover {
  transition: transform 80ms linear;
}
.ns2 .ns2-btn:not(.ns2-btn--ghost) {
  position: relative;
  overflow: hidden;
}
.ns2 .ns2-btn:not(.ns2-btn--ghost)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-15deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ns2 .ns2-btn:not(.ns2-btn--ghost):hover::before {
    animation: ns2-shine 700ms ease-out;
  }
}
@keyframes ns2-shine {
  to {
    left: 120%;
  }
}

/* v20: the stage's tickers (homepage, wide windows only). Each margin holds a label and a track that scrolls up
   slowly (the list twice, so the loop is seamless); the track pauses while a flow plays (.is-playing on the hero).
   The column leans with the cursor (parallax); chips vary in depth (opacity / scale); a lit chip gets an accent ring,
   full opacity and a nudge toward the box; the tool dots carry each tool's colour. */
.ns2-orbit {
  position: absolute;
  top: 24px;
  bottom: 16px;
  width: 260px;
  translate: calc(var(--ns2-mx, 0) * -22px) calc(var(--ns2-my, 0) * -14px);
  transition: translate 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.ns2-orbit--models {
  left: 3%;
}
.ns2-orbit--tools {
  right: 3%;
  text-align: right;
}
.ns2 .ns2-orbit-label {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: var(--ns2-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The column clips and fades; the track inside it is what moves (its own box leaves the column as it scrolls, so it
   must not be the clipping element). */
.ns2-orbit-clip {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    transparent,
    #000 12%,
    #000 85%,
    transparent
  );
  mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent);
}
.ns2-orbit-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: translate;
}
/* Scattered, not stacked: each chip sits at its own inset from the column's outer edge (--ox) and bobs on its own
   phase; the column as a whole drifts up (the ticker). */
.ns2-orbit-track ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin: 0;
  padding: 0 0 22px;
  list-style: none;
}
.ns2-orbit--tools .ns2-orbit-track ul {
  align-items: flex-end;
}
.ns2 .ns2-orbit--models li {
  margin-left: var(--ox, 0);
}
.ns2 .ns2-orbit--tools li {
  margin-right: var(--ox, 0);
}
.ns2 .ns2-orbit li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
  background: var(--ns2-card);
  box-shadow: var(--ns2-shadow);
  color: var(--ns2-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: calc(0.4 + var(--oz, 1) * 0.35);
  scale: calc(0.84 + var(--oz, 1) * 0.16);
  transition:
    opacity 250ms ease-out,
    scale 300ms cubic-bezier(0.2, 0.8, 0.2, 1.3),
    translate 300ms cubic-bezier(0.2, 0.8, 0.2, 1.3),
    box-shadow 250ms ease-out,
    border-color 250ms ease-out;
}
.ns2 .ns2-orbit li i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ns2-accent);
  box-shadow: 0 0 0 3px var(--ns2-glow);
}
.ns2 .ns2-orbit--models li:nth-child(3n + 2) i {
  background: #2fbf7f;
  box-shadow: 0 0 0 3px rgba(47, 191, 127, 0.18);
}
.ns2 .ns2-orbit--models li:nth-child(3n) i {
  background: #ff8c78;
  box-shadow: 0 0 0 3px rgba(255, 140, 120, 0.18);
}
.ns2 .ns2-orbit li.is-lit {
  border-color: var(--ns2-accent);
  color: var(--ns2-text);
  box-shadow:
    0 0 0 4px var(--ns2-glow),
    var(--ns2-shadow-lift);
  opacity: 1;
  scale: 1.08;
}
.ns2 .ns2-orbit--models li.is-lit {
  translate: 12px 0;
}
.ns2 .ns2-orbit--tools li.is-lit {
  translate: -12px 0;
}
.ns2 .ns2-orbit li .ns2-tool-dot--slack {
  background: #e01e5a;
  box-shadow: 0 0 0 3px rgba(224, 30, 90, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--drive,
.ns2 .ns2-orbit li .ns2-tool-dot--calendar {
  background: #34a853;
  box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--gmail,
.ns2 .ns2-orbit li .ns2-tool-dot--zendesk {
  background: #ea4335;
  box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--github {
  background: var(--ns2-text);
  box-shadow: 0 0 0 3px var(--ns2-border);
}
.ns2 .ns2-orbit li .ns2-tool-dot--salesforce,
.ns2 .ns2-orbit li .ns2-tool-dot--dropbox,
.ns2 .ns2-orbit li .ns2-tool-dot--snowflake,
.ns2 .ns2-orbit li .ns2-tool-dot--bigquery {
  background: #00a1e0;
  box-shadow: 0 0 0 3px rgba(0, 161, 224, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--confluence,
.ns2 .ns2-orbit li .ns2-tool-dot--sharepoint,
.ns2 .ns2-orbit li .ns2-tool-dot--teams {
  background: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--hubspot {
  background: #ff7a59;
  box-shadow: 0 0 0 3px rgba(255, 122, 89, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--figma {
  background: #a259ff;
  box-shadow: 0 0 0 3px rgba(162, 89, 255, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--quickbooks {
  background: #2ca01c;
  box-shadow: 0 0 0 3px rgba(44, 160, 28, 0.18);
}
.ns2 .ns2-orbit li .ns2-tool-dot--browser {
  background: var(--ns2-accent);
  box-shadow: 0 0 0 3px var(--ns2-glow);
}
/* The tracks' drift is script-driven (ns2Script sets their translate every frame): a slow scroll at rest, and before
   a flow each column glides so the chips that flow needs sit level with the box. Reduced motion: still. */
@media (prefers-reduced-motion: no-preference) {
  .ns2 .ns2-orbit li {
    animation: ns2-bob 7s ease-in-out var(--od, 0s) infinite alternate;
  }
  .ns2 .ns2-orbit li.is-lit {
    animation: none;
  }
  .ns2-motion .ns2 .ns2-orbit {
    animation: ns2-orbit-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms both;
  }
}
@keyframes ns2-orbit-in {
  from {
    opacity: 0;
  }
}
/* Wires drawn at play time from the lit chips to the box, each with a packet riding it. */
.ns2-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ns2-wires path {
  fill: none;
  stroke: var(--ns2-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--ns2-accent));
  transition:
    stroke-dashoffset 750ms ease-in-out,
    opacity 400ms ease-out;
}
.ns2-wires path.is-on {
  stroke-dashoffset: 0;
  opacity: 0.9;
}
.ns2-wires circle {
  fill: var(--ns2-accent);
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--ns2-accent));
  transition: opacity 150ms ease-out;
}
.ns2-wires circle.is-on {
  opacity: 1;
}
/* The box thinks: its focus ring turns for a beat. */
.ns2 .ns2-composer.is-thinking::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .ns2 .ns2-composer.is-thinking::after {
    animation: ns2-ring 1.2s linear infinite;
  }
}
/* v20: the box's contents give way in place (no flip) and the artifact card fades in over the box; the reverse at
   the end. */
.ns2 .ns2-composer > * {
  transition:
    opacity 260ms ease-out,
    scale 260ms ease-out;
}
.ns2 .ns2-composer.is-away > * {
  opacity: 0;
  scale: 0.97;
}
.ns2 .ns2-artifact {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 14px 18px 12px;
  border: 1px solid var(--ns2-border);
  border-radius: 22px;
  background: var(--ns2-card);
  box-shadow: var(--ns2-shadow-lift);
  text-align: left;
  overflow: hidden;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition:
    opacity 300ms ease-out,
    translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 250ms ease-out,
    box-shadow 250ms ease-out;
}
.ns2 .ns2-artifact.is-in {
  opacity: 1;
  translate: none;
}
.ns2 .ns2-trace {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ns2-muted);
}
.ns2 .ns2-trace li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  opacity: 0.45;
  transition: opacity 200ms ease-out;
}
.ns2 .ns2-trace li i {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ns2-border-strong);
  border-radius: 50%;
  box-sizing: border-box;
}
.ns2 .ns2-trace li.is-busy,
.ns2 .ns2-trace li.is-done {
  opacity: 1;
  color: var(--ns2-text);
}
.ns2 .ns2-trace li.is-busy i {
  border-color: var(--ns2-accent);
  border-top-color: transparent;
  animation: ns2-rot 700ms linear infinite;
}
.ns2 .ns2-trace li.is-done i {
  border: 0;
  background: #2fbf7f;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size:
    2px 5px,
    7px 2px;
  background-position:
    3px 4px,
    3px 7px;
  background-repeat: no-repeat;
}
/* Miniatures: one is shown per kind; everything is a CSS shape and draws in with a stagger once .is-drawn. */
.ns2 .ns2-mini {
  position: relative;
  min-height: 0;
}
.ns2 .ns2-mini > div {
  position: absolute;
  inset: 0;
  display: none;
}
.ns2 .ns2-mini[data-kind="app"] .ns2-mini-app,
.ns2 .ns2-mini[data-kind="deck"] .ns2-mini-deck,
.ns2 .ns2-mini[data-kind="table"] .ns2-mini-table,
.ns2 .ns2-mini[data-kind="chat"] .ns2-mini-chat,
.ns2 .ns2-mini[data-kind="code"] .ns2-mini-code,
.ns2 .ns2-mini[data-kind="chart"] .ns2-mini-chart,
.ns2 .ns2-mini[data-kind="doc"] .ns2-mini-doc,
.ns2 .ns2-mini[data-kind="video"] .ns2-mini-video {
  display: block;
}
.ns2 .ns2-mini i,
.ns2 .ns2-mini b {
  display: block;
  border-radius: 4px;
  background: var(--ns2-border);
}
.ns2 .ns2-mini b {
  background: var(--ns2-accent);
  opacity: 0.85;
}
/* app: window bar, sidebar, three pipeline columns of cards */
.ns2 .ns2-mini-app {
  display: none;
  grid-template-rows: 18px 1fr;
  border: 1px solid var(--ns2-border);
  border-radius: 10px;
  background: var(--ns2-bg);
  overflow: hidden;
}
.ns2 .ns2-mini[data-kind="app"] .ns2-mini-app {
  display: grid;
}
.ns2 .ns2-mini-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--ns2-border);
  background: var(--ns2-card);
}
.ns2 .ns2-mini-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ns2 .ns2-mini-body {
  display: grid;
  grid-template-columns: 56px 1fr;
}
.ns2 .ns2-mini-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  border-right: 1px solid var(--ns2-border);
}
.ns2 .ns2-mini-side i {
  height: 5px;
}
.ns2 .ns2-mini-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
}
.ns2 .ns2-mini-cols > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ns2 .ns2-mini-cols b {
  height: 5px;
  width: 60%;
}
.ns2 .ns2-mini-cols i {
  height: 14px;
  background: var(--ns2-card);
  border: 1px solid var(--ns2-border-strong);
  box-shadow: var(--ns2-shadow-xs);
}
.ns2 .ns2-mini-side i {
  background: var(--ns2-border-strong);
}
/* Done: the card glows for a beat. */
.ns2 .ns2-artifact.is-done {
  border-color: var(--ns2-accent);
  box-shadow:
    0 0 0 4px var(--ns2-glow),
    var(--ns2-shadow-lift);
  transition:
    border-color 250ms ease-out,
    box-shadow 250ms ease-out;
}
/* deck: three slides fanned out */
.ns2 .ns2-mini-slide {
  position: absolute;
  top: 8%;
  left: 30%;
  width: 40%;
  height: 84%;
  padding: 10px;
  border: 1px solid var(--ns2-border);
  border-radius: 8px;
  background: var(--ns2-card);
  box-shadow: var(--ns2-shadow);
  transform-origin: bottom center;
}
.ns2 .ns2-mini-slide b {
  height: 7px;
  width: 55%;
  margin-bottom: 8px;
}
.ns2 .ns2-mini-slide i {
  height: 4px;
  margin-bottom: 5px;
}
.ns2 .ns2-mini-slide:nth-child(1) {
  rotate: -12deg;
  translate: -28% 4%;
}
.ns2 .ns2-mini-slide:nth-child(3) {
  rotate: 12deg;
  translate: 28% 4%;
}
/* table: header row + rows */
.ns2 .ns2-mini-table {
  display: none;
  grid-auto-rows: 1fr;
  gap: 4px;
  padding: 2px 0;
}
.ns2 .ns2-mini[data-kind="table"] .ns2-mini-table {
  display: grid;
}
.ns2 .ns2-mini-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.ns2 .ns2-mini-row i {
  height: 6px;
}
.ns2 .ns2-mini-row--head i {
  background: var(--ns2-accent);
  opacity: 0.7;
}
/* chat: alternating bubbles */
.ns2 .ns2-mini-chat {
  display: none;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.ns2 .ns2-mini[data-kind="chat"] .ns2-mini-chat {
  display: flex;
}
.ns2 .ns2-mini-msg {
  width: 52%;
  height: 16px;
  border-radius: 10px 10px 10px 3px;
  background: var(--ns2-bg);
  border: 1px solid var(--ns2-border);
}
.ns2 .ns2-mini-msg--user {
  align-self: flex-end;
  border-radius: 10px 10px 3px 10px;
  background: var(--ns2-btn);
  border-color: var(--ns2-btn);
  width: 40%;
}
.ns2 .ns2-mini-msg--short {
  width: 26%;
}
.ns2 .ns2-mini-msg--long {
  width: 64%;
}
/* code: a diff */
.ns2 .ns2-mini-code {
  display: none;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: #14143a;
}
.ns2 .ns2-mini[data-kind="code"] .ns2-mini-code {
  display: flex;
}
.ns2 .ns2-mini-code i {
  height: 6px;
  width: 70%;
  background: rgba(255, 255, 255, 0.18);
}
.ns2 .ns2-mini-code i:nth-child(2n) {
  width: 50%;
}
.ns2 .ns2-mini-code i.del {
  background: rgba(255, 96, 96, 0.55);
}
.ns2 .ns2-mini-code i.add {
  background: rgba(47, 191, 127, 0.7);
}
/* chart: bars that grow + three KPI tiles */
.ns2 .ns2-mini-chart {
  display: none;
  grid-template-columns: 1fr 72px;
  gap: 10px;
}
.ns2 .ns2-mini[data-kind="chart"] .ns2-mini-chart {
  display: grid;
}
.ns2 .ns2-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
  border-bottom: 1px solid var(--ns2-border);
}
.ns2 .ns2-mini-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: var(--ns2-accent);
  opacity: 0.8;
  transform-origin: bottom;
}
.ns2 .ns2-mini-kpis {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ns2 .ns2-mini-kpis b {
  flex: 1;
  border-radius: 6px;
  background: var(--ns2-lavender);
  opacity: 1;
}
/* doc: title + lines */
.ns2 .ns2-mini-doc {
  display: none;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  padding: 0 10%;
}
.ns2 .ns2-mini[data-kind="doc"] .ns2-mini-doc {
  display: flex;
}
.ns2 .ns2-mini-doc b {
  height: 8px;
  width: 45%;
  margin-bottom: 4px;
}
.ns2 .ns2-mini-doc i {
  height: 5px;
}
.ns2 .ns2-mini-doc i.short {
  width: 60%;
}
/* video: a player with a presenter and a progress bar */
.ns2 .ns2-mini-video {
  border-radius: 10px;
  background: linear-gradient(135deg, #14143a, #2a2a6a);
  overflow: hidden;
}
.ns2 .ns2-mini-presenter {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 34px;
  height: 34px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffd9c9, #ff8c78);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}
.ns2 .ns2-mini-play {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 12px solid rgba(255, 255, 255, 0.9);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.ns2 .ns2-mini-progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.ns2 .ns2-mini-progress i {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #fff;
}
/* Drawing in: every piece of the miniature grows or pops with a stagger once the trace reaches "Building". */
.ns2 .ns2-mini i,
.ns2 .ns2-mini b,
.ns2 .ns2-mini .ns2-mini-msg,
.ns2 .ns2-mini .ns2-mini-slide {
  opacity: 0;
}
.ns2 .ns2-mini-bars i {
  scale: 1 0;
}
.ns2 .ns2-artifact.is-drawn .ns2-mini i,
.ns2 .ns2-artifact.is-drawn .ns2-mini b,
.ns2 .ns2-artifact.is-drawn .ns2-mini .ns2-mini-msg,
.ns2 .ns2-artifact.is-drawn .ns2-mini .ns2-mini-slide {
  animation: ns2-draw-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.ns2 .ns2-artifact.is-drawn .ns2-mini-bars i {
  animation: ns2-bar-up 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.ns2 .ns2-artifact.is-drawn .ns2-mini-progress i {
  animation: ns2-fill 1500ms linear forwards;
}
.ns2 .ns2-mini :nth-child(1) {
  animation-delay: 0ms;
}
.ns2 .ns2-mini :nth-child(2) {
  animation-delay: 90ms;
}
.ns2 .ns2-mini :nth-child(3) {
  animation-delay: 180ms;
}
.ns2 .ns2-mini :nth-child(4) {
  animation-delay: 270ms;
}
.ns2 .ns2-mini :nth-child(5) {
  animation-delay: 360ms;
}
.ns2 .ns2-mini :nth-child(6) {
  animation-delay: 450ms;
}
.ns2 .ns2-mini :nth-child(7) {
  animation-delay: 540ms;
}
.ns2 .ns2-mini :nth-child(8) {
  animation-delay: 630ms;
}
.ns2 .ns2-mini-cols > div:nth-child(2) i {
  animation-delay: 300ms;
}
.ns2 .ns2-mini-cols > div:nth-child(3) i {
  animation-delay: 500ms;
}
@keyframes ns2-draw-in {
  from {
    opacity: 0;
    translate: 0 6px;
    scale: 0.94;
  }
  to {
    opacity: 1;
    translate: none;
    scale: 1;
  }
}
@keyframes ns2-bar-up {
  from {
    opacity: 1;
    scale: 1 0;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}
@keyframes ns2-fill {
  from {
    opacity: 1;
    width: 0;
  }
  to {
    opacity: 1;
    width: 100%;
  }
}
@media (max-width: 1280px) {
  .ns2-orbit,
  .ns2-wires,
  .ns2-artifact {
    display: none;
  }
}

/* v10: screenshots swing open as they scroll in (rotate is its own property, so the pointer tilt's transform still
   composes with it); browsers without scroll timelines show them flat. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ns2 .ns2-frow .ns2-shot {
      animation: ns2-open-l linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
      transform-origin: right center;
    }
    .ns2 .ns2-frow--flip .ns2-shot {
      animation-name: ns2-open-r;
      transform-origin: left center;
    }
  }
}
@keyframes ns2-open-l {
  from {
    rotate: y 24deg;
    opacity: 0.4;
  }
  to {
    rotate: y 0deg;
    opacity: 1;
  }
}
@keyframes ns2-open-r {
  from {
    rotate: y -24deg;
    opacity: 0.4;
  }
  to {
    rotate: y 0deg;
    opacity: 1;
  }
}
.ns2-frows {
  perspective: 1400px;
}

/* v10 spotlight: a soft light under the pointer and a lit border ring where it is (mask on the ring keeps the card's
   own border intact). Pointer devices only; --ns2-sx/--ns2-sy come from ns2Script. */
@media (hover: hover) and (pointer: fine) {
  .ns2 :is(.ns2-card, .ns2-pricecard, .ns2-enterprise) {
    position: relative;
  }
  .ns2 :is(.ns2-card, .ns2-pricecard, .ns2-enterprise)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(
      240px circle at var(--ns2-sx, -999px) var(--ns2-sy, -999px),
      var(--ns2-glow),
      transparent 60%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
  }
  .ns2 :is(.ns2-card, .ns2-pricecard, .ns2-enterprise)::after {
    content: "";
    position: absolute;
    inset: 0; /* over the card's own 1px border, so cards with overflow: hidden keep it */
    z-index: 2;
    border: 1px solid transparent;
    border-radius: inherit;
    background: radial-gradient(
        200px circle at var(--ns2-sx, -999px) var(--ns2-sy, -999px),
        var(--ns2-accent),
        transparent 70%
      )
      border-box;
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
  }
  .ns2 :is(.ns2-card, .ns2-pricecard, .ns2-enterprise):hover::before,
  .ns2 :is(.ns2-card, .ns2-pricecard, .ns2-enterprise):hover::after {
    opacity: 1;
  }
}

/* v9.1: screenshots and pillar images drift up slightly as they scroll through the viewport (scroll-driven animation;
   browsers without animation-timeline simply show them still). The enterprise chips cascade in once revealed. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ns2 .ns2-shot img,
    .ns2 .ns2-card--pillar img {
      animation: ns2-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .ns2 .ns2-shot {
      overflow: hidden;
    }
  }
}
@keyframes ns2-parallax {
  from {
    transform: translateY(4%) scale(1.06);
  }
  to {
    transform: translateY(-4%) scale(1.06);
  }
}
.ns2-motion .ns2-enterprise .ns2-tags--lg li {
  opacity: 0;
  translate: 0 8px;
}
.ns2-motion .ns2-enterprise.ns2-in .ns2-tags--lg li {
  animation: ns2-chip-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1)
    calc(300ms + var(--ns2-i, 0) * 45ms) forwards;
}
@keyframes ns2-chip-in {
  to {
    opacity: 1;
    translate: none;
  }
}

/* More motion (v6). Hover and reveal details; all transform / opacity, all off under reduced motion. The static rules
   here are the final states. */
.ns2 .ns2-composer {
  position: relative;
  isolation: isolate;
}
@property --ns2-ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.ns2 .ns2-composer::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  padding: 2px; /* with the mask below, only this 2px band paints: a ring around the box */
  border-radius: inherit;
  background: conic-gradient(
    from var(--ns2-ring),
    var(--ns2-accent),
    #2fbf7f,
    #3884ff,
    var(--ns2-accent)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.ns2 .ns2-composer:focus-within {
  box-shadow: 0 12px 40px var(--ns2-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .ns2 .ns2-composer:focus-within::after {
    animation: ns2-ring 4s linear infinite;
  }
}
@keyframes ns2-ring {
  to {
    --ns2-ring: 360deg;
  }
}
.ns2 .ns2-composer:focus-within::after {
  opacity: 1;
}
.ns2-arrow {
  display: inline-block;
}
.ns2 .ns2-compare-row--total span:last-child {
  position: relative;
}
.ns2 .ns2-compare-row--total span:last-child::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: var(--ns2-accent);
  transform-origin: left;
}
html:not(.ns2-motion) .ns2 .ns2-plan--pop {
  translate: 0 -8px;
}
.ns2 .ns2-plan--pop {
  box-shadow: var(--ns2-shadow-lift);
}
.ns2 .ns2-tags--lit li {
  position: relative;
  isolation: isolate;
}
.ns2 .ns2-tags--lit li::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid var(--ns2-accent);
  border-radius: inherit;
  background: var(--ns2-glow);
  opacity: 0;
}
.ns2 .ns2-term {
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .ns2-glow i:nth-child(1) {
    animation: ns2-glow-a 26s ease-in-out infinite alternate;
  }
  .ns2-glow i:nth-child(2) {
    animation: ns2-glow-b 26s ease-in-out infinite alternate;
  }
  .ns2-glow i:nth-child(3) {
    animation: ns2-glow-a 32s ease-in-out infinite alternate-reverse;
  }
  .ns2 .ns2-composer::after {
    transition: opacity 200ms ease-out;
  }
  .ns2-arrow {
    transition: transform 200ms ease-out;
  }
  .ns2 :is(a, button):is(:hover, :focus-visible) > .ns2-arrow {
    transform: translateX(3px);
  }
  .ns2-example-cover img {
    transition: transform 400ms ease-out;
  }
  .ns2 .ns2-example:hover .ns2-example-cover img {
    transform: scale(1.03);
  }
  .ns2-example-cover .ns2-badge {
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .ns2 .ns2-example:hover .ns2-example-cover .ns2-badge {
    transform: scale(1.1);
  }
  .ns2 :is(.ns2-proof-rows--app, .ns2-contacts, .ns2-runs) li {
    transition:
      transform 200ms ease-out,
      box-shadow 200ms ease-out;
  }
  .ns2 :is(.ns2-proof-rows--app, .ns2-runs) li:hover {
    transform: translateY(-2px);
    border-radius: var(--ns2-radius-sm);
    background: var(--ns2-bg);
    box-shadow: 0 0 0 8px var(--ns2-bg);
  }
  .ns2 .ns2-contacts li:hover {
    transform: translateY(-2px);
    background: var(--ns2-card);
  }
  /* SuperComputer: after the command types out, a faint scanline keeps moving over the terminal (6s). */
  .ns2-play .ns2-term::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40%;
    background: linear-gradient(transparent, var(--ns2-scan), transparent);
    opacity: 0.06;
    transform: translateY(-100%);
    pointer-events: none;
    animation: ns2-scan 6s linear calc(var(--ns2-typed, 0ms) + 900ms) infinite;
  }
}
/* Reveal choreography (html.ns2-motion only): the comparison strikes the three-subscription total and slides ChatLLM in;
   the homepage model chips light up in turn once; model chips stagger into their cards; step numbers pop 1-2-3; the
   "Most popular" plan lifts once revealed. */
.ns2-motion .ns2 .ns2-compare-row--total span:last-child::after {
  transform: scaleX(0);
}
.ns2-motion .ns2-in .ns2-compare-row--total span:last-child::after {
  animation: ns2-grow 400ms ease-out 700ms forwards;
}
.ns2-motion .ns2 .ns2-compare-ours {
  opacity: 0;
}
.ns2-motion .ns2-in .ns2-compare-ours {
  animation: ns2-slide 500ms ease-out 1000ms both;
}
.ns2-motion .ns2-in .ns2-tags--lit li::after {
  animation: ns2-lit 900ms ease-out 600ms both;
}
.ns2-motion .ns2-in .ns2-tags--lit li:nth-child(2)::after {
  animation-delay: 850ms;
}
.ns2-motion .ns2-in .ns2-tags--lit li:nth-child(3)::after {
  animation-delay: 1100ms;
}
.ns2-motion .ns2-in .ns2-tags--lit li:nth-child(4)::after {
  animation-delay: 1350ms;
}
.ns2-motion .ns2-grid--chips .ns2-tags li {
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 300ms ease-out calc(var(--ns2-d, 0ms) + 300ms),
    translate 300ms ease-out calc(var(--ns2-d, 0ms) + 300ms);
}
.ns2-motion .ns2-grid--chips .ns2-tags li:nth-child(2) {
  transition-delay: calc(var(--ns2-d, 0ms) + 360ms);
}
.ns2-motion .ns2-grid--chips .ns2-tags li:nth-child(3) {
  transition-delay: calc(var(--ns2-d, 0ms) + 420ms);
}
.ns2-motion .ns2-grid--chips .ns2-tags li:nth-child(n + 4) {
  transition-delay: calc(var(--ns2-d, 0ms) + 480ms);
}
.ns2-motion .ns2-grid--chips.ns2-in .ns2-tags li {
  opacity: 1;
  translate: none;
}
.ns2-motion .ns2-in > .ns2-card > .ns2-step {
  animation: ns2-num 450ms cubic-bezier(0.34, 1.56, 0.64, 1)
    calc(var(--ns2-d, 0ms) * 4.2 + 300ms) both;
}
.ns2-motion .ns2-in .ns2-steps .ns2-step {
  animation: ns2-num 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both;
}
.ns2-motion .ns2-in .ns2-steps li:nth-child(2) .ns2-step {
  animation-delay: 550ms;
}
.ns2-motion .ns2-in .ns2-steps li:nth-child(3) .ns2-step {
  animation-delay: 800ms;
}
.ns2-motion [data-ns2-reveal].ns2-in > .ns2-plan--pop {
  animation: ns2-lift 600ms cubic-bezier(0.2, 0.8, 0.2, 1)
    calc(var(--ns2-d, 0ms) + 520ms) forwards;
}
@keyframes ns2-glow-a {
  from {
    transform: translate(-6%, -4%) scale(1);
  }
  to {
    transform: translate(10%, 8%) scale(1.15);
  }
}
@keyframes ns2-glow-b {
  from {
    transform: translate(6%, 6%) scale(1.1);
  }
  to {
    transform: translate(-10%, -6%) scale(1);
  }
}
@keyframes ns2-scan {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(260%);
  }
}
@keyframes ns2-slide {
  from {
    opacity: 0;
    translate: 24px 0;
  }
  to {
    opacity: 1;
    translate: none;
  }
}
@keyframes ns2-lit {
  0%,
  100% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
}
@keyframes ns2-num {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes ns2-lift {
  to {
    translate: 0 -8px;
  }
}

/* The pricing popup, light (v5), token-driven so it follows the theme (v6). Its markup and script are today's
   (_macros_hp-new.html renderPricingModal); these rules apply only under body.ns2-pop, which the treatment templates set
   and ns2Script adds on header-only pages. */
body.ns2-pop #hp-new-pricing-modal {
  padding: 24px;
  background: var(--ns2-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ns2-show 180ms ease-out;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-content {
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ns2-card);
  border-radius: 20px;
  box-shadow: var(--ns2-shadow-pop);
  color: var(--ns2-body);
  font-family: var(--ns2-font);
  text-align: center;
  outline: none;
  animation: ns2-pop 180ms ease-out;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-content * {
  letter-spacing: normal;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-close {
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-close:hover {
  background: var(--ns2-bg);
  opacity: 1;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-close svg {
  width: 20px;
  height: 20px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-close path {
  stroke: var(--ns2-text);
}
body.ns2-pop #hp-new-pricing-modal :focus-visible:not(.hp-new-pricing-content) {
  outline: 2px solid var(--ns2-focus);
  outline-offset: 2px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-header {
  padding: 32px 56px 0;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-title {
  margin: 0;
  font-family: var(--ns2-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ns2-text);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-subtitle {
  margin-top: 8px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ns2-muted);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-models {
  padding: 20px 32px 0;
  overflow: visible;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-models-row {
  gap: 8px;
  min-width: 0;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-model-card {
  flex-direction: row;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 4px 12px 4px 4px;
  background: var(--ns2-bg);
  border: 1px solid var(--ns2-border);
  border-radius: 999px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-model-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ns2-accent);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-model-circle {
  width: 24px;
  height: 24px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-model-name {
  width: auto;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ns2-text);
  text-align: left;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-cta-section {
  padding: 20px 32px 0;
  background: transparent;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-cta-note {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ns2-muted);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-btn {
  max-width: none;
  margin: 0 0 12px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ns2-btn);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  transform: none;
  color: var(--ns2-on-btn);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-btn:hover {
  background: var(--ns2-btn-hover);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-price-section {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-old-amount,
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-current-amount {
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-old-amount {
  font-weight: 500;
  color: var(--ns2-muted);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-current-amount {
  font-weight: 700;
  color: var(--ns2-text);
}
/* The promo's badge + "First month then, $10/month" sit in a column by inline style; put them on the price's line. */
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-price-section > div {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  margin-left: 0 !important;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-period {
  order: 1;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ns2-body);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-discount-badge {
  order: 2;
  height: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ns2-lavender);
  box-shadow: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ns2-accent);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-features {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  padding: 20px 32px 0;
  background: transparent;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-feature {
  flex: 1;
  gap: 0;
  min-width: 0;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-feature-icon {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  padding: 12px 6px;
  border: 1px solid var(--ns2-border);
  border-radius: 12px;
  background: var(--ns2-bg);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-feature-icon img {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-feature-text {
  max-width: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ns2-body);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-learn {
  margin: 12px 0 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ns2-accent);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-login {
  margin-top: 16px;
  padding: 14px 32px 18px;
  border-top: 1px solid var(--ns2-border);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ns2-muted);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-login-link {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ns2-accent);
}
body.ns2-pop #hp-new-pricing-modal .hp-new-pricing-login-link:hover {
  background: none;
  color: var(--ns2-accent-hover);
  text-decoration: underline;
}

/* v13: Studio. Proof card: a 3x2 mosaic of catalog tiles that pop in one by one (ns2-play) with a light sweep.
   Catalog: masonry columns of tiles in their own aspect ratio; videos play their preview on hover. */
.ns2 .ns2-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ns2 .ns2-mosaic-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ns2-bg);
}
.ns2 .ns2-mosaic-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns2 .ns2-mosaic-cap,
.ns2 .ns2-gtile-cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  padding: 24px 10px 8px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 34, 0.75));
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
}
.ns2 .ns2-mosaic-cap b,
.ns2 .ns2-gtile-cap b {
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ns2 .ns2-mosaic-cap span,
.ns2 .ns2-gtile-cap span {
  opacity: 0.8;
}
.ns2-motion .ns2-proof--gallery .ns2-mosaic-tile {
  opacity: 0;
  scale: 0.85;
}
.ns2-motion .ns2-proof--gallery.ns2-play .ns2-mosaic-tile {
  animation: ns2-tile-in 500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.ns2-motion .ns2-proof--gallery .ns2-mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45),
    transparent 70%
  );
  translate: -100% 0;
}
.ns2-motion .ns2-proof--gallery.ns2-play .ns2-mosaic-tile::after {
  animation: ns2-sweep 700ms ease-out 250ms forwards;
}
.ns2 .ns2-mosaic-tile:nth-child(2) {
  --ns2-d: 180ms;
}
.ns2 .ns2-mosaic-tile:nth-child(3) {
  --ns2-d: 360ms;
}
.ns2 .ns2-mosaic-tile:nth-child(4) {
  --ns2-d: 540ms;
}
.ns2 .ns2-mosaic-tile:nth-child(5) {
  --ns2-d: 720ms;
}
.ns2 .ns2-mosaic-tile:nth-child(6) {
  --ns2-d: 900ms;
}
.ns2-motion .ns2-proof--gallery.ns2-play .ns2-mosaic-tile,
.ns2-motion .ns2-proof--gallery.ns2-play .ns2-mosaic-tile::after {
  animation-delay: var(--ns2-d, 0ms);
}
@keyframes ns2-tile-in {
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes ns2-sweep {
  to {
    translate: 100% 0;
  }
}
/* v16: a dense grid (portrait 1x3 cells, landscape 2x2) so every tab packs evenly; tiles fill their cells. */
.ns2-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 16px;
  margin-top: 28px;
}
.ns2 .ns2-gtile {
  position: relative;
  display: block;
  grid-row: span 3;
  border-radius: var(--ns2-radius-sm);
  overflow: hidden;
  background: var(--ns2-card);
  border: 1px solid var(--ns2-border);
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}
.ns2 .ns2-gtile--wide {
  grid-column: span 2;
  grid-row: span 2;
}
.ns2 .ns2-gtile:hover {
  transform: translateY(-2px);
  box-shadow: var(--ns2-shadow-hover);
}
.ns2 .ns2-gtile[hidden] {
  display: none;
}
.ns2 .ns2-gtile img,
.ns2 .ns2-gtile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns2 .ns2-gtile video {
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.ns2 .ns2-gtile.is-playing video {
  opacity: 1;
}
.ns2 .ns2-gtile-type {
  position: absolute;
  top: 8px;
  left: 8px;
}
.ns2 .ns2-faq-section {
  margin: 40px 0 8px;
  color: var(--ns2-accent);
}
.ns2 .ns2-faq-section:first-child {
  margin-top: 0;
}

/* v12: FAQ pages: one column of the shared FAQ list, the product link above it. */
.ns2-faq-page {
  max-width: 820px;
  margin: 0 auto;
}
.ns2 .ns2-faq-page .ns2-faq-item dt {
  font-size: 18px;
}

/* v11: press page. Hero with the linked press logos; six image cards; the archive as year rows (label column +
   two-column list); awards as a quiet row. */
.ns2-hero--press .ns2-h1 {
  margin-top: 12px;
}
.ns2 .ns2-press--hero {
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  padding: 0;
}
.ns2 .ns2-press-card {
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.ns2 .ns2-press-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1686 / 546;
  object-fit: cover;
  border-bottom: 1px solid var(--ns2-border);
}
.ns2 .ns2-press-card .ns2-press-meta {
  margin: 16px 20px 0;
}
.ns2 .ns2-press-card .ns2-h3 {
  margin: 6px 20px 20px;
  font-size: 16px;
  line-height: 1.4;
}
.ns2 .ns2-press-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--ns2-muted);
}
.ns2 .ns2-press-meta b {
  font-weight: 600;
  color: var(--ns2-accent);
}
.ns2 .ns2-press-year {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--ns2-border);
}
.ns2 .ns2-press-year-label {
  font-family: var(--ns2-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--ns2-text);
}
.ns2 .ns2-press-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ns2 .ns2-press-list li {
  padding: 0;
  border: 0;
}
.ns2 .ns2-press-list a {
  display: block;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--ns2-radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background 200ms ease-out;
}
.ns2 .ns2-press-list a:hover {
  background: var(--ns2-card);
}
.ns2 .ns2-press-title {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ns2-text);
}
.ns2 .ns2-press-list a:hover .ns2-press-title {
  color: var(--ns2-accent);
}
.ns2 .ns2-awards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ns2 .ns2-awards li {
  padding: 0;
  border: 0;
}
.ns2 .ns2-awards img {
  display: block;
  height: 120px;
  width: auto;
}

/* Narrow desktop windows */
/* v7: round 4's sections on the treatment homepage. Product rows: screenshot beside the copy, alternating sides. */
.ns2-frows {
  display: grid;
  gap: 40px;
}
.ns2-frow {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.ns2-frow--flip .ns2-shot {
  order: 2;
}
/* The round-4 screenshots carry their own pastel backdrop, so they sit plain (rounded, lifted), as on round 4. */
.ns2 .ns2-shot {
  margin: 0;
  border-radius: var(--ns2-radius);
  overflow: hidden;
  box-shadow: var(--ns2-shadow-lift);
  background: var(--ns2-card);
}
.ns2 .ns2-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.ns2-frow-copy .ns2-h3 {
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.15;
  text-wrap: balance;
}
.ns2-frow-copy .ns2-body {
  margin-top: 12px;
  max-width: 44ch;
}
.ns2-frow-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.ns2 .ns2-frow-actions .ns2-link {
  margin-top: 0; /* the generic link offset would drop it below the button's centre */
}
.ns2 .ns2-card--pillar {
  padding: 0;
  overflow: hidden;
}
.ns2 .ns2-card--pillar img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 360;
  object-fit: cover;
  border-bottom: 1px solid var(--ns2-border);
  background: var(--ns2-bg);
}
.ns2 .ns2-card--pillar .ns2-h3 {
  margin: 20px 24px 0;
}
.ns2 .ns2-card--pillar .ns2-small {
  margin: 8px 24px 24px;
}
.ns2-enterprise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px;
  border: 1px solid var(--ns2-border);
  border-radius: var(--ns2-radius);
  background: var(--ns2-card);
}
.ns2 .ns2-enterprise .ns2-head {
  margin-bottom: 12px;
}
.ns2 .ns2-enterprise .ns2-btn {
  margin-top: 24px;
}
.ns2 .ns2-tags--lg {
  gap: 8px;
  margin: 0;
}
.ns2 .ns2-tags--lg li {
  padding: 8px 14px;
  font-size: 14px;
}
/* Rows: the screenshot slides in from its own side, the copy follows. */
.ns2-motion .ns2-frow[data-ns2-reveal] > .ns2-shot {
  translate: -24px 0;
}
.ns2-motion .ns2-frow--flip[data-ns2-reveal] > .ns2-shot {
  translate: 24px 0;
}
.ns2-motion .ns2-frow[data-ns2-reveal].ns2-in > .ns2-shot {
  translate: none;
}

@media (max-width: 960px) {
  .ns2-frow,
  .ns2-enterprise {
    grid-template-columns: 1fr;
  }
  .ns2-frow--flip .ns2-shot {
    order: 0;
  }
  .ns2-nav .ns2-nav-link {
    padding: 0 8px;
  }
  .ns2-hero-grid,
  .ns2-split,
  .ns2-row {
    grid-template-columns: 1fr;
  }
  .ns2-row:nth-child(even) > :first-child {
    order: 0;
  }
  .ns2-grid--3,
  .ns2-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}