/*
 * NexDirectory "Bright" design layer.
 * Loaded after style.css on every page. Re-skins the existing components
 * (white, Inter, navy + one purple) and styles the new mega nav.
 */
@font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --nex-bg: #ffffff; --nex-paper: #ffffff; --nex-surface: #ffffff; --nex-soft: #f6f9fc; --nex-soft-2: #eef2f7;
  --nex-ink: #0a2540; --nex-ink-2: #0d2b4a; --nex-ink-3: #123456; --nex-text: #0a2540; --nex-muted: #425466;
  --nex-line: #e6ebf1; --nex-primary: #635bff; --nex-primary-hover: #0a2540; --nex-primary-soft: #f0efff;
  --nex-yellow: #635bff; --nex-yellow-2: #8b85ff; --nex-violet: #635bff; --nex-cyan: #8b85ff; --nex-orange: #8b85ff;
  --nex-shadow: 0 13px 27px -5px rgba(50,50,93,.18), 0 8px 16px -8px rgba(0,0,0,.18);
  --b-navy: #0a2540; --b-slate: #425466; --b-purple: #635bff; --b-tint: #f0efff; --b-soft: #f6f9fc; --b-line: #e6ebf1;
  --b-shadow: 0 13px 27px -5px rgba(50,50,93,.15), 0 8px 16px -8px rgba(0,0,0,.15);
  --b-shadow-lg: 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3);
  /* nav tokens */
  --nx-font: "Inter", system-ui, -apple-system, sans-serif;
  --nx-ink: #0a2540; --nx-muted: #425466; --nx-panel: #fff; --nx-line: #e6ebf1;
  --nx-accent: #635bff; --nx-accent-ink: #fff; --nx-soft: #f0efff; --nx-radius: 16px; --nx-ease: cubic-bezier(.2,.8,.2,1);
}
body { font-family: var(--nx-font); color: var(--b-navy); background: #fff; letter-spacing: -.005em; }
h1, h2, h3, h4 { font-family: var(--nx-font); letter-spacing: -.035em; color: var(--b-navy); }
::selection { background: var(--b-tint); color: var(--b-navy); }
.nex-scroll-progress { z-index: 10001; }
.nex-scroll-progress span { background: var(--b-purple); }

/* ================= Nav ================= */
.nx-lock, .nx-lock body { overflow: hidden; }
.nx-header { position: fixed; inset: 0 0 auto; z-index: 100; font-family: var(--nx-font); color: var(--nx-top-ink, var(--nx-ink)); }
.nx-header[data-tone="light"] { --nx-top-ink: #fff; }
.nx-bar {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 24px;
  max-width: 1360px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 40px);
  transition: padding .4s var(--nx-ease);
}
.nx-header::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 100%; z-index: 0;
  background: var(--nx-panel); opacity: 0; transition: opacity .35s var(--nx-ease);
  box-shadow: 0 1px 0 var(--nx-line);
}
.nx-header.is-scrolled::before, .nx-header.is-mega::before { opacity: 1; }
.nx-header.is-scrolled, .nx-header.is-mega { --nx-top-ink: var(--nx-ink); }
.nx-header.is-scrolled .nx-bar { padding-top: 12px; padding-bottom: 12px; }

.nx-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.nx-logo-mark { width: 34px; height: 34px; color: var(--nx-accent); display: inline-flex; transition: transform .5s var(--nx-ease); }
.nx-logo:hover .nx-logo-mark { transform: rotate(-12deg) scale(1.06); }
.nx-logo-mark svg { width: 100%; height: 100%; }

.nx-desk { margin-left: 12px; }
.nx-desk ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nx-top {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  font: 600 15px/1 var(--nx-font); color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none;
  transition: background .25s;
}
.nx-top svg { width: 16px; height: 16px; transition: transform .3s var(--nx-ease); }
.nx-top:hover, .nx-top[aria-expanded="true"] { background: color-mix(in srgb, currentColor 10%, transparent); }
.nx-top[aria-expanded="true"] svg { transform: rotate(180deg); }

