/* ═══════════════════════════════════════════════════════════════════
   static/css/nxg-ui.css — NXG Collective motion + responsive layer

   Loaded on every page by base.html and allauth/layouts/base.html.
   Plain CSS on purpose: nothing here depends on a Tailwind rebuild.

   Rules of the road
   * Motion is progressive enhancement. Anything that starts hidden only
     does so under html.nxg-motion, which JS sets — and a failsafe in
     <head> removes it again if nxg-ui.js never arrives. Content can
     never get stuck invisible.
   * Motion policy (D-16.18, bottom of this file): ambient motion runs on
     every device; "reduce motion" makes it calmer (html.nxg-calm), and
     "Pause animations" in the footer stops it (html.nxg-still).
   * Only transform/opacity/scale/translate are animated (GPU-friendly).

   Hooks (add to markup):
     data-reveal[="up|fade|scale|left|right"]  reveal on scroll
     data-reveal-delay="120"                    extra delay (ms)
     data-reveal-stagger                        reveal children one by one
     data-count-up="1234"                       count from 0 to the value
     data-count-up-scope                        count every plain number inside
     data-spotlight                             pointer-following glow
     .nxg-lift                                  hover lift for cards
     data-busy-on-submit (on <form>)            spinner + no double submit
     data-scroll-x-guard (wrapper)              make a row swipeable on mobile
     data-mobile-link-guard (wrapper)           never lose links on mobile
     data-avatar-zoom="Name" (wrapper)          tap the photo inside to enlarge
═══════════════════════════════════════════════════════════════════ */

:root {
  --nxg-blue: #0079C2;
  --nxg-violet: #6C47FF;
  --nxg-cyan: #00B5B0;
  --nxg-hex-navy-900: #0D1B2A;
  --nxg-hex-navy-850: #112236;
  --nxg-hex-navy-750: #1B2B40;
  --nxg-muted: #8A9BB3;
  --nxg-ease-out: cubic-bezier(.22, 1, .36, 1);     /* easeOutQuint */
  --nxg-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Page-to-page crossfade (Chrome/Edge 126+, Safari 18.2+) ───────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* The page content crossfades in place; the top bar and the phone tab bar
   are their own layers and don't move or flash between pages. */
::view-transition-old(root) { animation: nxg-vt-out .14s ease both; }
::view-transition-new(root) { animation: nxg-vt-in .2s ease-out both; }
@keyframes nxg-vt-out { to { opacity: 0; } }
@keyframes nxg-vt-in { from { opacity: 0; } }
.nxg-topbar { view-transition-name: nxg-topbar; }
.nxg-tabbar { view-transition-name: nxg-tabbar; }
::view-transition-group(nxg-topbar), ::view-transition-group(nxg-tabbar),
::view-transition-old(nxg-topbar), ::view-transition-new(nxg-topbar),
::view-transition-old(nxg-tabbar), ::view-transition-new(nxg-tabbar) { animation: none; }
::view-transition-old(nxg-topbar), ::view-transition-old(nxg-tabbar) { display: none; }

/* ── Responsive safety net ─────────────────────────────────────────── */
body { overflow-wrap: break-word; }
.prose pre, pre { max-width: 100%; overflow-x: auto; }
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose img { height: auto; }

/* Horizontal rows that should swipe instead of overflow the page */
.nxg-scroll-x {
  /* relative: absolutely-positioned children (e.g. .sr-only labels) stay
     inside the scrolling row instead of widening the page on phones. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.nxg-scroll-x::-webkit-scrollbar { display: none; }

/* A wrapper around ANY tab strip / chip row. Makes the inner row stay on
   one line and swipe on small screens, with soft fading edges that show
   there is more to scroll. Works without knowing the inner markup. */
[data-scroll-x-guard] {
  position: relative;
  max-width: 100%;
}
[data-scroll-x-guard] > .nxg-sxg-track {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
[data-scroll-x-guard] > .nxg-sxg-track::-webkit-scrollbar { display: none; }
/* .nxg-sxg-row is the strip's own row of tabs, found by nxg-ui.js */
[data-scroll-x-guard] .nxg-sxg-row {
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
  overflow: visible !important;
}
[data-scroll-x-guard] .nxg-sxg-row > * {
  flex-shrink: 0 !important;
  white-space: nowrap;
}
[data-scroll-x-guard]::before,
[data-scroll-x-guard]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
[data-scroll-x-guard]::before { left: 0; background: linear-gradient(90deg, var(--nxg-fade-bg, var(--nxg-hex-navy-900)), transparent); }
[data-scroll-x-guard]::after { right: 0; background: linear-gradient(270deg, var(--nxg-fade-bg, var(--nxg-hex-navy-900)), transparent); }
[data-scroll-x-guard].has-left::before { opacity: 1; }
[data-scroll-x-guard].has-right::after { opacity: 1; }

/* Profile hero / header cards on phones: rows of links and buttons wrap
   instead of being pushed off-screen, and long URLs break. */
@media (max-width: 639.98px) {
  [data-mobile-link-guard] a { overflow-wrap: anywhere; }
  [data-mobile-link-guard] .justify-between:not(.flex-col) { flex-wrap: wrap; row-gap: .75rem; }
  [data-mobile-link-guard] :is(div, nav, ul, p):has(> :is(a, button, form) + :is(a, button, form)) {
    flex-wrap: wrap;
    row-gap: .5rem;
  }
  [data-mobile-link-guard] :is(a, button) { max-width: 100%; }
  [data-mobile-link-guard] .nxg-guard-shown { display: flex !important; flex-wrap: wrap; gap: .5rem; }
}

/* ── Scroll reveal ─────────────────────────────────────────────────── */
html.nxg-motion:not(.nxg-nav) [data-reveal]:not(.is-revealed),
html.nxg-motion:not(.nxg-nav) [data-reveal-stagger] > :not(.is-revealed),
html.nxg-motion .nxg-pending:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
html.nxg-motion [data-reveal="fade"]:not(.is-revealed) { transform: none; }
html.nxg-motion [data-reveal="scale"]:not(.is-revealed) { transform: scale(.96); }
html.nxg-motion [data-reveal="left"]:not(.is-revealed) { transform: translate3d(-22px, 0, 0); }
html.nxg-motion [data-reveal="right"]:not(.is-revealed) { transform: translate3d(22px, 0, 0); }
/* Reduce motion: the same reveal as a fade, nothing slides. */
html.nxg-calm.nxg-motion [data-reveal]:not(.is-revealed),
html.nxg-calm.nxg-motion [data-reveal-stagger] > :not(.is-revealed) { transform: none; }
/* Only while entering; once settled, the element's own transitions
   (hover colours, lifts) are back in charge. */
html.nxg-motion [data-reveal]:not(.is-settled),
html.nxg-motion [data-reveal-stagger] > :not(.is-settled) {
  transition: opacity .6s var(--nxg-ease-out),
    transform .7s var(--nxg-ease-out);
  transition-delay: var(--nxg-delay, 0ms);
}

/* ── Count-up numbers ──────────────────────────────────────────────── */
[data-count-up], .nxg-counting { font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; }
html.nxg-motion:not(.nxg-nav):not(.nxg-ready) [data-count-up] { visibility: hidden; }
.nxg-count-done { animation: nxg-count-pop .45s var(--nxg-ease-spring); }
@keyframes nxg-count-pop { 40% { transform: scale(1.08); } }

/* ── Cards ─────────────────────────────────────────────────────────── */
.nxg-lift {
  transition: translate .25s var(--nxg-ease-out),
    box-shadow .25s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease;
}
@media (hover: hover) {
  .nxg-lift:hover {
    translate: 0 -3px;
    box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 121, 194, .22);
  }
  .nxg-lift-children > * { transition: translate .25s var(--nxg-ease-out), box-shadow .25s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
  .nxg-lift-children > *:hover {
    translate: 0 -3px;
    box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .75);
  }
}

/* Pointer-following glow */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 121, 194, .14), transparent 60%);
}
@media (hover: hover) { [data-spotlight]:hover::before { opacity: 1; } }

/* ── Buttons: tactile press ────────────────────────────────────────── */
/* Uses the individual `scale` property so it never fights an element's
   own transform (e.g. -translate-y-1/2 on icon buttons). */
/* Elements that already animate their colours also ease the press. */
button[class*="transition-colors"],
a[class*="transition-colors"] {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow, scale;
}
button[class*="bg-"]:not(:disabled):active,
button[class*="border"]:not(:disabled):active,
a[class*="bg-brand"]:active,
a[class*="rounded-lg"][class*="border"]:active,
[data-press]:active {
  scale: .97;
}

/* Busy state for submit buttons (data-busy-on-submit forms) */
.nxg-busy { cursor: progress !important; opacity: .85; }
.nxg-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: nxg-spin .7s linear infinite;
}
@keyframes nxg-spin { to { transform: rotate(360deg); } }

/* ── HTMX: new content eases in; requests show progress ────────────── */
.nxg-swap-in { animation: nxg-swap-in .32s var(--nxg-ease-out) both; }
@keyframes nxg-swap-in { from { opacity: 0; transform: translateY(6px); } }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }

/* Thin brand progress bar at the very top (HTMX + page navigation) */
#nxg-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, var(--nxg-blue), var(--nxg-violet), var(--nxg-cyan));
  box-shadow: 0 0 12px rgba(0, 121, 194, .6);
}
#nxg-progress.is-running { opacity: 1; transition: transform 8s cubic-bezier(.1, .7, .1, 1); transform: scaleX(.85); }
#nxg-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform .2s ease, opacity .35s ease .15s; }

/* ── Signature bits for the home page / hero areas ─────────────────── */
.nxg-gradient-text {
  background-size: 200% auto;
  animation: nxg-shimmer 6s ease-in-out infinite alternate;
}
@keyframes nxg-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.nxg-orb-a { animation: nxg-float-a 18s ease-in-out infinite alternate; }
.nxg-orb-b { animation: nxg-float-b 22s ease-in-out infinite alternate; }
@keyframes nxg-float-a { to { translate: 60px 40px; scale: 1.08; } }
@keyframes nxg-float-b { to { translate: -70px 30px; scale: .92; } }

.nxg-dot-grid {
  background-image: radial-gradient(rgba(138, 155, 179, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 30%, transparent 75%);
}

/* Decorative background layers fade out at their edges (no hard seams) */
.nxg-soft-edges {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}

.nxg-live-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.nxg-live-dot::before,
.nxg-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
}
.nxg-live-dot::before { animation: nxg-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes nxg-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* Reaction "pop" + floating emoji */
.nxg-pop { animation: nxg-pop .45s var(--nxg-ease-spring); }
@keyframes nxg-pop { 30% { scale: 1.18; } 60% { scale: .96; } }
.nxg-float-emoji {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  font-size: 1.25rem;
  animation: nxg-float-up .9s var(--nxg-ease-out) forwards;
}
@keyframes nxg-float-up {
  from { opacity: 1; transform: translate(-50%, 0) scale(.8); }
  to { opacity: 0; transform: translate(-50%, -54px) scale(1.35); }
}

/* Newly arrived feed items glow once */
.nxg-new-glow { animation: nxg-new-glow 2.4s ease-out 1; }
@keyframes nxg-new-glow {
  0%, 30% { box-shadow: 0 0 0 1px rgba(0, 181, 176, .55), 0 0 24px -6px rgba(0, 181, 176, .45); }
  100% { box-shadow: 0 0 0 1px rgba(0, 181, 176, 0), 0 0 0 0 rgba(0, 181, 176, 0); }
}

/* Generic entrance for dropdowns/popovers */
.nxg-pop-in { animation: nxg-pop-in .18s var(--nxg-ease-out) both; transform-origin: top right; }
.nxg-pop-out { animation: nxg-pop-out .12s ease-in both; transform-origin: top right; }
@keyframes nxg-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes nxg-pop-out { to { opacity: 0; transform: translateY(-4px) scale(.97); } }

/* Skeleton shimmer for loading placeholders */
.nxg-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--nxg-hex-navy-750);
  border-radius: .5rem;
}
.nxg-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: nxg-skeleton 1.4s ease-in-out infinite;
}
@keyframes nxg-skeleton { to { transform: translateX(100%); } }

/* Avatar that failed to load (e.g. file lost on an old deploy) */
img.nxg-img-missing { visibility: hidden; }

/* ── Profile photo zoom (data-avatar-zoom) ─────────────────────────── */
.nxg-zoomable { cursor: zoom-in; transition: filter .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .nxg-zoomable:hover { filter: brightness(1.08); } }
.nxg-zoomable:focus-visible { outline: 2px solid var(--nxg-blue); outline-offset: 3px; }

