/* 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);
}
[data-theme="light"] {
  /* bright teal/indigo fail contrast on paper — darkened data-viz steps */
  --a0i: #0F766E; --a1i: var(--accent-indigo);
  --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);
}
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; }
}
/* Phones: logo, burger, theme and Talk to Founder overran 375px and pushed the
   button against the edge. Tighten gaps and controls so the row fits. */
@media (max-width: 420px) {
  nav[aria-label="Main"] > .shell { gap: 12px !important; }
  .n-ctagroup { gap: 8px !important; margin-left: auto !important; }
  .n-burger, .n-burger-close, .n-ctagroup > [data-on-click="toggleTheme"] { width: 38px !important; height: 38px !important; }
  .n-ctagroup > [data-niro-book] { padding: 0 14px !important; font-size: 13px !important; }
}
@media (max-width: 360px) {
  nav[aria-label="Main"] > .shell > a:first-child svg { width: 72px !important; height: 22px !important; }
  .n-ctagroup { gap: 6px !important; }
  .n-burger, .n-burger-close, .n-ctagroup > [data-on-click="toggleTheme"] { width: 34px !important; height: 34px !important; }
  .n-ctagroup > [data-niro-book] { padding: 0 12px !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; }
  /* The drawer lives inside the sticky nav, so a list taller than the screen
     could never be reached: cap it at the viewport and let it scroll. */
  .n-mdrawer:target { max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; }
  /* While open, the burger becomes the close button, so a second tap closes. */
  nav:has(.n-mdrawer:target) .n-burger { display: none !important; }
  nav:has(.n-mdrawer:target) .n-burger-close { display: flex !important; }
  nav:has(.n-mdrawer:target) .n-mdrawer .n-burgerx { display: none !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-pfoot strong { color: var(--text-primary); font-weight: var(--weight-bold); }
/* the vertical loop: five rows tall, the track holds the list twice and
   travels half its height. Linear because it is constant motion; hover and
   focus pause it so a row can be read and clicked. */
@keyframes nBandScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.n-band-rows { position: relative; height: 375px; /* five rows of 75 */ overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.n-band-track { display: flex; flex-direction: column; animation: nBandScroll 90s linear infinite; will-change: transform; }
.n-band-panel:hover .n-band-track, .n-band-panel:focus-within .n-band-track, .n-band-panel.is-paused .n-band-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .n-band-track { animation: none; }
  .n-band-rows { overflow-y: auto; mask-image: none; -webkit-mask-image: none; }
  .n-band-dup { display: none; }
}
@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); }
}

/* Logo marquee, the integrations.html hero (moved here from that page so the
   rules live once). Constant motion is the one case for linear; hover pauses so a
   name can be read. Each track holds the row twice, the second copy marked
   .mq-dup, so the -50% loop is seamless and reduced motion can drop the copy
   and lay the row out as a static wrapped grid. The mask is a mask, not a
   colour: #000 is opaque-here, transparent-there. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq { width: 100%; max-width: 1100px; margin-top: var(--space-16); overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; width: max-content; gap: var(--space-14); padding-right: var(--space-14); animation: marquee 36s linear infinite; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
.mq-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-faint); transition: color var(--dur-fast) var(--ease-niro); cursor: default; flex-shrink: 0; }
.mq-item:hover { color: var(--text-primary); }
.mq-item span { font-family: var(--font-mono); font-size: var(--size-micro); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .mq { mask-image: none; -webkit-mask-image: none; }
  .mq-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: var(--space-8); padding-right: 0; }
  .mq-dup { display: none; }
}

/* 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; }
}

/* Hero copy and the secondary action. (The video pitch stage that used to
   live here had no markup left on any page; its rules went with it.) */
