/* ============================================================================
   intelligence.css: the Outstrip Intelligence page, Night Shell.

   Loaded AFTER anim.css, site.css and pages.css, and every rule is scoped
   under `body.intelligence`, so nothing here can reach another page. The
   shared chrome — nav, drawer, buttons, footer — is NOT redefined here: it
   is already Night Shell in site.css, because the whole site is. What lives
   in this file is only the page's own furniture: the navy hero and the
   product frame that climbs out of it, the logo marquee, the seven panels,
   the manifesto, and the coral close.

   Class names carry an `ns-` prefix. site.css already owns `.hero`, `.dish`,
   `.gap`, `.row`, `.tile`, `.stats` and `.price` for other pages, and an
   unprefixed copy here would inherit half a grid from a rule written for a
   different page. A prefix is cheaper than a specificity war.

   Values are lifted from the live product's stylesheet, not approximated.
   The contrast rule from site.css holds everywhere below: white text never
   sits on coral.
   ========================================================================= */

body.intelligence {
  /* the page's own tokens, named as the product names them */
  --sunk:      #F8F7F3;
  --tom:       var(--accent);
  --tom-text:  var(--accent-ink);
  --tom-disp:  var(--accent-text);
  --tom-night: var(--accent-night);
  --tom-label: var(--accent-label);
  --tom-soft:  var(--accent-soft);
  --teal:      var(--series-2);
  --teal-soft: var(--series-2-soft);
  --peri:      var(--series-1);
  --peri-soft: var(--series-1-soft);
  --draft-text:var(--series-1-text);
  --sun:       var(--sun-soft);
  --warn-text: #6B4B00;
  --ease:      var(--ease-out);

  background: var(--night);
}
/* the paper grain is painted per zone here, not once over the whole page:
   half this page is navy, and a fixed paper texture over navy reads as dust */
body.intelligence::before { content: none; }

body.intelligence .wrap { width: min(1300px, 100%); padding-inline: var(--gut); }
body.intelligence .lab {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}

/* The aurora. Three blurred radials per navy zone — coral top right, teal
   left, periwinkle centre — drifting against each other on different clocks
   so the field never repeats a frame. Plus the same SVG noise site.css uses
   for paper grain, which is what stops the large flat navy from banding. */
body.intelligence .au {
  position: absolute; border-radius: 50%; filter: blur(40px); z-index: -1; pointer-events: none;
}
body.intelligence .au-1 {
  width: 760px; height: 760px; right: -220px; top: -300px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .5), rgba(150, 55, 70, .22) 45%, transparent 70%);
  animation: ns-drift-a 16s ease-in-out infinite alternate;
}
body.intelligence .au-2 {
  width: 700px; height: 700px; left: -260px; top: 120px;
  background: radial-gradient(circle, rgba(var(--series-2-rgb), .55), transparent 68%);
  animation: ns-drift-b 18s ease-in-out infinite alternate;
}
body.intelligence .au-3 {
  width: 520px; height: 520px; left: 40%; top: 380px;
  background: radial-gradient(circle, rgba(var(--series-1-rgb), .32), transparent 70%);
  animation: ns-drift-a 20s ease-in-out infinite alternate-reverse;
}
body.intelligence .ns-noise {
  position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes ns-drift-a { to { transform: translate(-100px, 80px) scale(1.15); } }
@keyframes ns-drift-b { to { transform: translate(120px, -60px) scale(1.1); } }

/* ============================================================ B · hero */
body.intelligence .ns-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(60px, 7vw, 110px) 0 0; text-align: center; color: var(--night-ink);
}

/* the greeting pill. Its dot is the only thing on the page that repeats
   forever, and it is 8px, because a weekly product does not need a heartbeat */
body.intelligence .ns-greet {
  display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--night-ink-2);
  padding: 8px 16px 8px 10px; border-radius: var(--radius-pill);
  background: rgba(27, 42, 75, .7); box-shadow: inset 0 0 0 1px var(--night-line);
}
body.intelligence .ns-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tom-night);
  position: relative; display: inline-block; flex: none;
}
body.intelligence .ns-live::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--tom-night); animation: ns-ping 2.2s var(--ease) infinite;
}
@keyframes ns-ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

