/* Neoo Resources: Blog listing and articles.
   Fusion (2026-09-12): the family consumes the shared --nf-* tokens injected by neoo-fusion.css
   (dark canvas, diffuse blue/violet halos, one accent reserved for interaction). Every token is
   read through a local alias with the same fallback value, so the pages render correctly even
   when the shared sheet is not injected yet. The illustration layer (hero wash, signal ribbon,
   article thumbnails, halos and orbs) is repainted for the dark canvas: SVG geometry keeps its
   original viewBoxes, only the fills/strokes move to translucent white plus the cyan/violet
   accents. Version 20260912-neoo-resources-fusion-4. */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.resources-page {
  --nr-bg: var(--nf-bg-0, #10111b);
  --nr-surface: var(--nf-surface-1, #161a2b);
  --nr-surface-2: var(--nf-surface-2, #1c2136);
  --nr-surface-3: var(--nf-surface-3, #232941);
  --nr-field: var(--nf-field, #1f1f21);
  --nr-line: var(--nf-line, rgba(255, 255, 255, .1));
  --nr-line-strong: var(--nf-line-strong, rgba(255, 255, 255, .18));
  --nr-ink: var(--nf-text, #f2f4fb);
  --nr-copy: var(--nf-text-2, #b7bfd6);
  --nr-muted: var(--nf-text-3, #8b94b0);
  --nr-link: var(--nf-link, #a89cff);
  --nr-accent: var(--nf-accent, #6a58ff);
  --nr-accent-hover: var(--nf-accent-hover, #7f70ff);
  --nr-accent-ink: var(--nf-accent-ink, #ffffff);
  --nr-focus: var(--nf-focus, #b9c8ff);
  --nr-blue: var(--nf-blue, #4d7dff);
  --nr-success: var(--nf-success, #34c48f);
  --nr-halo-blue: var(--nf-halo-blue, #122c56);
  --nr-halo-violet: var(--nf-halo-violet, #2a1d64);
  --nr-shadow: var(--nf-shadow, 0 24px 64px rgba(2, 4, 16, .55));
  --nr-radius-s: var(--nf-radius-s, 10px);
  --nr-radius-m: var(--nf-radius-m, 16px);
  --nr-radius-l: var(--nf-radius-l, 24px);
  --nr-shell-w: var(--nf-shell, min(calc(100% - 48px), 1240px));
  --nr-prose: var(--nf-prose, 68ch);
  --nr-lead: var(--nf-lead, clamp(18px, 1.3vw, 21px));
  --nr-body: 17.5px;
  --nr-header: var(--partner-overview-header-h, 64px);
  --nr-ease: var(--nf-ease, cubic-bezier(.22, 1, .36, 1));
  margin: 0;
  overflow-x: hidden;
  color: var(--nr-ink);
  color-scheme: dark;
  background: var(--nr-bg);
}

@supports (overflow: clip) {
  html,
  body.resources-page {
    overflow-x: clip;
  }
}

.resources-page *,
.resources-page *::before,
.resources-page *::after {
  box-sizing: border-box;
}

.resources-page main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--nr-bg);
}

/* Diffuse halos limited to the first screens: the canvas stays calm below. */
.resources-page main::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(120vh, 1100px);
  content: "";
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 50% 100%, rgba(18, 44, 86, .78), transparent 70%),
    radial-gradient(40% 40% at 86% 4%, rgba(42, 29, 100, .5), transparent 70%);
}

.resources-page .nr-shell {
  width: var(--nr-shell-w);
  margin-inline: auto;
}

.resources-page .nr-eyebrow,
.resources-page .nr-section-label {
  margin: 0;
  color: var(--nr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.resources-page .nr-section-label {
  margin-bottom: 14px;
}

.resources-page h1,
.resources-page h2,
.resources-page h3 {
  margin: 0;
  color: var(--nr-ink);
  font-family: var(--cb-display-font);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.resources-page h3 {
  letter-spacing: -.03em;
  line-height: 1.22;
}

.resources-page p {
  text-wrap: pretty;
}

.resources-page a,
.resources-page button,
.resources-page summary {
  -webkit-tap-highlight-color: transparent;
}

.resources-page a:focus-visible,
.resources-page button:focus-visible,
.resources-page summary:focus-visible {
  outline: 2px solid var(--nr-focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Shared meta, links and buttons
 * ------------------------------------------------------------------------- */

.nr-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--nr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.nr-meta > * + *::before {
  margin-right: 8px;
  color: currentColor;
  content: "·";
}

.nr-link {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nr-link);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.nr-link svg,
.nr-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.nr-link:hover {
  color: var(--nr-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.nr-link:hover svg,
.nr-button:hover svg {
  transform: translateX(3px);
}

.nr-link--light {
  color: var(--nr-link);
}

.nr-button {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--nr-line-strong);
  border-radius: 999px;
  color: var(--nr-ink);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.nr-button--primary {
  border-color: var(--nr-accent);
  color: var(--nr-accent-ink);
  background: var(--nr-accent);
}

.nr-button--primary:hover {
  border-color: var(--nr-accent-hover);
  background: var(--nr-accent-hover);
}

.nr-button--secondary:hover {
  border-color: var(--nr-ink);
  background: var(--nr-surface-2);
}

/* ---------------------------------------------------------------------------
 * Listing: compact hero, module row, editorial featured row, dense article list
 * ------------------------------------------------------------------------- */

.nr-hero {
  position: relative;
  padding: calc(var(--nr-header) + 56px) 0 28px;
  overflow: hidden;
}

/* Hero wash: three diffuse orbs behind the title, no motion, never interactive. */
.nr-hero__wash,
.nr-hero__wash span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nr-hero__wash {
  z-index: 0;
  overflow: hidden;
}

.nr-hero__wash::before {
  position: absolute;
  top: 128px;
  left: 10%;
  width: 56%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
}

.nr-hero__wash span:nth-child(1) {
  inset: -32% auto auto 52%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 88, 255, .28), rgba(106, 88, 255, 0) 70%);
  filter: blur(12px);
}

.nr-hero__wash span:nth-child(2) {
  inset: 34% auto auto -12%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 187, 223, .16), rgba(66, 187, 223, 0) 72%);
  filter: blur(10px);
}

.nr-hero__wash span:nth-child(3) {
  inset: auto -8% -58% auto;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 125, 255, .18), rgba(77, 125, 255, 0) 70%);
}

.nr-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  align-items: end;
  gap: 18px 64px;
}

.nr-hero .nr-eyebrow {
  grid-column: 1 / -1;
}

.nr-hero h1 {
  font-size: clamp(40px, 4.6vw, 64px);
}

.nr-hero__inner > p:last-child {
  max-width: 52ch;
  margin: 0 0 8px;
  color: var(--nr-copy);
  font-size: var(--nr-lead);
  line-height: 1.5;
}

.nr-module-nav {
  border-top: 1px solid var(--nr-line);
  border-bottom: 1px solid var(--nr-line);
}

.nr-module-nav__inner {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.nr-module-nav__label {
  flex: 0 0 auto;
  color: var(--nr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nr-module-nav__items {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.nr-module-nav__items > a,
.nr-module-nav__items > span {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--nr-copy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.nr-module-nav__items > a[aria-current="page"] {
  border-color: var(--nr-line-strong);
  color: var(--nr-ink);
  background: var(--nr-surface-2);
}

.nr-module-nav__items > span {
  cursor: default;
}

.nr-module-nav__items small {
  padding: 3px 7px;
  border: 1px solid var(--nr-line);
  border-radius: 999px;
  color: var(--nr-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nr-featured {
  padding: 40px 0 0;
}

.nr-featured__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 32px clamp(32px, 5vw, 72px);
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-l);
  background: var(--nr-surface);
}

.nr-featured__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nr-featured__copy h2 {
  max-width: 24ch;
  margin-top: 18px;
  font-size: clamp(30px, 3.2vw, 44px);
}

.nr-featured__copy > p:not(.nr-meta) {
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--nr-copy);
  font-size: 18px;
  line-height: 1.6;
}

.nr-featured__foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.nr-featured__foot > span {
  color: var(--nr-muted);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Illustration layer: signal ribbon (featured row + featured article hero)
 * ------------------------------------------------------------------------- */

.nr-featured__visual {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--nr-line-strong);
  border-radius: var(--nr-radius-m);
  background:
    radial-gradient(circle at 80% 18%, rgba(106, 88, 255, .4), transparent 36%),
    radial-gradient(circle at 62% 92%, rgba(66, 187, 223, .18), transparent 38%),
    linear-gradient(135deg, var(--nr-halo-blue) 0%, #141a3d 52%, var(--nr-halo-violet) 100%);
}

.nr-featured__halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  animation: nrHaloFloat 10s ease-in-out infinite alternate;
}

.nr-featured__halo--one {
  top: 4%;
  right: 2%;
  width: 370px;
  height: 370px;
  border: 1px solid rgba(168, 156, 255, .22);
  background: radial-gradient(circle at 42% 38%, rgba(135, 106, 255, .26), rgba(59, 45, 158, .04) 58%, transparent 70%);
}

.nr-featured__halo--two {
  right: 38%;
  bottom: -18%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(80, 208, 205, .18);
  background: radial-gradient(circle, rgba(48, 186, 210, .16), transparent 68%);
  animation-delay: -3s;
}

.nr-signal {
  position: absolute;
  inset: 4% -4% auto auto;
  width: min(760px, 108%);
  height: 92%;
  overflow: visible;
}

.nr-signal__ghost,
.nr-signal__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nr-signal__ghost {
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 28;
}

.nr-signal__line {
  stroke: url(#nr-signal-gradient);
  stroke-width: 6;
  stroke-dasharray: 1070;
  stroke-dashoffset: 1070;
  filter: drop-shadow(0 0 16px rgba(74, 196, 221, .4));
  animation: nrSignalDraw 1.65s .25s cubic-bezier(.16, 1, .3, 1) forwards;
}

.nr-signal__nodes circle {
  fill: #0d1330;
  stroke: #78dfd2;
  stroke-width: 4;
  filter: drop-shadow(0 0 10px rgba(52, 196, 143, .5));
}

.nr-signal__nodes circle:last-child {
  stroke: #a89cff;
  filter: drop-shadow(0 0 12px rgba(168, 156, 255, .55));
}

.nr-signal__labels rect {
  fill: rgba(255, 255, 255, .07);
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1;
}

.nr-featured__brief {
  align-self: start;
  padding: 22px 24px 20px;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m);
  background: var(--nr-surface-2);
}

.nr-featured__brief-title {
  margin: 0;
  color: var(--nr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nr-featured__brief ul {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.nr-featured__brief li {
  position: relative;
  padding-left: 18px;
  color: var(--nr-copy);
  font-size: 15px;
  line-height: 1.55;
}

.nr-featured__brief li::before {
  position: absolute;
  top: .62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nr-link);
  content: "";
}

.nr-featured__brief a,
.na-takeaways a,
.na-faq__item a,
.na-body a {
  color: var(--nr-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.nr-featured__brief a:hover,
.na-takeaways a:hover,
.na-faq__item a:hover,
.na-body a:hover {
  color: var(--nr-ink);
}

.nr-listing {
  padding: 64px 0 24px;
}

.nr-listing__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 480px);
  align-items: end;
  gap: 16px 64px;
}

.nr-listing__head h2 {
  max-width: 22ch;
  margin-top: 12px;
  font-size: clamp(28px, 3vw, 40px);
}

.nr-listing__head > p {
  margin: 0 0 6px;
  color: var(--nr-copy);
  font-size: 17px;
  line-height: 1.6;
}

.nr-filters {
  margin-top: 28px;
  padding-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--nr-line);
}

.nr-filters button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--nr-line-strong);
  border-radius: 999px;
  color: var(--nr-copy);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.nr-filters button:hover {
  border-color: var(--nr-ink);
  color: var(--nr-ink);
}

.nr-filters button[aria-pressed="true"] {
  border-color: var(--nr-accent);
  color: var(--nr-accent-ink);
  background: var(--nr-accent);
}

.nr-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.nr-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  gap: 8px 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--nr-line);
}

.nr-card[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Illustration layer: article artwork (listing thumbnails, article hero,
 * related cards). One geometry, three sizes; --nr-art carries the family hue.
 * ------------------------------------------------------------------------- */

.nr-card__art,
.na-hero__art,
.na-related__art {
  --nr-art: var(--nr-blue);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--nr-art) 26%, transparent), transparent 56%),
    linear-gradient(145deg, var(--nr-surface-2), var(--nr-surface));
}

.nr-card__art {
  aspect-ratio: 380 / 290;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m);
}

.na-hero__art {
  min-height: 360px;
  border: 1px solid var(--nr-line-strong);
  border-radius: var(--nr-radius-l);
  box-shadow: var(--nr-shadow);
}

.na-related__art {
  aspect-ratio: 380 / 290;
  border-bottom: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m) var(--nr-radius-m) 0 0;
}

.nr-card__art::after,
.na-hero__art::after,
.na-related__art::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(145deg, #000, transparent 85%);
}

.nr-card__art > span,
.na-hero__art > span,
.na-related__art > span {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nr-art) 32%, transparent);
  filter: blur(28px);
}

.nr-card__art > span:first-child,
.na-hero__art > span:first-child,
.na-related__art > span:first-child {
  top: -42px;
  left: -35px;
}

.nr-card__art > span:nth-child(2),
.na-hero__art > span:nth-child(2),
.na-related__art > span:nth-child(2) {
  right: -70px;
  bottom: -90px;
  opacity: .65;
}

.nr-card__art svg,
.na-hero__art svg,
.na-related__art svg {
  position: absolute;
  inset: 8px 4% auto;
  z-index: 2;
  width: 92%;
  height: calc(100% - 16px);
  overflow: visible;
}

.nr-card__art svg rect,
.nr-card__art svg circle,
.nr-card__art svg polygon,
.na-hero__art svg rect,
.na-hero__art svg circle,
.na-hero__art svg polygon,
.na-related__art svg rect,
.na-related__art svg circle,
.na-related__art svg polygon {
  fill: color-mix(in srgb, var(--nr-art) 20%, transparent);
  stroke: var(--nr-art);
  stroke-width: 2.2;
}

.nr-card__art svg path,
.na-hero__art svg path,
.na-related__art svg path {
  fill: none;
  stroke: var(--nr-art);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nr-card__art b,
.na-hero__art b,
.na-related__art b {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 3;
  color: var(--nr-copy);
  font-family: var(--cb-display-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}

.nr-card__art--system,
.na-hero__art--system,
.na-related__art--system { --nr-art: #6f8dff; }
.nr-card__art--bridge,
.na-hero__art--bridge,
.na-related__art--bridge { --nr-art: #4bc4f0; }
.nr-card__art--forge,
.na-hero__art--forge,
.na-related__art--forge { --nr-art: #9b86ff; }
.nr-card__art--pulse,
.na-hero__art--pulse,
.na-related__art--pulse { --nr-art: #56b9ff; }
.nr-card__art--context,
.na-hero__art--context,
.na-related__art--context { --nr-art: #ad8cff; }
.nr-card__art--radar,
.na-hero__art--radar,
.na-related__art--radar { --nr-art: #46d6bd; }
.nr-card__art--orbit,
.na-hero__art--orbit,
.na-related__art--orbit { --nr-art: #7a8cff; }

.nr-card__index {
  padding-top: 2px;
  color: var(--nr-muted);
  font-family: var(--cb-display-font);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
}

.nr-card__body {
  min-width: 0;
  max-width: var(--nr-prose);
}

.nr-card h3 {
  margin-top: 10px;
  font-size: clamp(22px, 2.1vw, 28px);
  letter-spacing: -.04em;
}

.nr-card__body > p:not(.nr-meta) {
  margin: 10px 0 0;
  color: var(--nr-copy);
  font-size: 16px;
  line-height: 1.6;
}

.nr-card > .nr-link {
  align-self: center;
}

.nr-final {
  padding: 64px 0 80px;
}

.nr-final__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 48px;
  padding: clamp(28px, 3.4vw, 44px);
  overflow: hidden;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-l);
  background: var(--nr-surface);
}

.nr-final__panel > *:not(.nr-final__orb) {
  position: relative;
  z-index: 2;
}

.nr-final__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nr-final__orb--one {
  top: -210px;
  right: 8%;
  width: 450px;
  height: 450px;
  border: 1px solid rgba(132, 107, 246, .24);
  background: radial-gradient(circle, rgba(112, 84, 236, .26), transparent 68%);
}

.nr-final__orb--two {
  right: 30%;
  bottom: -230px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(80, 205, 211, .16);
  background: radial-gradient(circle, rgba(52, 183, 204, .16), transparent 68%);
}

.nr-final h2 {
  max-width: 20ch;
  margin-top: 12px;
  font-size: clamp(28px, 3vw, 40px);
}

.nr-final__panel p:last-child {
  max-width: 56ch;
  margin: 14px 0 0;
  color: var(--nr-copy);
  font-size: 17px;
  line-height: 1.6;
}

.nr-final__actions {
  min-width: 240px;
  display: grid;
  gap: 10px;
}

/* Linked titles */
.nr-card h3 a,
.nr-featured__copy h2 a,
.na-related__body h3 a {
  color: inherit;
  text-decoration: none;
}

.nr-card h3 a:hover,
.nr-featured__copy h2 a:hover,
.na-related__body h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Reveal: short fade only, never on the first screen. */
body.resources-page.is-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .45s ease, transform .45s var(--nr-ease);
}

body.resources-page.is-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.resources-page.is-page-hidden .nr-featured__halo,
body.resources-page.is-page-hidden .nr-signal__line {
  animation-play-state: paused;
}

@keyframes nrSignalDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes nrHaloFloat {
  from { transform: translate3d(-8px, -5px, 0) scale(.98); }
  to { transform: translate3d(12px, 10px, 0) scale(1.04); }
}

/* ---------------------------------------------------------------------------
 * Article pages: title, meta and the first lines immediately; prose ≤ 68ch;
 * lateral contents on wide screens, compact <details> summary below 1200px.
 * ------------------------------------------------------------------------- */

.na-article {
  position: relative;
}

.na-hero {
  position: relative;
  padding: calc(var(--nr-header) + 48px) 0 36px;
  overflow: hidden;
  border-bottom: 1px solid var(--nr-line);
}

.na-hero__inner {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center;
  gap: 56px;
}

.na-hero__copy {
  min-width: 0;
}

.na-hero__visual {
  position: relative;
  min-width: 0;
}

/* Featured articles get the signal ribbon on a night card, others the artwork. */
.na-hero__signal {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--nr-line-strong);
  border-radius: var(--nr-radius-l);
  background:
    radial-gradient(circle at 80% 18%, rgba(106, 88, 255, .42), transparent 34%),
    radial-gradient(circle at 62% 92%, rgba(66, 187, 223, .18), transparent 36%),
    linear-gradient(135deg, var(--nr-halo-blue) 0%, #141a3d 52%, var(--nr-halo-violet) 100%);
  box-shadow: var(--nr-shadow);
}

.na-hero__signal .nr-signal {
  inset: 6% -2% auto auto;
  width: 104%;
  height: 90%;
}

.na-breadcrumb ol {
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  color: var(--nr-muted);
  font-size: 13px;
}

.na-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.na-breadcrumb li + li::before {
  content: "/neoo.html";
}

.na-breadcrumb a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.na-breadcrumb a:hover {
  color: var(--nr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.na-breadcrumb [aria-current] {
  color: var(--nr-copy);
}

.na-hero h1 {
  max-width: 24ch;
  margin-top: 16px;
  font-size: clamp(32px, 3.7vw, 52px);
}

.na-hero__lead {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--nr-copy);
  font-size: var(--nr-lead);
  line-height: 1.55;
}

.na-hero__byline {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.na-hero__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--nr-line-strong);
  border-radius: 50%;
  color: var(--nr-ink);
  background: var(--nr-surface-2);
  font-family: var(--cb-display-font);
  font-size: 18px;
  font-weight: 400;
}

.na-hero__byline b {
  display: block;
  color: var(--nr-ink);
  font-size: 14px;
  font-weight: 600;
}

.na-hero__byline div > span {
  display: block;
  margin-top: 2px;
  color: var(--nr-muted);
  font-size: 13px;
}

.na-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--nr-prose)) minmax(200px, 260px);
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(40px, 5vw, 80px);
  padding-top: 40px;
  font-size: var(--nr-body);
}

.na-aside {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--nr-header) + 24px);
  display: grid;
  gap: 16px;
}

.na-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.na-takeaways {
  padding: 20px 20px 18px;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m);
  background: var(--nr-surface);
}

.na-takeaways h2 {
  color: var(--nr-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.na-takeaways ul {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.na-takeaways li {
  position: relative;
  padding-left: 16px;
  color: var(--nr-copy);
  font-size: 14px;
  line-height: 1.55;
}

.na-takeaways li::before {
  position: absolute;
  top: .6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nr-link);
  content: "";
}

.na-toc {
  padding: 0 0 0 16px;
  border-left: 1px solid var(--nr-line);
}

.na-toc summary {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--nr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  list-style: none;
  text-transform: uppercase;
  cursor: default;
}

.na-toc summary::-webkit-details-marker {
  display: none;
}

.na-toc summary::after {
  display: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
  content: "";
}

.na-toc ol {
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: toc;
  list-style: none;
}

.na-toc li {
  counter-increment: toc;
}

.na-toc a {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nr-copy);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.na-toc a::before {
  flex: 0 0 auto;
  color: var(--nr-muted);
  font-size: 11px;
  letter-spacing: .06em;
  content: counter(toc, decimal-leading-zero);
}

.na-toc a:hover {
  color: var(--nr-ink);
}

.na-body {
  color: var(--nr-copy);
  font-size: var(--nr-body);
  line-height: 1.65;
}

.na-section {
  scroll-margin-top: calc(var(--nr-header) + 24px);
}

.na-section + .na-section {
  margin-top: 44px;
}

.na-section h2,
.na-faq h2 {
  margin-bottom: 16px;
  font-size: clamp(26px, 2.4vw, 34px);
}

.na-body h3 {
  margin: 28px 0 10px;
  font-size: clamp(20px, 1.8vw, 24px);
}

.na-body p {
  margin: 0 0 18px;
}

.na-body ul,
.na-body ol:not(.na-steps) {
  margin: 0 0 20px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.na-body li::marker {
  color: var(--nr-link);
  font-weight: 600;
}

.na-body strong {
  color: var(--nr-ink);
}

.na-quote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--nr-line-strong);
}

.na-quote p {
  margin: 0;
  color: var(--nr-ink);
  font-family: var(--cb-display-font);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: var(--cb-display-weight);
  letter-spacing: -.03em;
  line-height: 1.35;
}

.na-steps {
  margin: 6px 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: steps;
  list-style: none;
}

.na-steps li {
  position: relative;
  padding: 16px 18px 16px 62px;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m);
  background: var(--nr-surface);
  counter-increment: steps;
}

.na-steps li::before {
  position: absolute;
  top: 16px;
  left: 18px;
  color: var(--nr-link);
  font-family: var(--cb-display-font);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  content: counter(steps, decimal-leading-zero);
}

.na-steps strong {
  display: block;
  color: var(--nr-ink);
  font-size: 17px;
  font-weight: 600;
}

.na-steps span {
  display: block;
  margin-top: 4px;
  color: var(--nr-copy);
  font-size: 16px;
  line-height: 1.6;
}

.na-note {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m);
  background: var(--nr-surface-2);
}

.na-note .na-note__title {
  margin: 0 0 6px;
  color: var(--nr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.na-note p:last-child {
  margin-bottom: 0;
  font-size: 16px;
}

.na-faq {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--nr-line);
}

.na-faq__item {
  margin-top: 22px;
}

.na-faq__item h3 {
  font-size: 20px;
}

.na-faq__item p {
  margin: 8px 0 0;
  color: var(--nr-copy);
  font-size: 17px;
  line-height: 1.65;
}

.na-product {
  margin-top: 48px;
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 32px;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-l);
  background: var(--nr-surface);
}

.na-product__copy {
  min-width: 0;
}

.na-product h2 {
  margin-top: 12px;
  font-size: clamp(24px, 2.4vw, 32px);
}

.na-product__copy p:last-child {
  margin: 12px 0 0;
  color: var(--nr-copy);
  font-size: 16px;
  line-height: 1.6;
}

.na-product__copy a {
  color: var(--nr-link);
}

.na-product__actions {
  min-width: 220px;
  display: grid;
  gap: 10px;
}

.na-related {
  padding-top: 72px;
}

.na-related__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.na-related__head h2 {
  font-size: clamp(26px, 2.6vw, 36px);
}

.na-related__head .nr-link:hover svg {
  transform: translateX(-3px);
}

.na-related__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.na-related__card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nr-line);
  border-radius: var(--nr-radius-m);
  background: var(--nr-surface);
  transition: border-color .2s ease;
}

.na-related__card:hover {
  border-color: var(--nr-line-strong);
}

.na-related__body {
  padding: 22px 22px 24px;
}

.na-related__body h3 {
  margin-top: 12px;
  font-size: 22px;
}

.na-related__body h3 a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.na-related__body > p:last-child {
  margin: 10px 0 0;
  color: var(--nr-copy);
  font-size: 15px;
  line-height: 1.55;
}

.resources-page--article .nr-final {
  padding-top: 64px;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .na-layout {
    grid-template-columns: minmax(0, var(--nr-prose));
    row-gap: 28px;
    padding-top: 32px;
  }

  .na-aside {
    grid-column: 1;
    grid-row: 1;
    position: static;
  }

  .na-content {
    grid-row: 2;
  }

  .na-toc {
    padding: 0 16px;
    border: 1px solid var(--nr-line);
    border-radius: var(--nr-radius-m);
    background: var(--nr-surface);
  }

  .na-toc summary {
    cursor: pointer;
  }

  .na-toc summary::after {
    display: block;
  }

  .na-toc details[open] summary::after {
    transform: translateY(2px) rotate(225deg);
  }

  .na-toc ol {
    margin: 2px 0 12px;
  }
}

@media (min-width: 1200px) {
  .na-toc summary {
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  .nr-hero__inner,
  .nr-listing__head,
  .nr-featured__card,
  .nr-final__panel,
  .na-hero__inner,
  .na-product {
    grid-template-columns: 1fr;
  }

  .nr-hero__inner {
    gap: 14px;
  }

  .na-hero__inner {
    gap: 34px;
  }

  .nr-featured__visual {
    min-height: 240px;
  }

  .na-hero__art,
  .na-hero__signal {
    min-height: 280px;
  }

  .nr-card {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 8px 22px;
  }

  .nr-listing__head {
    gap: 10px;
  }

  .nr-final__actions,
  .na-product__actions {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 260px));
  }

  .na-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nr-hero {
    padding: calc(var(--nr-header) + 36px) 0 24px;
  }

  .nr-hero h1 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .nr-module-nav__inner {
    width: 100%;
    min-height: 56px;
    padding-inline: 16px;
    display: block;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nr-module-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .nr-module-nav__label {
    display: none;
  }

  .nr-module-nav__items {
    width: max-content;
    min-height: 56px;
    justify-content: flex-start;
  }

  .nr-featured {
    padding-top: 28px;
  }

  .nr-featured__card {
    padding: 22px 18px;
    border-radius: var(--nr-radius-m);
  }

  .nr-featured__copy h2 {
    font-size: clamp(26px, 7.4vw, 34px);
  }

  .nr-featured__copy > p:not(.nr-meta) {
    font-size: 16px;
  }

  .nr-featured__foot {
    margin-top: 20px;
  }

  .nr-featured__brief {
    padding: 18px 18px 16px;
  }

  .nr-featured__visual {
    min-height: 200px;
  }

  .nr-signal {
    inset: 4% -12% auto auto;
    width: 122%;
  }

  .nr-listing {
    padding-top: 44px;
  }

  .nr-listing__head h2,
  .nr-final h2 {
    font-size: clamp(26px, 7vw, 34px);
  }

  .nr-listing__head > p {
    font-size: 16px;
  }

  .nr-filters {
    margin-top: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nr-filters::-webkit-scrollbar {
    display: none;
  }

  .nr-filters button {
    flex: 0 0 auto;
  }

  .nr-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }

  .nr-card__art {
    max-width: 320px;
  }

  .nr-card__index {
    font-size: 16px;
  }

  .nr-card h3 {
    margin-top: 8px;
    font-size: 22px;
  }

  .nr-card__body > p:not(.nr-meta) {
    font-size: 15px;
  }

  .nr-final {
    padding: 44px 0 56px;
  }

  .nr-final__panel,
  .na-product {
    padding: 24px 18px;
    border-radius: var(--nr-radius-m);
  }

  .nr-final__actions,
  .na-product__actions {
    grid-template-columns: 1fr;
  }

  .na-hero {
    padding: calc(var(--nr-header) + 32px) 0 28px;
  }

  .na-hero h1 {
    font-size: clamp(28px, 7.6vw, 40px);
  }

  .na-hero__lead {
    font-size: 17px;
  }

  .na-hero__art,
  .na-hero__signal {
    min-height: 220px;
    border-radius: var(--nr-radius-m);
  }

  .na-layout {
    padding-top: 24px;
    row-gap: 20px;
  }

  .na-body {
    font-size: 17px;
  }

  .na-section + .na-section {
    margin-top: 36px;
  }

  .na-section h2,
  .na-faq h2 {
    font-size: clamp(24px, 6.4vw, 30px);
  }

  .na-steps li {
    padding: 14px 16px 14px 54px;
  }

  .na-steps li::before {
    left: 16px;
    font-size: 20px;
  }

  .na-takeaways {
    padding: 18px 18px 16px;
  }

  .na-related {
    padding-top: 52px;
  }

  .na-related__grid {
    grid-template-columns: 1fr;
  }

  .resources-page--article .nr-final {
    padding-top: 44px;
  }
}

@media (max-width: 430px) {
  .nr-module-nav__inner {
    padding-inline: 14px;
  }

  .nr-featured__foot {
    display: grid;
  }
}

@media (pointer: coarse) {
  .nr-module-nav__items > a,
  .nr-module-nav__items > span,
  .nr-filters button,
  .nr-link,
  .nr-button,
  .na-toc summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.resources-page.is-reveal-ready [data-reveal],
  body.resources-page.is-reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nr-featured__halo {
    animation: none;
  }

  .nr-signal__line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .nr-filters button,
  .nr-link svg,
  .nr-button,
  .nr-button svg,
  .na-related__card,
  .na-toc summary::after {
    transition: none;
  }
}