/* ==========================================================================
   Nexoryl — shared department page stylesheet  (v2)
   File: /assets/css/nexoryl-departments.css

   One stylesheet for every department page built on this system.

   Scoping. Every rule starts with #nx-dept (the wrapper <div id="nx-dept">).
   An ID outranks theme and Elementor kit selectors such as
   ".elementor-kit-5 h2" or "a:hover", so headings, links and buttons keep
   their colours whichever stylesheet WordPress loads last. Nothing outside
   the wrapper is touched. The only unscoped classes are the standalone
   preview helpers (.nx-standalone, .nx-skip, .nx-theme-toggle), which are
   not part of the content pasted into WordPress.

   Themes. Dark by default. Light when <html data-theme="light"> is set
   (same "nexoryl-theme" preference as the rest of nexoryl.com), or when no
   theme is set and the visitor's system prefers light.

   Grids. Fixed column counts per item count, so every row is full at every
   breakpoint. Counts of 5, 7 and 11 receive one CTA cell from the renderer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
#nx-dept {
  --nx-bg: #0B0D0F;
  --nx-surface: #12161A;
  --nx-surface-2: #191E23;
  --nx-text: #F5F5F1;
  --nx-text-2: #A6ADB5;
  --nx-text-3: #868E97;
  --nx-border: #292F35;
  --nx-border-strong: #3C444C;
  --nx-accent: #B7F34A;
  --nx-accent-hover: #C9FF6B;
  --nx-accent-ink: #B7F34A;
  --nx-on-accent: #0B0D0F;
  --nx-accent-soft: rgba(183, 243, 74, .10);
  --nx-accent-line: rgba(183, 243, 74, .38);
  --nx-glow: rgba(183, 243, 74, .12);

  --nx-maxw: 1320px;
  --nx-gutter: clamp(20px, 4vw, 64px);
  --nx-r-sm: 3px;
  --nx-r-md: 6px;
  --nx-r-lg: 10px;
  --nx-step-0: clamp(.95rem, .92rem + .16vw, 1.05rem);
  --nx-step-1: clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
  --nx-step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --nx-step-4: clamp(1.95rem, 1.55rem + 1.9vw, 3.1rem);
  --nx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nx-font-head: "Archivo", "Inter", system-ui, sans-serif;
  --nx-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nx-ease: cubic-bezier(.2, .7, .2, 1);
}
html[data-theme="light"] #nx-dept {
  --nx-bg: #F5F5F1; --nx-surface: #FFFFFF; --nx-surface-2: #EFEFE9;
  --nx-text: #0B0D0F; --nx-text-2: #5A646E; --nx-text-3: #5F6873;
  --nx-border: #DDDDD4; --nx-border-strong: #C2C2B7;
  --nx-accent-ink: #3E6B05; --nx-accent-soft: rgba(129, 190, 16, .14);
  --nx-accent-line: rgba(94, 150, 10, .45); --nx-glow: rgba(94, 150, 10, .09);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) #nx-dept {
    --nx-bg: #F5F5F1; --nx-surface: #FFFFFF; --nx-surface-2: #EFEFE9;
    --nx-text: #0B0D0F; --nx-text-2: #5A646E; --nx-text-3: #5F6873;
    --nx-border: #DDDDD4; --nx-border-strong: #C2C2B7;
    --nx-accent-ink: #3E6B05; --nx-accent-soft: rgba(129, 190, 16, .14);
    --nx-accent-line: rgba(94, 150, 10, .45); --nx-glow: rgba(94, 150, 10, .09);
  }
}

/* --------------------------------------------------------------------------
   2. Standalone preview helpers (not part of the WordPress paste)
   -------------------------------------------------------------------------- */
