/* Page-level CSS, copied verbatim from the design's inline <style> block
   (Niro Flagship v6.dc.html, lines 21-172). Token files own everything else. */

* { margin: 0; padding: 0; box-sizing: border-box; }
:root, [data-theme="dark"] {
  /* Owner exemption (benchmarked vs Devin/Linear/Antigravity, all ~50-70px edges
     with ~1320-1340 content at 1440): DS caps the column at 1200, which reads
     inset on modern wide screens. Cap raised to 1400; the 64px gutter token
     stays. Content = min(100vw - 128px, 1400px). */
  --layout-max: 1400px;
  /* interactive accent — DS blue; teal survives only as data-viz/status (--a0i) */
  --a0: var(--accent); --a0h: var(--accent); --a1: var(--accent-indigo);
  --a0i: var(--status-ok); --a1i: var(--status-info);
  /* brand gradient retired — flat accent fills */
  --g: var(--accent);
  --g135: var(--a0);
  --pad: var(--section-y);
  --ink: var(--niro-ink-900);
  --ink-fg: var(--niro-paper-100); --ink-fg2: var(--niro-ink-300); --ink-fg3: rgba(251,250,249,0.46);
  --ink-line: rgba(255,255,255,0.09); --ink-line2: rgba(255,255,255,0.16);
  --ink-panel: rgba(18,18,18,0.94);
  --term: var(--niro-ink-900); --term-2: rgba(255,255,255,0.025); --term-line: rgba(255,255,255,0.08);
  --term-fg: var(--niro-paper-100); --term-fg2: rgba(251,250,249,0.62); --term-fg3: rgba(251,250,249,0.48);
  --syn-punct: rgba(255,255,255,0.5); --syn-dim: rgba(255,255,255,0.24); --syn-num: rgba(255,255,255,0.2);
  --syn-kw: var(--status-info); --syn-type: rgba(129,140,248,0.68); --syn-fn: var(--status-ok); --syn-str: var(--status-warning); --syn-err: var(--status-error);
  --glass: rgba(18,18,18,0.62);
  --scrim0: var(--niro-ink-900);
  --sc-a: rgba(3,3,3,0.94); --sc-b: rgba(3,3,3,0.72); --sc-c: rgba(3,3,3,0.6);
  --sc-d: rgba(3,3,3,0.5); --sc-e: rgba(3,3,3,0.28);
  --hero-bg: var(--surface-page); --hero-fade: rgba(3,3,3,0.72);
  --hero-floor: linear-gradient(180deg, transparent, rgba(45,212,191,0.05) 100%);
}
[data-theme="light"] {
  /* bright teal/indigo fail contrast on paper — darkened data-viz steps */
  --a0i: #0F766E; --a1i: #4F46E5;
  --glass: rgba(255,255,255,0.78); --scrim0: var(--niro-paper-100);
  --ink: var(--niro-paper-200);
  --ink-fg: var(--niro-paper-900); --ink-fg2: var(--niro-paper-600); --ink-fg3: rgba(30,30,30,0.5);
  --ink-line: rgba(30,30,30,0.10); --ink-line2: rgba(30,30,30,0.16);
  --ink-panel: rgba(255,255,255,0.96);
  --term: var(--niro-white); --term-2: rgba(30,30,30,0.03); --term-line: rgba(30,30,30,0.09);
  --term-fg: var(--niro-paper-900); --term-fg2: rgba(30,30,30,0.68); --term-fg3: rgba(30,30,30,0.62);
  --syn-punct: rgba(30,30,30,0.66); --syn-dim: rgba(30,30,30,0.4); --syn-num: rgba(30,30,30,0.3);
  --syn-kw: var(--accent-indigo); --syn-type: rgba(79,70,229,0.72); --syn-fn: #0F766E; --syn-str: var(--accent-amber); --syn-err: var(--accent-red);
  --sc-a: rgba(251,250,249,0.95); --sc-b: rgba(251,250,249,0.74); --sc-c: rgba(251,250,249,0.62);
  --sc-d: rgba(251,250,249,0.52); --sc-e: rgba(251,250,249,0.3);
  --hero-bg: var(--surface-page); --hero-fade: rgba(251,250,249,0.72);
  --hero-floor: linear-gradient(180deg, transparent, rgba(45,212,191,0.06) 100%);
}
body {
  font-family: var(--font-sans);
  background: var(--surface-page); color: var(--text-primary);
  font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-sans); text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-primary); }