body.intelligence .ns-hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 7.2vw, 104px); line-height: .98; letter-spacing: -.05em;
  margin: 32px auto 0; max-width: 1180px; text-wrap: balance;
}
/* The words rise out of their own clip with the blur coming off them. The
   stagger is anim.js's `--i`; only the distance and the blur are this page's. */
body.intelligence .ns-hero h1 .split-word > span {
  transform: translate3d(0, 50%, 0); filter: blur(10px);
  transition:
    transform 1s var(--ease) calc(var(--i) * 60ms),
    opacity   1s var(--ease) calc(var(--i) * 60ms),
    filter    1s var(--ease) calc(var(--i) * 60ms);
}
body.intelligence .ns-hero h1.split-in .split-word > span { transform: none; filter: none; }
/* anim.css clips each word so it can rise out of its own box. This headline
   rises out of a BLUR instead, and at line-height .98 that clip takes the
   descender off every g and y in it. */
body.intelligence .ns-hero h1 .split-word { overflow: visible; }
/* the last three words are the promise, so they are the only coloured ones */
body.intelligence .ns-hero h1 .split-word:nth-last-child(-n+3) { color: var(--tom-night); }

body.intelligence .ns-lede {
  margin: 30px auto 0; max-width: 700px; font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55; color: var(--night-ink-2);
}
body.intelligence .ns-acts { display: flex; justify-content: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; }