.nx-standalone { margin: 0; background: #0B0D0F; }
html[data-theme="light"] .nx-standalone { background: #F5F5F1; }
.nx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: #B7F34A; color: #0B0D0F; padding: 12px 18px;
  font: 600 .95rem/1.2 "Inter", system-ui, sans-serif; text-decoration: none;
}
.nx-skip:focus { left: 12px; top: 12px; }
.nx-theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  font: 600 .85rem/1 "Inter", system-ui, sans-serif;
  background: #12161A; color: #F5F5F1; border: 1px solid #3C444C;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
html[data-theme="light"] .nx-theme-toggle { background: #FFFFFF; color: #0B0D0F; border-color: #C2C2B7; box-shadow: 0 8px 24px rgba(20, 24, 20, .12); }
.nx-theme-toggle:focus-visible { outline: 2px solid #B7F34A; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Base and theme-proofing
   -------------------------------------------------------------------------- */
#nx-dept {
  display: block; width: 100%;
  background: var(--nx-bg); color: var(--nx-text);
  font-family: var(--nx-font-body); font-size: var(--nx-step-0); line-height: 1.62;
  text-align: left; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* New stacking context: theme overlays and z-index from outside can't interleave with the page */
#nx-dept.nx-department-page { isolation: isolate; }
#nx-dept *, #nx-dept *::before, #nx-dept *::after { box-sizing: border-box; }
#nx-dept h1, #nx-dept h2, #nx-dept h3, #nx-dept h4 {
  margin: 0; padding: 0; color: var(--nx-text);
  font-family: var(--nx-font-head); font-weight: 600; font-style: normal;
  letter-spacing: -.028em; line-height: 1.1; text-transform: none; text-wrap: balance;
}
#nx-dept h1 { font-size: var(--nx-step-4); }
#nx-dept h2 { font-size: var(--nx-step-3); }
#nx-dept h3 { font-size: var(--nx-step-1); line-height: 1.25; }
#nx-dept p, #nx-dept ul, #nx-dept ol, #nx-dept dl, #nx-dept dt, #nx-dept dd, #nx-dept li, #nx-dept figure, #nx-dept figcaption {
  margin: 0; padding: 0;
}
#nx-dept ul, #nx-dept ol { list-style: none; }
#nx-dept a { color: inherit; text-decoration: none; box-shadow: none; }
#nx-dept a:hover, #nx-dept a:focus { color: inherit; }
#nx-dept .nx-prose a,
#nx-dept p a, #nx-dept dd a, #nx-dept li a, #nx-dept td a {
  color: var(--nx-accent-ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
#nx-dept p a:hover, #nx-dept dd a:hover, #nx-dept li a:hover, #nx-dept td a:hover {
  color: var(--nx-accent-ink); text-decoration-thickness: 2px;
}
#nx-dept strong { font-weight: 600; color: var(--nx-text); }
#nx-dept :focus-visible { outline: 2px solid var(--nx-accent-ink); outline-offset: 3px; border-radius: 2px; }
#nx-dept ::selection { background: var(--nx-accent); color: var(--nx-on-accent); }
#nx-dept .nx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#nx-dept table, #nx-dept th, #nx-dept td { border: 0; background: transparent; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
#nx-dept .nx-wrap { width: 100%; max-width: var(--nx-maxw); margin-inline: auto; padding-inline: var(--nx-gutter); }
#nx-dept .nx-section { padding-block: clamp(64px, 8vw, 116px); background: var(--nx-bg); }
#nx-dept .nx-section--tight { padding-block: clamp(48px, 6vw, 84px); }
#nx-dept .nx-section--ruled { border-top: 1px solid var(--nx-border); }
#nx-dept .nx-section--alt { background: var(--nx-surface); }
#nx-dept .nx-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nx-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nx-text-3);
}
#nx-dept .nx-tag::before { content: ""; width: 22px; height: 1px; background: var(--nx-accent-ink); }
#nx-dept .nx-hdr {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(18px, 5vw, 72px); align-items: end;
}
#nx-dept .nx-hdr h2 { margin-top: 16px; }
#nx-dept .nx-intro { color: var(--nx-text-2); max-width: 62ch; }
#nx-dept .nx-note {
  margin-top: 22px; max-width: 82ch; padding: 16px 20px;
  border: 1px solid var(--nx-border); border-left: 2px solid var(--nx-accent-ink); border-radius: var(--nx-r-md);
  background: var(--nx-surface); color: var(--nx-text-2); font-size: .9rem;
}
#nx-dept .nx-section--alt .nx-note { background: var(--nx-bg); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
#nx-dept .nx-cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#nx-dept .nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--nx-r-md); border: 1px solid transparent;
  font-family: var(--nx-font-body); font-weight: 600; font-size: .95rem; line-height: 1.2; letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .25s var(--nx-ease), background-color .25s var(--nx-ease), border-color .25s var(--nx-ease), color .25s var(--nx-ease);
}
#nx-dept .nx-btn--primary,
#nx-dept .nx-btn--primary:hover,
#nx-dept .nx-btn--primary:focus { color: var(--nx-on-accent); }
#nx-dept .nx-btn--primary { background: var(--nx-accent); border-color: var(--nx-accent); }
#nx-dept .nx-btn--primary:hover { background: var(--nx-accent-hover); border-color: var(--nx-accent-hover); transform: translateY(-2px); }
#nx-dept .nx-btn--ghost { background: transparent; border-color: var(--nx-border-strong); color: var(--nx-text); }
#nx-dept .nx-btn--ghost:hover { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-accent-ink); transform: translateY(-2px); }
#nx-dept .nx-btn svg { width: 14px; height: 14px; flex: none; }
#nx-dept .nx-cta-hint { margin-top: 12px; font-size: .8rem; color: var(--nx-text-3); }