.nx-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nx-ghost { padding: 10px 14px; font-weight: 600; font-size: 15px; color: inherit; text-decoration: none; border-radius: 999px; }
.nx-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nx-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: var(--nx-accent); color: var(--nx-accent-ink); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .3s var(--nx-ease), box-shadow .3s;
}
.nx-cta svg { width: 18px; height: 18px; transition: transform .3s var(--nx-ease); }
.nx-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--nx-accent); }
.nx-cta:hover svg { transform: translateX(3px); }
.nx-burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; cursor: pointer; }
.nx-burger svg { width: 22px; height: 22px; }

/* Mega panel */
.nx-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--nx-panel); color: var(--nx-ink);
  clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--nx-ease); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
.nx-header.is-mega .nx-mega { clip-path: inset(0 0 0 0); }
.nx-mega-inner { max-width: 1360px; margin: 0 auto; padding: 8px clamp(16px, 3vw, 40px) 32px; display: grid; }
.nx-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--nx-ease), visibility 0s .3s; }
.nx-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .05s, transform .5s .05s var(--nx-ease), visibility 0s; }
.nx-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(10,10,20,.35); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.nx-header.is-mega .nx-scrim { opacity: 1; pointer-events: auto; }

.nx-panel-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.nx-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.nx-links li { opacity: 0; transform: translateY(10px); }
.nx-panel.is-on .nx-links li { opacity: 1; transform: none; transition: all .5s calc(.06s + var(--i) * .04s) var(--nx-ease); }
.nx-links a { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; }
.nx-links a:hover { background: var(--nx-soft); }
.nx-link-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--nx-soft); color: var(--nx-accent); transition: transform .3s var(--nx-ease), background .3s, color .3s; }
.nx-link-ic svg { width: 21px; height: 21px; }
.nx-links a:hover .nx-link-ic { background: var(--nx-accent); color: var(--nx-accent-ink); transform: rotate(-6deg) scale(1.05); }
.nx-links strong, .nxm-list strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.nx-links small, .nxm-list small { display: block; font-size: 14px; color: var(--nx-muted); line-height: 1.35; }

.nx-feature { position: relative; display: block; min-height: 300px; border-radius: var(--nx-radius); overflow: hidden; color: #fff; text-decoration: none; background: #222; }
.nx-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.2s var(--nx-ease); }
.nx-feature:hover video { transform: scale(1.12); }
.nx-feature-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75)); }
.nx-feature-play { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.nx-feature-play svg { width: 26px; height: 26px; }
.nx-feature-text { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.nx-feature-text em { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.nx-feature-text strong { display: block; font-size: 24px; line-height: 1.1; margin: 6px 0; letter-spacing: -.02em; }
.nx-feature-text small { font-size: 14px; opacity: .85; }

.nx-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.nx-tile { position: relative; aspect-ratio: 3/4; border-radius: var(--nx-radius); overflow: hidden; color: #fff; text-decoration: none; background: #222; opacity: 0; transform: translateY(16px) scale(.98); }
.nx-panel.is-on .nx-tile { opacity: 1; transform: none; transition: all .6s calc(.05s + var(--i) * .05s) var(--nx-ease); }
.nx-tile img, .nx-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--nx-ease), opacity .4s; }
.nx-tile video { opacity: 0; }
.nx-tile:hover video { opacity: 1; }
.nx-tile:hover img, .nx-tile:hover video { transform: scale(1.08); }
.nx-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)); }
.nx-tile-text { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; }
.nx-tile-text strong { display: block; font-size: 18px; letter-spacing: -.01em; }
.nx-tile-text small { font-size: 13px; opacity: .85; }
.nx-tile-go { position: absolute; z-index: 1; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--nx-accent); color: var(--nx-accent-ink); display: grid; place-items: center; transform: scale(0) rotate(-45deg); transition: transform .4s var(--nx-ease); }
.nx-tile-go svg { width: 18px; height: 18px; }
.nx-tile:hover .nx-tile-go { transform: scale(1) rotate(0); }
.nx-panel-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nx-line); font-size: 15px; color: var(--nx-muted); }
.nx-panel-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nx-accent); text-decoration: none; }
.nx-panel-foot svg { width: 16px; height: 16px; }