/* the sample verdict strip */
body.intelligence .ns-verdict {
  margin: 64px auto 0; max-width: 860px; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 18px 18px 18px 24px; border-radius: var(--radius-lg);
  background: rgba(15, 26, 49, .7); box-shadow: inset 0 0 0 1px var(--night-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.intelligence .ns-verdict .lab { color: var(--tom-label); font-size: 11px; white-space: nowrap; }
body.intelligence .ns-vtext {
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -.025em; line-height: 1.25; min-height: 56px; display: flex; align-items: center;
}
body.intelligence .ns-vtext em { font-style: normal; color: var(--tom-night); }
/* replayed by JS on each change, which is why it is an animation not a
   transition: the element's text is swapped, not its state */
body.intelligence .ns-v { margin: 0; }
body.intelligence .ns-v.is-in { animation: ns-vin .7s var(--ease) both; }
@keyframes ns-vin { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
body.intelligence .ns-dots { display: flex; gap: 6px; }
body.intelligence .ns-dots button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; padding: 0;   /* 44px target, 8px mark */
}
body.intelligence .ns-dots button i { width: 8px; height: 8px; border-radius: 50%; background: var(--night-3); transition: background .3s, transform .3s; }
body.intelligence .ns-dots button[aria-pressed="true"] i { background: var(--tom-night); transform: scale(1.3); }

/* ---- the product frame, climbing out of the navy onto the paper ---- */
body.intelligence .ns-stage { position: relative; margin-top: 80px; perspective: 2000px; }
/* the paper starts behind the lower half of the frame, so the frame crosses
   the seam instead of sitting above or below it */
body.intelligence .ns-stage::after {
  content: ''; position: absolute; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); bottom: -1px;
  height: 45%; background: var(--paper); z-index: -1; border-radius: 60px 60px 0 0;
}
body.intelligence .ns-app {
  text-align: left; border-radius: 28px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 80px 140px -60px rgba(0,0,0,.85);
  overflow: hidden; display: grid; grid-template-columns: 240px minmax(0, 1fr);
  transform-origin: 50% 100%;
}
/* it tilts up out of the page on load rather than on scroll: it is the first
   thing above the fold, and nothing has scrolled yet */
body.intelligence .ns-app { animation: ns-app-in 1.6s var(--ease) .5s both; }
@keyframes ns-app-in {
  from { opacity: 0; transform: rotateX(-22deg) translateY(120px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

body.intelligence .ns-rail { background: var(--night); color: #fff; padding: 22px 14px; border-right: 1px solid var(--night-line); }
body.intelligence .ns-rail .mk { font-family: var(--display); font-weight: 700; font-size: 17px; padding: 0 10px 18px; }
body.intelligence .ns-venue { background: var(--night-2); border-radius: 16px; padding: 13px 15px; }
body.intelligence .ns-venue .lab { font-size: 11px; color: var(--tom-label); }
body.intelligence .ns-venue b { display: block; font-family: var(--display); font-weight: 700; font-size: 15.5px; margin-top: 4px; }
body.intelligence .ns-rail .sec { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--night-ink-3); margin: 20px 10px 8px; }
body.intelligence .ns-ri { display: block; padding: 10px 15px; border-radius: var(--radius-pill); font-size: 14px; color: var(--night-ink-2); }
body.intelligence .ns-ri.on { background: #fff; color: var(--ink); font-weight: 600; }

body.intelligence .ns-main { padding: 28px 32px 32px; min-width: 0; }
body.intelligence .ns-ahero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--night); color: #fff; padding: 28px 30px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 26px;
}
body.intelligence .ns-ahero::before {
  content: ''; position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .45), transparent 65%); z-index: -1;
}
body.intelligence .ns-ahero::after {
  content: ''; position: absolute; right: 60px; bottom: -200px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--series-2-rgb), .5), transparent 65%); z-index: -1;
}
body.intelligence .ns-ahero .g { font-size: 14px; color: var(--night-ink-2); }
body.intelligence .ns-ahero .verdict { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.06; letter-spacing: -.04em; margin-top: 10px; }
body.intelligence .ns-ahero .verdict em { font-style: normal; color: var(--tom-night); }
body.intelligence .ns-score { border-top: 1px solid var(--night-line); padding-top: 14px; }
body.intelligence .ns-score .lab { font-size: 11px; color: var(--tom-label); }
body.intelligence .ns-score .n { font-family: var(--display); font-weight: 700; font-size: 50px; letter-spacing: -.05em; color: var(--tom-night); line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
body.intelligence .ns-score .n small { font-size: 18px; }
body.intelligence .ns-score p { font-size: 12px; color: var(--night-ink-3); margin-top: 6px; }

body.intelligence .ns-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
body.intelligence .ns-tile { border-radius: 20px; padding: 16px 18px; }
body.intelligence .ns-tile .k { font-size: 13px; color: var(--ink-2); }
body.intelligence .ns-tile .n { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
body.intelligence .ns-tile p { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
body.intelligence .ns-t1 { background: var(--teal-soft); }
body.intelligence .ns-t2 { background: var(--peri-soft); }
body.intelligence .ns-t2 .n { color: var(--draft-text); }
body.intelligence .ns-t3 { background: var(--tom-soft); }
body.intelligence .ns-t3 .n { color: var(--tom-text); }

body.intelligence .ns-first {
  margin-top: 18px; display: grid; grid-template-columns: 60px minmax(0, 1fr) 260px; gap: 20px;
  align-items: center; padding-top: 16px; border-top: 1px solid var(--line);
}
body.intelligence .ns-first .no { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
body.intelligence .ns-first b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
body.intelligence .ns-first p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
body.intelligence .ns-impact { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 13px; }
body.intelligence .ns-impact .lab { font-size: 11px; color: var(--tom-disp); }
/* "Sample" is never decoration: every figure in every mock on this page is
   illustrative, and the label that says so is part of the mock */
body.intelligence .ns-sample { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ============================================================ C · logos + stats */
body.intelligence .ns-paper { background: var(--paper); color: var(--ink); padding: 70px 0 140px; }
body.intelligence .ns-lh { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
body.intelligence .ns-lh p { font-size: 14px; color: var(--ink-3); }

body.intelligence .ns-marquee { margin-top: 22px; --marquee-gap: 16px; }
body.intelligence .ns-logo {
  display: flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px;
  border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) { body.intelligence .ns-logo:hover { transform: translateY(-4px) rotate(-1deg); } }
body.intelligence .ns-logo img { width: 68px; height: 68px; border-radius: 16px; object-fit: cover; display: block; }
body.intelligence .ns-logo b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }

body.intelligence .ns-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 90px; }
body.intelligence .ns-stat { border-radius: var(--radius-lg); padding: 30px 32px; }
body.intelligence .ns-stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(72px, 9vw, 96px); letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
body.intelligence .ns-stat p { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
body.intelligence .ns-stat.a { background: var(--teal-soft); }
body.intelligence .ns-stat.b { background: var(--peri-soft); }
body.intelligence .ns-stat.b .n { color: var(--draft-text); }
body.intelligence .ns-stat.c { background: var(--tom-soft); }
body.intelligence .ns-stat.c .n { color: var(--tom-text); }

/* ============================================================ D · inside */
body.intelligence .ns-inside { background: var(--paper); color: var(--ink); padding: 0 0 160px; }
body.intelligence .ns-igrid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 60px; align-items: start; }
body.intelligence .ns-idx { position: sticky; top: 110px; }
body.intelligence .ns-idx .lab { color: var(--tom-disp); }
body.intelligence .ns-idx h2 { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 5.4vw, 72px); line-height: .98; letter-spacing: -.05em; margin-top: 14px; }
body.intelligence .ns-idx > p { margin-top: 16px; font-size: 17px; color: var(--ink-2); line-height: 1.55; }

body.intelligence .ns-il { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 2px; border-top: 1px solid var(--line); }
body.intelligence .ns-il a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.02em;
  transition: padding .3s var(--ease), color .3s ease;
}
body.intelligence .ns-il a span { font-size: 12px; color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
body.intelligence .ns-il a:hover { padding-left: 12px; color: var(--tom-disp); }
/* set by the IntersectionObserver in intelligence.js, not by a scroll
   timeline: `timeline-scope` is Chromium-only and this has to work in Safari */
/* ONE marker that travels down the list, rather than seven that blink on and
   off in place. It is positioned by intelligence.js from the current row's own
   offsetTop and height, so it tracks the real rows at any width and any font
   size — and because it moves on `transform`, the whole trip is one
   compositor property. Behind it, a hairline track makes the travel legible:
   without the track the rule looks like it is teleporting, not moving. */
body.intelligence .ns-il { position: relative; }
body.intelligence .ns-il::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  border-radius: 2px; background: var(--line);
}
body.intelligence .ns-marker {
  position: absolute; left: 0; top: 0; width: 2px; border-radius: 2px;
  background: var(--tom); height: var(--mh, 0px);
  transform: translateY(var(--my, 0px));
  transition: transform .5s var(--ease), height .5s var(--ease), opacity .3s ease;
  opacity: 0; pointer-events: none;
}
body.intelligence .ns-marker.on { opacity: 1; }
/* first placement is a jump, not a slide: a marker sliding in from row zero
   on page load would be animating a position the reader never saw */
body.intelligence .ns-marker.no-anim { transition: none; }
body.intelligence .ns-il a.is-current { padding-left: 16px; color: var(--tom-disp); }
body.intelligence .ns-il a.is-current span { color: var(--tom-disp); }

/* The panel cards come up as cards. The mock inside each one is already on
   its own `data-anim`, so the card lands first and the screenshot settles
   into it a beat later — which is the order the eye wants them in. */
body.intelligence .ns-panel.anim { transform: translate3d(0, 46px, 0); }
body.intelligence .ns-panel { --anim-dur: 900ms; }
body.intelligence .ns-copy { --anim-dur: 720ms; }
/* the index rows slide in from the left, which is the direction the rule
   marking them grows from */
body.intelligence .ns-il li.anim { --anim-dist: 10px; }

body.intelligence .ns-panels { display: grid; gap: 28px; }
body.intelligence .ns-panel { border-radius: 34px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
body.intelligence .ns-shot { position: relative; padding: 34px; display: flex; justify-content: center; min-height: 330px; align-items: center; }
body.intelligence .ns-shot.tl { background: var(--teal-soft); }
body.intelligence .ns-shot.pr { background: var(--peri-soft); }
body.intelligence .ns-shot.co { background: var(--tom-soft); }
body.intelligence .ns-shot.sn { background: var(--sun); }
body.intelligence .ns-shot.nv { background: var(--night); }

body.intelligence .ns-copy { padding: 34px 40px 38px; }
body.intelligence .ns-copy .num { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tom-disp); }
body.intelligence .ns-copy h3 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.2vw, 38px); line-height: 1.06; letter-spacing: -.04em; margin-top: 12px; }
body.intelligence .ns-copy > p { margin-top: 14px; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }
body.intelligence .ns-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
body.intelligence .ns-ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.45; }
body.intelligence .ns-ticks svg { color: var(--tom-disp); margin-top: 2px; flex: none; }
body.intelligence .ns-more { display: inline-flex; gap: 6px; margin-top: 20px; font-weight: 600; font-size: 15px; color: var(--tom-disp); text-decoration: none; }
body.intelligence .ns-more:hover { color: var(--ink); }