/* --------------------------------------------------------------------------
   6. Breadcrumbs
   -------------------------------------------------------------------------- */
#nx-dept .nx-crumbs { border-bottom: 1px solid var(--nx-border); background: var(--nx-bg); }
#nx-dept .nx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 14px; font-size: .82rem; color: var(--nx-text-3); }
#nx-dept .nx-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--nx-border-strong); }
#nx-dept .nx-crumbs a { color: var(--nx-text-2); text-decoration: none; }
#nx-dept .nx-crumbs a:hover { color: var(--nx-accent-ink); }
#nx-dept .nx-crumbs [aria-current] { color: var(--nx-text); }

/* --------------------------------------------------------------------------
   7. Hero + "You bring / We run / You get" flow diagram
   -------------------------------------------------------------------------- */
#nx-dept .nx-hero { position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 84px) clamp(36px, 4vw, 56px); background: var(--nx-bg); }
#nx-dept .nx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 340px at 86% 6%, var(--nx-glow), transparent 70%);
}
#nx-dept .nx-hero__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
#nx-dept .nx-hero h1 { margin-top: 18px; max-width: 19ch; }
#nx-dept .nx-hero__lede { margin-top: 22px; max-width: 60ch; color: var(--nx-text-2); font-size: var(--nx-step-1); line-height: 1.55; }