button { font-family: inherit; }
::selection { background: var(--accent-soft); color: var(--text-primary); }
.shell { max-width: var(--layout-max); margin: 0 auto; padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
@keyframes nUp { from { transform: translateY(115%); } to { transform: translateY(0); } }
/* a rise with the fade: nothing arrives from nothing, and a bare opacity
   ramp left the sub and the CTA appearing where nUp seats the headline */
@keyframes nFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 1200px) {
  #graph .n-scrim { opacity: 0.3 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 1180px) {
  .n-navlinks { display: none !important; }
  .n-ctagroup { margin-left: auto !important; }
  .n-burger { display: flex !important; }
  .n-mdrawer:target { display: block !important; }
  .n-mdrawer:target .n-burgerx { display: flex !important; }
  .n-body { flex-direction: column !important; }
  .n-rail { width: auto !important; border-right: none !important; border-bottom: 1px solid var(--term-line) !important; }
  .n-codepad { padding-bottom: 18px !important; }
  .n-lane { width: auto !important; border-left: none !important; border-top: 1px solid var(--border-alpha) !important; min-height: 210px !important; padding: 16px !important; }
  .n-lane .n-card { position: static !important; right: auto !important; top: auto !important; }
  .n-lane .n-elbow { display: none !important; }
  .n-lane .n-dock { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 10px; }
  .n-scrim { background: linear-gradient(180deg, var(--sc-a) 0%, var(--sc-b) 46%, var(--sc-e) 74%, transparent 100%) !important; }
}
@media (max-width: 900px) {
  .shell { padding-left: 22px; padding-right: 22px; }
  .n-race { grid-template-columns: 1fr !important; }
  /* the product-page hero: copy over mechanism once the figure would be squeezed */
  .n-hero2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  /* the question picker sits above its graph rather than beside it */
  .n-askgrid { grid-template-columns: 1fr !important; }
  .n-split, .n-toolgrid { grid-template-columns: 1fr !important; }
  #fresh .shell > div[style*="grid"] { grid-template-columns: 1fr !important; }
  .n-holdrow { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* the constellation is a 2.2:1 scene; on a narrow screen a tall box would
     just add air above and below it, so the figure goes landscape too */
  #lede niro-graph-3d { height: 54vw !important; min-height: 190px; }
  #ask niro-graph-3d { height: 52vw !important; min-height: 180px; }
  .n-split { gap: 24px !important; align-items: start !important; }
  .n-obj { grid-template-columns: 1fr !important; gap: 16px !important; }
  .n-obj > p:first-child { white-space: normal !important; }
  .n-solfoot { grid-template-columns: 1fr !important; gap: 20px; }
  .n-solfoot > p { grid-column: auto !important; padding: 0 !important; }
  .n-solfoot > div { padding-left: 0 !important; }
  .n-two { grid-template-columns: 1fr !important; }
  /* the workbench and the mitigation card are two panes side by side on a wide
     screen; stacked, the divider has to move from the side to the top */
  .n-wb, .n-mit { grid-template-columns: 1fr !important; }
  .n-wbtalk, .n-mitdiff { border-left: none !important; border-top: 1px solid var(--border-subtle) !important; }
  /* the agent trail: timestamp and agent share a line, the finding gets its own */
  .n-trail { grid-template-columns: 56px 1fr !important; }
  .n-trail > :last-child { grid-column: 1 / -1; }
  .n-plat { grid-template-columns: 1fr !important; }
  .n-wall { grid-template-columns: repeat(2, 1fr) !important; }
  .n-agents { overflow-x: auto; }
}
@media (max-width: 1024px) {
  .n-graph-grid { grid-template-columns: 1fr !important; }



}
@media (max-width: 900px) {
  :root { --pad: 84px !important; }
  .shell { padding-left: 20px !important; padding-right: 20px !important; }
  .n-wall { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #integrations > .shell { overflow: hidden !important; }
  .n-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .n-intstats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  :root { --pad: 60px !important; }
  html { overflow-x: hidden !important; } html, body { max-width: 100vw !important; }
  #graph * { max-width: 100% !important; }
  #graph .n-lane, #graph .n-lane * { min-width: 0 !important; }
  #review .n-verdict { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
  #review .n-verdict > * { width: 100% !important; min-width: 0 !important; }
  #review .n-verdict p, #review .n-verdict div { white-space: normal !important; word-break: normal !important; }
  #graph .n-lane > * { width: auto !important; box-sizing: border-box !important; }
  #graph .n-lane { padding-right: 0 !important; align-items: stretch !important; }
  #graph [data-el="gstage"] { align-items: stretch !important; }
  #graph [data-el="gstage"] > div, #graph [data-el="gstage"] > div > div {
    position: static !important; right: auto !important; left: auto !important;
    width: 100% !important; max-width: 100% !important; transform: none !important;
  }
  #graph .n-lane [style*="font-family: var(--font-mono)"] { font-size: 12px !important; word-break: break-word !important; }
  #graph, #graph .shell, #graph .n-lane { overflow-x: hidden !important; max-width: 100% !important; }
  #graph .n-lane > div, #graph .n-card { position: static !important; width: auto !important; max-width: 100% !important; }
  #graph [style*="white-space: nowrap"] { white-space: normal !important; }
  #integrations > .shell > div:first-child { min-height: 0 !important; }
  #integrations .n-intstats { margin-top: 12px !important; }
  #top { min-height: auto !important; padding-bottom: 48px !important; }
  .n-wall { grid-template-columns: 1fr !important; }
  #pricing .shell > div[style*="grid"] { grid-template-columns: 1fr !important; }
  #roi .shell > div[style*="grid"], #platform .shell > div[style*="grid"], .n-roi { grid-template-columns: 1fr !important; }
  .n-solfoot { padding-left: 0 !important; gap: 10px 18px !important; }
  .n-obj p { white-space: normal !important; }
}
@media (max-width: 430px) {
  .shell { padding-left: 16px !important; padding-right: 16px !important; }
  .n-intstats { grid-template-columns: 1fr !important; }
}

/* ── Platform scrollytelling (desktop): the terminal holds still while the four
   capabilities scroll past; each block's mid-viewport crossing selects it.
   Blocks carry their full description, so beats need less empty runway.
   Below 901px the section keeps its compact stacked list. ── */
@media (min-width: 901px) {
  .n-solrail { gap: 26vh !important; padding: 10vh 0 42vh; }
  .n-solsticky { position: sticky; top: 120px; }
}

/* ── Platform rail activation: the semantic bar draws in. Text never moves —
   it is reading material; ink transitions mark the selection. ── */
.n-solrail .sol-in > span:nth-child(1) { animation: nBarIn 0.55s var(--ease-niro); transform-origin: top; }
@keyframes nBarIn { from { transform: scaleY(0); } }

/* ── Integration wall glyphs: monochrome at rest (owner exemption — logos
   allowed, single-colour only), ink on hover. Devin's greyscale treatment. ── */

/* ---- Integrations band (homepage -> /integrations) ---- */
.n-band { display: flex; align-items: center; gap: var(--space-16); }
.n-band-copy { flex: 1; min-width: 0; }
.n-band-cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--size-ui); font-weight: var(--weight-semibold); color: var(--accent); text-decoration: none; transition: gap var(--dur-fast) var(--ease-niro); }
.n-band-cta:hover { gap: var(--space-3); }
.n-band-panel { flex: 1; min-width: 0; max-width: 460px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-page); overflow: hidden; }
.n-band-phead { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--size-micro); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
.n-band-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; border-bottom: 1px solid var(--border-subtle); transition: background-color var(--dur-fast) var(--ease-niro); }
.n-band-row:hover, .n-band-row:focus-visible { background: var(--surface-wash); }
.n-band-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.n-band-tile { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-muted); flex-shrink: 0; font-family: var(--font-mono); font-size: var(--size-micro); font-weight: var(--weight-bold); }
.n-band-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.n-band-rowtext strong { font-size: var(--size-ui); font-weight: var(--weight-semibold); color: var(--text-primary); }
.n-band-rowtext span { font-size: var(--size-caption); color: var(--text-muted); }
.n-band-chev { color: var(--text-faint); transition: color var(--dur-fast) var(--ease-niro); flex-shrink: 0; }
.n-band-row:hover .n-band-chev, .n-band-row:focus-visible .n-band-chev { color: var(--text-muted); }
.n-band-pfoot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--size-caption); color: var(--text-muted); }
.n-band-minis { display: inline-flex; gap: var(--space-1); }
.n-band-minis .n-band-tile { width: 24px; height: 24px; border-radius: var(--radius-xs); }
@media (max-width: 900px) {
  .n-band { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .n-band-panel { max-width: none; }
  .n-band-row { padding: var(--space-3); }
  .n-band-phead, .n-band-pfoot { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* Theme toggle: moon offered in light, sun offered in dark. */
.n-thm-moon { display: block; }
.n-thm-sun { display: none; }
html[data-theme="dark"] .n-thm-moon { display: none; }
html[data-theme="dark"] .n-thm-sun { display: block; }

/* The A/B figure deals its sessions into two arms once, on arrival. Motion here
   explains the mechanism rather than decorating it — the split is the product.
   Seen once per visit, so it earns the cost; ease-out and under 400ms each.
   Reduced motion gets the finished state with no dealing. */
@keyframes nDeal {
  from { opacity: 0; transform: translateY(-4px) scale(0.72); }
  to   { opacity: 1; transform: none; }
}
[data-deal] rect {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: nDeal 0.34s var(--ease-niro) forwards;
}
@media (prefers-reduced-motion: reduce) {
  [data-deal] rect { animation: none; opacity: 1; }
}

/* Solutions switchboard. The design is a fixed 1272x560 stage with absolutely
   placed boxes and bezier connectors drawn against that exact geometry, which
   is right at desktop and impossible below it. Under 1180px the stage becomes
   ordinary flow — repos, hub, then cards — and the wires go, because a curve
   plotted for coordinates that no longer exist is worse than no curve. */
@media (max-width: 1180px) {
  .n-sw-head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
  .n-sw-stage { width: 100% !important; height: auto !important;
    display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .n-sw-wires, .n-sw-lbl { display: none !important; }
  .n-sw-stage > .n-sw-chip,
  .n-sw-stage > .n-sw-card,
  .n-sw-stage > .n-sw-hub { position: static !important; width: 100% !important; max-width: 420px; }
  .n-sw-stage > .n-sw-hub { height: auto !important; margin: 12px 0; }
  .n-sw-stage > .n-sw-hub canvas { width: 100% !important; height: 240px !important; }
}
/* hover lift, the one motion the DS allows on a card — never a colour change */
@media (hover: hover) and (pointer: fine) {
  .n-sw-chip, .n-sw-card { transition: transform 0.2s var(--ease-niro); }
  .n-sw-chip:hover, .n-sw-card:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .n-sw-chip, .n-sw-card { transition: none; }
  .n-sw-chip:hover, .n-sw-card:hover { transform: none; }
}

/* The pitch stage. Overlay type sits over moving footage, so it needs the
   vignette; and once the video is playing the overlay steps out of the way and
   returns on hover — the same behaviour niroai.dev's hero uses, and the reason
   its treatment reads better than a video in a bordered card. */
/* the stage is one big play/pause target, so it has to say so — without this
   the click handler in pitch.js is a feature nobody discovers */
.n-pitch { cursor: pointer; }
/* Centred on negative margins rather than translate(-50%,-50%): the flash
   animates its own transform, and a centring transform would be overwritten
   the moment WAAPI took the property. Starts invisible — pitch.js drives it. */
.n-pitch-flash {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #FBFAF9;
  background: rgba(3,3,3,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
}
.n-pitch-flash svg { display: none; }
.n-pitch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; height: 36px; padding: 0 15px 0 13px; cursor: pointer;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(251,250,249,0.22);
  background: rgba(3,3,3,0.42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #FBFAF9; font-family: var(--font-mono); font-size: var(--size-micro);
  transition: border-color 0.2s var(--ease-niro), background 0.2s var(--ease-niro);
}
.n-pitch-btn:hover { border-color: rgba(251,250,249,0.5); background: rgba(3,3,3,0.62); }
/* the glyph never stretches, and the mono label never pushes it out of centre */
.n-pitch-btn svg { flex: none; display: block; }
/* icon-only: square the padding so the pill becomes a circle the size of the
   nav's theme toggle. Transport lives bottom-left, view control top-right —
   the same split every player uses, so neither is hunted for. */
.n-pitch-btn-icon { width: 36px; padding: 0; flex: none; }
/* the fullscreen button is a toggle, so its glyph is too: corners out to enter,
   corners in to leave. Driven by :fullscreen rather than a class, so the state
   stays with the browser that owns it — pressing Escape flips the icon back
   without anything of ours having to notice.

   The prefixed pseudo-class gets its own rule on purpose: one unknown selector
   in a list invalidates the whole list, so combining them would silently lose
   the icon in every browser rather than only the old one. */
.n-pitch-btn [data-i="exit"] { display: none; }
.n-pitch:fullscreen [data-i="enter"] { display: none; }
.n-pitch:fullscreen [data-i="exit"] { display: block; }
.n-pitch:-webkit-full-screen [data-i="enter"] { display: none; }
.n-pitch:-webkit-full-screen [data-i="exit"] { display: block; }
/* one button, two glyphs: whichever the .playing state does not want is gone.
   Cheaper and less brittle than rewriting an SVG path from JS on every event. */
.n-pitch-btn [data-i="pause"] { display: none; }
.n-pitch.playing .n-pitch-btn [data-i="pause"] { display: block; }
.n-pitch.playing .n-pitch-btn [data-i="play"] { display: none; }
.n-pitch-over, .n-pitch-vig { transition: opacity 0.45s var(--ease-niro); }
.n-pitch.playing .n-pitch-over { opacity: 0; }
.n-pitch.playing .n-pitch-vig { opacity: 0.5; }
.n-pitch.playing:hover .n-pitch-over,
.n-pitch.playing:focus-within .n-pitch-over { opacity: 1; }
.n-pitch.playing:hover .n-pitch-vig { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .n-pitch-over, .n-pitch-vig { transition: none; }
  .n-pitch.playing .n-pitch-over { opacity: 1; }
}
/* No height override for the pitch stage on narrow screens. It carries
   aspect-ratio: 16/9 so the frame is never cropped, and a fixed height here
   would win over that and start eating the burned-in captions again. A phone
   gets a shorter video rather than a taller, trimmed one. */

/* The raw benchmark table sits in a bordered card and its cells carry only a
   right gutter between columns, so the final column pressed against the card
   border. Mirror the left inset on the last column instead of adding padding to
   the card, which would offset the sticky first column's own inset. */
/* !important because every cell on this page carries its own inline padding,
   which a stylesheet rule cannot otherwise beat. The alternative is editing the
   inline style on the header and all forty-two rows. */
[data-q-table] th:last-child,
[data-q-table] td:last-child { padding-right: var(--space-5) !important; }

/* ─── Legal pages ────────────────────────────────────────────────────────────
   privacy.html, terms.html, subprocessors.html, gdpr.html. These are the only
   long-prose pages on the site, and the only ones with no product to show, so
   they get real classes instead of the inline styles the marketing pages use.

   Deliberately undecorated: no hero, no reveal animation, no closing CTA. A
   privacy policy dressed as a landing page reads as something being sold
   rather than something being disclosed, and a reader who came here to check a
   retention window should meet the retention window. */
.n-lgl { padding: var(--space-16) 0 var(--space-24); }
.n-lgl-eyebrow {
  font-family: var(--font-mono); font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--a0); margin-bottom: 14px;
}
.n-lgl h1 {
  font-size: clamp(34px, 4vw, 54px); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
  color: var(--text-primary);
}
.n-lgl-head { margin-bottom: var(--space-12); }

.n-lgl-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-16); align-items: start; }
/* The measure caps the prose, not the article: a three-column table held to
   74ch scrolls sideways while half the column sits empty beside it. Text keeps
   its line length, tables get the whole column. */
.n-lgl-body > p, .n-lgl-body > h2, .n-lgl-body > ul, .n-lgl-body > ol { max-width: 74ch; }

/* The contents list is markup, not script: four static pages do not need a
   scroll-spy, and one would be a second thing to keep in step with the copy. */
.n-lgl-toc { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 9px; }
.n-lgl-toc-head {
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px;
}
.n-lgl-toc a { font-size: 13px; line-height: 1.5; color: var(--text-muted); transition: color 0.2s var(--ease-niro); }

.n-lgl-body h2 {
  font-size: 22px; font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); color: var(--text-primary);
  margin: var(--space-12) 0 var(--space-4);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.n-lgl-body h2:first-child { margin-top: 0; }
.n-lgl-body p { font-size: 16px; line-height: 1.75; color: var(--text-muted); margin-bottom: var(--space-4); }
.n-lgl-body strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.n-lgl-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.n-lgl-list { margin: 0 0 var(--space-4) 20px; }
.n-lgl-list li { font-size: 16px; line-height: 1.75; color: var(--text-muted); margin-bottom: 6px; }

/* The wrapper scrolls, not the page and not the table's own box: setting
   overflow-x on an element forces the other axis to auto, which is why this is
   a plain div and why the table is free to exceed it. */
.n-lgl-scroll { overflow-x: auto; margin: 0 0 var(--space-6); }
.n-lgl-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 15px; }
.n-lgl-table th, .n-lgl-table td {
  padding: 11px var(--space-4) 11px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle); line-height: 1.6;
}
.n-lgl-table th {
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--weight-bold); white-space: nowrap;
}
.n-lgl-table td { color: var(--text-muted); }
.n-lgl-table tbody tr:last-child th, .n-lgl-table tbody tr:last-child td { border-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
  .n-lgl-toc a:hover { color: var(--text-primary); }
}
@media (max-width: 900px) {
  /* minmax(0, …) is the whole fix, and it is not decoration: a bare 1fr track
     floors at auto, so the max-content table inside inflated the column to
     860px on subprocessors and 1135px on privacy, and the prose and the
     contents list were laid out to match inside a 390px phone. Cap the track
     and .n-lgl-scroll gets to do its job. */
  .n-lgl-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .n-lgl-toc { position: static; }
}