.n-hero { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
/* the hero arrives as one block: headline, line and actions share a single
   fade, not three staggered ones */
.n-hero-copy { text-align: center; animation: nFade var(--dur-slow) var(--ease-niro) both; }
/* the secondary hero action: bordered, no fill, no glow (DESIGN: secondary
   hover is an accent border). Matches the primary's 48px height. */
.n-ghost { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-primary); font-size: var(--size-ui); font-weight: var(--weight-semibold); white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-niro), transform var(--dur-fast) var(--ease-niro); }
.n-ghost:hover { color: var(--text-primary); }
@media (hover: hover) and (pointer: fine) { .n-ghost:hover { border-color: var(--accent); } }
@media (max-width: 900px) { .n-hero { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Side-by-side hero: copy left, layer figure right. */
.n-hero-side { grid-template-columns: 1fr 1fr; }
.n-hero-side .n-hero-copy { text-align: left; }
.n-hero-side .n-hero-copy p { margin-left: 0 !important; }
.n-hero-side .n-hero-copy > div { justify-content: flex-start !important; }
@media (max-width: 900px) { .n-hero-side { grid-template-columns: 1fr; } .n-hero-side .n-hero-copy { text-align: center; } .n-hero-side .n-hero-copy p { margin-left: auto !important; } .n-hero-side .n-hero-copy > div { justify-content: center !important; } }

/* Hero figure: the AI assistant, Niro and the codebase as stacked layers,
   with edges dropping from the assistant through Niro into the code. */
.n-iso { position: relative; height: 480px; margin: 0; perspective: 1400px; animation: nFade var(--dur-slow) var(--ease-niro) both; }
.n-iso-stack { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-42deg); }
.n-iso-slab { position: absolute; width: 300px; height: 300px; left: -150px; top: -150px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--text-primary) 32%, transparent); background: color-mix(in srgb, color-mix(in srgb, var(--text-primary) 6%, var(--surface-card)) 85%, transparent); transform-style: preserve-3d; }
.n-iso-slab.is-niro { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--surface-card) 85%, transparent)); }
.n-iso-slab span { position: absolute; left: 14px; bottom: 12px; font: 600 13px var(--font-mono); color: var(--text-primary); }
.n-iso-slab.is-niro span { color: var(--accent); }
.n-iso-slab i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--text-primary) 40%, var(--surface-card)); border: 2px solid var(--surface-card); }
.n-iso-slab i.hot { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
.n-iso-edge { position: absolute; width: 2px; height: 110px; background: var(--accent); transform-origin: top; }
/* only the AI assistant to Niro edge carries the accent; codebase to assistant is neutral */
.n-iso-edge.is-quiet { background: color-mix(in srgb, var(--text-primary) 32%, transparent); }
.n-iso-edge:not(.is-quiet) { width: 3px; }
/* the assistant slab sits over the blue edge, so it is see-through enough for
   the edge to read all the way down to Niro */
.n-iso-slab:nth-child(2) { background: color-mix(in srgb, color-mix(in srgb, var(--text-primary) 6%, var(--surface-card)) 45%, transparent); }
@media (max-width: 900px) { .n-iso { height: 360px; overflow: hidden; } .n-iso-stack { transform: translate(-50%, -50%) scale(.78) rotateX(58deg) rotateZ(-42deg); } }

/* 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 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: var(--surface-page); border: 1px solid var(--border-subtle); }
.n-sw-hub .n-sw-hub-cap { border-top: 1px solid var(--surface-raised); }
.n-sw-hub .n-sw-hub-t { color: var(--text-primary); }
.n-sw-hub .n-sw-hub-s { color: var(--text-muted); }
.n-sw-hub .n-sw-hub-s2 { color: var(--text-muted); }
.n-sw-hub .n-sw-hub-dot { background: var(--a0i); }

/* light: paper card behind the graph rather than the page tone */
[data-theme="light"] .n-sw-hub { background: var(--surface-card); }
[data-theme="light"] .n-sw-hub .n-sw-hub-cap { border-top-color: var(--border-subtle); }
[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;
}

/* ── Company pages (2026-09-25) ──────────────────────────────────────────
   culture.html, careers.html, feedback.html. Legal-page chrome, own bodies.
   Every colour is a token; the cohort colours on feedback are the site's
   three data-viz hues, which is the one meaning colour carries there. */

/* culture: sticky intro on the left, numerals on a rail on the right */
.n-cul { padding: var(--space-16) 0 var(--space-24); }
.n-cul-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.n-cul-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.n-cul-head { margin-bottom: var(--space-12); }
.n-cul h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); margin-top: var(--space-3); }
.n-cul-lede { font: var(--type-lead); color: var(--text-muted); margin-top: var(--space-5); max-width: 58ch; }
.n-cul-scope { display: inline-block; margin-top: var(--space-6); padding: 8px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); font-size: var(--size-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }
.n-cul-list { list-style: none; margin: 0; padding: 0; position: relative; }
.n-cul-list::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 28px; width: 1px; background: var(--border-subtle); }
.n-cul-p { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--space-4); padding: var(--space-9) 0; border-bottom: 1px solid var(--border-subtle); }
.n-cul-p:first-child { padding-top: var(--space-2); }
.n-cul-list::before { top: 12px; }
.n-cul-p:last-child { border-bottom: 0; }
.n-cul-num { position: relative; z-index: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-top: 2px; border: 1px solid var(--accent-hairline); border-radius: 50%; background: var(--surface-page); font-family: var(--font-mono); font-size: var(--size-micro); font-weight: var(--weight-bold); letter-spacing: 0.5px; color: var(--a0); }
.n-cul-body h2 { font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.25; color: var(--text-primary); margin: 0 0 var(--space-3); }
.n-cul-body > p { font-size: 16px; line-height: 1.75; color: var(--text-muted); max-width: 66ch; }
.n-cul-guard { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-5); padding: 14px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.n-cul-guard p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.n-cul-glab { flex-shrink: 0; padding-top: 3px; 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); white-space: nowrap; }
.n-cul-close { margin-top: var(--space-8); padding: var(--space-8) var(--space-9); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); }
.n-cul-close .n-cul-glab { display: block; margin-bottom: var(--space-3); }
.n-cul-close p { font-size: 17px; line-height: 1.65; font-weight: var(--weight-medium); color: var(--text-primary); }
@media (max-width: 900px) {
  .n-cul-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .n-cul-side { position: static; }
}
@media (max-width: 640px) {
  .n-cul-p { grid-template-columns: 40px minmax(0, 1fr); padding: var(--space-8) 0; }
  .n-cul-guard { flex-direction: column; gap: var(--space-2); }
}