#nx-dept .nx-hflow {
  position: relative; padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg); background: var(--nx-surface);
}
#nx-dept .nx-hflow__cap {
  margin-bottom: 14px; font-family: var(--nx-font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nx-text-3);
}
#nx-dept .nx-hflow__node { padding: 14px 16px; border: 1px solid var(--nx-border); border-radius: var(--nx-r-md); background: var(--nx-bg); }
#nx-dept .nx-hflow__node--core {
  border-color: var(--nx-accent-line);
  background: linear-gradient(var(--nx-accent-soft), var(--nx-accent-soft)), var(--nx-bg);
}
#nx-dept .nx-hflow__label {
  margin-bottom: 8px; font-family: var(--nx-font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nx-text-3);
}
#nx-dept .nx-hflow__node--core .nx-hflow__label { color: var(--nx-accent-ink); }
#nx-dept .nx-hflow__list { display: grid; gap: 5px; }
#nx-dept .nx-hflow__list li { position: relative; padding-left: 16px; font-size: .88rem; color: var(--nx-text); line-height: 1.45; }
#nx-dept .nx-hflow__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--nx-border-strong); }
#nx-dept .nx-hflow__node--out .nx-hflow__list li::before { background: var(--nx-accent-ink); }
#nx-dept .nx-hflow__chips { display: flex; flex-wrap: wrap; gap: 6px; }
#nx-dept .nx-hflow__chips li {
  padding: 5px 11px; border-radius: 999px; font-size: .8rem; line-height: 1.3;
  color: var(--nx-text); background: var(--nx-surface); border: 1px solid var(--nx-accent-line);
}
#nx-dept .nx-hflow__arrow { position: relative; height: 28px; }
#nx-dept .nx-hflow__arrow::before {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 8px; width: 2px;
  background: var(--nx-accent-line); transform: translateX(-50%);
}
#nx-dept .nx-hflow__arrow::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 9px; height: 9px;
  border-right: 2px solid var(--nx-accent-ink); border-bottom: 2px solid var(--nx-accent-ink);
  transform: translateX(-50%) rotate(45deg);
}

/* Fact plate under the hero (always 6 cells) */
#nx-dept .nx-plate { margin-top: clamp(36px, 5vw, 56px); }
#nx-dept .nx-plate dt { font-family: var(--nx-font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-3); }
#nx-dept .nx-plate dd { margin-top: 8px; font-size: .9rem; color: var(--nx-text-2); }

/* --------------------------------------------------------------------------
   8. Direct-answer blocks and definition lists
   -------------------------------------------------------------------------- */
#nx-dept .nx-answer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 5vw, 72px); align-items: start; }
#nx-dept .nx-answer h2 { margin-top: 16px; }
#nx-dept .nx-answer__lead { font-size: var(--nx-step-1); line-height: 1.5; color: var(--nx-text); }
#nx-dept .nx-answer__body { margin-top: 16px; max-width: 64ch; color: var(--nx-text-2); }
#nx-dept .nx-defs {
  margin-top: 24px; display: grid; gap: 1px; overflow: hidden;
  background: var(--nx-border); border: 1px solid var(--nx-border); border-radius: var(--nx-r-md);
}
#nx-dept .nx-defs div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 18px; background: var(--nx-surface); }
#nx-dept .nx-defs dt { font-size: .86rem; font-weight: 600; color: var(--nx-text); }
#nx-dept .nx-defs dd { font-size: .88rem; color: var(--nx-text-2); }

/* --------------------------------------------------------------------------
   9. Card grids — fixed columns per item count (full rows only)
      n2 -> 2|2|1   n3 -> 3|1   n4 -> 4|2|1   n6 -> 3|2|1
      n8 -> 4|2|1   n9 -> 3|1   n10 -> 5|2|1  n12 -> 4|2|1
   -------------------------------------------------------------------------- */
#nx-dept .nx-grid {
  display: grid; gap: 1px; overflow: hidden; margin-top: clamp(28px, 4vw, 44px);
  background: var(--nx-border); border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg);
}
#nx-dept .nx-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#nx-dept .nx-grid--n3, #nx-dept .nx-grid--n6, #nx-dept .nx-grid--n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#nx-dept .nx-grid--n4, #nx-dept .nx-grid--n8, #nx-dept .nx-grid--n12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#nx-dept .nx-grid--n10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