/* ─── Enterprise and Pricing, rebuilt 2026-08-26 from Redesign Mockups.dc.html
   (options 1a and 1c). Both pages are wide-first grids, so every one of them
   needs a floor: a four-column picker at 900px is four columns of one word. */
@media (max-width: 1180px) {
  .n-encontrols { grid-template-columns: repeat(2, 1fr) !important; }
  .n-prtiers { grid-template-columns: repeat(2, 1fr) !important; }
  .n-enfig { grid-template-columns: 1fr !important; }
  /* the figure's divider becomes a rule between stacked halves */
  .n-enfig > div:first-child { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }
}
@media (max-width: 900px) {
  .n-enshapes { grid-template-columns: repeat(2, 1fr) !important; }
  /* with two per row the right-hand cell must not keep a trailing divider */
  .n-enshapes > button:nth-child(2n) { border-right: 0 !important; }
  .n-enshapes > button:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
  .n-enhead { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-6) !important; }
  .n-enstats, .n-prstats { flex-wrap: wrap; gap: var(--space-9) !important; }
}
@media (max-width: 620px) {
  .n-encontrols, .n-prtiers { grid-template-columns: 1fr !important; }
  .n-enshapes { grid-template-columns: 1fr !important; }
  .n-enshapes > button { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }
  .n-enshapes > button:last-child { border-bottom: 0 !important; }
  .n-enstats, .n-prstats { justify-content: flex-start !important; gap: var(--space-8) !important; }
}