/* careers: one opening inside the legal body */
.n-job { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.n-job-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--size-caption); letter-spacing: 0.3px; color: var(--text-muted); margin: var(--space-3) 0 var(--space-8) !important; }
.n-job-meta span + span::before { content: '·'; margin-right: var(--space-4); color: var(--text-faint); }
.n-lgl-body .n-job h3 { font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--text-primary); margin: var(--space-8) 0 var(--space-3); }
.n-job-cta { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; margin-top: var(--space-4); border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent) !important; font-size: var(--size-body-lg); font-weight: var(--weight-semibold); text-decoration: none !important; transition: transform var(--dur-fast) var(--ease-niro), box-shadow var(--dur-fast) var(--ease-niro); }
.n-job-cta:active { transform: scale(var(--scale-press)); }

/* feedback: the wall. Three columns in a fixed-height stage, each a track
   holding its cards twice (the second copy .n-wl-dup) travelling -50% on a
   linear loop; the columns differ in order, direction and speed so no two
   cards ever line up. Top and bottom fade with a mask (a mask, not a colour).
   Hover pauses every column. Reduced motion: a plain three-column grid. */
.n-wl { padding: var(--pad) 0 var(--space-24); }
.n-wl-head { max-width: 760px; margin: 0 auto var(--space-12); text-align: center; }
.n-wl h1, .n-wl h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); text-wrap: balance; }
.n-wl-head p { font: var(--type-lead); color: var(--text-muted); margin: var(--space-5) auto 0; max-width: 68ch; text-wrap: pretty; }
.n-wl-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); height: 640px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); }
.n-wl-col { min-width: 0; overflow: hidden; }
.n-wl-track { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-5); animation: nWlUp var(--dur, 48s) linear infinite; will-change: transform; }
.n-wl-col.rev .n-wl-track { animation-direction: reverse; }
.n-wl-wall:hover .n-wl-track, .n-wl-wall.is-paused .n-wl-track { animation-play-state: paused; }
@keyframes nWlUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.n-wl-card { --g: var(--a0); display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); transition: border-color 0.2s var(--ease-niro); }
.n-wl-card[data-g="arch"] { --g: var(--syn-str); }
.n-wl-card[data-g="prod"] { --g: var(--syn-fn); }
.n-wl-card:hover { border-color: var(--border-strong); }
.n-wl-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-primary); text-wrap: pretty; }
.n-wl-card p::before { content: '\201C'; color: var(--g); } .n-wl-card p::after { content: '\201D'; color: var(--g); }
.n-wl-card footer { display: flex; align-items: center; gap: var(--space-3); }
.n-wl-av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--g); color: var(--surface-page); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); }
.n-wl-card footer div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.n-wl-card footer strong { font-size: var(--size-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }
.n-wl-card footer div span { font-size: 12px; color: var(--text-muted); }
.n-wl-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.n-wl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: var(--size-caption); color: var(--text-muted); }
.n-wl-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.n-wl-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--a0); }
.n-wl-legend li[data-g="arch"] i { background: var(--syn-str); }
.n-wl-legend li[data-g="prod"] i { background: var(--syn-fn); }
@media (prefers-reduced-motion: reduce) {
  .n-wl-wall { height: auto; mask-image: none; -webkit-mask-image: none; }
  .n-wl-track { animation: none; }
  .n-wl-dup { display: none; }
}
@media (max-width: 1000px) { .n-wl-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 600px; } .n-wl-col:nth-child(3) { display: none; } }
@media (max-width: 600px) { .n-wl-wall { grid-template-columns: minmax(0, 1fr); height: 560px; } .n-wl-col:nth-child(2) { display: none; } }