#nx-dept .nx-card {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(20px, 2.4vw, 28px); background: var(--nx-surface); color: var(--nx-text);
  transition: background-color .28s var(--nx-ease);
}
#nx-dept .nx-card h3 { font-size: 1.05rem; }
#nx-dept .nx-card p { font-size: .88rem; color: var(--nx-text-2); }
#nx-dept .nx-card__n { font-family: var(--nx-font-mono); font-size: .74rem; color: var(--nx-accent-ink); }
#nx-dept .nx-card__list { display: grid; gap: 6px; margin-top: 4px; }
#nx-dept .nx-card__list li { position: relative; padding-left: 16px; font-size: .86rem; color: var(--nx-text-2); }
#nx-dept .nx-card__list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 1px; background: var(--nx-accent-ink); }
#nx-dept .nx-card--link { text-decoration: none; }
#nx-dept .nx-card--link:hover { background: var(--nx-surface-2); }
#nx-dept .nx-card--link h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#nx-dept .nx-card--link h3::after {
  content: ""; flex: none; width: 16px; height: 1px; background: var(--nx-border-strong);
  transition: width .25s var(--nx-ease), background-color .25s var(--nx-ease);
}
#nx-dept .nx-card--link:hover h3::after { width: 26px; background: var(--nx-accent-ink); }
#nx-dept .nx-card--cta { align-content: center; background: linear-gradient(var(--nx-accent-soft), var(--nx-accent-soft)), var(--nx-surface); }
#nx-dept .nx-card__go { font-size: .9rem; font-weight: 600; color: var(--nx-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Stages: numbered flow cards with a "next" cue */
#nx-dept .nx-grid--flow .nx-card__n { display: inline-flex; align-items: center; gap: 8px; }
#nx-dept .nx-grid--flow .nx-card:not(:last-child) .nx-card__n::after { content: "\2192"; color: var(--nx-text-3); font-family: var(--nx-font-body); }

/* Scope cards */
#nx-dept .nx-card--scope h3 { display: flex; align-items: center; gap: 10px; }
#nx-dept .nx-mark {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-size: .78rem; font-weight: 700; line-height: 1;
  color: var(--nx-text-2); border: 1px solid var(--nx-border-strong); background: var(--nx-bg);
}
#nx-dept .nx-mark--yes { color: var(--nx-accent-ink); border-color: var(--nx-accent-line); background: linear-gradient(var(--nx-accent-soft), var(--nx-accent-soft)), var(--nx-bg); }

/* --------------------------------------------------------------------------
   10. Problem rows
   -------------------------------------------------------------------------- */
#nx-dept .nx-issues { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--nx-border); }
#nx-dept .nx-issue {
  display: grid; grid-template-columns: 52px minmax(0, .8fr) minmax(0, 2.2fr);
  gap: clamp(14px, 3vw, 36px); padding-block: 26px; border-bottom: 1px solid var(--nx-border);
}
#nx-dept .nx-issue__n { padding-top: 4px; font-family: var(--nx-font-mono); font-size: .78rem; color: var(--nx-accent-ink); }
#nx-dept .nx-issue h3 { font-size: 1.08rem; }
#nx-dept .nx-issue__dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#nx-dept .nx-issue__dl dt { font-family: var(--nx-font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-3); }
#nx-dept .nx-issue__dl dd { margin-top: 6px; font-size: .88rem; color: var(--nx-text-2); }
#nx-dept .nx-issue__dl div:last-child dt { color: var(--nx-accent-ink); }

/* --------------------------------------------------------------------------
   11. Process timeline (horizontal on desktop, vertical below 1100px)
       --n is set by .nx-track--n4 / n5 / n6
   -------------------------------------------------------------------------- */
#nx-dept .nx-track {
  --n: 5; --gap: 22px; --dot: 34px;
  position: relative; margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap);
}
#nx-dept .nx-track--n4 { --n: 4; }
#nx-dept .nx-track--n5 { --n: 5; }
#nx-dept .nx-track--n6 { --n: 6; }
#nx-dept .nx-track::before {
  content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); height: 2px;
  left: calc(var(--dot) / 2);
  right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - var(--dot) / 2);
  background: linear-gradient(90deg, var(--nx-accent-ink), var(--nx-accent-line) 35%, var(--nx-border));
}
#nx-dept .nx-track__step { position: relative; padding-top: calc(var(--dot) + 18px); }
#nx-dept .nx-track__dot {
  position: absolute; left: 0; top: 0; width: var(--dot); height: var(--dot); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--nx-font-mono); font-size: .72rem; color: var(--nx-accent-ink);
  background: var(--nx-bg); border: 1px solid var(--nx-accent-line);
}
#nx-dept .nx-track__step:first-child .nx-track__dot { background: var(--nx-accent); color: var(--nx-on-accent); border-color: var(--nx-accent); }
#nx-dept .nx-track__step h3 { font-size: 1.02rem; }
#nx-dept .nx-track__step p { margin-top: 8px; font-size: .88rem; color: var(--nx-text-2); }