/* CodeGraph question tabs. A tab is pressable, so it has to answer the press:
   scale is the only thing that reads as "heard you" at this size. */
.n-askq {
  transition: background 0.2s var(--ease-niro), border-color 0.2s var(--ease-niro), transform 0.16s var(--ease-niro);
}
.n-askq > span { transition: color 0.2s var(--ease-niro); }
.n-askq:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .n-askq:hover { border-color: var(--border-strong); }
}

/* ── CodeGraph hub ──────────────────────────────────────────────────────
   It was black in both themes, on the reasoning that it is a screen rather
   than a panel. Light theme now puts paper behind the graph instead, so the
   renderer's palette has to swap with it: switchboard.js reads these four
   "R,G,B" triples off the canvas and re-reads them when data-theme flips.
   --cg-gain exists because every alpha in that file was tuned for bright
   marks on near-black, where a faint mark still glows; the same alpha on
   paper is invisible. */
.n-sw-hub { background: #030303; border: 1px solid #262626; }
.n-sw-hub .n-sw-hub-cap { border-top: 1px solid #1A1A1A; }
.n-sw-hub .n-sw-hub-t { color: #FBFAF9; }
.n-sw-hub .n-sw-hub-s { color: rgba(251,250,249,0.48); }
.n-sw-hub .n-sw-hub-s2 { color: rgba(251,250,249,0.34); }
.n-sw-hub .n-sw-hub-dot { background: #2DD4BF; }

[data-theme="light"] .n-sw-hub { background: var(--surface-card); border-color: var(--border-subtle); }
[data-theme="light"] .n-sw-hub .n-sw-hub-cap { border-top-color: var(--border-subtle); }
[data-theme="light"] .n-sw-hub .n-sw-hub-t { color: var(--text-primary); }
[data-theme="light"] .n-sw-hub .n-sw-hub-s { color: var(--text-muted); }
[data-theme="light"] .n-sw-hub .n-sw-hub-s2 { color: var(--text-faint); }
[data-theme="light"] .n-sw-hub .n-sw-hub-dot { background: var(--a0i); }
[data-theme="light"] .n-sw-hub canvas {
  --cg-field: 44,52,72;
  --cg-edge: 51,67,195;
  --cg-node: 26,34,84;
  --cg-pulse: 15,118,110;
  --cg-gain: 1.85;
}