/* Mission + The problem — homepage beats two and three, ported from the
   vision artifacts. Tokens only; both themes come from the surface/text set. */
.n-eyebrow { display: block; 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(--text-muted); margin-bottom: var(--space-4); }
.n-mis { padding: var(--pad) 0; background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.n-mis-head { max-width: 1000px; margin: 0 auto var(--space-12); text-align: center; }
.n-mis h2 { font-size: clamp(30px, 3.6vw, 52px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); text-wrap: balance; }
.n-mis-head p { font: var(--type-lead); color: var(--text-muted); margin: var(--space-5) auto 0; max-width: 60ch; text-wrap: pretty; }
/* three commitments as plain columns, not three identical boxed cards */
.n-mis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); max-width: 1120px; margin: 0 auto; }
.n-mis-grid h3 { font-size: var(--size-ui); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-2); }
.n-mis-grid p { font-size: var(--size-body); line-height: var(--leading-body); color: var(--text-muted); }
@media (max-width: 860px) { .n-mis-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
/* The problem: two numbers on one shared 0–100 scale. The memorable thing is
   the tinted span between them — the share of code written by AI that its
   readers do not vouch for. Everything else stays quiet. */
.n-prob { padding: var(--pad) 0; background: var(--surface-page); border-top: 1px solid var(--border-subtle); }
.n-prob h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); max-width: 22ch; text-wrap: balance; margin-bottom: var(--space-16); }
.n-gap { display: grid; gap: var(--space-12); }
.n-gap-row p { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
.n-gap-row strong { font-family: var(--font-mono); font-weight: var(--weight-bold); letter-spacing: -0.04em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.n-gap-row span { font: var(--type-lead); color: var(--text-muted); max-width: 30ch; }
.is-ai strong { font-size: clamp(88px, 14vw, 216px); color: var(--accent); }
.is-trust strong { font-size: clamp(32px, 3.2vw, 48px); color: var(--text-primary); }
.n-gap-bar { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.n-gap-bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--accent); transform-origin: left; }
.is-trust .n-gap-bar i { background: var(--text-primary); min-width: 6px; }
.n-gap-bar b { position: absolute; top: 0; bottom: 0; left: var(--v); width: calc(var(--to) - var(--v)); background: color-mix(in srgb, var(--accent) 24%, transparent); transform-origin: left; }
.n-gap-bar em { position: absolute; top: calc(100% + var(--space-3)); left: var(--to); transform: translateX(-100%); font-style: normal; font-size: var(--size-ui); font-weight: var(--weight-semibold); color: var(--accent); white-space: nowrap; }
/* the one motion on this section: the bars draw as it scrolls into view.
   Browsers without scroll timelines get the finished state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .n-prob { view-timeline: --prob block; }
    .n-gap-bar i, .n-gap-bar b { animation: nGapDraw linear both; animation-timeline: --prob; animation-range: entry 35% entry 80%; }
    .n-gap-bar b { animation-range: entry 75% entry 100%; }
  }
}
@keyframes nGapDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Research link under the trust gap: scan the QR on a phone or click on desktop.
   Three rows: label and date, QR beside title, author and action. The QR tile
   stays white in both themes so every scanner can read it. */
.n-paper { display: grid; margin-top: var(--space-16); max-width: 400px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-card); color: inherit; text-decoration: none; overflow: hidden; transition: border-color 0.2s var(--ease-niro); }
.n-paper:hover { border-color: var(--border-strong); }
.n-paper:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.n-paper-top, .n-paper-foot { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px var(--space-5); font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); }
.n-paper-top { border-bottom: 1px solid var(--border-subtle); }
.n-paper-top span:first-child { color: var(--accent); }
.n-paper-foot { border-top: 1px solid var(--border-subtle); }
.n-paper-body { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5); }
.n-paper-qr { padding: 8px; border-radius: 8px; background: #fff; line-height: 0; }
.n-paper-qr img { display: block; width: 88px; height: 88px; }
.n-paper-txt { display: grid; gap: 6px; }
.n-paper-txt strong { font-size: 18px; line-height: 1.25; font-weight: var(--weight-semibold); color: var(--text-primary); }
.n-paper-txt span { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
/* Wide screens: the card sits in the empty top-right corner beside the 40% row. */
@media (min-width: 1280px) {
  .n-prob .shell { position: relative; }
  .n-paper { position: absolute; top: 0; right: var(--layout-gutter); margin: 0; width: 380px; }
}
@media (max-width: 720px) { .n-prob h2 { margin-bottom: var(--space-12); } .n-gap-bar em { left: 0; transform: none; } }

/* ROI sliders: the inputs drop native appearance for the filled track, which
   left the platform's grey thumb on an accent bar. A thumb that reads as the
   thing to grab, and grows under the pointer while held. Two rules on purpose:
   one unknown pseudo-element in a list drops the whole list. */
#roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-page); border: 2px solid var(--a0); cursor: grab; transition: transform var(--dur-instant) var(--ease-niro), box-shadow var(--dur-instant) var(--ease-niro); }
#roi input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-page); border: 2px solid var(--a0); cursor: grab; transition: transform var(--dur-instant) var(--ease-niro), box-shadow var(--dur-instant) var(--ease-niro); }
#roi input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px var(--accent-soft); cursor: grabbing; }
#roi input[type="range"]:active::-moz-range-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px var(--accent-soft); cursor: grabbing; }

/* Pause for the two homepage loops (wall.js wires it). Hover-pause does not
   reach touch or keyboard, and moving content needs a stop (WCAG 2.2.2).
   Reduced motion already renders both loops static, so the button goes. */
.n-wl-ctl { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.n-pause {
  position: relative; font: inherit; font-size: var(--size-caption); color: var(--text-muted);
  background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-niro), border-color var(--dur-fast) var(--ease-niro);
}
.n-band-phead .n-pause { font-size: var(--size-micro); letter-spacing: inherit; text-transform: inherit; }
.n-pause::after { content: ''; position: absolute; inset: -8px -4px; }
@media (hover: hover) and (pointer: fine) { .n-pause:hover { color: var(--text-primary); border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .n-pause, .n-wl-ctl { display: none; } }
/* both captions sit centred on their digits, not hanging off their foot */
@media (min-width: 721px) { .n-gap-row p { align-items: center; } }
/* mission pillars as one framed strip: three joined boxes on the page colour,
   so they read as a set against the card-coloured band */
.n-mis-grid { gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; }
.n-mis-grid article { padding: var(--space-8); background: var(--surface-page); display: grid; gap: var(--space-3); align-content: start; }
.n-mis-grid article + article { border-left: 1px solid var(--border-strong); }
.n-mis-grid h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0; }
.n-mis-grid p { font-size: 15px; }
@media (max-width: 860px) {
  .n-mis-grid { gap: 0; }
  .n-mis-grid article + article { border-left: 0; border-top: 1px solid var(--border-strong); }
}
/* quote-wall title on one line at desktop: the head was capped at 760px, the
   title needs the full column. The intro keeps its own 68ch measure. */
@media (min-width: 900px) { .n-wl-head { max-width: none; } .n-wl-head h2 { white-space: nowrap; } }
/* the quote-wall title matches every other homepage section title (52px max) */
.n-wl h2 { font-size: clamp(30px, 3.6vw, 52px); }
/* "The Problem" title matches the other homepage section titles */
.n-prob h2 { font-size: clamp(30px, 3.6vw, 52px); }