/* --------------------------------------------------------------------------
   12. Tool rows and tables
   -------------------------------------------------------------------------- */
#nx-dept .nx-tools {
  margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 1px; overflow: hidden;
  background: var(--nx-border); border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg);
}
#nx-dept .nx-tools div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 20px; background: var(--nx-surface); }
#nx-dept .nx-tools dt { font-size: .9rem; font-weight: 600; color: var(--nx-text); }
#nx-dept .nx-tools dd { display: flex; flex-wrap: wrap; gap: 6px; }
#nx-dept .nx-chip { padding: 5px 10px; border-radius: var(--nx-r-sm); font-size: .8rem; color: var(--nx-text-2); background: var(--nx-bg); border: 1px solid var(--nx-border); }
#nx-dept .nx-table-wrap { margin-top: clamp(28px, 4vw, 44px); overflow-x: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg); background: var(--nx-surface); }
#nx-dept .nx-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .88rem; }
#nx-dept .nx-table caption { caption-side: bottom; padding: 14px 18px; text-align: left; font-size: .8rem; color: var(--nx-text-3); border-top: 1px solid var(--nx-border); }
#nx-dept .nx-table th, #nx-dept .nx-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nx-border); }
#nx-dept .nx-table thead th { font-family: var(--nx-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-text-3); background: var(--nx-bg); }
#nx-dept .nx-table tbody th { width: 18%; font-weight: 600; color: var(--nx-text); background: var(--nx-surface); }
#nx-dept .nx-table td { color: var(--nx-text-2); background: var(--nx-surface); }
#nx-dept .nx-table tbody tr:last-child th, #nx-dept .nx-table tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   13. FAQ (native <details>)
   -------------------------------------------------------------------------- */
#nx-dept .nx-faq { max-width: 960px; margin-top: clamp(26px, 4vw, 42px); border-top: 1px solid var(--nx-border); }
#nx-dept .nx-faq details { border-bottom: 1px solid var(--nx-border); }
#nx-dept .nx-faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 18px; align-items: center;
  padding: 20px 4px; cursor: pointer; list-style: none; color: var(--nx-text);
  font-family: var(--nx-font-head); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.12rem); letter-spacing: -.02em;
  transition: color .25s var(--nx-ease);
}
#nx-dept .nx-faq summary::-webkit-details-marker { display: none; }
#nx-dept .nx-faq summary::after { content: "+"; justify-self: end; font-family: var(--nx-font-mono); font-size: 1.1rem; color: var(--nx-text-3); }
#nx-dept .nx-faq details[open] summary, #nx-dept .nx-faq summary:hover { color: var(--nx-accent-ink); }
#nx-dept .nx-faq details[open] summary::after { content: "\2212"; color: var(--nx-accent-ink); }
#nx-dept .nx-faq summary h3 { font: inherit; letter-spacing: inherit; color: inherit; }
#nx-dept .nx-faq__a { max-width: 76ch; padding: 0 4px 24px; font-size: .94rem; color: var(--nx-text-2); }

/* --------------------------------------------------------------------------
   14. Final CTA panel — every colour set explicitly, so the theme can't
       change it, and the panel reads as one block in both themes.
   -------------------------------------------------------------------------- */