.nxg-zoom {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  cursor: zoom-out;
  background: rgb(5 12 22 / 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.nxg-zoom.is-open {
  background: rgb(5 12 22 / .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nxg-zoom-figure {
  margin: 0;
  overflow: hidden;
  background: var(--nxg-hex-navy-750);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08);
  border-radius: 1.5rem;
  transform-origin: center;
}
.nxg-zoom-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.nxg-zoom-caption,
.nxg-zoom-close {
  opacity: 0;
  transition: opacity .25s ease .12s;
}
.nxg-zoom.is-open .nxg-zoom-caption,
.nxg-zoom.is-open .nxg-zoom-close { opacity: 1; }
.nxg-zoom.is-closing .nxg-zoom-caption,
.nxg-zoom.is-closing .nxg-zoom-close { opacity: 0; transition-delay: 0s; }
.nxg-zoom-caption {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
}
.nxg-zoom-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer;
}
.nxg-zoom-close:hover { background: rgba(255, 255, 255, .18); }
.nxg-zoom-close:focus-visible { outline: 2px solid var(--nxg-blue); outline-offset: 2px; }

/* ── Links that look like links (feeds, previews) ────────────────── */
/* At rest: a light tint of the hover blue, so it reads as clickable.
   Hover/focus: the full brand blue plus an underline that draws in. */
.nxg-link {
  color: #8FCDF3;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .2s ease;
}
.nxg-link:hover,
.nxg-link:focus-visible {
  color: #33AEF0;
  text-decoration-color: currentColor;
}
.nxg-link-name { font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────── */
.nxg-footer { overflow: hidden; background: linear-gradient(180deg, rgb(13 27 42 / 0), rgb(8 18 30 / .9)); }
.nxg-footer-glow {
  position: absolute; left: 50%; top: -1px; width: min(720px, 90%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0, 121, 194, .7), rgba(108, 71, 255, .7), transparent);
  box-shadow: 0 0 24px 2px rgba(0, 121, 194, .35);
}
.nxg-footer-heading { margin-bottom: .9rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
                      letter-spacing: .08em; text-transform: uppercase; color: #5B6E8C; }
.nxg-footer-link { font-size: .875rem; color: #8A9BB3; transition: color .15s ease; }
.nxg-footer-link:hover, .nxg-footer-link:focus-visible { color: #fff; }
@media (max-width: 767.98px) { body:has(.nxg-tabbar) .nxg-footer { padding-bottom: 4.5rem; } }

/* Social icon buttons */
.nxg-social {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
  color: #B4C0D2; background: #13233A; border: 1px solid #243650;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, translate .25s var(--nxg-ease-out), box-shadow .25s ease;
}
.nxg-social.is-sm { width: 36px; height: 36px; border-radius: 10px; }
.nxg-social:hover, .nxg-social:focus-visible { color: #fff; translate: 0 -2px; border-color: rgba(0, 121, 194, .6);
  box-shadow: 0 10px 24px -12px rgba(0, 121, 194, .7); }
.nxg-social-instagram:hover { border-color: rgba(225, 48, 108, .6); box-shadow: 0 10px 24px -12px rgba(225, 48, 108, .6); }

/* WhatsApp community CTA */
.nxg-community-btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-radius: .75rem;
  font-weight: 600; font-size: .875rem; color: #DCFCE7; background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .35);
  transition: background-color .2s ease, border-color .2s ease, translate .25s var(--nxg-ease-out), box-shadow .25s ease;
}
.nxg-community-btn:hover, .nxg-community-btn:focus-visible { background: rgba(37, 211, 102, .2); border-color: rgba(37, 211, 102, .6);
  translate: 0 -2px; box-shadow: 0 12px 28px -14px rgba(37, 211, 102, .6); }
.nxg-community-btn svg { color: #25D366; }

/* Share bar */
.nxg-share-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem; border-radius: .6rem;
  font-size: .8rem; font-weight: 600; color: #B4C0D2; background: #13233A; border: 1px solid #243650; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, scale .12s ease;
}
.nxg-share-btn[hidden] { display: none; }
.nxg-share-btn:hover, .nxg-share-btn:focus-visible { color: #fff; border-color: #34496A; }
.nxg-share-btn:active { scale: .96; }
.nxg-share-btn.is-primary { color: #fff; background: #0079C2; border-color: #0079C2; }
.nxg-share-btn.is-primary:hover { background: #1A94DD; }
.nxg-share-btn.is-done { color: #22C55E; border-color: rgba(34, 197, 94, .45); }
@media (max-width: 639.98px) {
  .nxg-share-heading { display: none; }
  .nxg-share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Big hero headings shrink to fit phones instead of breaking words */
@media (max-width: 639.98px) {
  .nxg-hero-title { font-size: clamp(1.85rem, 8.6vw, 2.6rem) !important; line-height: 1.12 !important; letter-spacing: -.01em; }
}

/* ── Profile completeness ring ─────────────────────────────────────── */
.nxg-ring { --pct: 0; width: 64px; height: 64px; flex-shrink: 0; }
.nxg-ring circle { fill: none; stroke-width: 6; }
.nxg-ring .nxg-ring-track { stroke: #1B2B40; }
.nxg-ring .nxg-ring-value { stroke: url(#nxg-ring-grad); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: 163.36; stroke-dashoffset: 163.36; transition: stroke-dashoffset 1.4s var(--nxg-ease-out) .2s; }
.nxg-ring.is-in .nxg-ring-value { stroke-dashoffset: calc(163.36 - 163.36 * var(--pct) / 100); }
.nxg-checklist-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600; color: #B4C0D2; background: #13233A; border: 1px dashed #34496A;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.nxg-checklist-chip:hover { color: #fff; border-color: #0079C2; border-style: solid; background: rgba(0, 121, 194, .12); }

/* ── How it works (home) ───────────────────────────────────────────── */
.nxg-steps { position: relative; counter-reset: step; }
.nxg-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: #1B2B40; }
.nxg-steps-fill { position: absolute; left: 21px; top: 22px; width: 2px; height: calc(100% - 44px); transform-origin: top; transform: scaleY(var(--fill, 0));
  background: linear-gradient(180deg, #0079C2, #6C47FF, #00B5B0); box-shadow: 0 0 12px rgba(0, 121, 194, .6);
  transition: transform 1.6s var(--nxg-ease-out) .25s; }
@media (min-width: 1024px) {
  .nxg-steps::before { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .nxg-steps-fill { left: 22px; top: 21px; width: calc(100% - 44px); height: 2px; transform-origin: left; transform: scaleX(var(--fill, 0)); }
}
.nxg-step-dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 9999px; color: #8FCDF3; background: #0D1B2A; border: 2px solid #243650; transition: border-color .4s ease, box-shadow .4s ease, color .4s ease; }
.is-revealed .nxg-step-dot { border-color: #0079C2; color: #fff; box-shadow: 0 0 0 6px rgba(0, 121, 194, .12); }

/* ── Blog: reading progress + code copy ────────────────────────────── */
.nxg-read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%;
  transform: scaleX(var(--read, 0)); background: linear-gradient(90deg, #0079C2, #6C47FF); pointer-events: none; }
.nxg-code-wrap { position: relative; }
.nxg-code-copy { position: absolute; top: .5rem; right: .5rem; padding: .25rem .6rem; border-radius: .45rem; font-size: .72rem; font-weight: 600;
  color: #B4C0D2; background: rgb(13 27 42 / .85); border: 1px solid #243650; opacity: 0; transition: opacity .15s ease, color .15s ease; cursor: pointer; }
.nxg-code-wrap:hover .nxg-code-copy, .nxg-code-copy:focus-visible { opacity: 1; }
.nxg-code-copy.is-done { color: #22C55E; opacity: 1; }
@media (hover: none) { .nxg-code-copy { opacity: 1; } }

/* ── Command palette (Ctrl/Cmd + K) ────────────────────────────────── */
.nxg-cmdk { position: fixed; inset: 0; z-index: 250; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem;
  background: rgb(5 12 22 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: nxg-fade-in .15s ease; }
.nxg-cmdk-box { width: 100%; max-width: 560px; overflow: hidden; border-radius: 1rem; background: #112236; border: 1px solid #243650;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); animation: nxg-pop-in .2s var(--nxg-ease-out) both; transform-origin: top center; }
.nxg-cmdk-input { width: 100%; padding: 1rem 1.1rem; background: transparent; border: 0; border-bottom: 1px solid #243650; color: #fff; font-size: 1rem; outline: none; }
.nxg-cmdk-input::placeholder { color: #5B6E8C; }
.nxg-cmdk-list { max-height: min(52vh, 420px); overflow-y: auto; padding: .4rem; margin: 0; list-style: none; }
.nxg-cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border-radius: .6rem;
  color: #B4C0D2; font-size: .9rem; cursor: pointer; }
.nxg-cmdk-item[aria-selected="true"] { color: #fff; background: rgba(0, 121, 194, .16); }
.nxg-cmdk-item small { color: #5B6E8C; font-size: .72rem; }
.nxg-cmdk-empty { padding: 1.2rem; color: #5B6E8C; font-size: .875rem; text-align: center; }
.nxg-cmdk-foot { display: flex; gap: 1rem; padding: .55rem .9rem; border-top: 1px solid #243650; color: #5B6E8C; font-size: .72rem; }
.nxg-kbd { display: inline-flex; align-items: center; padding: 0 .35rem; min-width: 1.3rem; height: 1.3rem; border-radius: .3rem;
  border: 1px solid #34496A; color: #8A9BB3; font-size: .7rem; font-family: "JetBrains Mono", ui-monospace, monospace; }
@keyframes nxg-fade-in { from { opacity: 0; } }

/* Keyboard hints only make sense with a keyboard */
.nxg-desktop-only { display: none; }
@media (min-width: 1024px) and (hover: hover) { .nxg-desktop-only { display: inline; } .nxg-mobile-only { display: none; } }

/* Confetti canvas (approval moment) */
.nxg-confetti { position: fixed; inset: 0; z-index: 260; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Sample (seeded demo) profiles: understated, always present */
.nxg-sample-tag { display: inline-flex; align-items: center; flex-shrink: 0; height: 1.15rem; padding: 0 .4rem; border-radius: 9999px;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; cursor: help;
  color: #8A9BB3; border: 1px solid #34496A; background: rgba(138, 155, 179, .06); vertical-align: middle; }

/* ── Meet the Collective cards (home) ──────────────────────────────── */
.nxg-ccard { transition: translate .25s var(--nxg-ease-out), box-shadow .25s ease, border-color .2s ease; }
@media (hover: hover) {
  .nxg-ccard:hover { translate: 0 -4px; border-color: #34496A; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 121, 194, .18); }
}
.nxg-ccard-name { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: #fff; }
a.nxg-ccard-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
a.nxg-ccard-name:focus-visible { outline: none; }
.nxg-ccard:has(a.nxg-ccard-name:focus-visible) { outline: 2px solid #0079C2; outline-offset: 3px; }
.nxg-ccard:hover a.nxg-ccard-name { color: #8FCDF3; }
.nxg-ccard-avatar { position: relative; flex-shrink: 0; width: 52px; height: 52px; border-radius: 9999px; padding: 2px;
  background: #243650; }
.nxg-ccard-avatar > img, .nxg-ccard-initials { border-radius: 9999px; }
.nxg-ccard-avatar.is-open { background: conic-gradient(from 180deg, #22C55E, #00B5B0, #0079C2, #22C55E); }
.nxg-ccard-avatar.is-open::after { content: ""; position: absolute; inset: -3px; border-radius: 9999px; border: 2px solid rgba(34, 197, 94, .35);
  animation: nxg-open-pulse 2.4s ease-out infinite; }
@keyframes nxg-open-pulse { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.18); } }
.nxg-ccard-initials { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0079C2, #6C47FF); }
.nxg-ccard-new { position: absolute; left: 50%; bottom: -7px; z-index: 1; transform: translateX(-50%); padding: 0 .4rem; border-radius: 9999px;
  font-size: .6rem; font-weight: 800; line-height: 1.35rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: #1A1206; background: #FBBF24; box-shadow: 0 0 0 2px #13233A; }
.nxg-ccard-tag { padding: .15rem .5rem; border-radius: .4rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem;
  color: #B4C0D2; background: #1B2B40; border: 1px solid #243650; }
.nxg-ccard-tag.is-more { color: #5B6E8C; }
.nxg-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxg-ccard-view { color: #8FCDF3; transition: color .15s ease; }
.nxg-ccard:hover .nxg-ccard-view { color: #33AEF0; }

.nxg-follow-btn { min-width: 92px; height: 34px; padding: 0 .9rem; border-radius: .6rem; font-size: .8rem; font-weight: 700; cursor: pointer;
  color: #fff; background: #0079C2; border: 1px solid #0079C2; transition: background-color .15s ease, border-color .15s ease, color .15s ease, scale .12s ease; }
.nxg-follow-btn:hover { background: #1A94DD; }
.nxg-follow-btn:active { scale: .95; }
.nxg-follow-btn .nxg-follow-on, .nxg-follow-btn .nxg-follow-hover { display: none; }
.nxg-follow-btn[aria-pressed="true"] { color: #B4C0D2; background: transparent; border-color: #34496A; }
.nxg-follow-btn[aria-pressed="true"] .nxg-follow-off { display: none; }
.nxg-follow-btn[aria-pressed="true"] .nxg-follow-on { display: inline; }
@media (hover: hover) {
  .nxg-follow-btn[aria-pressed="true"]:hover { color: #FCA5A5; border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .08); }
  .nxg-follow-btn[aria-pressed="true"]:hover .nxg-follow-on { display: none; }
  .nxg-follow-btn[aria-pressed="true"]:hover .nxg-follow-hover { display: inline; }
}
.nxg-follow-btn.htmx-request { opacity: .7; cursor: progress; }
.nxg-bump { animation: nxg-pop .45s var(--nxg-ease-spring); display: inline-block; }

.nxg-sort-chip { flex-shrink: 0; white-space: nowrap; padding: .4rem .85rem; border-radius: 9999px; font-size: .78rem; font-weight: 600;
  color: #B4C0D2; background: #13233A; border: 1px solid #243650; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.nxg-sort-chip:hover { color: #fff; border-color: #34496A; }
.nxg-sort-chip.is-active { color: #fff; background: #0079C2; border-color: #0079C2; }

.nxg-ccard-join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 220px; padding: 1.5rem;
  text-align: center; border-radius: 1rem; border: 1.5px dashed #34496A; background: rgba(0, 121, 194, .04);
  transition: border-color .2s ease, background-color .2s ease, translate .25s var(--nxg-ease-out); }
.nxg-ccard-join:hover { border-color: #0079C2; background: rgba(0, 121, 194, .09); translate: 0 -4px; }
.nxg-ccard-join-plus { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: .35rem; border-radius: 9999px;
  font-size: 1.6rem; font-weight: 300; color: #8FCDF3; border: 1.5px dashed #34496A; transition: transform .35s var(--nxg-ease-spring), border-color .2s ease; }
.nxg-ccard-join:hover .nxg-ccard-join-plus { transform: rotate(90deg); border-color: #0079C2; }
[data-collective-item].is-filtered-out { display: none; }

/* Printing / "save as PDF" always shows everything */
@media print {
  html.nxg-motion [data-reveal], html.nxg-motion [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  #nxg-progress, .nxg-float-emoji, .nxg-zoom, .nxg-read-progress, .nxg-cmdk, .nxg-confetti, .nxg-code-copy { display: none !important; }
}

/* ── Motion policy (D-16.18) ─────────────────────────────────────────
   NXG's ambient visuals (the hero circuit, the network connector, the
   map, the ticker, the logo shine, live dots, the vetting routes) move on
   every device. With the device's "reduce motion" setting on:
   * interface movement (menus, dialogs, lifts, smooth scrolling) is
     instant, as before;
   * scroll reveals fade in place instead of sliding (html.nxg-calm);
   * the ambient visuals keep moving, more slowly and gently.
   "Pause animations" in the footer (html.nxg-still, saved on this
   device) stops all of it, which is also the pause control WCAG 2.2.2
   asks for. */
@media (prefers-reduced-motion: reduce) {
  :not(:is([data-ambient], [data-ambient] *, .nxg-hero-board, .nxg-hero-board *, .nxg-net, .nxg-net *, .nxg-map, .nxg-map *, .nxg-ticker, .nxg-ticker *, .nxg-routes, .nxg-routes *, .nxg-logo, .nxg-live-dot, .nxg-about-steps, .nxg-ccard-avatar, [data-reveal], [data-reveal-stagger] > *)),
  :not(:is([data-ambient], [data-ambient] *, .nxg-hero-board, .nxg-hero-board *, .nxg-net, .nxg-net *, .nxg-map, .nxg-map *, .nxg-ticker, .nxg-ticker *, .nxg-routes, .nxg-routes *, .nxg-logo, .nxg-live-dot, .nxg-about-steps, .nxg-ccard-avatar, [data-reveal], [data-reveal-stagger] > *))::before,
  :not(:is([data-ambient], [data-ambient] *, .nxg-hero-board, .nxg-hero-board *, .nxg-net, .nxg-net *, .nxg-map, .nxg-map *, .nxg-ticker, .nxg-ticker *, .nxg-routes, .nxg-routes *, .nxg-logo, .nxg-live-dot, .nxg-about-steps, .nxg-ccard-avatar, [data-reveal], [data-reveal-stagger] > *))::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .nxg-lift:hover, .nxg-lift-children > *:hover { translate: none; }
}
html.nxg-calm .nxg-circuit-pulses path { animation-duration: calc(var(--t, 6s) * 1.8); }
html.nxg-calm .nxg-core-ring.is-outer { animation-duration: 70s; }
html.nxg-calm .nxg-net-link { animation-duration: 11s; }
html.nxg-calm .nxg-net-node { animation-duration: .6s, 9s; }
html.nxg-calm .nxg-routes-line { animation-duration: 9s; }
html.nxg-calm .nxg-map-ring { animation-duration: 5.5s; }
html.nxg-calm .nxg-live-dot::before { animation-duration: 3s; }
html.nxg-still *, html.nxg-still *::before, html.nxg-still *::after { animation: none !important; }
html.nxg-still .nxg-circuit-pulses path { opacity: 0; }

/* ── Dialogs (followers / following) ──────────────────────────────── */
.nxg-dialog-in { animation: nxg-dialog-in .28s var(--nxg-ease-out) both; }
[data-nxg-dialog] [data-dialog-backdrop] { animation: nxg-fade-in .2s ease-out both; }
@keyframes nxg-dialog-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes nxg-fade-in { from { opacity: 0; } }
@media (min-width: 640px) {
  @keyframes nxg-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* ── Rendered Markdown (.prose) ────────────────────────────────────
   Blog posts, project case studies, bounty briefs, bios and comments
   are rendered Markdown inside .prose — but the Tailwind typography
   plugin was never installed, so .prose did nothing: headings, lists,
   quotes and spacing all collapsed into plain lines. These rules give
   that HTML the platform's type scale. Body colour comes from the
   wrapper's own text-* class. */
.prose { line-height: 1.75; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table, .prose figure { margin: 0 0 1.1em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: #F9FAFB; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  margin: 1.8em 0 0.6em; scroll-margin-top: 5rem;
}
.prose h1 { font-size: 1.75em; }
.prose h2 { font-size: 1.45em; }
.prose h3 { font-size: 1.2em; }
.prose h4, .prose h5, .prose h6 { font-size: 1.05em; }
.prose a { color: #0EA5E9; text-decoration: underline; text-decoration-color: rgba(14, 165, 233, .4); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: #F9FAFB; font-weight: 600; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.5em; }
.prose li { margin: 0.35em 0; padding-left: 0.2em; }
.prose li::marker { color: #8A94A6; }
.prose li > ul, .prose li > ol { margin: 0.35em 0; }
.prose blockquote { border-left: 3px solid #0079C2; padding: 0.2em 0 0.2em 1em; color: #D1D5DB; font-style: italic; }
.prose hr { border: 0; border-top: 1px solid #243B5C; margin: 2em 0; }
.prose :not(pre) > code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.875em;
  background: #1E3A5F; color: #E5E7EB; padding: 0.15em 0.4em; border-radius: 0.35rem;
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prose img { border-radius: 0.75rem; margin: 1.5em 0; }
.prose th, .prose td { border: 1px solid #243B5C; padding: 0.45em 0.75em; text-align: left; }
.prose th { background: #1E3A5F; color: #F9FAFB; font-weight: 600; }
.prose-sm { font-size: 0.875rem; line-height: 1.65; }
.prose-sm p, .prose-sm ul, .prose-sm ol, .prose-sm blockquote { margin-bottom: 0.8em; }
/* Comments are short: tighter rhythm, no oversized headings. */
.nxg-comment-body.prose p, .nxg-comment-body.prose ul, .nxg-comment-body.prose ol { margin-bottom: 0.5em; }
.nxg-comment-body.prose h1, .nxg-comment-body.prose h2, .nxg-comment-body.prose h3 { font-size: 1em; margin: 0.8em 0 0.3em; }

/* ── Snippet code window (line numbers) ─────────────────────────── */
.nxg-snippet-code .highlight { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 0; }
.nxg-snippet-code .highlighttable { border-collapse: collapse; width: 100%; }
.nxg-snippet-code .highlighttable td { padding: 0; vertical-align: top; }
.nxg-snippet-code td.linenos { width: 1%; user-select: none; -webkit-user-select: none; border-right: 1px solid #1E3A5F; }
.nxg-snippet-code td.linenos pre { margin: 0; padding: 1rem 0.75rem 1rem 1rem; text-align: right; color: #5B6B82; background: transparent; border: 0; border-radius: 0; }
.nxg-snippet-code td.linenos .normal { color: #5B6B82; background: transparent; padding: 0; }
.nxg-snippet-code td.code pre { margin: 0; padding: 1rem 1.25rem; background: transparent; border: 0; border-radius: 0; }
.nxg-snippet-code pre { line-height: 1.65; font-size: 0.8125rem; }
@media (min-width: 640px) { .nxg-snippet-code pre { font-size: 0.875rem; } }

/* ── Project card placeholder (no thumbnail) ────────────────────── */
.nxg-project-placeholder {
  background: radial-gradient(120% 90% at 0% 0%, rgba(0, 121, 194, .45), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(108, 71, 255, .40), transparent 60%),
    #1E3A5F;
}

/* ── Busy label swap (e.g. GitHub "Verify") ────────────────────────
   Only one label occupies space at a time; htmx adds .htmx-request to
   the element making the request. */
.nxg-busy-swap .nxg-when-busy { display: none; }
.nxg-busy-swap.htmx-request .nxg-when-busy { display: inline-flex; }
.nxg-busy-swap.htmx-request .nxg-when-idle { display: none; }

/* ── Phones: form rows never push past the screen ──────────────────
   A text input that is a flex item keeps a built-in minimum width
   (about 20 characters), so "input + button" rows overflowed narrow
   screens. Let such inputs shrink; buttons beside them keep their size. */
.flex > input:not([type="checkbox"]):not([type="radio"]),
.flex > select,
.flex > textarea { min-width: 0; }

/* ── Chat (Messages) ────────────────────────────────────────────── */
.nxg-chat-btn-primary,
.nxg-chat-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 600; line-height: 1.25rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.nxg-chat-btn-primary { background: #0079C2; color: #fff; box-shadow: 0 8px 20px -10px rgba(0, 121, 194, .7); }
.nxg-chat-btn-primary:hover:not(:disabled) { background: #0EA5E9; }
.nxg-chat-btn-ghost { background: #1A2E44; color: #E5E7EB; border: 1px solid #243B5C; }
.nxg-chat-btn-ghost:hover { background: #1E3A5F; color: #fff; }

/* Pop-over menus built on <details> (chat ⋮, message actions). */
.nxg-menu {
  position: absolute; z-index: 40; padding: 0.375rem 0;
  background: #1A2E44; border: 1px solid #243B5C; border-radius: 0.875rem;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65);
}
.nxg-menu.nxg-menu-up { top: auto !important; bottom: 100%; margin-top: 0; margin-bottom: 0.25rem; }
.nxg-menu-item {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.875rem;
  font-size: 0.875rem; color: #E5E7EB; transition: background-color .12s, color .12s;
}
.nxg-menu-item:hover, .nxg-menu-item:focus-visible { background: #1E3A5F; color: #fff; outline: none; }
.nxg-menu-danger { color: #F87171; }
.nxg-menu-danger:hover, .nxg-menu-danger:focus-visible { background: rgba(220, 38, 38, .12); color: #FCA5A5; }
details[data-chat-menu] > summary::-webkit-details-marker { display: none; }
details > summary.list-none::-webkit-details-marker { display: none; }

/* Message actions: shown on hover / focus; always there on touch screens. */
.nxg-msg-actions { opacity: 0; transition: opacity .12s; }
.nxg-msg:hover .nxg-msg-actions, .nxg-msg-actions:focus-within, .nxg-msg-actions[open] { opacity: 1; }
@media (hover: none) { .nxg-msg-actions { opacity: .75; } }
.nxg-msg-flash .nxg-bubble { animation: nxg-msg-flash 1.2s ease-out; }
@keyframes nxg-msg-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(14, 165, 233, .7); } 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } }

/* Formatting inside messages (apps/messaging/templatetags/chat.py). */
.nxg-chat-text { white-space: normal; overflow-wrap: anywhere; }
.nxg-chat-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .45); }
.nxg-chat-link:hover { text-decoration-color: currentColor; }
.nxg-bubble:not(.nxg-bubble-mine) .nxg-chat-link { color: #38BDF8; text-decoration-color: rgba(56, 189, 248, .4); }
.nxg-chat-code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.82em;
  background: rgb(3 11 20 / .45); padding: 0.1em 0.38em; border-radius: 0.35rem;
}
.nxg-chat-pre { position: relative; margin: 0.35rem 0; border-radius: 0.6rem; background: #030B14; border: 1px solid rgba(255, 255, 255, .08); }
.nxg-chat-pre pre {
  margin: 0; padding: 0.65rem 0.75rem; overflow-x: auto; max-height: 22rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; line-height: 1.55;
  color: #E5E7EB; white-space: pre;
}
.nxg-chat-pre-lang {
  display: block; padding: 0.3rem 0.75rem 0; font-size: 0.65rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8A94A6;
}
.nxg-composer-error {
  margin-bottom: 0.5rem; padding: 0.45rem 0.75rem; border-radius: 0.6rem;
  background: rgba(220, 38, 38, .12); border: 1px solid rgba(220, 38, 38, .35);
  color: #FCA5A5; font-size: 0.8125rem;
}
.nxg-composer-drop { outline: 2px dashed #0EA5E9; outline-offset: -6px; background: rgba(0, 121, 194, .06); }

/* ── Confirm dialog (nxg-ui.js section 23) ──────────────────────── */
.nxg-confirm-card { animation: nxg-confirm-in .16s ease-out; }
@keyframes nxg-confirm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nxg-confirm-card, .nxg-msg-flash .nxg-bubble { animation: none; } }
/* The hidden attribute must win over display utilities (e.g. inline-flex). */
[data-chat-jump][hidden], [data-composer-context][hidden] { display: none !important; }

/* ── NXG logo lockup: glow, light sweep, core-star twinkle ───────────
   components/brand/logo.html. The sweep (::after) is masked to the
   logo's own pixels via --nxg-logo-mask, so only the chrome letters and
   the icon catch the light. The twinkle (::before) sits on the star at
   the centre of the icon's X (15.8% across, 51% down the lockup). */
.nxg-logo { position: relative; display: inline-block; line-height: 0; isolation: isolate; flex-shrink: 0; }
.nxg-logo picture, .nxg-logo img { display: block; height: 100%; width: auto; }
.nxg-logo img {
  /* A tight glow keeps the letter edges crisp; the wide, soft halo is a
     separate blurred layer behind the logo (picture: :after below). */
  filter: drop-shadow(0 0 3px rgba(80, 160, 255, .35));
  transition: filter .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.nxg-logo picture { position: relative; z-index: 0; }
.nxg-logo picture::after {
  content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .28), rgba(124, 77, 255, .12) 60%, transparent);
  filter: blur(10px); pointer-events: none; transition: opacity .45s ease; opacity: .8;
}
a:hover .nxg-logo picture::after { opacity: 1; }
a:hover .nxg-logo img, a:focus-visible .nxg-logo img {
  filter: drop-shadow(0 0 4px rgba(90, 170, 255, .55));
}
.nxg-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .0) 42%, rgba(255, 255, 255, .85) 50%, rgba(180, 225, 255, .0) 58%, transparent 62%);
  background-size: 300% 100%; background-position: 130% 0; background-repeat: no-repeat;
  -webkit-mask-image: var(--nxg-logo-mask); mask-image: var(--nxg-logo-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen; opacity: .9;
}
.nxg-logo::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: 15.8%; top: 51%; width: 1.1em; height: 1.1em; transform: translate(-50%, -50%) scale(.6);
  font-size: var(--nxg-star, 22px);
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 8%, rgba(150, 215, 255, .55) 18%, transparent 46%),
    linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .7) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .7) 50%, transparent 54%);
  border-radius: 50%; opacity: 0; mix-blend-mode: screen;
}
.nxg-logo--nav { height: 2.5rem; --nxg-star: 16px; }
.nxg-logo--footer { height: 3.4rem; --nxg-star: 22px; }
.nxg-logo--auth { height: 4.6rem; --nxg-star: 28px; }
@media (max-width: 359.98px) { .nxg-logo--nav { height: 2.2rem; } }
@media (min-width: 640px) { .nxg-logo--nav { height: 2.75rem; } .nxg-logo--auth { height: 5.2rem; } }
/* One sweep shortly after load, then one every 9 s; the star twinkles
   just after the sweep passes it. Hovering the logo sweeps at once. */
.nxg-logo::after { animation: nxg-logo-sweep 9s cubic-bezier(.4, 0, .2, 1) .8s infinite; }
.nxg-logo::before { animation: nxg-logo-star 9s ease-out .8s infinite; }
a:hover .nxg-logo::after { animation: nxg-logo-sweep-now 1.1s cubic-bezier(.4, 0, .2, 1) 1; }
@keyframes nxg-logo-sweep { 0% { background-position: 130% 0; } 14%, 100% { background-position: -30% 0; } }
@keyframes nxg-logo-sweep-now { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes nxg-logo-star {
  0%, 2% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  6% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(45deg); }
  12%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(90deg); }
}

/* ── Snippets: page, cards, code preview, language pills ─────────────
   templates/snippets/* and components/cards/snippet_card.html.
   Every language carries its own colour as --lang (GitHub's palette,
   apps/snippets/models.LANGUAGE_COLORS); pills and dots mix it. */
.nxg-snip-page { isolation: isolate; }
.nxg-snip-aura {
  position: absolute; inset: -3rem 0 auto; height: 22rem; z-index: -1; pointer-events: none;
  background: radial-gradient(38rem 14rem at 12% 10%, rgba(47, 123, 255, .16), transparent 70%),
    radial-gradient(30rem 12rem at 85% 0%, rgba(124, 77, 255, .14), transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.nxg-cta-gradient {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  padding: .7rem 1.15rem; border-radius: .85rem; color: #fff; font-weight: 600; font-size: .875rem;
  background: linear-gradient(100deg, #1E6BFF 0%, #4A5CFF 55%, #7C4DFF 100%);
  box-shadow: 0 10px 28px -10px rgba(58, 104, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: box-shadow .2s ease, filter .2s ease;
}
.nxg-cta-gradient:hover { filter: brightness(1.08); box-shadow: 0 14px 34px -10px rgba(98, 104, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
.nxg-cta-gradient:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 3px; }
.nxg-snip-search input { border-radius: .9rem; background: rgb(17 30 52 / .8); border-color: rgba(255, 255, 255, .08); }

.nxg-snip-chip {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; cursor: pointer;
  padding: .5rem 1rem; border-radius: 9999px; font-size: .875rem; font-weight: 500; color: #C9D4E5;
  background: rgb(17 30 52 / .75); border: 1px solid rgba(255, 255, 255, .08);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nxg-snip-chip:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
.nxg-snip-chip.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(100deg, #1E6BFF, #3D63FF); box-shadow: 0 6px 18px -8px rgba(30, 107, 255, .9);
}
.nxg-snip-chip:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-snip-chip--menu { width: 100%; justify-content: flex-start; padding: .45rem .7rem; }
details[data-pop] > summary::-webkit-details-marker { display: none; }

.nxg-lang-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--lang, #8A9BB3); flex-shrink: 0;
                box-shadow: 0 0 6px color-mix(in srgb, var(--lang, #8A9BB3) 70%, transparent); }
.nxg-lang-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600;
  color: color-mix(in srgb, var(--lang, #8A9BB3) 55%, #fff);
  background: color-mix(in srgb, var(--lang, #8A9BB3) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--lang, #8A9BB3) 35%, transparent);
}
.nxg-snip-tag {
  display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 500; color: #B9C6DA;
  background: rgba(36, 58, 92, .55); border: 1px solid rgba(255, 255, 255, .06);
}

.nxg-snip {
  background: linear-gradient(180deg, rgb(19 34 59 / .92) 0%, rgb(13 25 44 / .92) 100%);
  border: 1px solid rgba(110, 150, 230, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s ease, box-shadow .25s ease;
}
.nxg-snip:hover, .nxg-snip:focus-within {
  z-index: 2; border-color: rgba(90, 150, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(90, 150, 255, .12), 0 22px 48px -24px rgba(47, 123, 255, .55);
}
.nxg-snip-link:focus-visible::after { outline: 2px solid #7DB4FF; outline-offset: 2px; }

.nxg-snip-code {
  position: relative; border-radius: .85rem; overflow: hidden;
  background: #081322; border: 1px solid rgba(120, 155, 210, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.nxg-snip-code .highlight { margin: 0; background: transparent; border: 0; padding: 0; }
.nxg-snip-code pre {
  margin: 0; padding: .85rem 1rem; background: transparent; border: 0; border-radius: 0; overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: .75rem; line-height: 1.65;
  white-space: pre; color: #D6DEEB;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent), linear-gradient(#000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 88%, transparent), linear-gradient(#000 70%, transparent);
  mask-composite: intersect;
}
@media (min-width: 640px) { .nxg-snip-code pre { font-size: .78rem; } }
.nxg-snip-more {
  position: absolute; right: .6rem; bottom: .45rem; padding: .05rem .45rem; border-radius: 9999px;
  font-size: .6875rem; color: #8A9BB3; background: rgb(8 19 34 / .9); border: 1px solid rgba(255, 255, 255, .06);
}
.nxg-snip-faces { display: inline-flex; }
.nxg-snip-faces > * + * { margin-left: -.45rem; }
.nxg-snip-faces > * { box-shadow: 0 0 0 2px #10203A; }
.nxg-snip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  height: 2.1rem; padding: 0 .7rem; border-radius: .6rem; font-size: .8125rem; font-weight: 600; color: #C9D4E5;
  transition: color .15s ease, background .15s ease;
}
.nxg-snip-btn:hover, details[open] > .nxg-snip-btn { color: #fff; background: rgba(255, 255, 255, .06); }
.nxg-snip-btn:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 1px; }
.nxg-snip-btn--icon { width: 2.1rem; padding: 0; }
.nxg-snip-btn.is-copied { color: #4ADE80; }

.nxg-snip-trending { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 78%); gap: .75rem;
                     overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; }
.nxg-snip-trending > * { scroll-snap-align: start; }
@media (min-width: 640px) { .nxg-snip-trending { grid-auto-columns: minmax(13rem, 1fr); } }
@media (min-width: 1024px) { .nxg-snip-trending { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.nxg-snip-trend {
  display: flex; flex-direction: column; min-height: 8.5rem; padding: .9rem 1rem; border-radius: 1rem;
  background: linear-gradient(180deg, rgb(19 34 59 / .9), rgb(13 25 44 / .9));
  border: 1px solid rgba(110, 150, 230, .14); transition: border-color .2s ease, box-shadow .25s ease;
}
.nxg-snip-trend:hover, .nxg-snip-trend:focus-visible {
  border-color: color-mix(in srgb, var(--lang, #2F7BFF) 55%, transparent);
  box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--lang, #2F7BFF) 80%, transparent); outline: none;
}

/* ── Notifications: "New" rows (nxg-ui.js section 27) ────────────────
   A row new since the member last looked keeps a soft highlight and a
   "New" label for that one view (the list marks it read as it shows it).
   "Remove" fades the row out (htmx swap delay). */
.nxg-notif-item.is-new { background: linear-gradient(90deg, rgba(47, 123, 255, .10), rgba(47, 123, 255, .02) 70%); }
.nxg-notif-item.is-new::before { content: ""; position: absolute; left: 0; top: .75rem; bottom: .75rem; width: 3px; border-radius: 0 3px 3px 0;
                                 background: linear-gradient(180deg, #2F7BFF, #7C4DFF); }
.nxg-notif-new { display: inline-flex; align-items: center; padding: 0 .4rem; height: 1.05rem; border-radius: 9999px;
                 font-size: .625rem; font-weight: 700; letter-spacing: .02em; color: #fff;
                 background: linear-gradient(100deg, #1E6BFF, #6A4DFF); }
.nxg-notif-item.htmx-swapping { opacity: 0; transform: translateX(8px); transition: opacity .15s ease, transform .15s ease; }
@media (hover: hover) {
  .nxg-notif-action { opacity: 0; transition: opacity .15s ease; }
  .nxg-notif-item:hover .nxg-notif-action, .nxg-notif-action:focus-visible { opacity: 1; }
}

/* ── Initials avatars: one colour per member ─────────────────────────
   Members without a photo show their initial on their own gradient
   (core/templatetags/tag_extras.avatar_tint sets --av-a / --av-b from
   their account id, so they look the same everywhere). The initial
   fills its round frame; white letters stay readable on every pair. */
.nxg-initials {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(140deg, var(--av-a, #3B82F6), var(--av-b, #1D4ED8));
  color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ── Stack tag suggestions (profiles/partials/stack_tags_list.html) ── */
.nxg-tag-suggest {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 500; color: #B9C6DA; cursor: pointer;
  background: rgba(36, 58, 92, .35); border: 1px dashed rgba(125, 180, 255, .35);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nxg-tag-suggest:hover { color: #fff; border-style: solid; border-color: rgba(125, 180, 255, .7); background: rgba(47, 123, 255, .15); }
.nxg-tag-suggest:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 2px; }

/* ── About page (templates/pages/about.html, Phase 15) ─────────────────
   One idea carries the page: the circuit trace from the NXG mark. It
   joins "From Code" to "to Impact" in the hero and runs through the four
   verification steps, lighting up once when they scroll into view. The
   rest stays quiet: two portrait treatments (the founder plate, the team
   cards) and plain type. Cards are single links (stretched link) with
   their buttons lifted above it. */
.nxg-about-hero-bg {
  background: radial-gradient(60rem 28rem at 85% -10%, rgba(108, 71, 255, .16), transparent 60%),
    radial-gradient(40rem 24rem at -10% 10%, rgba(0, 121, 194, .14), transparent 60%);
}
.nxg-about-display { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -.02em; }
.nxg-about-motto { padding: 1.75rem 0 0; border-top: 1px solid rgba(36, 59, 92, .9); }
.nxg-about-motto-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: 1.05; letter-spacing: -.015em; color: #fff;
}
.nxg-about-trace-mini { width: clamp(4.5rem, 3rem + 4vw, 7.5rem); height: auto; flex-shrink: 0; }

.nxg-about-founder-photo { min-height: 22rem; aspect-ratio: 4 / 5; background: #020617; }
@media (min-width: 1024px) { .nxg-about-founder-photo { aspect-ratio: auto; min-height: 34rem; } }
.nxg-about-founder-photo img { position: absolute; inset: 0; }
.nxg-about-founder::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(108, 71, 255, 0); transition: box-shadow .2s ease;
}
.nxg-about-founder:hover::before, .nxg-about-member:hover { box-shadow: inset 0 0 0 1px rgba(125, 180, 255, .45); }
.nxg-about-member { transition: box-shadow .2s ease, border-color .2s ease; }
.nxg-about-member:hover { border-color: rgba(125, 180, 255, .45); }
@media (prefers-reduced-motion: no-preference) {
  .nxg-about-member-photo { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .nxg-about-member:hover .nxg-about-member-photo { transform: scale(1.03); }
}
.nxg-about-cardlink::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.nxg-about-cardlink:focus-visible::after { outline: 2px solid #7DB4FF; outline-offset: -2px; }
.nxg-about-founder .relative.z-10, .nxg-about-member .relative.z-10 { z-index: 3; }

.nxg-about-social {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: .6rem;
  font-size: .8125rem; font-weight: 600; color: #D7E1EF; background: rgb(26 46 68 / .7); border: 1px solid #243B5C;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nxg-about-social:hover { color: #fff; border-color: rgba(125, 180, 255, .6); background: rgba(0, 121, 194, .14); }
.nxg-about-social:focus-visible, .nxg-about-ghost:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-about-ghost {
  display: inline-flex; align-items: center; padding: .65rem 1.1rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 600; color: #fff; border: 1px solid #2D4566; background: rgb(13 27 42 / .6);
  transition: border-color .15s ease;
}
.nxg-about-ghost:hover { border-color: #47658F; }

/* The verification trace: vertical on phones, a horizontal circuit from
   768px. The line is drawn by the list itself; the pulse runs once. */
.nxg-about-steps { position: relative; display: grid; gap: 1.75rem; padding-left: 0; list-style: none; }
.nxg-about-steps::before {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem; width: 2px;
  background: linear-gradient(180deg, #0079C2, #6C47FF 60%, #00B5B0); opacity: .55;
}
.nxg-about-step { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
.nxg-about-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .875rem; font-weight: 700; color: #fff;
  background: #0D1B2A; border: 2px solid #2D4566; transition: border-color .4s ease, box-shadow .4s ease;
}
.nxg-about-steps.is-revealed .nxg-about-node { border-color: #00B5B0; box-shadow: 0 0 0 4px rgba(0, 181, 176, .12); }
.nxg-about-steps.is-revealed .nxg-about-step:nth-child(2) .nxg-about-node { transition-delay: .15s; }
.nxg-about-steps.is-revealed .nxg-about-step:nth-child(3) .nxg-about-node { transition-delay: .3s; }
.nxg-about-steps.is-revealed .nxg-about-step:nth-child(4) .nxg-about-node { transition-delay: .45s; }
@media (min-width: 768px) {
  .nxg-about-steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 1.5rem; }
  .nxg-about-steps::before { left: 1.25rem; right: 1.25rem; top: 1.25rem; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, #0079C2, #6C47FF 60%, #00B5B0); }
  .nxg-about-step { grid-template-columns: 1fr; gap: .9rem; }
}
.nxg-about-steps::after {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; width: 10px; height: 10px; margin: -4px 0 0 -4px;
  border-radius: 9999px; background: #7FF2EE; box-shadow: 0 0 14px 4px rgba(0, 181, 176, .7); opacity: 0;
}
.nxg-about-steps.is-revealed::after { animation: nxg-trace-down 1.6s cubic-bezier(.4, 0, .2, 1) .1s 1 forwards; }
@media (min-width: 768px) {
  .nxg-about-steps.is-revealed::after { animation-name: nxg-trace-across; }
}
@keyframes nxg-trace-down { 0% { opacity: 0; top: 1.25rem; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 1.25rem); } }
@keyframes nxg-trace-across { 0% { opacity: 0; left: 1.25rem; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 1.25rem); } }

.nxg-about-cta {
  background: radial-gradient(30rem 16rem at 100% 0%, rgba(108, 71, 255, .22), transparent 70%),
    radial-gradient(26rem 14rem at 0% 100%, rgba(0, 181, 176, .14), transparent 70%),
    #0F2236;
}
/* One or two team members: on wide screens the portrait sits beside the
   text instead of towering over it. */
@media (min-width: 1024px) {
  .nxg-about-team-wide .nxg-about-member { flex-direction: row; }
  .nxg-about-team-wide .nxg-about-member > div:first-child { width: 42%; flex-shrink: 0; aspect-ratio: auto; min-height: 21rem; }
}
@media (max-width: 1023px) { .nxg-about-founder-photo { max-height: 34rem; } }

/* ── Account tags (Phase 11): one tag per person, PRD v2.1 §4.2 colours ── */
.nxg-tag {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; height: 1.375rem; padding: 0 .55rem;
  border-radius: 9999px; border: 1px solid transparent; font-family: Inter, system-ui, sans-serif;
  font-size: .6875rem; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle;
  --nxg-tag-tick: #0D1B2A;
}
a.nxg-tag { transition: filter .15s ease, border-color .15s ease; }
a.nxg-tag:hover { filter: brightness(1.15); }
a.nxg-tag:focus-visible { outline: 2px solid #4DA3FF; outline-offset: 2px; }
.nxg-tag svg { flex-shrink: 0; }
/* ✓ Verified: blue outline */
.nxg-tag-verified { color: #8EC2FF; border-color: rgba(47, 139, 255, .55); background: rgba(47, 139, 255, .08); --nxg-tag-tick: #0D1B2A; }
.nxg-tag-verified svg { color: #2F8BFF; }
/* ⭐ Pro: amber/gold fill */
.nxg-tag-pro { color: #1A1203; background: linear-gradient(180deg, #FFD36B, #F5B029); border-color: #F5B029; }
/* The Pro chip sits beside the trust tag, never instead of it (23 Oct 2026) */
.nxg-tag + .nxg-tag-pro-chip, .nxg-tag-mark + .nxg-tag-mark-pro, a.nxg-tag + .nxg-tag-pro-chip { margin-left: .3rem; }
.nxg-tag-pro-chip { height: 1.25rem; padding: 0 .45rem; font-size: .625rem; }
/* 🏆 Founding: navy/purple gradient, rarer-looking than Pro */
.nxg-tag-founding { color: #EDE7FF; background: linear-gradient(110deg, #13254A, #4B2FC9); border-color: rgba(139, 108, 255, .7);
  box-shadow: 0 0 0 1px rgba(13, 27, 42, .6), 0 4px 14px -6px rgba(108, 71, 255, .9); }
.nxg-tag-founding svg { color: #FFD36B; }
/* Founder: the brand gradient */
.nxg-tag-founder { color: #fff; background: linear-gradient(100deg, #0079C2, #6C47FF); box-shadow: 0 6px 18px -8px rgba(108, 71, 255, .85); }
/* 🛡 Moderator: purple outline */
.nxg-tag-moderator { color: #C9BAFF; border-color: rgba(139, 108, 255, .65); background: rgba(108, 71, 255, .1); }
.nxg-tag-moderator svg { color: #A48BFF; }
.nxg-tag-admin { color: #9BEDE9; border-color: rgba(0, 181, 176, .6); background: rgba(0, 181, 176, .1); }
.nxg-tag-admin svg { color: #33C9C4; }
/* 🏢 Verified Employer: teal fill */
.nxg-tag-employer { color: #032826; background: #2FD3CD; border-color: #00B5B0; }
/* ✓ Verified Team: blue outline · 🥇 Top-Rated Team: gold outline */
.nxg-tag-team_verified { color: #8EC2FF; border-color: rgba(47, 139, 255, .55); background: rgba(47, 139, 255, .08); }
.nxg-tag-team_verified svg { color: #2F8BFF; }
.nxg-tag-team_top { color: #FFD36B; border-color: rgba(245, 176, 41, .7); background: rgba(245, 176, 41, .08); }

/* On a portrait (About page): a dark backing so the outline tag reads */
.nxg-tag-on-photo .nxg-tag { background: rgb(9 18 33 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Icon-only form, for tight rows (snippet authors, Meet the Collective) */
.nxg-tag-mark { display: inline-flex; flex-shrink: 0; line-height: 0; }
.nxg-tag-mark-verified { color: #2F8BFF; filter: drop-shadow(0 0 4px rgba(47, 139, 255, .45)); }
.nxg-tag-mark-founder { color: #8B6CFF; filter: drop-shadow(0 0 4px rgba(108, 71, 255, .55)); }
.nxg-tag-mark-moderator { color: #A48BFF; }
.nxg-tag-mark-admin { color: #33C9C4; }
.nxg-tag-mark-founding { color: #8B6CFF; }
.nxg-tag-mark-pro { color: #F5B029; }
.nxg-tag-mark-employer { color: #2FD3CD; }
.nxg-tag-mark-team_verified { color: #2F8BFF; }
.nxg-tag-mark-team_top { color: #F5B029; }

/* GitHub-backed stack tag (Phase 11) */
.nxg-stack-verified { display: inline-flex; align-items: center; gap: .25rem; }
.nxg-stack-verified svg { flex-shrink: 0; opacity: .9; }

/* Impact Score and Profile Grade chips */
.nxg-score-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .65rem .3rem .35rem; border-radius: .75rem;
  border: 1px solid #23324A; background: rgb(15 26 44 / .7); color: #CBD5E1; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
a.nxg-score-chip:hover { border-color: #3A5277; background: rgb(23 37 61 / .8); }
a.nxg-score-chip:focus-visible { outline: 2px solid #4DA3FF; outline-offset: 2px; }
.nxg-score-dial {
  --v: 0; position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background: conic-gradient(#00B5B0 calc(var(--v) * 1%), #1E2C44 0);
}
.nxg-score-dial::before { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: #0F1A2C; }
.nxg-score-dial span { position: relative; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem; font-weight: 700; color: #fff; }
.nxg-grade-letter {
  display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .35rem; border-radius: .6rem;
  font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(140deg, #6C47FF, #0079C2);
}
.nxg-grade-letter[data-grade="C"], .nxg-grade-letter[data-grade="D"] { background: #1E2C44; color: #CBD5E1; }
.nxg-score-mini { display: inline-flex; align-items: baseline; gap: .25rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem; color: #94A3B8; }
.nxg-score-mini b { color: #5EEAD4; font-weight: 700; }

/* ── Member Analytics (Phase 11) ─────────────────────────────────────── */
.nxg-range-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: .75rem; background: #0F1A2C; border: 1px solid #1E2C44; }
.nxg-range-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .45rem .6rem; border-radius: .55rem;
  font-family: Inter, system-ui, sans-serif; font-size: .8125rem; font-weight: 600; color: #94A3B8; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nxg-range-btn:hover { color: #fff; background: #17253D; }
@media (min-width: 640px) { .nxg-range-bar { display: inline-flex; } .nxg-range-btn { padding: .45rem .75rem; } }
.nxg-range-btn:focus-visible { outline: 2px solid #4DA3FF; outline-offset: 1px; }
.nxg-range-btn.is-active { color: #fff; background: #0079C2; box-shadow: 0 4px 14px -6px rgba(0, 121, 194, .9); }
.nxg-range-btn svg { opacity: .8; }
.htmx-request#analytics-body, .htmx-request #analytics-body { opacity: .6; transition: opacity .15s ease; }

.nxg-panel { background: #0F1A2C; border: 1px solid #1E2C44; border-radius: 1rem; padding: 1.1rem 1.15rem; min-width: 0; }
@media (min-width: 640px) { .nxg-panel { padding: 1.35rem 1.5rem; } }
.nxg-kpi { background: #0F1A2C; border: 1px solid #1E2C44; border-radius: 1rem; padding: .95rem 1rem; min-width: 0; }
.nxg-kpi-delta { margin-top: .25rem; font-family: Inter, system-ui, sans-serif; font-size: .75rem; font-weight: 600; }
.nxg-kpi-delta-up { color: #4ADE80; }
.nxg-kpi-delta-down { color: #F59E8B; }
.nxg-kpi-delta-flat { color: #94A3B8; }
.nxg-chart-box { position: relative; height: 15rem; }
.nxg-chart-empty {
  display: grid; place-content: center; gap: .35rem; min-height: 9rem; padding: 1.25rem; text-align: center; border-radius: .75rem;
  border: 1px dashed #26364F; font-family: Inter, system-ui, sans-serif; font-size: .8125rem; color: #94A3B8;
}
.nxg-chart-empty a { color: #4DA3FF; font-weight: 600; }
.nxg-chart-empty a:hover { color: #fff; }
.nxg-meter { height: .375rem; border-radius: 9999px; background: #1E2C44; overflow: hidden; }
.nxg-meter span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, #0079C2, #00B5B0); }
.nxg-score-dial-lg { width: 4rem; height: 4rem; }
.nxg-score-dial-lg::before { inset: 5px; }
.nxg-score-dial-lg span { font-size: 1.15rem; }
.nxg-table { border-collapse: collapse; font-family: Inter, system-ui, sans-serif; font-size: .8125rem; color: #CBD5E1; }
.nxg-table th { padding: .5rem .75rem; text-align: left; font-size: .6875rem; font-weight: 600; color: #7C8DA6; border-bottom: 1px solid #1E2C44; }
.nxg-table th.text-right { text-align: right; }
.nxg-table td { padding: .6rem .75rem; border-bottom: 1px solid #172338; }
.nxg-table tr:last-child td { border-bottom: 0; }
.nxg-pro-gate {
  position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.5rem; border: 1px solid rgba(245, 176, 41, .35);
  background: radial-gradient(120% 140% at 100% 0%, rgba(245, 176, 41, .14), transparent 55%), #0F1A2C;
}
@media (min-width: 640px) { .nxg-pro-gate { padding: 2rem 2.25rem; } }
.nxg-formula {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .85rem 1.1rem; border-radius: .85rem;
  border: 1px solid #26364F; background: #0B1626; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .9rem; color: #94A3B8;
}
.nxg-formula span { color: #5EEAD4; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   The Pulse: the homepage (Phase 12, templates/pages/pulse/)
   One bold element, the hero's circuit board with pulses travelling
   into a glowing core (the logo's motif, CSS only); everything after it
   stays quiet and typographic. Motion is off under reduced motion.
   ═══════════════════════════════════════════════════════════════════ */
.nxg-pulse { --pulse-gap: clamp(4.5rem, 9vw, 7.5rem); overflow-x: clip; }

/* Shared buttons and links for the page */
.nxg-btn-primary, .nxg-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem;
  padding: .7rem 1.25rem; border-radius: .6rem; font: 600 .9rem/1.2 Inter, system-ui, sans-serif;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nxg-btn-primary { background: #0079C2; color: #fff; box-shadow: 0 10px 30px -12px rgba(14, 165, 233, .7); }
.nxg-btn-primary:hover { background: #0EA5E9; }
.nxg-btn-ghost { color: #E2E8F0; border: 1px solid #2D4566; background: rgb(13 27 42 / .55); }
.nxg-btn-ghost:hover { border-color: #47658F; color: #fff; }
.nxg-btn-primary:focus-visible, .nxg-btn-ghost:focus-visible, .nxg-path:focus-visible,
.nxg-text-link:focus-visible, .nxg-icon-btn:focus-visible, .nxg-slider-btn:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 3px; }
.nxg-text-link { display: inline-flex; align-items: center; font: 600 .875rem/1.4 Inter, system-ui, sans-serif; color: #8FCDF3;
  text-decoration: underline; text-decoration-color: rgba(143, 205, 243, .35); text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: color .15s ease, text-decoration-color .15s ease; }
.nxg-text-link:hover { color: #fff; text-decoration-color: currentColor; }
.nxg-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .6rem;
  border: 1px solid #2D4566; color: #C9D3E0; transition: border-color .15s ease, color .15s ease; }
.nxg-icon-btn:hover { color: #fff; border-color: #0079C2; }

.nxg-pulse-section { margin-top: var(--pulse-gap); }
.nxg-section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .nxg-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.nxg-section-title { font: 700 clamp(1.6rem, 3.2vw, 2.25rem)/1.15 "Space Grotesk", system-ui, sans-serif; color: #fff; letter-spacing: -.015em; max-width: 22ch; }
.nxg-section-lede { margin-top: .6rem; font: 400 1rem/1.6 Inter, system-ui, sans-serif; color: #9CA3AF; max-width: 60ch; }

/* ── 1. Hero ─────────────────────────────────────────────────────── */
.nxg-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid rgba(45, 69, 102, .5); }
.nxg-hero-board { position: absolute; inset: 0; z-index: -1; }
.nxg-hero-board::after { /* keeps the copy readable over the board */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0D1B2A 0%, rgb(13 27 42 / .92) 34%, rgb(13 27 42 / .35) 62%, rgb(13 27 42 / 0) 80%),
    linear-gradient(180deg, rgb(13 27 42 / 0) 70%, #0D1B2A 100%);
}
.nxg-circuit { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 767px) {
  /* Phones: the board sits behind the top of the hero with the core
     top-right, and fades out before the calls to action. */
  .nxg-circuit { inset: auto; top: -110px; left: -105%; width: 230%; height: auto; aspect-ratio: 1440 / 640; opacity: .7; }
  .nxg-hero-board::after { background: linear-gradient(180deg, rgb(13 27 42 / .15) 0%, rgb(13 27 42 / .8) 38%, #0D1B2A 62%); }
}
.nxg-circuit-traces path { fill: none; stroke: #1E3A5F; stroke-width: 1.6; stroke-linejoin: round; }
.nxg-circuit-pulses path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 70 1000; stroke-dashoffset: 70; opacity: 0; }
.nxg-circuit-pulses .is-blue { stroke: #0EA5E9; filter: drop-shadow(0 0 4px rgba(14, 165, 233, .9)); }
.nxg-circuit-pulses .is-violet { stroke: #8B6FFF; filter: drop-shadow(0 0 4px rgba(139, 111, 255, .9)); }
.nxg-circuit-pulses .is-cyan { stroke: #22D3EE; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .9)); }
.nxg-circuit-pads circle { fill: #0D1B2A; stroke: #2D4566; stroke-width: 1.5; }
.nxg-circuit-pads .is-end { stroke: #22D3EE; stroke-opacity: .55; }
.nxg-core-ring { fill: none; stroke-width: 1.5; }
.nxg-core-ring.is-outer { stroke: rgba(34, 211, 238, .45); stroke-dasharray: 3 7; }
.nxg-core-ring.is-inner { stroke: rgba(139, 111, 255, .65); }
.nxg-core-spark { fill: #F0FFFE; filter: drop-shadow(0 0 6px #22D3EE) drop-shadow(0 0 14px rgba(108, 71, 255, .8)); }
.nxg-circuit-pulses path { opacity: 1; animation: nxg-pulse-run var(--t, 6s) linear var(--d, 0s) infinite; }
.nxg-core-glow { transform-origin: center; transform-box: fill-box; animation: nxg-core-breathe 4.8s ease-in-out infinite; }
.nxg-core-ring.is-outer { transform-origin: center; transform-box: fill-box; animation: nxg-spin 40s linear infinite; }
.nxg-core-spark { transform-origin: center; transform-box: fill-box; animation: nxg-core-spark 4.8s ease-in-out infinite; }
@keyframes nxg-pulse-run { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -1000; } }
@keyframes nxg-core-breathe { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes nxg-core-spark { 0%, 100% { transform: scale(.9) rotate(0deg); } 50% { transform: scale(1.08) rotate(45deg); } }

.nxg-hero-inner { position: relative; padding-top: clamp(4rem, 11vw, 8.5rem); padding-bottom: clamp(3.5rem, 9vw, 7rem); }
.nxg-hero-copy { max-width: 46rem; }
.nxg-hero-status { display: inline-flex; align-items: center; gap: .6rem; font: 500 .875rem/1.4 Inter, system-ui, sans-serif; color: #8FCDF3; }
.nxg-hero-h1 { margin-top: 1.25rem; font: 700 clamp(2.3rem, 5.4vw, 3.75rem)/1.04 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.nxg-hero-lede { margin-top: 1.4rem; font: 400 clamp(1rem, 1.6vw, 1.15rem)/1.6 Inter, system-ui, sans-serif; color: #C9D3E0; max-width: 34rem; }
.nxg-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.nxg-hero-proof { margin-top: 1.25rem; font: 400 .875rem/1.5 Inter, system-ui, sans-serif; color: #8A94A6; }

/* The two paths in: who it's for, then what to do */
.nxg-paths { display: grid; gap: .75rem; margin-top: 2.25rem; max-width: 34rem; }
@media (min-width: 480px) { .nxg-paths { grid-template-columns: 1fr 1fr; } }
.nxg-path { position: relative; display: grid; gap: .2rem; padding: 1rem 3rem 1rem 1.15rem; border-radius: .9rem;
  border: 1px solid #2D4566; background: rgb(17 31 48 / .78); backdrop-filter: blur(6px);
  transition: border-color .2s ease, background-color .2s ease, translate .2s ease; }
.nxg-path:hover { border-color: #47658F; translate: 0 -2px; }
.nxg-path.is-primary { border-color: rgba(14, 165, 233, .6); background: linear-gradient(135deg, rgba(0, 121, 194, .35), rgba(108, 71, 255, .22)); }
.nxg-path.is-primary:hover { border-color: #0EA5E9; }
.nxg-path-for { font: 500 .8rem/1.3 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-path.is-primary .nxg-path-for { color: #B9E3FA; }
.nxg-path-do { font: 700 1.15rem/1.25 "Space Grotesk", system-ui, sans-serif; color: #fff; }
.nxg-path-arrow { position: absolute; right: 1rem; top: 50%; margin-top: -10px; color: #8FCDF3; transition: translate .2s ease; }
.nxg-path:hover .nxg-path-arrow { translate: 3px 0; }
.nxg-path[href^="#"]:hover .nxg-path-arrow { translate: 0 3px; }

/* ── 2. Ticker ───────────────────────────────────────────────────── */
.nxg-ticker { display: flex; align-items: stretch; border-bottom: 1px solid rgba(45, 69, 102, .5); background: rgb(10 21 34 / .85); }
.nxg-ticker-label { display: inline-flex; flex-shrink: 0; align-items: center; gap: .5rem; padding: 0 1rem;
  font: 700 .75rem/1 Inter, system-ui, sans-serif; letter-spacing: .04em; color: #7FF2EE; border-right: 1px solid rgba(45, 69, 102, .5); }
.nxg-ticker-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.nxg-ticker-track { display: flex; width: max-content; }
.nxg-ticker-list { display: flex; flex-shrink: 0; gap: 2.5rem; padding: .8rem 1.25rem; margin: 0; list-style: none; }
.nxg-ticker-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font: 400 .85rem/1.3 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-tick-icon { display: inline-flex; color: #8FCDF3; }
.nxg-tick-icon.is-verified { color: #4ADE80; }
.nxg-tick-icon.is-bounty { color: #FBBF24; }
.nxg-tick-icon.is-article, .nxg-tick-icon.is-snippet { color: #A996FF; }
.nxg-tick-icon.is-artifact { color: #F472B6; }
.nxg-tick-icon.is-project, .nxg-tick-icon.is-team { color: #22D3EE; }
.nxg-tick-who { font-weight: 600; color: #F1F5F9; }
.nxg-tick-title { color: #8FCDF3; }
.nxg-tick-who:hover, .nxg-tick-title:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nxg-tick-time { color: #6B7A90; font-size: .78rem; }
/* Pauses on hover, keyboard focus and its own Pause button
   (is-paused); slower with reduce motion. */
.nxg-ticker-track { animation: nxg-ticker 70s linear infinite; }
html.nxg-calm .nxg-ticker-track { animation-duration: 120s; }
.nxg-ticker:hover .nxg-ticker-track, .nxg-ticker:focus-within .nxg-ticker-track,
.nxg-ticker.is-paused .nxg-ticker-track { animation-play-state: paused; }
.nxg-ticker-pause { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; border: 0; border-left: 1px solid rgba(45, 69, 102, .5); background: transparent; color: #8FCDF3; cursor: pointer; }
.nxg-ticker-pause:hover { color: #fff; }
.nxg-ticker-pause:focus-visible { outline: 2px solid #38BDF8; outline-offset: -3px; }
.nxg-ticker-pause .is-play, .nxg-ticker.is-paused .nxg-ticker-pause .is-pause { display: none; }
.nxg-ticker.is-paused .nxg-ticker-pause .is-play { display: block; }
html.nxg-still .nxg-ticker-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
html.nxg-still .nxg-ticker-list[aria-hidden="true"], html.nxg-still .nxg-ticker-pause { display: none; }
@keyframes nxg-ticker { to { transform: translateX(-50%); } }
#pulse-fold { display: block; height: 1px; }

/* ── 3. Stats ────────────────────────────────────────────────────── */
.nxg-stats { margin-top: clamp(3rem, 6vw, 4.5rem); }
.nxg-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #243B5C; border-bottom: 1px solid #243B5C; }
@media (min-width: 768px) { .nxg-stats-row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.nxg-stat { display: flex; flex-direction: column-reverse; gap: .35rem; padding: 1.5rem 1rem; }
.nxg-stat + .nxg-stat { border-left: 1px solid #243B5C; }
@media (max-width: 767px) { .nxg-stat:nth-child(3) { border-left: 0; } .nxg-stat:nth-child(n+3) { border-top: 1px solid #243B5C; } }
.nxg-stat dd { font: 700 clamp(2rem, 4.4vw, 3rem)/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.nxg-stat dt { font: 500 .85rem/1.3 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-stat-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(156, 163, 175, .4); text-underline-offset: 3px; }
.nxg-stat-link:hover { color: #fff; }

/* ── 6. Map ──────────────────────────────────────────────────────── */
.nxg-map-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .nxg-map-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3.5rem; } }
.nxg-map-figures { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; margin: 1.75rem 0; }
.nxg-map-figures div { display: flex; flex-direction: column-reverse; gap: .2rem; }
.nxg-map-figures dd { font: 700 1.9rem/1 "Space Grotesk", system-ui, sans-serif; color: #fff; }
.nxg-map-figures dt { font: 500 .8rem/1.3 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-map-empty { margin: 1.5rem 0; font: 500 .95rem/1.5 Inter, system-ui, sans-serif; color: #C9D3E0; }
.nxg-map-credit { margin-top: 1.25rem; font: 400 .75rem/1.5 Inter, system-ui, sans-serif; color: #6B7A90; max-width: 36ch; }
.nxg-map { position: relative; margin: 0; }
.nxg-map-land { display: block; width: 100%; height: auto; opacity: .9; }
.nxg-map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nxg-map-dot { fill: #22D3EE; stroke: #0D1B2A; stroke-width: 1.2; }
.nxg-map-ring { fill: none; stroke: #22D3EE; stroke-width: 1.4; opacity: 0; }
.nxg-map-pt { cursor: default; }
.nxg-map-origin rect { fill: #8B6FFF; stroke: #E9E3FF; stroke-width: 1.2; }
.nxg-map-origin-label { position: absolute; transform: translate(calc(-100% - 12px), -50%); white-space: nowrap; pointer-events: none;
  font: 600 .7rem/1 Inter, system-ui, sans-serif; color: #C4B5FD; background: rgb(13 27 42 / .85); padding: .3rem .45rem; border-radius: .35rem; }
@media (max-width: 639px) { .nxg-map-origin-label { transform: translate(-30%, 10px); } }
.nxg-map-ring { animation: nxg-map-ping 3.5s cubic-bezier(.2, .6, .3, 1) var(--d, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nxg-map-ping { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3.2); } }

/* ── 7–8. Previews ───────────────────────────────────────────────── */
.nxg-previews { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .nxg-previews { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.nxg-preview-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; }
.nxg-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%; }
.nxg-preview-title { font: 700 1.35rem/1.2 "Space Grotesk", system-ui, sans-serif; color: #fff; }
.nxg-preview-count { font: 500 .85rem/1 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-preview-list { width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid #243B5C; }
.nxg-preview-row { display: grid; gap: .6rem; padding: 1.1rem 0; border-bottom: 1px solid #243B5C; }
.nxg-preview-link { display: grid; gap: .35rem; min-width: 0; }
.nxg-preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font: 500 .78rem/1.3 Inter, system-ui, sans-serif; color: #8A94A6; }
.nxg-preview-name { font: 600 1.05rem/1.35 "Space Grotesk", system-ui, sans-serif; color: #F1F5F9; transition: color .15s ease; overflow-wrap: anywhere; }
.nxg-preview-link:hover .nxg-preview-name { color: #8FCDF3; }
.nxg-preview-excerpt { font: 400 .875rem/1.55 Inter, system-ui, sans-serif; color: #9CA3AF; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxg-preview-by { font: 400 .8rem/1.3 Inter, system-ui, sans-serif; color: #8A94A6; }
.nxg-preview-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.nxg-preview-empty { font: 400 .9rem/1.5 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-preview-note { font: 400 .875rem/1.6 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-diff { font-weight: 600; }
.nxg-diff.is-easy { color: #4ADE80; }
.nxg-diff.is-medium { color: #FBBF24; }
.nxg-diff.is-hard { color: #F87171; }

/* ── 10. Employers ───────────────────────────────────────────────── */
.nxg-employers { margin-top: var(--pulse-gap); padding: clamp(3.5rem, 8vw, 6rem) 0; background: #0A1626; border-top: 1px solid #1E3352; border-bottom: 1px solid #1E3352; }
.nxg-employers-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .nxg-employers-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
.nxg-employers-for { font: 600 .9rem/1 Inter, system-ui, sans-serif; color: #C4B5FD; margin-bottom: .9rem; }
.nxg-employer-points { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.nxg-employer-points li { position: relative; padding-left: 1.6rem; font: 400 .925rem/1.55 Inter, system-ui, sans-serif; color: #C9D3E0; }
.nxg-employer-points li::before { content: ""; position: absolute; left: .15rem; top: .5rem; width: .55rem; height: .55rem; border-radius: 2px; transform: rotate(45deg); background: #8B6FFF; }
.nxg-waitlist { margin-top: 2rem; }
.nxg-waitlist-form, .nxg-waitlist-done { padding: 1.25rem; border-radius: 1rem; border: 1px solid #2D4566; background: #111F30; }
.nxg-waitlist-fields { display: grid; gap: .85rem; }
@media (min-width: 560px) { .nxg-waitlist-fields { grid-template-columns: 1fr 1fr; } .nxg-wl-field.is-wide { grid-column: 1 / -1; } }
.nxg-wl-field label { display: block; margin-bottom: .35rem; font: 600 .8rem/1.3 Inter, system-ui, sans-serif; color: #D1D5DB; }
.nxg-wl-field input, .nxg-wl-field select, .nxg-wl-field textarea { width: 100%; min-height: 2.75rem; padding: .6rem .8rem; border-radius: .55rem;
  border: 1px solid #2D4566; background: #0D1B2A; color: #fff; font: 400 .9rem/1.4 Inter, system-ui, sans-serif; }
.nxg-wl-field textarea { min-height: 4.5rem; resize: vertical; }
.nxg-wl-field input:focus, .nxg-wl-field select:focus, .nxg-wl-field textarea:focus { outline: none; border-color: #0EA5E9; box-shadow: 0 0 0 1px #0EA5E9; }
.nxg-field-error { margin-top: .3rem; font: 500 .8rem/1.3 Inter, system-ui, sans-serif; color: #F87171; }
.nxg-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.nxg-talent { min-width: 0; }
.nxg-talent-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
@media (max-width: 639px) {
  .nxg-talent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .nxg-talent-card { padding: .8rem; }
  .nxg-talent-card:nth-child(n+5) { display: none; }
}
.nxg-talent-card { display: grid; gap: .65rem; align-content: start; padding: 1rem; border-radius: .9rem; border: 1px solid #243B5C; background: #111F30; min-width: 0; }
.nxg-talent-who { display: flex; align-items: center; gap: .65rem; }
.nxg-talent-face { width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 9999px; background: radial-gradient(circle at 35% 30%, #47658F, #1E3A5F); filter: blur(2px); }
.nxg-talent-lines { display: grid; gap: .35rem; flex: 1; }
.nxg-talent-lines span { display: block; height: .55rem; border-radius: 9999px; background: #2A3D5C; filter: blur(1.5px); }
.nxg-talent-lines span:first-child { width: 80%; }
.nxg-talent-lines span:last-child { width: 55%; opacity: .6; }
.nxg-talent-grade { flex-shrink: 0; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem;
  font: 700 .85rem/1 "Space Grotesk", system-ui, sans-serif; color: #7FF2EE; border: 1px solid rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .08); }
.nxg-talent-role { font: 600 .95rem/1.3 "Space Grotesk", system-ui, sans-serif; color: #F1F5F9; }
.nxg-talent-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.nxg-talent-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font: 500 .78rem/1.3 Inter, system-ui, sans-serif; color: #8A94A6; }
.nxg-talent-open { color: #4ADE80; }
.nxg-talent-note { margin-top: 1rem; font: 400 .85rem/1.5 Inter, system-ui, sans-serif; color: #9CA3AF; }

/* ── 11. Voices ──────────────────────────────────────────────────── */
.nxg-slider-controls { display: flex; gap: .5rem; }
.nxg-slider-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: 1px solid #2D4566; color: #E2E8F0; transition: border-color .15s ease; }
.nxg-slider-btn:hover { border-color: #0EA5E9; }
.nxg-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 26rem); gap: 1rem; margin: 0; padding: 0 0 .5rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nxg-slider-track::-webkit-scrollbar { display: none; }
.nxg-slider-track:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 4px; border-radius: 1rem; }
.nxg-quote { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid #243B5C; background: #111F30; }
.nxg-quote-text { margin: 0; font: 500 1.05rem/1.6 Inter, system-ui, sans-serif; color: #E2E8F0; }
.nxg-quote-text::before { content: "\201C"; display: block; margin-bottom: .25rem; font: 700 2.5rem/1 "Space Grotesk", system-ui, sans-serif; color: #6C47FF; }
.nxg-quote-by { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.nxg-quote-photo { width: 2.75rem; height: 2.75rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.nxg-quote-initials { display: inline-grid; place-items: center; background: #1E3A5F; color: #fff; font: 700 .85rem/1 "Space Grotesk", system-ui, sans-serif; }
.nxg-quote-name { font: 600 .925rem/1.3 Inter, system-ui, sans-serif; color: #fff; }
.nxg-quote-role { font: 400 .8rem/1.3 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-quote-link { margin-left: auto; font: 600 .8rem/1 Inter, system-ui, sans-serif; color: #8FCDF3; }
.nxg-quote-link:hover { color: #fff; }
/* Pre-Phase 16: up to three quotes in a grid; four or more in a carousel */
.nxg-quote-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .nxg-quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nxg-quote-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nxg-slider-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.nxg-slider-dot { width: .6rem; height: .6rem; padding: 0; border-radius: 999px; border: 0; background: #2D4566; cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.nxg-slider-dot[aria-current="true"] { width: 1.6rem; background: linear-gradient(90deg, #06A3C4, #7C3AED); }
.nxg-slider-dot:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 3px; }
@media (hover: none) { .nxg-slider-dot { position: relative; } .nxg-slider-dot::after { content: ""; position: absolute; inset: -.6rem; } }
[data-slider-pause] .nxg-icon-play, [data-slider-pause][aria-pressed="true"] .nxg-icon-pause { display: none; }
[data-slider-pause][aria-pressed="true"] .nxg-icon-play { display: block; }
@media (prefers-reduced-motion: reduce) { .nxg-slider-dot { transition: none; } }
.nxg-founder-mini { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.nxg-founder-mini-photo { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; border: 2px solid rgba(108, 71, 255, .5); flex-shrink: 0; }

.nxg-story { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .nxg-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } }
.nxg-story-photo { position: relative; display: block; max-width: 24rem; aspect-ratio: 6 / 7; border-radius: 1.25rem; overflow: hidden; border: 1px solid #2D4566; }
.nxg-story-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 27 42 / 0) 60%, rgb(13 27 42 / .55)); }
.nxg-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.nxg-story-title { font: 700 clamp(1.9rem, 4.4vw, 3rem)/1.05 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.nxg-story-text { margin-top: 1.25rem; font: 400 1.05rem/1.7 Inter, system-ui, sans-serif; color: #C9D3E0; max-width: 58ch; }
.nxg-story-sign { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #243B5C; }
.nxg-story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; }

/* ── 12. Closing band ────────────────────────────────────────────── */
.nxg-closing { margin-top: var(--pulse-gap); padding-bottom: clamp(3rem, 7vw, 5rem); }
.nxg-closing-card { display: grid; gap: 2.5rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.5rem; border: 1px solid rgba(14, 165, 233, .3);
  background: radial-gradient(120% 140% at 0% 0%, rgba(0, 121, 194, .22), rgb(13 27 42 / 0) 55%), radial-gradient(90% 120% at 100% 100%, rgba(108, 71, 255, .16), rgb(13 27 42 / 0) 60%), #111F30; }
@media (min-width: 1024px) { .nxg-closing-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; } }
.nxg-closing-title { font: 700 clamp(1.7rem, 3.6vw, 2.5rem)/1.1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; max-width: 22ch; text-wrap: balance; }
.nxg-closing-text { margin-top: .9rem; font: 400 1rem/1.6 Inter, system-ui, sans-serif; color: #C9D3E0; max-width: 46ch; }
.nxg-closing-early { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding-top: 2rem; border-top: 1px solid #243B5C; }
@media (min-width: 1024px) { .nxg-closing-early { padding: 0 0 0 2.5rem; border-top: 0; border-left: 1px solid #243B5C; } }
.nxg-early-pill { display: inline-flex; padding: .3rem .7rem; border-radius: 9999px; font: 600 .75rem/1 Inter, system-ui, sans-serif; color: #22D3EE; background: rgba(0, 181, 176, .1); }
.nxg-closing-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ── Credential kit (/verify/<handle>/) and Peer Vouching (Phase 12) ── */
.nxg-verify-card { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.25rem; border: 1px solid #2D4566;
  background: radial-gradient(100% 120% at 100% 0%, rgba(22, 163, 74, .12), rgb(13 27 42 / 0) 55%), #111F30; }
.nxg-verify-facts { display: grid; gap: 1rem 2rem; margin-top: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.nxg-verify-facts div { display: flex; flex-direction: column-reverse; gap: .25rem; }
.nxg-verify-facts dt { font: 500 .8rem/1.3 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-verify-facts dd { font: 600 1.05rem/1.3 "Space Grotesk", system-ui, sans-serif; color: #fff; }
.nxg-kit-row { display: flex; flex-direction: column; gap: 1rem; padding: 1.15rem 1.25rem; border-radius: 1rem; border: 1px solid #243B5C; background: #111F30; }
@media (min-width: 640px) { .nxg-kit-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.nxg-kit-block { padding: 1.15rem 1.25rem; border-radius: 1rem; border: 1px solid #243B5C; background: #111F30; min-width: 0; }
.nxg-kit-code { position: relative; margin-top: .35rem; padding: .75rem 5rem .75rem .9rem; border-radius: .6rem; background: #0A1626; border: 1px solid #1E3352; overflow-x: auto; }
.nxg-kit-code code { font: 400 .8rem/1.5 "JetBrains Mono", ui-monospace, monospace; color: #C9D3E0; white-space: pre-wrap; word-break: break-all; }
.nxg-kit-copy { position: absolute; top: .5rem; right: .5rem; padding: .35rem .7rem; border-radius: .45rem; font: 600 .75rem/1 Inter, system-ui, sans-serif;
  color: #E2E8F0; border: 1px solid #2D4566; background: #111F30; }
.nxg-kit-copy:hover, .nxg-kit-copy.is-copied { border-color: #16A34A; color: #4ADE80; }
.nxg-vouch-meter { display: flex; gap: .4rem; }
.nxg-vouch-meter span { width: 1.6rem; height: .5rem; border-radius: 9999px; background: #243B5C; }
.nxg-vouch-meter span.is-left { background: linear-gradient(90deg, #0079C2, #6C47FF); }
.nxg-vouch-state { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 9999px; font: 600 .72rem/1.2 Inter, system-ui, sans-serif; }
.nxg-vouch-state.is-open { color: #8FCDF3; background: rgba(14, 165, 233, .12); }
.nxg-vouch-state.is-applying { color: #FBBF24; background: rgba(251, 191, 36, .12); }
.nxg-vouch-state.is-verified { color: #4ADE80; background: rgba(74, 222, 128, .12); }
.nxg-vouch-state.is-cancelled { color: #8A94A6; background: rgba(138, 148, 166, .12); }

/* ── Team management: member actions and roles (Phase 12) ───────── */
.nxg-team-action { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .35rem .75rem; border-radius: .5rem;
  font: 600 .78rem/1.2 Inter, system-ui, sans-serif; color: #C9D3E0; border: 1px solid #2D4566; background: transparent; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease; }
.nxg-team-action:hover { border-color: #0EA5E9; color: #fff; }
.nxg-team-action.is-danger:hover { border-color: #F87171; color: #F87171; }
.nxg-team-action.is-copied { border-color: #16A34A; color: #4ADE80; }
.nxg-team-action:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }
.nxg-roles-help { border: 1px solid #243B5C; border-radius: .9rem; background: #111F30; padding: .75rem 1rem; }
.nxg-roles-help summary { cursor: pointer; font: 600 .85rem/1.4 Inter, system-ui, sans-serif; color: #8FCDF3; }
.nxg-roles-help ul { margin: .6rem 0 .2rem; padding-left: 1.1rem; list-style: disc; display: grid; gap: .35rem; }
.nxg-roles-help li { font: 400 .85rem/1.5 Inter, system-ui, sans-serif; color: #C9D3E0; }
.nxg-roles-help strong { color: #fff; }

/* ── Site notices (Phase 13A): announcement banner, Terms update ──── */
.nxg-announce { border-bottom: 1px solid rgba(45, 69, 102, .6); color: #E2E8F0; background: #102238; }
.nxg-announce.is-info { background: linear-gradient(90deg, rgba(0, 121, 194, .22), rgba(108, 71, 255, .14)); }
.nxg-announce.is-success { background: rgba(22, 163, 74, .16); }
.nxg-announce.is-warning { background: rgba(217, 119, 6, .18); }
.nxg-announce a { color: #fff; }
.nxg-announce-close { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .4rem; color: #C9D3E0; }
.nxg-announce-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nxg-announce-ok { align-self: flex-start; flex-shrink: 0; padding: .4rem .9rem; border-radius: .45rem; font: 600 .8rem/1.2 Inter, system-ui, sans-serif; color: #fff; background: #0079C2; }
.nxg-announce-ok:hover { background: #0EA5E9; }
@media (min-width: 640px) { .nxg-announce-ok { align-self: center; } }
.nxg-announce-close:focus-visible, .nxg-announce-ok:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

/* ── Legal pages (Phase 13A) ─────────────────────────────────────── */
.nxg-legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.nxg-legal-toc a { font: 400 .85rem/1.4 Inter, system-ui, sans-serif; color: #9CA3AF; }
.nxg-legal-toc a:hover { color: #fff; }
@media (min-width: 1024px) { .nxg-legal-toc { position: sticky; top: 5.5rem; align-self: start; } }
@media (max-width: 1023px) { .nxg-legal-toc { padding: 1rem 1.1rem; border: 1px solid #243B5C; border-radius: .9rem; background: #111F30; } }
.nxg-legal { max-width: 46rem; min-width: 0; font: 400 1rem/1.75 Inter, system-ui, sans-serif; color: #D1D5DB; }
.nxg-legal section { scroll-margin-top: 6rem; }
.nxg-legal section + section { margin-top: 2.5rem; }
.nxg-legal h2 { font: 700 1.35rem/1.3 "Space Grotesk", system-ui, sans-serif; color: #fff; margin-bottom: .75rem; }
.nxg-legal h3 { font: 600 1.05rem/1.4 "Space Grotesk", system-ui, sans-serif; color: #F1F5F9; margin: 1.25rem 0 .4rem; }
.nxg-legal p + p { margin-top: .85rem; }
.nxg-legal ul { margin: .75rem 0; padding-left: 1.2rem; list-style: disc; display: grid; gap: .45rem; }
.nxg-legal strong { color: #fff; font-weight: 600; }
.nxg-legal a { color: #8FCDF3; text-decoration: underline; text-underline-offset: 3px; }
.nxg-legal a:hover { color: #fff; }
.nxg-legal .nxg-legal-callout { margin: 1rem 0; padding: .9rem 1.1rem; border-radius: .8rem; border: 1px solid #2D4566; background: #111F30; }
.nxg-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.nxg-legal th, .nxg-legal td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid #243B5C; }
.nxg-legal th { color: #fff; font-weight: 600; }
.nxg-legal .nxg-legal-table { overflow-x: auto; }

/* ── Staff Console (Phase 13A) ─────────────────────────────────────
   The console's tab row scrolls sideways on phones rather than
   wrapping into a wall of links. Buttons are deliberately plain: the
   console is a working tool, and red is kept for actions that switch
   an account or content off. */
/* Every tab stays in view at every width: the row wraps instead of
   scrolling (a hidden scrollbar cut tabs off on phones and tablets). */
.nxg-console-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; row-gap: .35rem; margin: 0 0 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid #1E2C44; }
.nxg-console-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: .6rem; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; color: #94A3B8; white-space: nowrap; transition: color .15s ease, background-color .15s ease; }
.nxg-console-tabs a:hover { color: #fff; background: #13213A; }
.nxg-console-tabs a[aria-current="page"] { color: #fff; background: #13294A; box-shadow: inset 0 0 0 1px #24426E; }
.nxg-console-divider { flex-shrink: 0; width: 1px; height: 1.25rem; margin: 0 .35rem; background: #24324A; }
/* Phones: the Admin tabs start on their own row under a thin rule. */
@media (max-width: 639px) {
  .nxg-console-tabs a { padding: .4rem .6rem; font-size: .78125rem; }
  .nxg-console-divider { flex-basis: 100%; width: 100%; height: 1px; margin: .15rem 0; }
}
.nxg-console-count { min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: #B91C1C; color: #fff; font-size: .6875rem; line-height: 1.25rem; text-align: center; }
.nxg-console-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.nxg-console-stat { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border-radius: 1rem; background: #0F1A2C; border: 1px solid #1E2C44; transition: border-color .15s ease; min-width: 0; }
.nxg-console-stat:hover { border-color: #2B4E7E; }
.nxg-console-stat.is-hot { border-color: rgba(245, 176, 41, .45); }
.nxg-console-stat-value { font: 700 1.875rem/1 "Space Grotesk", system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.nxg-console-stat.is-hot .nxg-console-stat-value { color: #F5B029; }
.nxg-console-stat-label { font: 400 .8125rem/1.35 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-console-chip { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999px; border: 1px solid #2A3A55; font: 600 .6875rem/1.4 Inter, system-ui, sans-serif; color: #CBD5E1; white-space: nowrap; }
.nxg-console-chip.is-danger { color: #FCA5A5; border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .08); }
.nxg-console-chip.is-warn { color: #F5B029; border-color: rgba(245, 176, 41, .45); }
.nxg-console-chip.is-ok { color: #4ADE80; border-color: rgba(74, 222, 128, .35); }
.nxg-console-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: .6rem; border: 1px solid #2A3A55; background: #13213A; color: #E2E8F0; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; list-style: none; }
.nxg-console-btn::-webkit-details-marker { display: none; }
.nxg-console-btn:hover { background: #1A2C4A; border-color: #36507A; color: #fff; }
.nxg-console-btn:focus-visible, .nxg-console-switch:focus-visible, .nxg-console-action > summary:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
.nxg-console-btn.is-primary { background: #0079C2; border-color: #0079C2; color: #fff; }
.nxg-console-btn.is-primary:hover { background: #0A8AD8; }
.nxg-console-btn.is-ok { color: #4ADE80; border-color: rgba(74, 222, 128, .4); }
.nxg-console-btn.is-danger { color: #FCA5A5; border-color: rgba(248, 113, 113, .4); }
.nxg-console-btn.is-danger:hover { background: rgba(248, 113, 113, .1); }
.nxg-console-btn.is-danger-solid { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.nxg-console-btn.is-danger-solid:hover { background: #DC2626; }
.nxg-console-more[open] > summary { background: rgba(248, 113, 113, .12); }
.nxg-console-action { border: 1px solid #1E2C44; border-radius: .8rem; padding: .7rem .9rem; }
.nxg-console-action > summary { cursor: pointer; list-style: none; font: 600 .875rem/1.3 Inter, system-ui, sans-serif; color: #E2E8F0; border-radius: .4rem; }
.nxg-console-action > summary::-webkit-details-marker { display: none; }
.nxg-console-action > summary::after { content: "+"; float: right; color: #64748B; }
.nxg-console-action[open] > summary::after { content: "\2212"; }
.nxg-console-switch { min-width: 4.5rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid #2A3A55; background: transparent; color: #94A3B8; font: 600 .75rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.nxg-console-switch[aria-pressed="true"] { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .45); color: #4ADE80; }
.nxg-console-switch:hover { color: #fff; }
.nxg-vetting-sla.is-due { color: #F5B029; font-weight: 600; }
.nxg-vetting-sla.is-over { color: #F87171; font-weight: 600; }

/* ── Pulse map arcs (Phase 13A) ────────────────────────────────────
   One orchestrated moment: when the map scrolls into view, arcs draw
   out from Lagos to every member city, then rest as faint threads. */
.nxg-map-arcs path { fill: none; stroke: #8B6FFF; stroke-width: 1.1; stroke-linecap: round; opacity: .38; vector-effect: non-scaling-stroke; }
.nxg-map .nxg-map-arcs path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nxg-map.is-revealed .nxg-map-arcs path { animation: nxg-map-arc 1.6s cubic-bezier(.3, .7, .2, 1) var(--d, 0s) forwards; }
@keyframes nxg-map-arc { 0% { stroke-dashoffset: 1; opacity: .9; } 70% { opacity: .75; } 100% { stroke-dashoffset: 0; opacity: .38; } }

/* ── Employer side (Phase 13B): dashboard actions, request progress ── */
.nxg-employer-action { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: .9rem; border: 1px solid #1E2C44; background: #0F1B30; transition: border-color .15s ease, background-color .15s ease; min-width: 0; }
.nxg-employer-action:hover { border-color: #36507A; background: #13213A; }
.nxg-employer-action:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
.nxg-employer-action.is-muted { opacity: .7; }
.nxg-employer-action-title { font: 700 .95rem/1.3 Inter, system-ui, sans-serif; color: #fff; }
.nxg-employer-action-text { font: 400 .8125rem/1.45 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-request-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin-left: 0; }
.nxg-request-steps > li { padding: .3rem .7rem; border-radius: 999px; border: 1px solid #1E2C44; font: 600 .75rem/1.2 Inter, system-ui, sans-serif; color: #64748B; }
.nxg-request-steps > li.is-current { border-color: #0079C2; background: rgba(0, 121, 194, .15); color: #E2E8F0; }
.nxg-inbox-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.nxg-inbox-tabs > a { padding: .4rem .8rem; border-radius: 999px; border: 1px solid #1E2C44; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-inbox-tabs > a:hover { color: #fff; border-color: #36507A; }
.nxg-inbox-tabs > a[aria-current="page"] { background: #13213A; border-color: #0079C2; color: #fff; }
.nxg-inbox-tabs > a:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }

/* ── About: Partnerships & Investment, and /about/connect/ (Phase 13B) ── */
.nxg-about-partners { border-top: 1px solid rgba(36, 59, 92, .9); }
.nxg-connect-topic { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: .75rem; border: 1px solid #22344F; background: #0E1A2C; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.nxg-connect-topic:hover { border-color: #36507A; }
.nxg-connect-topic:has(input:checked) { border-color: rgba(0, 121, 194, .7); background: rgba(0, 121, 194, .08); }
.nxg-connect-topic:has(input:focus-visible) { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-connect-topic input { margin-top: .2rem; accent-color: #0079C2; }
.nxg-connect-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Project cards, proof of work (Phase 13B) ───────────────────── */
.nxg-project-badge { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999px; font: 600 .75rem/1.3 Inter, system-ui, sans-serif; border: 1px solid rgba(148, 163, 184, .35); background: rgb(2 6 23 / .7); color: #CBD5E1; }
.nxg-project-badge.is-progress { border-color: rgba(250, 204, 21, .4); color: #FDE68A; }
.nxg-project-badge.is-pick { border-color: rgba(167, 139, 250, .5); color: #DDD6FE; }
.nxg-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font: 500 .75rem/1.3 Inter, system-ui, sans-serif; color: #8193AD; }
.nxg-project-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.nxg-project-meta svg, .nxg-project-verified svg { width: .8rem; height: .8rem; flex-shrink: 0; }
.nxg-project-verified { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; font: 600 .7rem/1.2 Inter, system-ui, sans-serif; color: #5EEAD4; }

/* ── Pricing and billing (Phase 14A) ───────────────────────────── */
.nxg-inbox-tabs-link { padding: .45rem .9rem; border-radius: 999px; border: 1px solid #1E2C44; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; color: #CBD5E1; }
.nxg-inbox-tabs-link:hover { color: #fff; border-color: #36507A; }
.nxg-price { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1rem; border: 1px solid #1E2C44; background: #0F1B30; min-width: 0; }
.nxg-price.is-featured { border-color: rgba(0, 121, 194, .55); background: linear-gradient(180deg, rgba(0, 121, 194, .10), rgb(15 27 48 / 1) 55%); }
.nxg-price-badge { align-self: flex-start; margin-bottom: .75rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(0, 181, 176, .14); border: 1px solid rgba(0, 181, 176, .4); color: #5EEAD4; font: 700 .72rem/1.3 Inter, system-ui, sans-serif; }
.nxg-price-name { font: 700 1.05rem/1.3 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; }
.nxg-price-figure { margin-top: .5rem; font: 700 2rem/1.1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; letter-spacing: -.01em; }
.nxg-price-alt { font: 500 .95rem/1.3 Inter, system-ui, sans-serif; color: #94A3B8; letter-spacing: 0; }
.nxg-price-note { margin-top: .4rem; font: 500 .8125rem/1.45 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-price-summary { margin-top: .9rem; font: 400 .9rem/1.55 Inter, system-ui, sans-serif; color: #CBD5E1; }
.nxg-price-state { margin-top: 1.25rem; font: 600 .875rem/1.4 Inter, system-ui, sans-serif; color: #5EEAD4; }
.nxg-price-points { margin-top: 1rem; display: grid; gap: .5rem; font: 400 .9rem/1.45 Inter, system-ui, sans-serif; color: #CBD5E1; }
.nxg-price-points li::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .6rem; border-radius: 999px; background: #00B5B0; vertical-align: .1em; }
.nxg-price-group { margin-top: 1.1rem; font: 600 .8125rem/1.3 Inter, system-ui, sans-serif; color: #fff; }
.nxg-price-group + .nxg-price-points { margin-top: .5rem; }
.nxg-pro-statement { margin-top: 1rem; padding: .7rem .85rem; border-radius: .7rem; border: 1px solid rgba(245, 176, 41, .35); background: rgba(245, 176, 41, .07); font: 400 .8125rem/1.5 Inter, system-ui, sans-serif; color: #CBD5E1; }
.nxg-pro-statement strong { color: #FFD36B; font-weight: 700; }
.nxg-checkout-statement { font: 700 .78rem/1.4 Inter, system-ui, sans-serif; color: #FFD36B; }
.nxg-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: .8rem; border: 1px solid #1E2C44; }
.nxg-matrix { width: 100%; min-width: 36rem; border-collapse: collapse; font: 400 .84rem/1.4 Inter, system-ui, sans-serif; color: #CBD5E1; }
.nxg-matrix th, .nxg-matrix td { padding: .6rem .75rem; border-bottom: 1px solid #1E2C44; text-align: center; vertical-align: top; }
.nxg-matrix thead th { font-weight: 600; font-size: .78rem; color: #fff; background: rgb(2 6 23 / .35); }
.nxg-matrix tbody th { text-align: left; font-weight: 500; color: #E2E8F0; }
.nxg-matrix tbody tr:last-child th, .nxg-matrix tbody tr:last-child td { border-bottom: 0; }
.nxg-matrix-note { display: block; margin-top: .15rem; font-size: .74rem; color: #94A3B8; font-weight: 400; }
.nxg-matrix-yes { color: #5EEAD4; font-weight: 700; }
.nxg-matrix-no { color: #475569; }
.nxg-checkout { display: grid; gap: .75rem; padding: .9rem; border-radius: .8rem; border: 1px solid #1E2C44; background: rgb(2 6 23 / .35); }
.nxg-checkout-pay { display: flex; gap: 1rem; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; color: #E2E8F0; }
.nxg-checkout-pay label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.nxg-checkout-pay input, .nxg-checkout-terms input { accent-color: #0079C2; }
.nxg-checkout-terms { display: flex; gap: .55rem; align-items: flex-start; font: 400 .75rem/1.45 Inter, system-ui, sans-serif; color: #94A3B8; cursor: pointer; }
.nxg-checkout-terms input { margin-top: .15rem; flex-shrink: 0; }
.nxg-checkout-terms a { color: #7DB4FF; text-decoration: underline; text-underline-offset: 2px; }

/* Staff Console → Billing: which keys are set (Phase 14A.1) */
.nxg-gateway-mode {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.4rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  border: 1px solid currentColor;
}

/* ── Spotlight rails (Phase 14B) ─────────────────────────────────────
   "✨ Spotlight Members" / "✨ Spotlight Teams": a single swipeable row of
   compact cards. A thin amber top edge marks them as promoted, never as a
   ranking. */
.nxg-spot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .75rem; }
.nxg-spot-title { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.nxg-spot-how { font-family: Inter, system-ui, sans-serif; font-size: .75rem; color: #8A9BB4; }
.nxg-spot-how:hover { color: #fff; }
.nxg-spot-row { display: flex; gap: .75rem; padding-bottom: .25rem; scroll-snap-type: x mandatory; }
.nxg-spot-card {
  position: relative; flex: 0 0 15.5rem; max-width: 80vw; display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem; border-radius: 1rem; scroll-snap-align: start;
  background: #13233A; border: 1px solid #22344F; box-shadow: inset 0 2px 0 rgba(245, 176, 41, .55);
  transition: border-color .15s ease, transform .15s ease;
}
.nxg-spot-card:hover { border-color: #2F8BFF; }
.nxg-spot-card:focus-within { border-color: #4DA3FF; }
.nxg-spot-avatar { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 9999px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0F1D30; border: 1px solid #22344F; }
.nxg-spot-avatar.is-team { border-radius: .75rem; }
.nxg-spot-name { font-family: Inter, system-ui, sans-serif; font-size: .875rem; font-weight: 600; color: #fff; }
.nxg-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nxg-stretch:focus-visible { outline: none; }
.nxg-spot-card .nxg-tag-mark { position: relative; z-index: 1; }
.nxg-spot-meta { display: block; font-family: Inter, system-ui, sans-serif; font-size: .75rem; color: #8A9BB4; }
@media (prefers-reduced-motion: reduce) { .nxg-spot-card { transition: none; } }

/* Sponsor credit and the Bounty Board's Featured strip (Phase 14B) */
.nxg-sponsor-credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-family: Inter, system-ui, sans-serif; font-size: .75rem; color: #8A9BB4; }
.nxg-sponsor-name { color: #E6EDF7; font-weight: 600; }
.nxg-featured { margin-bottom: 1.5rem; }
.nxg-featured-row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.nxg-featured-card {
  position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: 1rem;
  background: #13233A; border: 1px solid #22344F; box-shadow: inset 0 2px 0 rgba(0, 181, 176, .6);
}
.nxg-featured-card:hover, .nxg-featured-card:focus-within { border-color: #00B5B0; }
.nxg-featured-label { font-family: Inter, system-ui, sans-serif; font-size: .6875rem; font-weight: 700; color: #2FD3CD; }

/* ── Feedback and ideas (14C) ─────────────────────────────────────── */
.nxg-fb-step { display: flex; gap: .85rem; align-items: flex-start; }
.nxg-fb-step-n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid #2A4268; background: #0E1A2C; color: #7DB4FF; font: 700 .8125rem/1 "Space Grotesk", Inter, sans-serif; }
.nxg-fb-pill { position: relative; display: inline-flex; cursor: pointer; }
.nxg-fb-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.nxg-fb-pill span { display: inline-flex; padding: .45rem .9rem; border-radius: 999px; border: 1px solid #22344F; background: #0E1A2C; color: #CBD5E1; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; transition: border-color .15s ease, background-color .15s ease; }
.nxg-fb-pill input:checked + span { border-color: rgba(0, 121, 194, .7); background: rgba(0, 121, 194, .14); color: #fff; }
.nxg-fb-pill input:focus-visible + span { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-fb-status { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; border: 1px solid #2A3B57; color: #CBD5E1; font: 600 .75rem/1.3 Inter, system-ui, sans-serif; }
.nxg-fb-status[data-status="new"] { border-color: #2563EB; color: #93C5FD; }
.nxg-fb-status[data-status="planned"], .nxg-fb-status[data-status="reviewing"] { border-color: #7C3AED; color: #C4B5FD; }
.nxg-fb-status[data-status="done"], .nxg-fb-status[data-status="answered"] { border-color: #059669; color: #6EE7B7; }
.nxg-fb-status[data-status="not_planned"], .nxg-fb-status[data-status="duplicate"] { color: #94A3B8; }
.nxg-fb-importance { font: 600 .6875rem/1.3 Inter, system-ui, sans-serif; color: #FCA5A5; }

/* ── NXG Pro value (14C) ──────────────────────────────────────────── */
.nxg-review-due { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; border: 1px solid rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .1); color: #FCA5A5; font: 600 .6875rem/1.4 Inter, system-ui, sans-serif; white-space: nowrap; }
.nxg-review-breakdown { margin-top: 1.25rem; padding: 1rem; border-radius: .9rem; border: 1px solid #1E2C44; background: rgb(2 6 23 / .3); }
.nxg-review-row + .nxg-review-row { margin-top: .85rem; }
.nxg-review-bar { margin-top: .35rem; height: .4rem; border-radius: 999px; background: #1E2C44; overflow: hidden; }
.nxg-review-bar > span { display: block; height: 100%; border-radius: inherit; background: #F59E0B; }
.nxg-review-row.is-strong .nxg-review-bar > span { background: #2DD4BF; }
.nxg-review-row.is-fair .nxg-review-bar > span { background: #60A5FA; }
.nxg-pro-priority { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .1); color: #FCD34D; font: 600 .6875rem/1.4 Inter, system-ui, sans-serif; white-space: nowrap; }
.nxg-match-card { position: relative; padding: .9rem 1rem; border-radius: .9rem; border: 1px solid #22344F; background: #0E1A2C; transition: border-color .15s ease; }
.nxg-match-card:hover { border-color: #36507A; }
.nxg-match-score { display: inline-flex; padding: .1rem .5rem; border-radius: 999px; background: rgba(0, 121, 194, .14); color: #93C5FD; font: 600 .6875rem/1.4 Inter, system-ui, sans-serif; }
.nxg-match-teaser { padding: .75rem 1rem; border-radius: .9rem; border: 1px dashed #2A4268; background: #0B1626; }
/* Upgrade suggestions: one calm card, the plan's colour on the edge. */
.nxg-nudge { display: grid; gap: 1rem; margin: 0 0 1.5rem; padding: 1.1rem 1.15rem; border-radius: 1rem; border: 1px solid #22344F; border-left: 3px solid #F59E0B; background: linear-gradient(135deg, rgba(245, 158, 11, .06), rgb(14 26 44 / 0) 55%), #0E1A2C; }
.nxg-nudge.is-employer { border-left-color: #14B8A6; background: linear-gradient(135deg, rgba(20, 184, 166, .07), rgb(14 26 44 / 0) 55%), #0E1A2C; }
@media (min-width: 768px) { .nxg-nudge { grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; padding: 1.25rem 1.5rem; } }
.nxg-nudge-plan { font: 700 .75rem/1.2 Inter, system-ui, sans-serif; color: #FCD34D; }
.nxg-nudge.is-employer .nxg-nudge-plan { color: #5EEAD4; }
.nxg-nudge-title { margin-top: .3rem; font: 700 1.125rem/1.3 "Space Grotesk", Inter, sans-serif; color: #fff; }
.nxg-nudge-lead { margin-top: .35rem; font: 400 .875rem/1.5 Inter, system-ui, sans-serif; color: #CBD5E1; max-width: 42rem; }
.nxg-nudge-points { margin-top: .6rem; display: grid; gap: .3rem; }
.nxg-nudge-points li { position: relative; padding-left: 1.1rem; font: 400 .8125rem/1.45 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-nudge-points li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .4rem; height: .4rem; border-radius: 999px; background: #F59E0B; }
.nxg-nudge.is-employer .nxg-nudge-points li::before { background: #14B8A6; }
.nxg-nudge-price { font: 700 1.5rem/1.1 "Space Grotesk", Inter, sans-serif; color: #fff; }
.nxg-nudge-note { margin-top: .3rem; font: 400 .75rem/1.45 Inter, system-ui, sans-serif; color: #7D8BA3; }
.nxg-nudge-actions { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nxg-nudge-later { padding: .5rem .75rem; border-radius: .6rem; font: 600 .8125rem/1.2 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-nudge-later:hover { color: #fff; background: #13213A; }

/* ── NXG Pro profile style (23 Oct 2026): accent + header, Pro only ── */
.nxg-hero-styled { position: relative; overflow: hidden; --nxg-accent-a: #0079C2; --nxg-accent-b: #6C47FF; }
.nxg-hero-styled::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--nxg-accent-a), var(--nxg-accent-b)); }
.nxg-hero-styled > * { position: relative; }
.nxg-hero-styled .rounded-full.w-24 { border-color: var(--nxg-accent-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nxg-accent-b) 30%, transparent); }
.nxg-accent-aurora { --nxg-accent-a: #22D3EE; --nxg-accent-b: #8B5CF6; }
.nxg-accent-lagoon { --nxg-accent-a: #14B8A6; --nxg-accent-b: #38BDF8; }
.nxg-accent-ember { --nxg-accent-a: #F59E0B; --nxg-accent-b: #F43F5E; }
.nxg-accent-orchid { --nxg-accent-a: #A855F7; --nxg-accent-b: #EC4899; }
.nxg-accent-graphite { --nxg-accent-a: #94A3B8; --nxg-accent-b: #475569; }
.nxg-accent-standard { --nxg-accent-a: #0079C2; --nxg-accent-b: #6C47FF; }
.nxg-hero-grid { background-image: linear-gradient(color-mix(in srgb, var(--nxg-accent-a) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--nxg-accent-a) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.nxg-hero-constellation { background-image: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--nxg-accent-a) 55%, transparent) 0 1.5px, transparent 2px), radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--nxg-accent-b) 55%, transparent) 0 1.5px, transparent 2px), radial-gradient(circle at 64% 76%, color-mix(in srgb, var(--nxg-accent-a) 45%, transparent) 0 1.2px, transparent 2px), radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--nxg-accent-b) 16%, transparent), transparent 55%); }
.nxg-style-choice { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: 999px; border: 1px solid #1E2C44; font: 500 .8125rem/1.2 Inter, system-ui, sans-serif; color: #CBD5E1; cursor: pointer; }
.nxg-style-choice:has(input:checked) { border-color: #4DA3FF; color: #fff; background: rgba(0, 121, 194, .12); }
.nxg-style-choice input { accent-color: #0079C2; }
.nxg-style-swatch { width: 1rem; height: 1rem; border-radius: 999px; background: linear-gradient(135deg, var(--nxg-accent-a), var(--nxg-accent-b)); }

/* ── Talent Density card (pre-Phase 16) ── */
.nxg-density-result { padding: 1rem; border-radius: .9rem; border: 1px solid rgba(0, 181, 176, .3); background: rgba(0, 181, 176, .06); }
.nxg-density-figure { font: 600 1rem/1.45 Inter, system-ui, sans-serif; color: #E2E8F0; }
.nxg-density-figure span { display: inline-block; margin-right: .3rem; font: 700 2rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #5EEAD4; vertical-align: -.15em; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   Primary buttons: the cyan → violet gradient (pre-Phase 16, from Ayo's
   Bounty Board and Teams concepts). Every primary action, whether it is a
   <button> or a link styled as one, shares it; text links and secondary
   (ghost) buttons are unchanged. The stops are a shade deeper than the
   concept art so white text keeps a 4.5:1 contrast across the button.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --nxg-cta-gradient: linear-gradient(100deg, #067B9E 0%, #2F6BEF 52%, #7C3AED 100%);
  --nxg-cta-shadow: 0 10px 26px -12px rgba(124, 58, 237, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.nxg-btn-primary,
.nxg-cta-gradient,
.nxg-chat-btn-primary,
.nxg-console-btn.is-primary,
.bg-brand-blue.hover\:bg-brand-blue-light {
  background-color: #2F6BEF;
  background-image: var(--nxg-cta-gradient);
  background-size: 140% 100%;
  background-position: 0% 50%;
  border-color: transparent;
  border-radius: .8rem;
  color: #fff;
  box-shadow: var(--nxg-cta-shadow);
  transition: background-position .35s ease, box-shadow .2s ease, filter .2s ease, transform .2s ease;
}
.nxg-btn-primary:hover,
.nxg-cta-gradient:hover,
.nxg-chat-btn-primary:hover:not(:disabled),
.nxg-console-btn.is-primary:hover,
.bg-brand-blue.hover\:bg-brand-blue-light:hover {
  background-color: #2F6BEF;
  background-position: 100% 50%;
  box-shadow: 0 14px 30px -12px rgba(124, 58, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.nxg-btn-primary:active,
.bg-brand-blue.hover\:bg-brand-blue-light:active { transform: translateY(1px); }
.nxg-btn-primary:disabled,
.nxg-chat-btn-primary:disabled,
.bg-brand-blue.hover\:bg-brand-blue-light:disabled,
.bg-brand-blue.hover\:bg-brand-blue-light[aria-disabled="true"] {
  background-image: none; background-color: #334155; box-shadow: none; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .nxg-btn-primary, .nxg-chat-btn-primary, .nxg-console-btn.is-primary,
  .bg-brand-blue.hover\:bg-brand-blue-light { transition: none; }
}

/* ── Bounty Board (pre-Phase 16, from the Bounty Board concept) ── */
.nxg-bounty-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.nxg-bolt { color: #22D3EE; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .45)); }
.nxg-xp-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: .9rem; border: 1px solid rgba(34, 211, 238, .35); background: linear-gradient(120deg, rgba(8, 145, 178, .14), rgba(124, 58, 237, .14)); }
.nxg-xp-chip-label { font: 500 .72rem/1.2 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-xp-chip-value { display: inline-flex; align-items: center; gap: .3rem; font: 700 1.15rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.nxg-xp-chip-value svg { color: #FBBF24; }
.nxg-xp-path { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: none; }
.nxg-xp-path li { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .85rem; border-radius: .9rem; border: 1px solid #1E2C44; background: #0F1B30; font: 400 .78rem/1.45 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-xp-path strong { display: block; font-weight: 600; font-size: .85rem; color: #fff; }
.nxg-xp-step-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .6rem; color: #22D3EE; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .25); }
.nxg-xp-path li:nth-child(2) .nxg-xp-step-icon { color: #FBBF24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .25); }
.nxg-xp-path li:nth-child(3) .nxg-xp-step-icon { color: #A78BFA; background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .25); }
.nxg-bounty-tile { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: .65rem; font: 700 .75rem/1 "Space Grotesk", Inter, system-ui, sans-serif; text-transform: uppercase; color: #E0F2FE; background: linear-gradient(140deg, #0E3A5C, #2A1F5C); border: 1px solid rgba(96, 165, 250, .35); }
.nxg-bounty-tile-hard { border-color: rgba(248, 113, 113, .45); }
.nxg-bounty-tile-medium { border-color: rgba(251, 191, 36, .45); }
.nxg-bounty-tile-easy { border-color: rgba(52, 211, 153, .45); }
.nxg-bounty-xp { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; font: 700 .95rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.nxg-bounty-xp svg { color: #FBBF24; }
.nxg-bounty-open { display: inline-flex; align-items: center; gap: .35rem; font: 500 .72rem/1.2 Inter, system-ui, sans-serif; color: #6EE7B7; text-align: right; }
.nxg-bounty-open-dot { width: .45rem; height: .45rem; border-radius: 999px; border: 1.5px solid #34D399; }
.nxg-bounty-view { width: 100%; margin-top: .75rem; min-height: 2.25rem; padding: .45rem .9rem; font-size: .8rem; }

/* ── Network connector (pre-Phase 16): real people, joined ── */
.nxg-net { position: relative; width: 100%; max-width: 22rem; aspect-ratio: 1; margin: 0 auto; }
.nxg-net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nxg-net-link { stroke: url(#nxg-net-grad); stroke-width: .45; stroke-linecap: round; stroke-dasharray: 2 2.5; opacity: .75; animation: nxg-net-flow 6s linear infinite; }
.nxg-net-ring { stroke: #8B5CF6; stroke-opacity: .28; stroke-width: .3; }
@keyframes nxg-net-flow { to { stroke-dashoffset: -27; } }
.nxg-net-core { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; overflow: hidden; border-radius: 999px; font: 700 1.05rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; background: radial-gradient(circle at 35% 30%, #1D4ED8, #0B1530 70%); box-shadow: 0 0 0 2px rgba(34, 211, 238, .55), 0 0 32px rgba(99, 102, 241, .55); }
.nxg-net-core img { width: 100%; height: 100%; object-fit: cover; }
.nxg-net-node { position: absolute; width: 19%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: #13213A; box-shadow: 0 0 0 2px #0B1424, 0 0 0 3.5px rgba(34, 211, 238, .55), 0 8px 22px -8px rgba(124, 58, 237, .7); animation: nxg-net-pop .6s ease both, nxg-net-float 6s ease-in-out infinite; transition: scale .25s ease; }
.nxg-net-node:hover { scale: 1.12; z-index: 2; }
.nxg-net-node:nth-child(odd) { box-shadow: 0 0 0 2px #0B1424, 0 0 0 3.5px rgba(139, 92, 246, .6), 0 8px 22px -8px rgba(34, 211, 238, .5); }
.nxg-net-node img { width: 100%; height: 100%; object-fit: cover; }
.nxg-net-node span { font: 700 .8rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #E2E8F0; }
.nxg-net-more { position: absolute; right: 4%; bottom: 6%; padding: .2rem .55rem; border-radius: 999px; font: 600 .72rem/1.3 Inter, system-ui, sans-serif; color: #C4B5FD; background: rgba(124, 58, 237, .16); border: 1px solid rgba(139, 92, 246, .4); }
/* Each face drifts a few pixels, out of step with its neighbours (the
   second animation-delay is set per node), and the centre breathes. */
@keyframes nxg-net-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.nxg-net-core { animation: nxg-net-beat 3.2s ease-out infinite; }
@keyframes nxg-net-beat {
  0% { box-shadow: 0 0 0 2px rgba(34, 211, 238, .55), 0 0 32px rgba(99, 102, 241, .55), 0 0 0 2px rgba(34, 211, 238, .45); }
  70%, 100% { box-shadow: 0 0 0 2px rgba(34, 211, 238, .55), 0 0 32px rgba(99, 102, 241, .55), 0 0 0 20px rgba(34, 211, 238, 0); }
}
@keyframes nxg-net-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ── Team Directory hero (pre-Phase 16, Teams concept) ── */
.nxg-team-hero { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .nxg-team-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }
.nxg-team-feature { position: relative; padding: 1.25rem; border-radius: 1.1rem; border: 1px solid rgba(96, 165, 250, .35); background: linear-gradient(150deg, rgba(14, 58, 92, .55), rgb(15 27 48 / .95) 55%), #0F1B30; box-shadow: 0 0 0 1px rgba(124, 58, 237, .12), 0 24px 50px -30px rgba(79, 70, 229, .8); }
.nxg-team-feature-badge { position: absolute; top: 1rem; right: 1rem; padding: .2rem .6rem; border-radius: 999px; font: 600 .7rem/1.3 Inter, system-ui, sans-serif; color: #E0F2FE; background: rgba(37, 99, 235, .3); border: 1px solid rgba(96, 165, 250, .45); }
.nxg-team-feature-avatar { display: grid; place-items: center; flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 999px; overflow: hidden; font: 700 1.1rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; background: radial-gradient(circle at 35% 30%, #1D4ED8, #0B1530 70%); box-shadow: 0 0 0 2px rgba(34, 211, 238, .5), 0 0 24px rgba(99, 102, 241, .45); }
.nxg-team-feature-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nxg-team-chip { padding: .25rem .65rem; border-radius: 999px; font: 600 .72rem/1.3 Inter, system-ui, sans-serif; color: #BFDBFE; background: rgba(37, 99, 235, .16); border: 1px solid rgba(96, 165, 250, .35); }
.nxg-avatar-stack { display: flex; margin: 0; padding: 0 0 0 .5rem; list-style: none; }
.nxg-avatar-stack li { margin-left: -.5rem; }
.nxg-avatar-stack a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; overflow: hidden; background: #13213A; box-shadow: 0 0 0 2px #0F1B30, 0 0 0 3.5px rgba(34, 211, 238, .45); font: 700 .7rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #E2E8F0; }
.nxg-avatar-stack img { width: 100%; height: 100%; object-fit: cover; }
.nxg-avatar-stack-more { color: #C4B5FD !important; background: rgba(124, 58, 237, .16) !important; box-shadow: 0 0 0 2px #0F1B30, 0 0 0 3.5px rgba(139, 92, 246, .5) !important; }
.nxg-team-net { display: grid; gap: .75rem; justify-items: center; }
.nxg-team-net .nxg-net { max-width: 15rem; }
.nxg-team-tagline { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: .9rem; border: 1px solid rgba(96, 165, 250, .28); background: rgb(15 27 48 / .8); font: 500 .85rem/1.35 Inter, system-ui, sans-serif; color: #E2E8F0; }
.nxg-team-tagline svg { color: #60A5FA; flex-shrink: 0; }

.nxg-collective-net { display: grid; gap: 1rem; align-items: center; margin: 0 0 2rem; }
.nxg-collective-net .nxg-net { width: 100%; max-width: 17rem; }
.nxg-collective-net-copy { max-width: 32rem; font: 400 .95rem/1.6 Inter, system-ui, sans-serif; color: #94A3B8; text-align: center; margin: 0 auto; }
/* A fixed first column: an "auto" column gave the drawing (all absolutely
   positioned inside) no width at all on wider screens. */
@media (min-width: 768px) { .nxg-collective-net { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 2rem; } .nxg-collective-net-copy { text-align: left; margin: 0; } }
@media (min-width: 1024px) { .nxg-collective-net { grid-template-columns: 20rem minmax(0, 1fr); gap: 3rem; } .nxg-collective-net .nxg-net { max-width: 20rem; } .nxg-collective-net-copy { font-size: 1.05rem; } }
.nxg-empty-art { display: block; }

/* ── Explainer visuals (pre-Phase 16) ── */
.nxg-routes { margin: 0 0 2rem; }
.nxg-routes-svg { width: 100%; max-width: 40rem; height: auto; display: block; }
.nxg-routes-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 6; animation: nxg-net-flow 5s linear infinite; }
.nxg-routes-box { fill: #0F1B30; stroke: #24324A; stroke-width: 1.5; }
.nxg-routes-bar { fill: #13213A; stroke: url(#routes-g); stroke-width: 2; }
.nxg-routes-badge { fill: rgba(47, 139, 255, .12); stroke: rgba(47, 139, 255, .45); stroke-width: 1.5; }
.nxg-routes-label { font: 600 13px Inter, system-ui, sans-serif; fill: #F1F5F9; }
.nxg-routes-sub { font: 400 11px Inter, system-ui, sans-serif; fill: #94A3B8; }
.nxg-axes { margin: 0 0 1rem; }
.nxg-axes-svg { width: 100%; max-width: 36rem; height: auto; display: block; }
.nxg-axes-label { font: 600 14px Inter, system-ui, sans-serif; fill: #F1F5F9; }
.nxg-axes-sub { font: 400 11px Inter, system-ui, sans-serif; fill: #94A3B8; }

/* ── Compare NXG (pre-Phase 16) ── */
.nxg-compare-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.1rem 1.2rem; border-radius: 1rem; border: 1px solid #1E2C44; background: #0F1B30; transition: border-color .15s ease, transform .15s ease; }
.nxg-compare-card:hover { border-color: rgba(96, 165, 250, .55); }
.nxg-compare-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; font: 700 1.1rem/1.2 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; }
.nxg-compare-vs-sep { font: 500 .75rem/1 Inter, system-ui, sans-serif; color: #64748B; }
.nxg-compare-is { font: 400 .85rem/1.45 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-compare-cta { margin-top: auto; font: 600 .8rem/1.3 Inter, system-ui, sans-serif; color: #8FCDF3; }
.nxg-compare-table td { text-align: left; }
.nxg-compare-table thead th:nth-child(3), .nxg-compare-ours { background: rgba(37, 99, 235, .08); color: #E2E8F0; }
.nxg-compare-choose { border-color: rgba(96, 165, 250, .4); }
@media (prefers-reduced-motion: reduce) { .nxg-compare-card { transition: none; } }

.nxg-matrix thead th:first-child { text-align: left; }

/* Phones: each comparison row becomes a small card (no sideways scroll) */
@media (max-width: 639.98px) {
  .nxg-compare-table { min-width: 0; }
  .nxg-compare-table thead { display: none; }
  .nxg-compare-table, .nxg-compare-table tbody, .nxg-compare-table tr, .nxg-compare-table th, .nxg-compare-table td { display: block; width: 100%; }
  .nxg-compare-table tr { border-bottom: 1px solid #1E2C44; padding: .4rem 0; }
  .nxg-compare-table tbody th { padding-bottom: .2rem; border: 0; font-weight: 600; }
  .nxg-compare-table td { border: 0; padding-top: .35rem; padding-bottom: .35rem; }
  .nxg-compare-table td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; color: rgb(var(--nxg-navy-500)); }
}

/* ── Tech Artifacts (D-16.19) ─────────────────────────────────────────
   templates/artifacts/* and components/cards/artifact_card.html. Each
   artifact carries its domain's colour as --dom (apps/artifacts/models.
   DOMAIN_COLORS); the "sheet" at the top of a card is a blueprint grid
   tinted with it, so the six domains read apart at a glance. */
.nxg-art-aura {
  position: absolute; inset: -3rem 0 auto; height: 22rem; z-index: -1; pointer-events: none;
  background: radial-gradient(36rem 14rem at 10% 8%, rgba(34, 211, 238, .12), transparent 70%),
    radial-gradient(30rem 12rem at 88% 0%, rgba(244, 114, 182, .11), transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.nxg-art {
  overflow: hidden;
  background: linear-gradient(180deg, rgb(19 34 59 / .92) 0%, rgb(13 25 44 / .92) 100%);
  border: 1px solid rgba(110, 150, 230, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s ease, box-shadow .25s ease, translate .25s var(--nxg-ease-out);
}
.nxg-art:hover, .nxg-art:focus-within {
  border-color: color-mix(in srgb, var(--dom, #3B82F6) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 48px -26px color-mix(in srgb, var(--dom, #3B82F6) 70%, transparent);
}
@media (hover: hover) { .nxg-art:hover { translate: 0 -3px; } }
.nxg-art-link:focus-visible::after { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-art-sheet {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
  height: 6.75rem; padding: .85rem 1rem;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--dom) 10%, transparent) 1px, transparent 1px) 0 0 / 100% 14px,
    linear-gradient(90deg, color-mix(in srgb, var(--dom) 10%, transparent) 1px, transparent 1px) 0 0 / 14px 100%,
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--dom) 26%, transparent), transparent 62%),
    #0B1626;
  border-bottom: 1px solid color-mix(in srgb, var(--dom) 28%, transparent);
}
/* The folded corner: a sheet of work, not a photo. */
.nxg-art-sheet::after {
  content: ""; position: absolute; top: 0; left: 0; width: 1.6rem; height: 1.6rem;
  background: linear-gradient(135deg, #0D1B2A 50%, color-mix(in srgb, var(--dom) 45%, #13213A) 50%);
  border-bottom-right-radius: .35rem;
}
.nxg-art-glyph {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .9rem;
  color: color-mix(in srgb, var(--dom) 70%, #fff);
  background: color-mix(in srgb, var(--dom) 14%, #0B1626);
  border: 1px solid color-mix(in srgb, var(--dom) 40%, transparent);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--dom) 60%, transparent);
  transition: transform .35s var(--nxg-ease-spring);
}
.nxg-art:hover .nxg-art-glyph { transform: rotate(-6deg) scale(1.06); }
.nxg-art-sheet-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 0; }
.nxg-art-kind { font: 600 .75rem/1.2 Inter, system-ui, sans-serif; color: #C9D4E5; white-space: nowrap; }
.nxg-art-format {
  display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: .4rem; white-space: nowrap;
  font: 700 .6875rem/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; color: #E2E8F0;
  background: rgb(13 27 42 / .85); border: 1px solid rgba(255, 255, 255, .1);
}
.nxg-art-domain { display: inline-flex; align-items: center; gap: .45rem; font: 600 .75rem/1.3 Inter, system-ui, sans-serif; color: color-mix(in srgb, var(--dom, #8A9BB3) 60%, #fff); }
.nxg-art-dot { width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 9999px; background: var(--dom, #8A9BB3); box-shadow: 0 0 8px color-mix(in srgb, var(--dom, #8A9BB3) 70%, transparent); }
.nxg-art-save {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem;
  color: #C9D4E5; background: rgb(11 22 38 / .82); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: color .15s ease, border-color .15s ease, transform .2s var(--nxg-ease-spring);
}
.nxg-art-save:hover { color: #fff; border-color: rgba(255, 255, 255, .28); }
.nxg-art-save.is-saved { color: #FBBF24; border-color: rgba(251, 191, 36, .5); }
.nxg-art-save:active { transform: scale(.9); }
.nxg-art-save:focus-visible, .nxg-art-btn:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-art-btn {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; border-radius: .75rem; cursor: pointer;
  font: 600 .875rem/1.2 Inter, system-ui, sans-serif; color: #E2E8F0; background: rgb(13 27 42 / .55); border: 1px solid #2D4566;
  transition: color .15s ease, border-color .15s ease;
}
.nxg-art-btn:hover { color: #fff; border-color: #3A5277; }
.nxg-art-btn.is-saved { color: #FBBF24; border-color: rgba(251, 191, 36, .45); }
.nxg-art-select {
  background: rgb(26 46 68 / .8); border: 1px solid rgba(255, 255, 255, .08); color: #fff;
  font: 400 .875rem/1.2 Inter, system-ui, sans-serif; padding: .75rem 2rem .75rem .75rem; border-radius: .75rem; max-width: 100%;
}
.nxg-art-select:hover { border-color: rgba(255, 255, 255, .2); }
.nxg-art-select:focus { outline: none; border-color: #0079C2; box-shadow: 0 0 0 1px #0079C2; }
.nxg-art-guide { padding: 1.5rem; border-radius: 1.1rem; border: 1px dashed #2D4566; background: rgb(15 27 48 / .6); }
.nxg-art-guide-item { padding: 1rem; border-radius: .9rem; background: #0F1B30; border: 1px solid color-mix(in srgb, var(--dom) 25%, #1E2C44); }
.nxg-art-hero { display: flex; align-items: flex-start; gap: 1rem; }
.nxg-art-hero-glyph {
  display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1.1rem;
  color: color-mix(in srgb, var(--dom) 70%, #fff);
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--dom) 12%, transparent) 1px, transparent 1px) 0 0 / 100% 10px,
    linear-gradient(90deg, color-mix(in srgb, var(--dom) 12%, transparent) 1px, transparent 1px) 0 0 / 10px 100%,
    color-mix(in srgb, var(--dom) 14%, #0B1626);
  border: 1px solid color-mix(in srgb, var(--dom) 45%, transparent);
  box-shadow: 0 0 34px -8px color-mix(in srgb, var(--dom) 65%, transparent);
}
@media (min-width: 640px) { .nxg-art-hero-glyph { display: inline-flex; } }
.nxg-art-panel { padding: 1.25rem; border-radius: 1rem; background: #0F1B30; border: 1px solid #1E2C44; }
.nxg-art-panel .nxg-btn-primary, .nxg-art-panel .nxg-btn-ghost { display: flex; }
.nxg-art-callout { padding: 1rem 1.15rem; border-radius: .9rem; border: 1px solid color-mix(in srgb, var(--dom) 30%, #1E2C44); background: color-mix(in srgb, var(--dom) 6%, #0F1B30); }
.nxg-art-prose { overflow-wrap: anywhere; }
.nxg-art-prose :where(ul) > li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.25rem; }
.nxg-art-embed-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--dom) 30%, #1E2C44); background: #0B1626; }
.nxg-art-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nxg-art-embed-load {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  color: color-mix(in srgb, var(--dom) 70%, #fff); cursor: pointer; border: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--dom) 9%, transparent) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, color-mix(in srgb, var(--dom) 9%, transparent) 1px, transparent 1px) 0 0 / 18px 100%,
    #0B1626;
}
.nxg-art-embed-load:hover { background-color: #0F1B30; }
.nxg-art-embed-load:focus-visible { outline: 2px solid #7DB4FF; outline-offset: -4px; }
.nxg-art-choice {
  display: block; padding: .85rem 1rem; border-radius: .85rem; cursor: pointer;
  background: #0F1B30; border: 1px solid #1E2C44; transition: border-color .15s ease, background .15s ease;
}
.nxg-art-choice:hover { border-color: #2D4566; }
.nxg-art-choice:has(input:checked) { border-color: var(--dom); background: color-mix(in srgb, var(--dom) 10%, #0F1B30); box-shadow: 0 0 0 1px var(--dom) inset; }
.nxg-art-choice:has(input:focus-visible) { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-art-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.nxg-art-tabs a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 9999px;
  font: 500 .875rem/1.2 Inter, system-ui, sans-serif; color: #C9D4E5; background: rgb(17 30 52 / .75); border: 1px solid rgba(255, 255, 255, .08);
}
.nxg-art-tabs a span { font-variant-numeric: tabular-nums; color: #8A9BB3; }
.nxg-art-tabs a:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
.nxg-art-tabs a[aria-current="page"] { color: #fff; border-color: transparent; background: linear-gradient(100deg, #1E6BFF, #3D63FF); }
.nxg-art-tabs a[aria-current="page"] span { color: #DCE7FF; }
.nxg-art-stat { padding: .9rem 1rem; border-radius: .9rem; background: #0F1B30; border: 1px solid #1E2C44; }
.nxg-art-stat dt { font: 400 .8rem/1.3 Inter, system-ui, sans-serif; color: #94A3B8; }
.nxg-art-stat dd { margin-top: .25rem; font: 700 1.5rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.nxg-art-edit {
  position: absolute; top: .75rem; right: 3.35rem; z-index: 11; display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .8rem; border-radius: .7rem;
  font: 600 .8rem/1 Inter, system-ui, sans-serif; color: #E2E8F0; background: rgb(11 22 38 / .82); border: 1px solid rgba(255, 255, 255, .12);
}
.nxg-art-edit:hover { color: #fff; border-color: rgba(255, 255, 255, .28); }
.nxg-art-edit:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nxg-art, .nxg-art-glyph, .nxg-art-save { transition: none; } .nxg-art:hover { translate: none; } }

/* ── Chip rails: a row of chips wider than the page (24 Oct 2026) ─────
   The row scrolls sideways inside its own box; the end with more to see
   fades and gets an arrow button (nxg-ui.js, data-rail). Mouse wheels
   and trackpads scroll it, phones swipe it, and a slim scrollbar shows
   on hover for mouse users. */
.nxg-rail { position: relative; min-width: 0; }
.nxg-rail-track {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding-bottom: .35rem; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.nxg-rail-track > * { flex-shrink: 0; }
.nxg-rail:hover .nxg-rail-track { scrollbar-color: #2D4566 transparent; }
.nxg-rail-track::-webkit-scrollbar { height: 6px; }
.nxg-rail-track::-webkit-scrollbar-thumb { background: transparent; border-radius: 9999px; }
.nxg-rail:hover .nxg-rail-track::-webkit-scrollbar-thumb { background: #2D4566; }
.nxg-rail.has-right .nxg-rail-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 4.5rem), transparent); }
.nxg-rail.has-left .nxg-rail-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5rem); mask-image: linear-gradient(90deg, transparent, #000 4.5rem); }
.nxg-rail.has-left.has-right .nxg-rail-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent); }
.nxg-rail-btn {
  position: absolute; top: calc(50% - .175rem); z-index: 3; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; cursor: pointer;
  color: #E2E8F0; background: rgb(15 27 48 / .95); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .7); transition: color .15s ease, border-color .15s ease;
}
.nxg-rail-btn[hidden] { display: none; }
.nxg-rail-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.nxg-rail-btn:focus-visible { outline: 2px solid #7DB4FF; outline-offset: 2px; }
.nxg-rail-btn.is-prev { left: 0; }
.nxg-rail-btn.is-next { right: 0; }


/* Phase 17: founder-only controls an Admin sees read-only */
fieldset:disabled .nxg-field,
fieldset:disabled .nxg-console-btn,
fieldset:disabled input,
fieldset:disabled select { opacity: .55; cursor: not-allowed; }
.nxg-console-switch.is-locked { opacity: .6; cursor: not-allowed; }

/* ── Impact Score page visuals (Phase 21) ────────────────────────────
   The dial is a 270° arc: pathLength="100" on both circles, so 75 units
   of dash draw the full arc and the value is --score% of that. With no
   score (a guest, an applicant) the arc is drawn full as a picture of
   the 0–100 range. One draw-in when the page opens; nothing else moves. */
.nxg-impact-hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .nxg-impact-hero { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; } }
.nxg-impact-pillars { margin-top: 1.75rem; display: grid; gap: .9rem; font-family: Inter, system-ui, sans-serif; font-size: .8125rem; line-height: 1.35; }
@media (min-width: 640px) { .nxg-impact-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.nxg-impact-pillars li { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.nxg-impact-pillar-icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; color: #5EEAD4; background: rgba(0, 181, 176, .1); border: 1px solid rgba(0, 181, 176, .25); }

.nxg-impact-gauge { --score: 100; position: relative; margin: 0 auto; width: min(100%, 15rem); aspect-ratio: 1; }
.nxg-impact-gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nxg-impact-gauge circle { fill: none; stroke-width: 14; stroke-linecap: round; transform: rotate(135deg); transform-origin: 100px 100px; }
.nxg-impact-gauge-track { stroke: #1E2C44; stroke-dasharray: 75 100; }
.nxg-impact-gauge-value {
  stroke-dasharray: calc(var(--score) * .75) 100;
  filter: drop-shadow(0 0 10px rgba(0, 121, 194, .45));
}
.nxg-impact-gauge-end { fill: #7C8DA6; font: 600 11px Inter, system-ui, sans-serif; }
.nxg-impact-gauge-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 2.5rem; }
.nxg-impact-gauge-number { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.nxg-still) .nxg-impact-gauge-value { animation: nxg-impact-draw 1.1s var(--nxg-ease-out) .15s both; }
}
@keyframes nxg-impact-draw { from { stroke-dasharray: 0 100; } }

.nxg-impact-promise {
  margin-top: 2.5rem; display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.15rem; border-radius: 1rem;
  font-family: Inter, system-ui, sans-serif; font-size: .875rem; line-height: 1.5; color: #CBD5E1;
  background: linear-gradient(100deg, rgba(0, 181, 176, .12), rgba(108, 71, 255, .12)); border: 1px solid rgba(77, 163, 255, .3);
}
@media (min-width: 640px) { .nxg-impact-promise { align-items: center; padding: 1.1rem 1.5rem; } }
.nxg-impact-promise-icon { flex: none; color: #5EEAD4; }

.nxg-impact-tiles { display: grid; gap: .75rem; }
@media (min-width: 640px) { .nxg-impact-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nxg-impact-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.nxg-impact-tile { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; padding: 1rem 1.1rem; border-radius: 1rem; background: #0F1A2C; border: 1px solid #1E2C44; }
.nxg-impact-tile-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; color: #fff; background: linear-gradient(140deg, rgba(0, 121, 194, .35), rgba(108, 71, 255, .35)); border: 1px solid rgba(77, 163, 255, .28); }
.nxg-impact-tile-note { border-style: dashed; background: transparent; }
@media print {
  .nxg-impact-gauge-value { filter: none; }
  .nxg-impact-promise, .nxg-impact-tile, .nxg-impact-pillar-icon, .nxg-impact-tile-icon { background: none; }
}

/* Credential kit destinations (Phase 21) */
.nxg-kit-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
/* The text takes the row; a button or badge wraps under it on a phone instead of squeezing it. */
.nxg-kit-head > .min-w-0 { flex: 1 1 12rem; }
.nxg-kit-head + .nxg-kit-code, .nxg-kit-head + .nxg-kit-details { margin-top: .85rem; }
.nxg-kit-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; color: #fff; background: linear-gradient(140deg, rgba(0, 121, 194, .35), rgba(108, 71, 255, .35)); border: 1px solid rgba(77, 163, 255, .28); }
.nxg-kit-details summary { cursor: pointer; font: 600 .75rem/1.4 Inter, system-ui, sans-serif; color: #7FB8FF; }
.nxg-kit-details summary:hover { color: #fff; }
.nxg-kit-details dl { margin-top: .6rem; display: grid; gap: .4rem; font: 400 .8rem/1.45 Inter, system-ui, sans-serif; }
.nxg-kit-details dl div { display: grid; gap: .1rem; min-width: 0; }
@media (min-width: 640px) { .nxg-kit-details dl div { grid-template-columns: 10rem minmax(0, 1fr); gap: .75rem; } }
.nxg-kit-details dt { color: #7C8DA6; }
.nxg-kit-details dd { color: #E2E8F0; overflow-wrap: anywhere; }