/* ---------- Mobile 100dvh layered ---------- */
.nx-mobile {
  position: fixed; inset: 0; z-index: 200; height: 100vh; height: 100dvh; overflow: hidden; overflow: clip;
  background: var(--nx-panel); color: var(--nx-ink); font-family: var(--nx-font);
  clip-path: circle(0 at calc(100% - 40px) 40px); visibility: hidden;
  transition: clip-path .7s var(--nx-ease), visibility 0s .7s;
}
.nx-mobile.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; transition: clip-path .7s var(--nx-ease), visibility 0s; }
.nxm-layer { position: absolute; inset: 0; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: var(--nx-panel); transition: transform .55s var(--nx-ease), filter .55s, border-radius .55s; }
.nxm-root.is-behind { transform: scale(.92) translateX(-6%); filter: brightness(.6); border-radius: 28px; }
.nxm-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 14px; }
.nxm-close, .nxm-back { border: 0; cursor: pointer; color: inherit; background: var(--nx-soft); }
.nxm-close { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.nxm-close svg { width: 22px; height: 22px; transition: transform .5s var(--nx-ease); }
.nx-mobile.is-open .nxm-close svg { transform: rotate(90deg); }
.nxm-cards { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.nxm-card {
  position: relative; flex: 1; min-height: 0; width: 100%; border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: pointer;
  color: #fff; text-align: left; text-decoration: none; font: inherit; background: #222;
  opacity: 0; transform: translateY(30px);
}
.nx-mobile.is-open .nxm-card { opacity: 1; transform: none; transition: opacity .5s calc(.25s + var(--i) * .07s), transform .7s calc(.25s + var(--i) * .07s) var(--nx-ease); }
.nxm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.4s var(--nx-ease); }
.nx-mobile.is-open .nxm-card img { transform: scale(1); }
.nxm-card-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.1)); }
.nxm-card-num { position: absolute; top: 12px; left: 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; opacity: .7; }
.nxm-card-text { position: absolute; left: 16px; right: 64px; bottom: 14px; }
.nxm-card-text strong { display: block; font-size: clamp(24px, 7.5vw, 34px); line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.nxm-card-text small { display: block; margin-top: 4px; font-size: 13px; opacity: .85; }
.nxm-card-go { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--nx-accent); color: var(--nx-accent-ink); display: grid; place-items: center; }
.nxm-card-go svg { width: 20px; height: 20px; }
.nxm-card:active { transform: scale(.98); }
.nxm-foot { display: flex; gap: 10px; padding-top: 12px; opacity: 0; transform: translateY(20px); }
.nx-mobile.is-open .nxm-foot { opacity: 1; transform: none; transition: all .6s .6s var(--nx-ease); }
.nxm-foot .nx-cta { flex: 1; justify-content: center; padding: 16px; font-size: 16px; }
.nxm-search { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 999px; background: var(--nx-soft); color: inherit; text-decoration: none; font-weight: 700; }
.nxm-search svg { width: 18px; height: 18px; }

.nxm-sub { transform: translateX(105%); box-shadow: -20px 0 50px rgba(0,0,0,.25); overflow-y: auto; overscroll-behavior: contain; gap: 14px; }
.nxm-sub.is-on { transform: none; }
.nxm-sub-head { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
.nxm-back { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 999px; font: 700 15px var(--nx-font); }
.nxm-back svg { width: 18px; height: 18px; }
.nxm-crumb { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nx-muted); }
.nxm-hero { position: relative; flex: none; height: 30vh; height: 30dvh; border-radius: 24px; overflow: hidden; background: #222; color: #fff; }
.nxm-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nxm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7)); }
.nxm-hero-text { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; }
.nxm-hero-text strong { display: block; font-size: 36px; line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.nxm-hero-text small { font-size: 14px; opacity: .9; }
.nxm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nxm-list a { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--nx-line); color: inherit; text-decoration: none; }
.nxm-list a > svg { margin-left: auto; width: 18px; height: 18px; color: var(--nx-muted); flex: none; }
.nxm-list li, .nxm-tiles a { opacity: 0; transform: translateX(30px); }
.nxm-sub.is-on .nxm-list li, .nxm-sub.is-on .nxm-tiles a { opacity: 1; transform: none; transition: all .5s calc(.2s + var(--i) * .05s) var(--nx-ease); }
.nxm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nxm-tiles a { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; }
.nxm-tiles a:first-child { grid-column: span 2; aspect-ratio: 2/1; }
.nxm-tiles img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nxm-tiles a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75)); }
.nxm-tiles span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; }
.nxm-tiles strong { display: block; font-size: 17px; }
.nxm-tiles small { font-size: 12px; opacity: .85; }