#nx-dept .nx-cta { padding-block: clamp(56px, 7vw, 104px); background: var(--nx-bg); border-top: 1px solid var(--nx-border); }
#nx-dept .nx-cta__panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--nx-surface); color: var(--nx-text);
  border: 1px solid var(--nx-border); border-top: 2px solid var(--nx-accent-ink); border-radius: var(--nx-r-lg);
}
#nx-dept .nx-cta__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 280px at 0% 0%, var(--nx-glow), transparent 72%);
}
#nx-dept .nx-cta__copy, #nx-dept .nx-contact { position: relative; }
#nx-dept .nx-cta .nx-tag { color: var(--nx-text-3); }
#nx-dept .nx-cta h2 { margin-top: 16px; max-width: 20ch; color: var(--nx-text); }
#nx-dept .nx-cta__lede { margin-top: 18px; max-width: 58ch; font-size: var(--nx-step-1); line-height: 1.55; color: var(--nx-text-2); }
#nx-dept .nx-contact {
  display: grid; gap: 1px; overflow: hidden;
  background: var(--nx-border); border: 1px solid var(--nx-border); border-radius: var(--nx-r-md);
}
#nx-dept .nx-contact__row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px 18px; font-size: .95rem; color: var(--nx-text); background: var(--nx-bg); text-decoration: none;
}
#nx-dept .nx-contact__row span { font-family: var(--nx-font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-3); }
#nx-dept a.nx-contact__row:hover { color: var(--nx-accent-ink); background: var(--nx-surface-2); }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  #nx-dept .nx-grid--n10 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  #nx-dept .nx-grid--n4, #nx-dept .nx-grid--n8, #nx-dept .nx-grid--n12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #nx-dept .nx-track { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; }
  #nx-dept .nx-track::before { display: none; }
  #nx-dept .nx-track__step { padding: 4px 0 26px calc(var(--dot) + 20px); }
  #nx-dept .nx-track__step:last-child { padding-bottom: 0; }
  /* one segment per step, from this dot down to the next one, so the line ends at the last dot */
  #nx-dept .nx-track__step:not(:last-child)::before {
    content: ""; position: absolute; left: calc(var(--dot) / 2 - 1px); top: var(--dot); bottom: 0; width: 2px;
    background: var(--nx-accent-line);
  }
  #nx-dept .nx-track__step:first-child::before { background: linear-gradient(180deg, var(--nx-accent-ink), var(--nx-accent-line)); }
}
@media (max-width: 960px) {
  #nx-dept .nx-hero__in, #nx-dept .nx-answer, #nx-dept .nx-hdr, #nx-dept .nx-cta__panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
  #nx-dept .nx-issue { grid-template-columns: 40px minmax(0, 1fr); }
  #nx-dept .nx-issue__dl { grid-column: 2 / -1; }
}
@media (max-width: 900px) {
  #nx-dept .nx-grid--n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #nx-dept .nx-grid--n3, #nx-dept .nx-grid--n9 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #nx-dept .nx-issue__dl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #nx-dept .nx-defs div, #nx-dept .nx-tools div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 600px) {
  #nx-dept .nx-grid--n2, #nx-dept .nx-grid--n4, #nx-dept .nx-grid--n6, #nx-dept .nx-grid--n8,
  #nx-dept .nx-grid--n10, #nx-dept .nx-grid--n12 { grid-template-columns: minmax(0, 1fr); }
  #nx-dept .nx-issue { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #nx-dept .nx-issue__dl { grid-column: auto; }
  #nx-dept .nx-cta-group .nx-btn { width: 100%; }
  #nx-dept .nx-contact__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #nx-dept *, #nx-dept *::before, #nx-dept *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}


/* CTA FIX — isolate the description and contact card */
#nx-dept .nx-cta__panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr) !important;
  grid-template-areas: "copy contact";
  align-items: start;
  position: relative;
}

#nx-dept .nx-cta__copy {
  grid-area: copy;
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
}

#nx-dept .nx-cta__lede {
  display: block;
  position: relative;
  width: 100%;
  max-width: 58ch;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

#nx-dept .nx-cta__panel > .nx-contact {
  grid-area: contact;
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
}

@media (max-width: 960px) {
  #nx-dept .nx-cta__panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "contact";
  }
}