/* ---- the mini mock inside each panel ---- */
body.intelligence .ns-mock {
  position: relative; width: min(560px, 100%); border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .45); padding: 18px;
}
body.intelligence .ns-shot.nv .ns-mock { background: var(--night-2); color: #fff; box-shadow: 0 0 0 1px var(--night-line); }
body.intelligence .ns-mh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
body.intelligence .ns-shot.nv .ns-mh { border-color: var(--night-line); }
body.intelligence .ns-mh b { font-family: var(--display); font-weight: 700; }
body.intelligence .ns-mh span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
body.intelligence .ns-shot.nv .ns-mh span { color: var(--night-ink-3); }
body.intelligence .ns-ms { position: absolute; right: 14px; bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
body.intelligence .ns-shot.nv .ns-ms { color: var(--night-ink-3); }

/* the mock rises and settles as its panel enters view */
body.intelligence .ns-mock.anim { transform: translateY(60px) rotate(-2deg) scale(.95); }
body.intelligence .ns-mock.anim-in { transform: none; }

/* Every measured bar inside a mock grows from the left once that mock has
   landed, one after another. The WIDTH is the datum and the SCALE is the
   animation, so a bar is never shown at a length that is not its number —
   it is shown at none of it, and then at all of it. */
body.intelligence .ns-mock .fl,
body.intelligence .ns-mock .ns-sent i {
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease) calc(.25s + var(--i, 0) * .09s);
}
body.intelligence .ns-mock.anim-in .fl,
body.intelligence .ns-mock.anim-in .ns-sent i { transform: scaleX(1); }

body.intelligence .ns-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
body.intelligence .ns-row:last-of-type { border-bottom: 0; padding-bottom: 20px; }
body.intelligence .ns-row .i { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
body.intelligence .ns-row:first-of-type .i { color: var(--tom-disp); }
body.intelligence .ns-pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
body.intelligence .ns-pill.hi { background: var(--tom-soft); color: var(--tom-text); }
body.intelligence .ns-pill.md { background: var(--sun); color: var(--warn-text); }
body.intelligence .ns-pill.lo { background: var(--teal-soft); color: #064B52; }

/* the rating rail: four grey peers and one coral you, on one axis */
body.intelligence .ns-rail2 { position: relative; height: 8px; border-radius: 9px; background: var(--sunk); margin: 36px 8px 8px; }
body.intelligence .ns-rail2 .p { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 3px #fff; }
body.intelligence .ns-rail2 .p.me { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--tom); box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(var(--accent-rgb), .22); }
body.intelligence .ns-rail2 .lb { position: absolute; bottom: 16px; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--tom-text); white-space: nowrap; }
body.intelligence .ns-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

body.intelligence .ns-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-bottom: 12px; }
body.intelligence .ns-mini { border-radius: 14px; padding: 12px 14px; background: var(--sunk); }
body.intelligence .ns-mini .k { font-size: 12px; color: var(--ink-3); }
body.intelligence .ns-mini .n { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.04em; margin-top: 4px; line-height: 1.15; font-variant-numeric: tabular-nums; }
body.intelligence .ns-mini .n.word { font-size: 20px; }
/* a figure the sweep could not reach is absent, and says so. Never a zero */
body.intelligence .ns-mini .n.absent { color: var(--ink-4); }
body.intelligence .ns-mini .n small { font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }

body.intelligence .ns-bar { display: grid; grid-template-columns: 128px minmax(0, 1fr) 30px; gap: 12px; align-items: center; margin-top: 13px; font-size: 13.5px; color: var(--ink-2); }
body.intelligence .ns-bar:last-of-type { padding-bottom: 18px; }
body.intelligence .ns-bar .tr { height: 12px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
/* width is the datum, the scale is the animation, so the bar never lies
   about its own number while it is still moving */
body.intelligence .ns-bar .fl { display: block; height: 100%; border-radius: 6px; background: #B9C0D4; }
body.intelligence .ns-bar.me { color: var(--ink); font-weight: 600; }
body.intelligence .ns-bar.me .fl { background: var(--tom); }
body.intelligence .ns-bar .v { text-align: right; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
body.intelligence .ns-you { font-size: 11px; font-weight: 700; letter-spacing: .06em; background: var(--tom); color: var(--on-accent); padding: 2px 6px; border-radius: 5px; margin-left: 6px; }

body.intelligence .ns-dish { display: grid; grid-template-columns: minmax(0, 1fr) 54px 120px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
body.intelligence .ns-dish .mn { font-size: 12.5px; color: var(--ink-3); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
body.intelligence .ns-sent { height: 8px; border-radius: 5px; background: var(--tom-soft); overflow: hidden; display: flex; }
body.intelligence .ns-sent i { display: block; height: 100%; background: var(--teal); }
body.intelligence .ns-held { margin-top: 10px; padding-bottom: 14px; font-size: 12px; color: var(--ink-3); }

body.intelligence .ns-rev { border-radius: 14px; padding: 13px 15px; background: var(--sunk); margin-top: 12px; }
body.intelligence .ns-rev .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-3); }
body.intelligence .ns-stars { color: #C8901B; letter-spacing: 2px; }
body.intelligence .ns-rev p { margin-top: 6px; font-size: 14px; line-height: 1.5; }
body.intelligence .ns-draft { margin-top: 10px; border-radius: 14px; padding: 13px 15px; background: var(--peri-soft); }
body.intelligence .ns-draft .lb { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--draft-text); }
body.intelligence .ns-draft p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--draft-text); }
/* the caret is the whole claim of this panel: it is still being written, and
   nothing has been sent */
body.intelligence .ns-caret { display: inline-block; width: 2px; height: 15px; background: var(--draft-text); vertical-align: -3px; margin-left: 2px; animation: ns-blink 1s steps(1) infinite; }
@keyframes ns-blink { 50% { opacity: 0; } }

body.intelligence .ns-ev { display: flex; gap: 12px; padding: 10px 0; }
body.intelligence .ns-ev i { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--tom); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
body.intelligence .ns-ev .d { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); }
body.intelligence .ns-ev .e { font-size: 14px; }
body.intelligence .ns-ba { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
body.intelligence .ns-ba.hd { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-top: 0; }
body.intelligence .ns-ba:last-of-type { padding-bottom: 20px; }
body.intelligence .ns-ba .v { text-align: right; font-variant-numeric: tabular-nums; }
body.intelligence .ns-ba .v.af { color: var(--teal); font-weight: 700; }

body.intelligence .ns-gap { display: grid; grid-template-columns: 96px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--night-line); font-size: 13.5px; }
body.intelligence .ns-gap:last-of-type { border-bottom: 0; padding-bottom: 22px; }
body.intelligence .ns-gap .s { font-weight: 600; }
body.intelligence .ns-gap .why { color: var(--night-ink-2); }
body.intelligence .ns-gap .d { text-align: right; color: var(--night-ink-3); }
body.intelligence .ns-alert { margin-top: 12px; border-radius: 12px; padding: 10px 13px; display: flex; gap: 10px; align-items: center; font-size: 13px; background: var(--sun); color: var(--warn-text); }
body.intelligence .ns-alert svg { flex: none; }

/* ============================================================ E · manifesto */
body.intelligence .ns-man { position: relative; isolation: isolate; overflow: hidden; padding: clamp(90px, 12vw, 170px) 0 clamp(80px, 10vw, 150px); color: var(--night-ink); }
body.intelligence .ns-man .au { opacity: .7; }
body.intelligence .ns-statement {
  font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.1; letter-spacing: -.045em; max-width: 1180px; text-wrap: pretty;
}
body.intelligence .ns-statement .k { color: var(--tom-night); }
body.intelligence .ns-statement s { color: var(--night-ink-3); text-decoration-color: var(--tom); text-decoration-thickness: 4px; }
/* The plain parts ink in from dim to white as the statement crosses the
   viewport, so the sentence is read rather than seen whole. `view()` carries
   it where it exists; everywhere else anim.js's single reveal does, which is
   why the fallback colour below is the FINISHED one. */
body.intelligence .ns-statement .w { color: var(--night-ink); }
@supports (animation-timeline: view()) {
  body.intelligence .ns-statement .w {
    animation: ns-ink linear both; animation-timeline: view(); animation-range: entry 20% cover 45%;
  }
}
@keyframes ns-ink { from { color: var(--ink-2); } to { color: var(--night-ink); } }

body.intelligence .ns-whylink {
  display: inline-flex; gap: 8px; margin-top: 30px; font-weight: 600; color: #fff;
  text-decoration: none; border-bottom: 1.5px solid var(--tom-night); padding-bottom: 3px;
}
body.intelligence .ns-whylink:hover { border-bottom-color: #fff; }
body.intelligence .ns-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 90px; }
body.intelligence .ns-dc { border-radius: 30px; padding: clamp(26px, 3vw, 40px); background: rgba(27, 42, 75, .65); box-shadow: inset 0 0 0 1px var(--night-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.intelligence .ns-dc.yes { background: #fff; color: var(--ink); box-shadow: none; }
body.intelligence .ns-dc .lab { color: var(--night-ink-3); }
body.intelligence .ns-dc.yes .lab { color: var(--tom-disp); }
body.intelligence .ns-dc h3 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.045em; line-height: 1.04; margin-top: 14px; }
body.intelligence .ns-dc p { margin-top: 14px; font-size: 16px; line-height: 1.62; color: var(--night-ink-2); }
body.intelligence .ns-dc.yes p { color: var(--ink-2); }
body.intelligence .ns-xs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
body.intelligence .ns-xs span { padding: 9px 14px; border-radius: var(--radius-pill); background: var(--night-3); font-size: 14px; color: var(--night-ink-2); text-decoration: line-through; text-decoration-color: var(--tom); text-decoration-thickness: 2px; transition: transform .3s var(--ease); }
body.intelligence .ns-xs span:hover { transform: rotate(-3deg) scale(1.05); }
body.intelligence .ns-price { display: flex; align-items: baseline; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
body.intelligence .ns-price b { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 6vw, 68px); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
body.intelligence .ns-price span { color: var(--ink-3); font-size: 15px; }

/* ============================================================ F · the close */
body.intelligence .ns-cta { background: var(--tom); color: var(--on-accent); padding: clamp(80px, 10vw, 140px) 0; text-align: center; position: relative; overflow: hidden; isolation: isolate; }
/* three rings leaving from one point, 2.3s apart. They are navy at 16%, not
   white: white rings on coral is the glow this design does not have */
body.intelligence .ns-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1.5px solid rgba(20, 33, 61, .16); transform: translate(-50%, -50%); z-index: -1;
  animation: ns-ring 7s var(--ease) infinite;
}
@keyframes ns-ring {
  0%   { width: 120px; height: 120px; opacity: 0; }
  20%  { opacity: 1; }
  100% { width: 1600px; height: 1600px; opacity: 0; }
}
body.intelligence .ns-cta h2 { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6.6vw, 88px); line-height: .98; letter-spacing: -.055em; max-width: 1000px; margin: 0 auto; text-wrap: balance; }
body.intelligence .ns-cta .s { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; }

/* the site's own scan form, in the one place on this page it is white */
body.intelligence .ns-cta .scanform {
  max-width: 640px; margin: 40px auto 0; padding: 7px; gap: 8px;
  background: #fff; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 30px 60px -30px rgba(80, 20, 15, .6);
}
body.intelligence .ns-cta .scanform:focus-within { box-shadow: 0 30px 60px -30px rgba(80, 20, 15, .6), 0 0 0 4px rgba(20, 33, 61, .18); }
body.intelligence .ns-cta .scanform input { color: var(--ink); font-size: 16px; padding: 0 20px; min-height: 52px; }
body.intelligence .ns-cta .scanform input::placeholder { color: var(--ink-3); }
body.intelligence .ns-ok { display: flex; justify-content: center; gap: 24px; margin-top: 22px; font-size: 15px; font-weight: 500; flex-wrap: wrap; }
body.intelligence .ns-ok span { display: inline-flex; gap: 8px; align-items: center; }
body.intelligence .ns-ok svg { flex: none; }
/* focus on coral: navy, because the coral ring would be invisible */
body.intelligence .ns-cta :focus-visible { outline-color: var(--on-accent); }

/* ============================================================ G · footer */
body.intelligence footer { margin-top: 0; }

/* ============================================================ motion kill switches
   Every animation on this page lands on its finished state, never on a blank
   element: the hero words, the frame, the mocks, the bars and the statement
   all have their resting state as the default and animate FROM something. */
.still body.intelligence *, .still body.intelligence *::before, .still body.intelligence *::after { animation: none !important; }
.still body.intelligence .ns-app, .still body.intelligence .ns-mock { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  body.intelligence *, body.intelligence *::before, body.intelligence *::after { animation: none !important; }
  body.intelligence .ns-app, body.intelligence .ns-mock { opacity: 1 !important; transform: none !important; }
  body.intelligence .ns-hero h1 .split-word > span { transform: none !important; filter: none !important; }
}

/* ============================================================ responsive */
@media (max-width: 1100px) {
  body.intelligence .ns-app { grid-template-columns: minmax(0, 1fr); }
  body.intelligence .ns-rail { display: none; }
  body.intelligence .ns-igrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body.intelligence .ns-idx { position: static; }
  body.intelligence .ns-il { display: none; }
  body.intelligence .ns-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.intelligence .ns-hero { padding-top: 48px; }
  body.intelligence .ns-verdict { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  body.intelligence .ns-stage { margin-top: 48px; }
  body.intelligence .ns-stage::after { border-radius: 30px 30px 0 0; }
  body.intelligence .ns-main { padding: 16px; }
  body.intelligence .ns-ahero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  body.intelligence .ns-tiles { grid-template-columns: minmax(0, 1fr); }
  body.intelligence .ns-first { grid-template-columns: minmax(0, 1fr); }
  body.intelligence .ns-first .no { display: none; }
  body.intelligence .ns-stats { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  body.intelligence .ns-paper { padding-bottom: 80px; }
  body.intelligence .ns-inside { padding-bottom: 90px; }
  body.intelligence .ns-shot { padding: 16px; min-height: 0; }
  body.intelligence .ns-copy { padding: 24px 20px 28px; }
  body.intelligence .ns-ticks { grid-template-columns: minmax(0, 1fr); }
  body.intelligence .ns-bar { grid-template-columns: 90px minmax(0, 1fr) 28px; }
  body.intelligence .ns-dish { grid-template-columns: minmax(0, 1fr) 44px 70px; }
  body.intelligence .ns-gap { grid-template-columns: 76px minmax(0, 1fr) 20px; }
  body.intelligence .ns-duo { margin-top: 48px; }
  body.intelligence .ns-cta .scanform { flex-direction: column; border-radius: 24px; }
}