@media (max-width: 1080px) {
  .nx-desk, .nx-ghost, .nx-mega, .nx-scrim { display: none; }
  .nx-burger { display: grid; place-items: center; }
  .nx-actions .nx-cta { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 420px) { .nx-actions .nx-cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nx-header *, .nx-mobile, .nx-mobile * { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Bright nav tweaks */
.nx-header { --nx-top-ink: var(--nx-ink); z-index: 10000; }
.nx-header::before { opacity: 1; background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.nx-header.is-mega::before { background: #fff; }
.admin-bar .nx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nx-header { top: 46px; } }
.nx-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.nx-icon-btn:hover { background: var(--b-tint); }
.nx-icon-btn svg { width: 20px; height: 20px; }
.nx-mobile[hidden] { display: none; }
.nxm-search { border: 0; cursor: pointer; font: 700 15px var(--nx-font); color: inherit; }
.nx-burger { background: var(--b-soft); }
@media (max-width: 1080px) { .nx-icon-btn { display: none; } }
.nex-search-dialog { z-index: 10050; }

/* ================= Shared components ================= */
.nex-container { max-width: 1280px; }
.nex-kicker, .nex-content-eyebrow { color: var(--b-purple); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.nex-button { border-radius: 999px; font-size: 15px; font-weight: 650; min-height: 48px; padding: 0 22px; }
.nex-button-primary { background: var(--b-purple); color: #fff; box-shadow: none; }
.nex-button-primary:hover { background: var(--b-navy); color: #fff; transform: none; }
.nex-button-ghost, .nex-button-ghost-light { background: #fff; color: var(--b-navy); border: 1px solid var(--b-line); }
.nex-button-ghost:hover, .nex-button-ghost-light:hover { border-color: var(--b-purple); color: var(--b-purple); }
.nex-button-dark { background: var(--b-navy); color: #fff; }
.nex-text-link { color: var(--b-purple); font-weight: 650; }
.nex-text-link:hover { color: var(--b-navy); }
.nex-spotlight::after { background: radial-gradient(420px circle at var(--x) var(--y), rgba(99,91,255,.08), transparent 45%); }

.nex-feature-card, .nex-card-item, .nex-related-card, .nex-step, .nex-pricing-card, .nex-doc-help, .nex-support-contact-card {
  border: 1px solid var(--b-line); border-radius: 20px; background: #fff; box-shadow: 0 2px 6px rgba(50,50,93,.05);
  transition: transform .35s var(--nx-ease), box-shadow .35s, border-color .2s;
}
.nex-feature-card:hover, .nex-related-card:hover, .nex-step:hover { transform: translateY(-4px); box-shadow: var(--b-shadow); border-color: transparent; }
.nex-card-label { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--b-tint); color: var(--b-purple); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.nex-step::before { background: var(--b-tint) !important; color: var(--b-purple) !important; border-radius: 14px !important; font-weight: 750 !important; }
.nex-callout { border: 0; border-left: 4px solid var(--b-purple); border-radius: 16px; background: var(--b-soft); }
.nex-callout.nex-callout-dark { background: var(--b-navy); border-left-color: #8b85ff; }
.nex-faq-block details { border-bottom: 1px solid var(--b-line); }
.nex-faq-block summary { font-weight: 650; color: var(--b-navy); }
.nex-faq-block summary:hover { color: var(--b-purple); }

/* Prose */
.nex-prose { color: var(--b-slate); }
.nex-prose h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -.04em; line-height: 1.06; }
.nex-prose h3 { letter-spacing: -.025em; }
.nex-prose a:not(.nex-button):not(.nex-text-link):not(.nex-related-card) { color: var(--b-purple); text-decoration: underline; text-decoration-color: rgba(99,91,255,.3); text-underline-offset: 3px; }
.nex-prose a:not(.nex-button):hover { text-decoration-color: currentColor; }
.nex-prose-intro { color: var(--b-slate); }
.nex-prose code { background: var(--b-tint); color: #4b44d6; border-radius: 6px; }
.nex-prose pre { background: var(--b-navy); border-radius: 16px; }
.nex-prose table th { background: var(--b-soft); color: var(--b-navy); }
.nex-prose blockquote { border-left-color: var(--b-purple); }

/* ================= Page hero ================= */
.nex-page-hero { color: var(--b-navy); background: #fff; padding: clamp(140px, 13vw, 190px) 0 clamp(90px, 10vw, 140px); }
.nex-page-hero::before { content: ""; position: absolute; z-index: 0; right: -10%; top: -20%; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(99,91,255,.16), transparent); filter: blur(30px); animation: b-breathe 9s ease-in-out infinite alternate; }
.nex-page-hero::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: clamp(40px, 7vw, 100px); background: var(--b-after, #fff); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
@keyframes b-breathe { to { transform: translate(-6%, 8%) scale(1.1); opacity: .75; } }
.nex-page-hero-grid { display: none; }
.nex-page-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(36px, 6vw, 80px); }
.nex-breadcrumbs { color: var(--b-slate); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 26px; }
.nex-breadcrumbs a:hover { color: var(--b-purple); }
.nex-breadcrumbs span { color: var(--b-navy); }
.nex-page-hero .nex-kicker { color: var(--b-purple); display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--b-tint); }
.nex-page-hero h1 { color: var(--b-navy); font-size: clamp(2.6rem, 5.2vw, 4.9rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; }
.nex-page-hero-copy > p { color: var(--b-slate); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.nex-page-meta { color: var(--b-slate); }
.b-hero-media { position: relative; margin: 0; aspect-ratio: 4 / 4.2; max-height: 560px; width: 100%; }
.b-hero-frame { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: #dde3ea; box-shadow: var(--b-shadow-lg); transform: rotate(2deg); transition: transform .8s var(--nx-ease); }
.b-hero-media:hover .b-hero-frame { transform: rotate(0deg) scale(1.01); }
.b-hero-frame video, .b-hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,37,64,.55)); }
.b-hero-tag { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 13px; font-weight: 700; color: var(--b-navy); }
.b-hero-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 7px; animation: b-blink 1.6s infinite; }
@keyframes b-blink { 50% { opacity: .25; } }
.b-hero-cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.b-hero-cap small { display: block; font-size: 13px; opacity: .9; }
.b-hero-cap strong { font-size: 20px; letter-spacing: -.02em; }
.b-hero-card { position: absolute; z-index: 3; left: -28px; bottom: 18%; display: flex; gap: 10px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--b-shadow-lg); font-size: 14px; animation: b-bob 6s ease-in-out infinite; }
.b-hero-card .dot { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--b-tint); font-size: 18px; }
.b-hero-card b { display: block; color: var(--b-navy); }
.b-hero-card small { color: var(--b-purple); font-weight: 700; }
@keyframes b-bob { 50% { transform: translateY(-10px); } }
@media (max-width: 900px) {
  .nex-page-hero-inner { grid-template-columns: 1fr; }
  .b-hero-media { aspect-ratio: 16 / 11; }
  .b-hero-card { left: 12px; bottom: -18px; }
}

/* Docs layout */
.nex-doc-toc-title { color: var(--b-navy); }
.nex-doc-toc a { color: var(--b-slate); }
.nex-doc-toc a:hover, .nex-doc-toc a.is-active { color: var(--b-purple); }
.nex-doc-help { background: var(--b-soft); border: 0; }

/* Related */
.nex-related { background: var(--b-soft); border-top: 0; position: relative; }

/* Pricing table rows */
.nex-plan-row { border-color: var(--b-line); }
.nex-pricing-card.is-featured { background: var(--b-navy); }

/* Search dialog */
.nex-search-panel { background: #fff; color: var(--b-navy); border: 0; box-shadow: var(--b-shadow-lg); }
.nex-search-panel h2 { color: var(--b-navy); }
.nex-search-field { background: var(--b-soft); border-color: var(--b-line); color: var(--b-navy); }
.nex-search-field input { color: var(--b-navy); }
.nex-search-results a { color: var(--b-navy); border-color: var(--b-line); }
.nex-search-results a:hover { background: var(--b-tint); }
.nex-search-results small { color: var(--b-slate); }

/* ================= Footer ================= */
.nex-site-footer { color: var(--b-slate); background: var(--b-soft); }
.nex-footer-cta { position: relative; }
.nex-footer-cta-card { position: relative; overflow: hidden; border: 0; color: #fff; background: #635bff; isolation: isolate; }
.nex-footer-cta-card::before { content: ""; position: absolute; inset: -40%; z-index: -1; background:
  radial-gradient(closest-side at 20% 30%, #4f46e5, transparent 70%),
  radial-gradient(closest-side at 70% 20%, #8b85ff, transparent 70%),
  radial-gradient(closest-side at 60% 80%, #3b5bff, transparent 70%),
  radial-gradient(closest-side at 90% 60%, #a5b4fc, transparent 70%);
  filter: blur(30px); animation: b-drift 14s ease-in-out infinite alternate; }
@keyframes b-drift { to { transform: translate(6%, -4%) rotate(8deg) scale(1.08); } }
.nex-footer-cta-card .nex-kicker { color: #fff; opacity: .85; }
.nex-footer-cta-card h2 { color: #fff; }
.nex-footer-cta-card p { color: rgba(255,255,255,.88); }
.nex-footer-cta-card .nex-button-primary { background: #fff; color: var(--b-navy); }
.nex-footer-cta-card .nex-button-primary:hover { background: var(--b-navy); color: #fff; }
.nex-footer-cta-card .nex-button-ghost-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.nex-footer-brand > p, .nex-footer-column a, .nex-footer-bottom, .nex-footer-bottom a { color: var(--b-slate); }
.nex-footer-column h3 { color: var(--b-navy); }
.nex-footer-column a:hover, .nex-footer-bottom a:hover { color: var(--b-purple); }
.nex-site-footer .nex-brand { color: var(--b-navy); }
.nex-site-footer .nex-brand-mark { color: var(--b-purple); }
.nex-footer-badges span { background: #fff; border-color: var(--b-line); color: var(--b-slate); }
.nex-footer-bottom { border-top-color: var(--b-line); }
.nex-back-to-top { background: var(--b-purple); color: #fff; }
.nex-site-footer .nex-brand-word { color: var(--b-navy); }
.nx-mobile { z-index: 10040; }
.admin-bar .nx-mobile { top: 46px; height: calc(100dvh - 46px); }
@media (min-width: 783px) { .admin-bar .nx-mobile { top: 32px; height: calc(100dvh - 32px); } }
@media (max-width: 900px) { .b-hero-card { left: auto; right: 12px; bottom: auto; top: -18px; } }

/* ================= Pricing plans (/pricing/) ================= */
.nxp-plans .nex-prose-intro { max-width: 720px; }
.nxp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; align-items: stretch; }
.nxp-card { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow); color: var(--b-slate); }
.nxp-card-pro { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #635bff, #8b85ff) border-box; }
.nxp-card-deal { border: 0; color: rgba(255,255,255,.82); background: radial-gradient(120% 80% at 100% 0%, rgba(99,91,255,.55), transparent 60%), var(--b-navy); box-shadow: var(--b-shadow-lg); }
.nxp-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--b-soft); color: var(--b-slate); font-size: 13px; font-weight: 700; line-height: 1.4; }
.nxp-card-pro .nxp-tag { background: var(--b-tint); color: var(--b-purple); }
.nxp-card-deal .nxp-tag { background: rgba(255,255,255,.14); color: #fff; }
.nex-prose .nxp-card h3 { margin: 16px 0 6px; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; color: var(--b-navy); }
.nex-prose .nxp-card-pro h3 { color: var(--b-purple); }
.nex-prose .nxp-card-deal h3 { color: #fff; }
.nex-prose .nxp-amount { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; line-height: 1; }
.nxp-amount strong { font-size: 52px; font-weight: 800; letter-spacing: -.045em; color: var(--b-navy); }
.nxp-amount span { font-size: 16px; font-weight: 600; color: var(--b-slate); }
.nxp-card-deal .nxp-amount strong { color: #fff; }
.nxp-card-deal .nxp-amount span { color: rgba(255,255,255,.75); }
.nex-prose .nxp-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--b-slate); }
.nex-prose .nxp-card-deal .nxp-sub { color: rgba(255,255,255,.78); }
.nex-prose .nxp-list { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--b-navy); }
.nex-prose .nxp-list li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; }
.nex-prose .nxp-list li::before { content: "✓"; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: #e7fbf4; color: #0e9f6e; font-size: 12px; font-weight: 800; }
.nex-prose .nxp-card-deal .nxp-list { color: #fff; }
.nex-prose .nxp-card-deal .nxp-list li::before { background: rgba(255,255,255,.14); color: #fff; }
.nxp-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.nxp-actions .nex-button { flex: 1 1 auto; text-decoration: none; }
.nxp-card-deal .nex-button-primary { background: #fff; color: var(--b-navy); }
.nxp-card-deal .nex-button-primary:hover { background: var(--b-purple); color: #fff; }
.nex-prose .nxp-micro { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--b-slate); text-align: center; }
.nex-prose .nxp-note { margin: 22px 0 0; font-size: 13px; line-height: 1.65; color: var(--b-slate); }
@media (max-width: 1020px) {
  .nxp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxp-card-deal { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .nxp-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .nxp-card { padding: 26px 22px; }
  .nxp-amount strong { font-size: 46px; }
}

/* Header: subtle emphasis on Pricing */
.nx-desk .nx-top-pricing { background: var(--b-tint); color: var(--b-purple); }
.nx-desk .nx-top-pricing:hover { background: color-mix(in srgb, var(--b-purple) 16%, #fff); }
.nex-prose .nxp-card-deal .nxp-micro { color: rgba(255,255,255,.7); }

/* Demos mega menu (desktop panel + mobile layer) */
.nx-dm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 18px; }
.nx-dm-head, .nxm-dm-head { display: flex; align-items: center; gap: 8px; margin: 6px 10px 6px; font: 700 12px/1.2 var(--nx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--nx-muted); }
.nx-dm-head span, .nxm-dm-head span { padding: 2px 8px; border-radius: 999px; background: var(--nx-soft); color: var(--nx-accent); font-size: 11px; letter-spacing: 0; }
.nx-dm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nx-dm-list li { opacity: 0; transform: translateY(10px); }
.nx-panel.is-on .nx-dm-list li { opacity: 1; transform: none; transition: all .5s calc(.05s + var(--i) * .03s) var(--nx-ease); }
.nx-dm-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; }
a.nx-dm-item:hover, a.nx-dm-item:focus-visible { background: var(--nx-soft); }
.nx-dm-thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--nx-dm-accent, var(--nx-soft)); box-shadow: inset 0 0 0 1px rgba(10,37,64,.06); transition: transform .3s var(--nx-ease); }
.nx-dm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.nx-dm-item:hover .nx-dm-thumb { transform: rotate(-4deg) scale(1.05); }
.nx-dm-text { min-width: 0; }
.nx-dm-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 700; line-height: 1.25; margin-bottom: 2px; }
.nx-dm-text em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--b-soft); color: var(--nx-muted); font-size: 11px; font-weight: 700; }
.nx-dm-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--nx-muted); }
.nx-dm-text small b { color: var(--nx-ink); font-weight: 600; }
.nx-dm-item.is-soon { cursor: default; }
.nx-dm-item.is-soon .nx-dm-thumb { filter: grayscale(.6); opacity: .75; }
.nx-dm-foot { margin-top: 14px; }
.nx-panel-foot .nx-cta { color: var(--nx-accent-ink); font-weight: 700; padding: 11px 18px; }
@media (max-width: 1240px) { .nx-dm-cols { gap: 4px 10px; } .nx-dm-thumb { width: 44px; height: 44px; } .nx-dm-item { gap: 10px; padding: 8px; } }

.nxm-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nxm-dm-head { margin: 10px 2px 0; }
.nxm-dm-list a, .nxm-dm-soon { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--nx-line); color: inherit; text-decoration: none; }
.nxm-dm-list .nx-dm-thumb { width: 48px; height: 48px; }
.nxm-dm-soon .nx-dm-thumb { filter: grayscale(.6); opacity: .75; }
.nxm-dm-list .nx-dm-text strong { font-size: 16px; }
.nxm-dm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px 4px; }
.nxm-dm-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nx-accent); text-decoration: none; }
.nxm-dm-all svg, .nxm-dm-foot .nx-cta svg { width: 16px; height: 16px; }
.nex-prose .nxp-amount { flex-wrap: wrap; row-gap: 10px; }
.nex-prose .nxp-save { align-self: center; padding: 5px 10px; border-radius: 999px; background: #e7fbf4; color: #0b7a55; font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.nex-prose .nxp-card-deal .nxp-sites { color: #fff; font-weight: 700; }
.nex-prose .nxp-list-head { margin: 22px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.nex-prose .nxp-list-head + .nxp-list { margin-top: 12px; }