/* ========================================================================== Nexus by Board Infinity — the Nexus layer -------------------------------------------------------------------------- Loads AFTER bi-theme.css. bi-theme.css owns the CHROME (announce bar, header, footer, base button shapes) so /nexus/ stays native to boardinfinity.com. Everything in this file is scoped to `.nx` — the wrapper on the Nexus sub-nav and
— so the Nexus palette never leaks into the parent chrome. PALETTE SWITCHING Three approved directions live below. The active one is whichever class sits on : .pal-a (Indigo & Bone, default) · .pal-b (Ink & Signal Green) .pal-c (Deep Cobalt & Amber) Changing the palette is a one-word edit in the tag. Nothing else. ACCESSIBILITY — every pairing below is measured, not assumed: ink on paper 18.9:1 body on paper 9.2:1 body on bone 8.4:1 sig on paper 6.8:1 sig-txt on paper 8.4:1 white on sig 6.8:1 on-deep body on deep 9.7:1 No pairing under 4.5:1 carries text anywhere in this file. ========================================================================== */ /* ---------- Palette A · Indigo & Bone (alternate) ---------- */ html.pal-a .nx{ --nx-deep:#141733; /* dark bands */ --nx-deep-2:#1E2350; /* dark band gradient partner */ --nx-sig:#4B3BE8; /* fills, large display, mark */ --nx-sig-txt:#3F2FCC; /* ALL links + small blue text — 8.4:1 */ --nx-sig-deep:#372AB8; --nx-sig-0:#F7F6FE; /* faintest wash */ --nx-sig-1:#EFEDFE; /* chip / icon beds */ --nx-sig-2:#DCD8FC; /* borders on tinted beds */ --nx-on-deep:#B9BEE8; /* body on deep — 9.7:1 */ --nx-on-deep-a:#A79BFF; /* accent on deep — 7.3:1 */ --nx-ink:#0E1116; /* headings — 18.9:1 */ --nx-body:#414852; /* body — 9.2:1 */ --nx-mut:#5A6270; /* muted — 6.2:1 */ --nx-paper:#FFFFFF; --nx-bone:#F6F4F0; /* warm alt section — the signature move */ --nx-line:#E4E1DB; /* divider on bone */ --nx-line-2:#F0EEE9; /* hairline */ --nx-flag:#A8451B; /* a flagged gap — 6.0:1. Never decorative. */ --nx-flag-1:#FDF1EC; --nx-live:#036A3E; /* a confirmed live signal — 6.7:1. Only that. */ --nx-live-1:#E6F9F1; } html.pal-b .nx{ --nx-deep:#0A1F18; --nx-deep-2:#123528; --nx-sig:#0F6B4F; --nx-sig-txt:#0C5940; --nx-sig-deep:#0A4732; --nx-sig-0:#F5FAF8; --nx-sig-1:#E7F1EC; --nx-sig-2:#CBE2D8; --nx-on-deep:#A7C9BB; --nx-on-deep-a:#6ECFA8; --nx-ink:#101613; --nx-body:#414852; --nx-mut:#5A6270; --nx-paper:#FFFFFF; --nx-bone:#F4F6F4; --nx-line:#E2E6E3; --nx-line-2:#EFF2F0; --nx-flag:#8A4900; --nx-flag-1:#FFF6E8; --nx-live:#036A3E; --nx-live-1:#E6F9F1; } html.pal-c .nx{ --nx-deep:#0B1330; --nx-deep-2:#152A63; --nx-sig:#1B48D8; --nx-sig-txt:#183FBF; --nx-sig-deep:#13319A; --nx-sig-0:#F5F7FC; --nx-sig-1:#E8EDFC; --nx-sig-2:#CBD8F6; --nx-on-deep:#B7C6EA; --nx-on-deep-a:#8FAEFF; --nx-ink:#0E1116; --nx-body:#414852; --nx-mut:#5A6270; --nx-paper:#FFFFFF; --nx-bone:#F5F7FC; --nx-line:#E1E5EE; --nx-line-2:#EFF2F8; --nx-flag:#8A4900; --nx-flag-1:#FFF6E8; --nx-live:#036A3E; --nx-live-1:#E6F9F1; } /* ---------- Palette D · Product Teal ---------------------------------------- NOT invented. Resolved on 2026-08-20 from the live Nexus dashboard's own CSS custom properties at nexus.boardinfinity.com: --primary 183 99% 22% -> #1D4ED8 --chart-2 173 58% 39% -> #2A9D90 --foreground 200 10% 12% -> #12172B --muted-foreground -> #5A6478 plus the rust (#964219) and cream (#F6ECD8) sampled off the rendered source-label chips and the notice banner. Using these means the marketing page and the product a buyer is shown in the demo are visibly the same product. Every pairing measured, all pass WCAG AA: teal on white 6.46 · white on teal 6.46 · rust on white 6.80 ink on white 16.42 · muted on white 6.05 · white on deep teal 15.96 NOTE: Abhay's brief rejects "teal", but names #00D4AA/#00FFD1 — the electric mint of the killed v1. #1D4ED8 is a deep institutional teal, a different colour entirely. This conflict is flagged for his decision. -------------------------------------------------------------------------- */ .nx, html.pal-d .nx{ /* ------------------------------------------------------------------ Palette derived from the official Nexus mark (logos/nexus-nx.svg): navy #10275A · gradient #1D4ED8 -> #2F73F0 -> #5B9BFF Every token below was contrast-checked before it was used: #1D4ED8 on white 6.70:1 (body text and links: passes 4.5) #10275A on white 14.38:1 (deep surface) #C7D4F0 on #10275A 9.66:1 (body text on the deep surface) #8FB0FF on #10275A 6.73:1 (accent on the deep surface) The logo's lightest blue #5B9BFF is 2.77:1 on white, so it is used ONLY inside the mark and the gradient's mid-run, never as text. ------------------------------------------------------------------ */ --nx-deep:#10275A; --nx-deep-2:#1A3A73; --nx-sig:#1D4ED8; --nx-sig-txt:#1D4ED8; --nx-sig-deep:#1A46C2; --nx-sig-0:#F5F8FE; --nx-sig-1:#E8EFFC; --nx-sig-2:#C3D6F7; --nx-on-deep:#C7D4F0; --nx-on-deep-a:#8FB0FF; --nx-ink:#12172B; --nx-body:#3B4356; --nx-mut:#5A6478; --nx-paper:#FFFFFF; --nx-bone:#F6F7FB; --nx-line:#E2E6F0; --nx-line-2:#EDF0F7; /* status colours are semantic and deliberately NOT re-hued to the brand */ --nx-flag:#964219; --nx-flag-1:#FBEFE8; --nx-cream:#F6ECD8; --nx-live:#036A3E; --nx-live-1:#E6F9F1; } /* ---------- shared geometry ---------- */ .nx{ --nx-r-sm:10px; --nx-r-md:14px; --nx-r-lg:20px; --nx-r-xl:26px; --nx-r-pill:999px; --nx-max:1200px; --nx-pad:28px; /* Shadows tinted with the deep tone, never neutral black. */ --nx-sh-sm:0 1px 3px rgba(14,17,22,.06),0 1px 2px rgba(14,17,22,.04); --nx-sh-md:0 8px 26px -8px rgba(14,17,22,.14); --nx-sh-lg:0 32px 70px -24px rgba(14,17,22,.24); color:var(--nx-body); } /* ========================== base inside .nx ========================== */ .nx :where(h1,h2,h3,h4){color:var(--nx-ink);letter-spacing:-.028em;font-weight:800;line-height:1.12} .nx h1{font-size:clamp(38px,4.7vw,60px);letter-spacing:-.036em;line-height:1.03} .nx h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.032em;line-height:1.07} .nx h3{font-size:clamp(18px,1.9vw,22px);letter-spacing:-.024em} .nx h4{font-size:16.5px;letter-spacing:-.018em} .nx :where(a:not([class])){color:var(--nx-sig-txt)} /* NOTE: this MUST stay :where()+:not([class]). A plain `.nx a` selector is (0,1,1) and silently beats every (0,1,0) modifier below — .nx-btn--p lost its white label to it and rendered indigo-on-indigo. */ /* Base element resets go through :where() so they carry ZERO specificity. A plain `.nx p` is (0,1,1) and silently beat every single-class component rule below — .nx-lede and .nx-badge both lost their margins to it. */ .nx :where(p){margin:0} .nx :where(ul,ol){margin:0;padding:0;list-style:none} .nx :focus-visible{outline:3px solid var(--nx-sig-txt);outline-offset:3px;border-radius:5px} .nx-wrap{max-width:var(--nx-max);margin:0 auto;padding:0 var(--nx-pad)} .nx-wrap--narrow{max-width:860px} /* Section rhythm: paper → bone → paper → deep → bone → paper → deep */ .nx-sec{padding:96px 0;background:var(--nx-paper)} .nx-sec--bone{background:var(--nx-bone)} .nx-sec--deep{background:var(--nx-deep);color:var(--nx-on-deep)} .nx-sec--deep :where(h1,h2,h3,h4){color:#fff} .nx-sec--tight{padding:64px 0} /* eyebrow — the numbered kicker, carried over from /higher-education/ */ .nx-eye{display:inline-flex;align-items:baseline;gap:11px;font-size:11.5px;font-weight:900; letter-spacing:.15em;text-transform:uppercase;color:var(--nx-sig-txt);margin:0 0 16px} .nx-eye i{font-style:normal;font-weight:800;letter-spacing:.02em;font-size:12.5px;opacity:.55} .nx-sec--deep .nx-eye{color:var(--nx-on-deep-a)} .nx-head{max-width:800px;margin-bottom:52px} .nx-head--center{margin-left:auto;margin-right:auto;text-align:center} .nx-head p{margin:18px 0 0;font-size:clamp(16.5px,1.35vw,18.5px);color:var(--nx-mut); line-height:1.62;text-wrap:pretty} .nx-sec--deep .nx-head p{color:var(--nx-on-deep)} .nx-head p b{color:var(--nx-ink);font-weight:700} .nx-sec--deep .nx-head p b{color:#fff} /* Heading emphasis. A rule underline, not a highlighter — the highlighter is the parent brand's device and Nexus needs its own. */ .nx-em{color:var(--nx-sig-txt);font-style:normal} .nx-sec--deep .nx-em{color:var(--nx-on-deep-a)} /* Underline drawn as a background gradient, not an absolute ::after. An ::after needs white-space:nowrap to stay unbroken, and that made a long highlighted phrase overflow the hero column straight into the portal panel. A gradient wraps correctly with box-decoration-break:clone. */ .nx-ul{background-image:linear-gradient(transparent 89%,var(--nx-sig-2) 89%); -webkit-box-decoration-break:clone;box-decoration-break:clone} .nx-sec--deep .nx-ul{background-image:linear-gradient(transparent 89%,rgba(255,255,255,.28) 89%)} /* Every headline figure. Tabular so columns of numbers line up. */ .nx-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1; font-weight:800;letter-spacing:-.035em;line-height:1} /* ========================== buttons ================================== */ .nx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:15px;line-height:1;border-radius:var(--nx-r-md); border:1.5px solid transparent;padding:15px 26px;white-space:nowrap; text-decoration:none!important;transition:background .18s,border-color .18s,color .18s,transform .18s} .nx-btn--p{background:var(--nx-sig-txt);color:#fff} .nx-btn--p:hover{background:var(--nx-sig);color:#fff;transform:translateY(-1px)} .nx-btn--g{background:var(--nx-paper);color:var(--nx-ink);border-color:var(--nx-line)} .nx-btn--g:hover{border-color:var(--nx-sig-txt);color:var(--nx-sig-txt)} .nx-btn--on{background:#fff;color:var(--nx-deep)} .nx-btn--on:hover{background:var(--nx-sig-1);color:var(--nx-deep)} .nx-btn--onq{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .nx-btn--onq:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} .nx-btn--lg{padding:17px 32px;font-size:16px} .nx-btn--sm{padding:11px 19px;font-size:14px} .nx-btn .a{transition:transform .18s} .nx-btn:hover .a{transform:translateX(3px)} .nx-ctas{display:flex;gap:12px;flex-wrap:wrap} /* text link with arrow */ .nx-lk{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px; color:var(--nx-sig-txt);text-decoration:none} .nx-lk .a{transition:transform .18s} .nx-lk:hover .a{transform:translateX(3px)} .nx-sec--deep .nx-lk{color:var(--nx-on-deep-a)} .nx-sec--deep .nx-lk:hover{color:#fff} /* ========================== sub-nav ================================== */ /* The one place the Nexus mark appears in chrome. BI wordmark stays above it — that hierarchy is the entire brand relationship. */ /* Sticks BELOW the parent header, which is itself sticky at top:0 and 66px tall (the same 66px the parent's own .mega hardcodes). z-index MUST stay below the parent header's 100. .mega lives inside header.nav, so the header's own z-index caps its entire subtree — giving this bar a higher value paints it over the Solutions menu no matter what .mega's z-index says. */ .nx-sub{position:sticky;top:66px;z-index:90;background:rgba(255,255,255,.93); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--nx-line-2)} .nx-sub-in{max-width:var(--nx-max);margin:0 auto;padding:0 var(--nx-pad);height:60px; display:flex;align-items:center;gap:26px} .nx-brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none!important} .nx-brand svg{width:26px;height:26px;color:var(--nx-sig)} .nx-brand b{font-size:17px;font-weight:800;color:var(--nx-ink);letter-spacing:-.01em} .nx-brand span{font-size:10px;font-weight:800;color:var(--nx-mut);letter-spacing:.1em; text-transform:uppercase;border-left:1px solid var(--nx-line);padding-left:10px} .nx-sub-l{display:flex;align-items:center;gap:18px;margin-left:auto;scrollbar-width:none} .nx-sub-l::-webkit-scrollbar{display:none} .nx-sub-l a{font-size:14px;font-weight:600;color:var(--nx-body);text-decoration:none; white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent} .nx-sub-l a:hover{color:var(--nx-sig-txt)} .nx-sub-l a[aria-current="page"]{color:var(--nx-sig-txt);border-bottom-color:var(--nx-sig)} .nx-sub-cta{flex:none} @media(max-width:1180px){.nx-sub-cta{display:none}} @media(max-width:640px){.nx-brand span{display:none}} /* ========================== breadcrumb =============================== */ .nx-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px; color:var(--nx-mut);margin:0 0 22px} .nx-crumbs a{color:var(--nx-mut);text-decoration:none} .nx-crumbs a:hover{color:var(--nx-sig-txt)} .nx-crumbs i{font-style:normal;opacity:.5} .nx-crumbs [aria-current]{color:var(--nx-ink);font-weight:600} /* ========================== badge / chip ============================= */ .nx-badge{display:inline-flex;align-items:center;gap:9px;background:var(--nx-paper); border:1px solid var(--nx-sig-2);border-radius:var(--nx-r-pill);padding:8px 16px; font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; color:var(--nx-sig-txt);box-shadow:var(--nx-sh-sm);margin:0 0 22px} .nx-badge i{width:7px;height:7px;border-radius:50%;background:var(--nx-sig);flex:none} .nx-badge .sep{width:1px;height:12px;background:var(--nx-sig-2);flex:none} .nx-badge .b2{color:var(--nx-ink)} @media(max-width:560px){.nx-badge .sep,.nx-badge .b2{display:none}} .nx-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700; border-radius:var(--nx-r-pill);padding:7px 14px;background:var(--nx-paper); color:var(--nx-body);border:1px solid var(--nx-line)} .nx-chips{display:flex;gap:10px;flex-wrap:wrap} /* The one legitimate green: a real live signal. */ .nx-chip--live{background:var(--nx-live-1);color:var(--nx-live);border-color:transparent;font-weight:800} .nx-chip--live i{width:7px;height:7px;border-radius:50%;background:var(--nx-live);flex:none} /* ========================== hero ==================================== */ .nx-hero{padding:44px 0 92px;background: radial-gradient(900px 460px at 8% -12%, var(--nx-sig-0) 0%, transparent 64%), linear-gradient(var(--nx-paper) 0%, var(--nx-paper) 100%); position:relative;overflow:hidden} .nx-hero-g{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:64px;align-items:center} .nx-hero h1{max-width:19ch} .nx-lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;color:var(--nx-mut); margin:22px 0 0;max-width:56ch;text-wrap:pretty} .nx-lede b{color:var(--nx-ink);font-weight:700} .nx-lede em{font-style:italic;color:var(--nx-ink)} .nx-hero .nx-ctas{margin-top:32px} /* the three raw stats under the CTAs */ .nx-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px; margin-top:44px;padding-top:28px;border-top:1px solid var(--nx-line)} .nx-trio b{display:block;font-size:clamp(26px,2.7vw,34px);color:var(--nx-ink)} .nx-trio span{display:block;font-size:12.5px;color:var(--nx-mut);margin-top:8px;line-height:1.5} /* ========================== portal panel ============================ */ /* Stands in for the real portal screenshot until Abhay clears one. Built, not faked: every figure in it is an approved figure. */ .nx-panel-frame{position:relative} .nx-panel{background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-lg);box-shadow:var(--nx-sh-lg);overflow:hidden} .nx-p-top{display:flex;align-items:center;gap:10px;padding:13px 18px; background:var(--nx-deep);color:#fff;font-size:12px} .nx-p-top .m{display:flex;gap:5px;flex:none} .nx-p-top .m i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.26)} .nx-p-top .c{color:var(--nx-on-deep);letter-spacing:.01em;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .nx-p-top .u{margin-left:auto;font-weight:700;flex:none} .nx-p-body{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px; background:var(--nx-bone)} .nx-p-card{background:var(--nx-paper);border:1px solid var(--nx-line-2); border-radius:var(--nx-r-sm);padding:15px;display:flex;flex-direction:column;gap:7px} .nx-p-card--w{grid-column:span 2} .nx-p-lab{font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase; color:var(--nx-sig-txt)} .nx-p-card strong{font-size:27px;color:var(--nx-ink);font-weight:800;letter-spacing:-.035em; line-height:1;font-variant-numeric:tabular-nums} .nx-p-card strong small{font-size:14px;font-weight:600;color:var(--nx-mut);letter-spacing:-.01em} .nx-p-foot{font-size:11.5px;color:var(--nx-mut);line-height:1.5} .nx-p-delta{font-size:11.5px;font-weight:700;color:var(--nx-live)} .nx-p-bar{height:7px;background:var(--nx-line-2);border-radius:999px;overflow:hidden} .nx-p-bar i{display:block;height:100%;background:var(--nx-sig);border-radius:999px} .nx-p-list{display:flex;flex-direction:column;gap:8px} .nx-p-list li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px; color:var(--nx-body)} .nx-p-list li b{color:var(--nx-ink);font-variant-numeric:tabular-nums;font-weight:700} .nx-p-tags{display:flex;flex-wrap:wrap;gap:6px} .nx-p-tags li{font-size:10.5px;font-weight:700;padding:3px 9px;background:var(--nx-sig-1); color:var(--nx-sig-txt);border-radius:999px} /* floating cards over the panel */ .nx-float{position:absolute;background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-md);box-shadow:0 20px 44px -14px rgba(14,17,22,.3); padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px; font-weight:600;color:var(--nx-ink)} .nx-float span{color:var(--nx-mut);font-weight:500} .nx-float--tr{top:-16px;right:-18px} .nx-float--bl{bottom:-20px;left:-20px;flex-direction:column;align-items:flex-start; gap:3px;padding:15px 18px} .nx-float--bl em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.13em; text-transform:uppercase;color:var(--nx-sig-txt)} .nx-float--bl b{font-size:21px;color:var(--nx-ink);letter-spacing:-.035em;font-weight:800; font-variant-numeric:tabular-nums} @media(max-width:1180px){.nx-float--tr{right:8px;top:8px}.nx-float--bl{left:8px;bottom:8px}} /* ========================== trust band ============================== */ .nx-trust{padding:44px 0;background:var(--nx-paper); border-top:1px solid var(--nx-line-2);border-bottom:1px solid var(--nx-line-2)} .nx-trust p{text-align:center;font-size:14.5px;color:var(--nx-mut);margin:0 0 26px} .nx-trust p b{color:var(--nx-ink);font-weight:700} .nx-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 40px} .nx-logos img{height:38px;width:auto;max-width:120px;object-fit:contain; filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s} .nx-logos img:hover{filter:none;opacity:1} /* ========================== cards =================================== */ .nx-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .nx-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .nx-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .nx-card{background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-lg);padding:30px;box-shadow:var(--nx-sh-sm); display:flex;flex-direction:column;gap:11px;text-decoration:none!important; color:var(--nx-body); transition:transform .2s,box-shadow .2s,border-color .2s} .nx-card:hover{transform:translateY(-3px);box-shadow:var(--nx-sh-md);border-color:var(--nx-sig-2)} .nx-card p{font-size:14.8px;line-height:1.6;color:var(--nx-mut)} .nx-card .nx-lk{margin-top:auto;padding-top:16px;font-size:14px} .nx-sec--bone .nx-card{border-color:var(--nx-line)} .nx-tag{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase; color:var(--nx-sig-txt)} /* icon bed — decorative rotation, three steps of the signal plus the deep tone. Semantic green/amber/red never appear here. */ .nx-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none; margin-bottom:4px} .nx-ico svg{width:21px;height:21px} .nx-ico--1{background:var(--nx-sig-1);color:var(--nx-sig-txt)} .nx-ico--2{background:var(--nx-sig);color:#fff} .nx-ico--3{background:var(--nx-deep);color:#fff} .nx-ico--4{background:var(--nx-sig-0);color:var(--nx-sig-deep); box-shadow:inset 0 0 0 1px var(--nx-sig-2)} /* agent card — the left rule, three weights borrowed from the mark */ .nx-agent{position:relative;padding-left:34px} .nx-agent::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:3px; border-radius:0 3px 3px 0;background:var(--nx-sig)} .nx-agent:nth-child(2)::before{opacity:.68} .nx-agent:nth-child(3)::before{opacity:.44} .nx-agent:nth-child(4)::before{opacity:1;background:var(--nx-deep)} .nx-persona{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .nx-persona b{font-size:19px;font-weight:800;color:var(--nx-ink);letter-spacing:-.02em} .nx-persona span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--nx-sig-txt)} .nx-never{margin-top:14px;padding-top:14px;border-top:1px dashed var(--nx-line); font-size:13px;color:var(--nx-mut);display:flex;gap:9px} .nx-never b{color:var(--nx-flag);font-weight:800;flex:none;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;padding-top:2px} /* lens card — one rule per lens, top edge */ .nx-lens{border-top:3px solid var(--nx-sig)} .nx-lens:nth-child(2){border-top-color:var(--nx-flag)} .nx-lens:nth-child(3){border-top-color:var(--nx-live)} .nx-lens:nth-child(2) .nx-tag{color:var(--nx-flag)} .nx-lens:nth-child(3) .nx-tag{color:var(--nx-live)} .nx-lens q{display:block;margin-top:8px;font-size:15px;font-style:italic;color:var(--nx-ink); quotes:'"' '"'} .nx-lens .auth{margin-top:14px;padding-top:14px;border-top:1px solid var(--nx-line-2); font-size:12.5px;color:var(--nx-mut)} .nx-lens .auth b{color:var(--nx-ink);font-weight:700} /* pullquote */ .nx-pull{max-width:880px;margin:56px auto 0;padding:28px 34px;background:var(--nx-paper); border-left:3px solid var(--nx-sig);border-radius:0 var(--nx-r-md) var(--nx-r-md) 0; box-shadow:var(--nx-sh-sm);font-size:clamp(18px,1.8vw,21px);line-height:1.5; color:var(--nx-ink);font-weight:500;text-wrap:pretty} .nx-pull em{font-style:italic;color:var(--nx-sig-txt);font-weight:600} /* ========================== stat band on deep ======================== */ .nx-statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px; padding-top:8px} .nx-statband>li{border-left:2px solid rgba(255,255,255,.16);padding-left:24px} .nx-statband>li:first-child{border-left:0;padding-left:0} .nx-statband b{display:block;font-size:clamp(28px,3vw,42px);color:#fff} .nx-statband span{display:block;font-size:13px;color:var(--nx-on-deep);margin-top:9px; line-height:1.45} /* ========================== steps =================================== */ .nx-steps{display:grid;grid-template-columns:repeat(var(--nxs,5),minmax(0,1fr));gap:16px; counter-reset:s} .nx-steps>li{background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-md);padding:24px 22px;position:relative; box-shadow:var(--nx-sh-sm)} .nx-steps>li::before{counter-increment:s;content:"0" counter(s);display:block; font-size:11.5px;font-weight:900;letter-spacing:.12em;color:var(--nx-sig-txt); margin-bottom:12px} .nx-steps h3{font-size:17.5px;margin-bottom:7px} .nx-steps p{font-size:13.5px;line-height:1.55;color:var(--nx-mut)} /* ========================== split band ============================== */ .nx-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .nx-offer{border-radius:var(--nx-r-lg);padding:36px;display:flex;flex-direction:column;gap:12px} .nx-offer--a{background:var(--nx-paper);border:1px solid var(--nx-line);box-shadow:var(--nx-sh-sm)} .nx-offer--b{background:var(--nx-deep);color:var(--nx-on-deep)} .nx-offer--b h3,.nx-offer--b h2{color:#fff} .nx-offer--b .nx-tag{color:var(--nx-on-deep-a)} .nx-offer--b p{color:var(--nx-on-deep)} .nx-offer ul.nx-checks{display:grid;gap:11px;margin-top:6px} .nx-checks li{display:flex;gap:11px;font-size:14.5px;color:var(--nx-mut);line-height:1.55} .nx-checks li b{color:var(--nx-ink);font-weight:700} .nx-checks .k{flex:none;width:20px;height:20px;border-radius:50%;background:var(--nx-sig-1); color:var(--nx-sig-txt);display:grid;place-items:center;margin-top:2px} .nx-checks .k svg{width:11px;height:11px} .nx-offer--b .nx-checks li{color:var(--nx-on-deep)} .nx-offer--b .nx-checks li b{color:#fff} .nx-offer--b .nx-checks .k{background:rgba(255,255,255,.13);color:var(--nx-on-deep-a)} .nx-offer .nx-lk{margin-top:auto;padding-top:18px} /* ========================== assurance strip ========================= */ .nx-assure{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px} /* ========================== testimonial placeholder ================= */ .nx-tm{max-width:860px;margin:0 auto;padding:36px 38px;background:var(--nx-paper); border:1px dashed var(--nx-line);border-radius:var(--nx-r-lg);position:relative} .nx-tm blockquote{margin:0;font-size:clamp(18px,1.8vw,22px);line-height:1.5; color:var(--nx-mut);font-style:italic} .nx-tm figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--nx-line-2); font-size:13.5px;color:var(--nx-mut);line-height:1.55} .nx-tm figcaption b{color:var(--nx-ink)} .nx-pending{position:absolute;top:-11px;left:32px;background:var(--nx-flag-1); color:var(--nx-flag);font-size:10px;font-weight:900;letter-spacing:.13em; text-transform:uppercase;padding:4px 11px;border-radius:999px} /* ========================== faq ===================================== */ .nx-faq{max-width:880px;margin:0 auto} .nx-faq details{background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-md);margin-bottom:12px;box-shadow:var(--nx-sh-sm)} .nx-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between; align-items:center;gap:18px;font-weight:700;font-size:16px;padding:20px 24px; color:var(--nx-ink)} .nx-faq summary::-webkit-details-marker{display:none} .nx-faq summary::after{content:"";flex:none;width:11px;height:11px; border-right:2px solid var(--nx-sig-txt);border-bottom:2px solid var(--nx-sig-txt); transform:rotate(45deg);transition:transform .2s;margin-top:-4px} .nx-faq details[open] summary::after{transform:rotate(225deg);margin-top:4px} .nx-faq .ans{padding:0 24px 22px;font-size:15px;color:var(--nx-mut);line-height:1.65} .nx-faq .ans p+p{margin-top:11px} /* ========================== final cta =============================== */ .nx-final{padding:0 0 96px;background:var(--nx-paper)} .nx-final-card{background:linear-gradient(152deg,var(--nx-deep) 0%,var(--nx-deep-2) 58%,var(--nx-deep) 100%); border-radius:var(--nx-r-xl);padding:76px 56px;text-align:center;color:var(--nx-on-deep); box-shadow:var(--nx-sh-lg);position:relative;overflow:hidden} .nx-final-card::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.075) 1px,transparent 0); background-size:26px 26px} .nx-final-card>*{position:relative} .nx-final-card h2{color:#fff;max-width:22ch;margin:0 auto} .nx-final-card .nx-ctas{justify-content:center;margin-top:34px} .nx-final-card .fine{margin-top:20px;font-size:13px;color:var(--nx-on-deep)} /* ========================== reveal ================================== */ .nx-rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} .nx-rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.nx-rv{opacity:1;transform:none;transition:none}} /* ========================== responsive ============================== */ @media(max-width:1080px){ .nx-hero-g{grid-template-columns:1fr;gap:56px} .nx-hero h1{max-width:none} .nx-g3,.nx-g4{grid-template-columns:repeat(2,minmax(0,1fr))} .nx-steps{grid-template-columns:repeat(3,minmax(0,1fr))} .nx-statband{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px} .nx-statband>li:nth-child(odd){border-left:0;padding-left:0} } @media(max-width:760px){ .nx{--nx-pad:20px} .nx-sec{padding:64px 0} .nx-final{padding-bottom:64px} .nx-hero{padding:32px 0 64px} .nx-g2,.nx-g3,.nx-g4,.nx-split{grid-template-columns:1fr} .nx-steps{grid-template-columns:1fr} .nx-trio{grid-template-columns:1fr;gap:20px} .nx-p-body{grid-template-columns:1fr} .nx-p-card--w{grid-column:auto} .nx-final-card{padding:48px 24px} .nx-pull{padding:22px 24px} .nx-tm{padding:28px 24px} } /* ========================================================================== EVIDENCE LABELLING — mirrors the chip vocabulary the product actually ships. The dashboard puts a source label on every single panel and shows "Data not available" instead of a fabricated number. That behaviour is the strongest proof of the "says who?" positioning, so the page shows it literally rather than describing it. ========================================================================== */ .nx-srcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .nx-src{background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-md);padding:22px;display:flex;flex-direction:column;gap:9px} .nx-src p{font-size:13.5px;line-height:1.55;color:var(--nx-mut)} /* the label chip itself, drawn exactly as the product draws it */ .nx-lbl{display:inline-flex;align-items:center;gap:7px;align-self:flex-start; font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:5px 11px;border-radius:var(--nx-r-pill)} .nx-lbl i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .nx-lbl--live{background:var(--nx-sig-1);color:var(--nx-sig-txt)} .nx-lbl--part{background:var(--nx-sig-1);color:var(--nx-sig-txt);opacity:.85} .nx-lbl--illus{background:var(--nx-flag-1);color:var(--nx-flag)} .nx-lbl--none{background:var(--nx-line-2);color:var(--nx-mut)} .nx-src h4,.nx-src h3{font-size:15.5px;color:var(--nx-ink)} /* the cream notice band — the product's own "mixed sources" disclosure, quoted */ .nx-notice{background:var(--nx-cream,#F6ECD8);border-left:3px solid var(--nx-flag); border-radius:0 var(--nx-r-md) var(--nx-r-md) 0;padding:22px 26px;margin-top:34px; max-width:900px} .nx-notice b{color:var(--nx-flag);font-weight:800} .nx-notice p{font-size:14.5px;line-height:1.6;color:#5A4636;margin-top:7px} /* ========================================================================== PORTAL PANEL v2 — restructured to match the real product shell: left rail, stat tiles across the top, labelled panels below. ========================================================================== */ .nx-panel--app{display:grid;grid-template-columns:118px minmax(0,1fr)} .nx-rail{background:var(--nx-sig-0);border-right:1px solid var(--nx-line-2); padding:14px 12px;display:flex;flex-direction:column;gap:3px} .nx-rail-b{display:flex;align-items:center;gap:8px;padding:0 4px 12px; margin-bottom:6px;border-bottom:1px solid var(--nx-line-2)} .nx-rail-b svg{width:18px;height:18px;color:var(--nx-sig);flex:none} .nx-rail-b b{font-size:12px;font-weight:800;color:var(--nx-ink);letter-spacing:-.01em} .nx-rail a,.nx-rail span{font-size:10.5px;font-weight:600;color:var(--nx-mut); padding:6px 7px;border-radius:6px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;text-decoration:none} .nx-rail .on{background:var(--nx-sig-1);color:var(--nx-sig-txt);font-weight:700} .nx-app{display:flex;flex-direction:column} .nx-app-top{display:flex;align-items:center;gap:9px;padding:11px 15px; border-bottom:1px solid var(--nx-line-2);background:var(--nx-paper)} .nx-app-top b{font-size:12.5px;color:var(--nx-ink);font-weight:700} .nx-app-top .sp{margin-left:auto} .nx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--nx-line-2)} .nx-tile{background:var(--nx-paper);padding:13px 14px;display:flex;flex-direction:column;gap:4px} .nx-tile em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--nx-mut)} .nx-tile b{font-size:22px;color:var(--nx-ink);font-weight:800;letter-spacing:-.035em; line-height:1;font-variant-numeric:tabular-nums} .nx-tile span{font-size:10.5px;color:var(--nx-mut);line-height:1.4} .nx-app-body{padding:14px;display:grid;gap:10px;background:var(--nx-bone)} @media(max-width:760px){ .nx-srcs{grid-template-columns:1fr} .nx-panel--app{grid-template-columns:1fr} .nx-rail{flex-direction:row;overflow-x:auto;border-right:0; border-bottom:1px solid var(--nx-line-2);gap:6px} .nx-rail-b{border-bottom:0;padding:0 8px 0 4px;margin:0; border-right:1px solid var(--nx-line-2)} .nx-tiles{grid-template-columns:1fr 1fr} } @media(max-width:1080px){.nx-srcs{grid-template-columns:1fr 1fr}} /* ========================== sibling nav band ======================== */ /* Added 2026-08-31 for the inner pages. .nx-rail is the mock-portal sidebar — this is the page-level "where else to go" band. Single-class selectors only; see BUILD-NOTES.md trap 1 before adding any bare-element rule here. */ .nx-sibs{border-top:1px solid var(--nx-line);padding-top:26px} .nx-sibs-t{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--nx-mut);margin:0 0 16px} .nx-sibs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .nx-sibs-g a{display:flex;flex-direction:column;gap:5px;position:relative; background:var(--nx-paper);border:1px solid var(--nx-line);border-radius:var(--nx-r-md); padding:20px 46px 20px 22px;text-decoration:none;transition:.18s} .nx-sibs-g a:hover{border-color:var(--nx-sig-2);transform:translateY(-2px); box-shadow:var(--nx-sh-sm)} .nx-sibs-g a b{font-size:16px;font-weight:800;color:var(--nx-ink);letter-spacing:-.02em} .nx-sibs-g a span{font-size:13.5px;color:var(--nx-mut);line-height:1.5} .nx-sibs-g a .a{position:absolute;right:20px;top:20px;color:var(--nx-sig-txt); font-weight:800;transition:transform .18s} .nx-sibs-g a:hover .a{transform:translateX(4px)} @media(max-width:900px){.nx-sibs-g{grid-template-columns:1fr}} /* ========================== spec / data tables ====================== */ /* Used on /platform/ and /evidence/ — the page a technical evaluator forwards. */ .nx-tbl{width:100%;border-collapse:collapse;background:var(--nx-paper); border:1px solid var(--nx-line);border-radius:var(--nx-r-md);overflow:hidden; font-size:14.5px} .nx-tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch} .nx-tbl th{text-align:left;background:var(--nx-sig-0);color:var(--nx-ink);font-weight:800; font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:14px 18px; border-bottom:1px solid var(--nx-line)} .nx-tbl td{padding:15px 18px;border-bottom:1px solid var(--nx-line-2);color:var(--nx-body); vertical-align:top;line-height:1.55} .nx-tbl tr:last-child td{border-bottom:0} .nx-tbl td b{color:var(--nx-ink);font-weight:700} .nx-tbl .n{font-variant-numeric:tabular-nums;font-weight:800;color:var(--nx-ink); white-space:nowrap} /* ========================== numbered deep-dive block ================ */ .nx-layer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px; align-items:start;padding:52px 0;border-top:1px solid var(--nx-line)} .nx-layer:first-of-type{border-top:0;padding-top:0} .nx-layer-n{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--nx-sig-txt); margin:0 0 14px} .nx-layer h3{font-size:clamp(23px,2.2vw,29px);letter-spacing:-.03em;margin:0 0 14px} .nx-layer-r{display:grid;gap:14px} @media(max-width:900px){.nx-layer{grid-template-columns:1fr;gap:28px}} /* ========================== the walkthrough form ==================== */ .nx-form{display:grid;gap:16px} .nx-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .nx-form label{display:grid;gap:7px;font-size:13px;font-weight:700;color:var(--nx-ink)} .nx-form input,.nx-form textarea{font:inherit;font-size:15px;font-weight:400; color:var(--nx-ink);background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-md);padding:13px 15px;width:100%;transition:.16s} .nx-form input:focus,.nx-form textarea:focus{outline:0;border-color:var(--nx-sig); box-shadow:0 0 0 3px var(--nx-sig-1)} .nx-form textarea{resize:vertical;min-height:120px} .nx-form button{justify-self:start;margin-top:4px;border:0;cursor:pointer} .nx-fine{font-size:12.5px;color:var(--nx-mut);line-height:1.55;margin:0} @media(max-width:700px){.nx-f2{grid-template-columns:1fr}} /* ========================== hero variants =========================== */ /* Inner pages without a portal panel: one column, wider measure. Without this the hero keeps the two-column grid and the copy is squeezed into half the width beside an empty column. */ .nx-hero-g--solo{grid-template-columns:minmax(0,1fr)} .nx-hero-g--solo h1{max-width:22ch} .nx-hero-g--solo .nx-lede{max-width:66ch} /* chips sit under the CTA row and need their own gap — .nx-ctas has no bottom margin */ .nx-hero-chips{margin-top:26px} /* ========================== sub-nav dropdowns ======================= */ /* Added 2026-08-31. The section grew to 16 pages; six tabs could not reach them. Desktop gets hover/focus panels; below 900px the panels flatten into the horizontal scroll strip via display:contents, because a scroll container would clip an absolutely-positioned panel. */ .nx-dd{position:relative;display:flex;align-items:center} .nx-dd-b{display:inline-flex;align-items:center;gap:5px} .nx-car{width:13px;height:13px;opacity:.55;transition:transform .18s} .nx-dd:hover .nx-car,.nx-dd:focus-within .nx-car{transform:rotate(180deg);opacity:1} .nx-dd-m{position:absolute;top:calc(100% + 14px);left:-14px;min-width:310px; background:var(--nx-paper);border:1px solid var(--nx-line);border-radius:var(--nx-r-md); box-shadow:var(--nx-sh-lg);padding:8px;display:grid;gap:1px;z-index:60; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s,transform .16s,visibility .16s} .nx-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px} .nx-dd:hover .nx-dd-m,.nx-dd:focus-within .nx-dd-m{opacity:1;visibility:visible;transform:none} .nx-dd-m a{display:block;padding:10px 12px;border-radius:8px;white-space:normal; border-bottom:0!important;transition:background .14s} .nx-dd-m a:hover{background:var(--nx-sig-0)} .nx-dd-m a b{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em} .nx-dd-m a em{display:block;font-style:normal;font-size:12px;color:var(--nx-mut); line-height:1.45;margin-top:2px} @media(max-width:900px){ .nx-sub-l{overflow-x:auto} .nx-dd{display:contents} .nx-dd-m{position:static;display:contents;opacity:1;visibility:visible;transform:none} .nx-dd-m a em{display:none} .nx-dd-m a{padding:6px 0;white-space:nowrap} .nx-dd-m a b{display:inline;font-size:14px;font-weight:600;color:var(--nx-body)} .nx-car{display:none} } /* ========================== skip link =============================== */ /* Lived in bi-theme.css, which the pages no longer load now that the chrome comes from gen_site.py. Without this it renders as visible text above the header and pushes the whole sticky stack down 26px. */ .skip-link{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden; background:var(--nx-deep,#0B3B3C);color:#fff;padding:12px 18px;border-radius:0 0 8px 0; font-size:14px;font-weight:700;text-decoration:none;z-index:400} .skip-link:focus{left:0;width:auto;height:auto;overflow:visible} /* ====================================================================== COMPONENT PASS — 2026-09-01 Feedback: the card grids read as generic, the lens cards were misaligned, and the market tables looked unfinished. Each fix below is scoped so the surrounding page copy is untouched. ====================================================================== */ /* --- hero stat strip: was three loose text blocks, now a ruled strip ---- */ .nx-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; margin-top:40px;padding:0;border-top:1px solid var(--nx-line);list-style:none} .nx-trio>li{padding:24px 26px 0;border-left:1px solid var(--nx-line)} .nx-trio>li:first-child{padding-left:0;border-left:0} .nx-trio b.nx-num{display:block;font-size:clamp(28px,3vw,38px);color:var(--nx-ink); font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .nx-trio span{display:block;font-size:12px;color:var(--nx-mut);margin-top:10px;line-height:1.5} @media(max-width:700px){ .nx-trio{grid-template-columns:1fr 1fr} .nx-trio>li{padding:20px 16px 0} .nx-trio>li:nth-child(odd){padding-left:0;border-left:0} } /* --- layer cards: a ghost numeral makes the six read as a sequence ----- */ .nx-g3>.nx-card{position:relative;overflow:hidden} #platform .nx-card{counter-increment:layer} #platform .nx-card::after{content:"0" counter(layer);position:absolute;right:18px;top:10px; font-size:54px;font-weight:800;letter-spacing:-.05em;color:var(--nx-sig);opacity:.07; line-height:1;pointer-events:none} #platform .nx-g3{counter-reset:layer} /* --- agent cards: monogram + the prohibition as a real footer band ----- */ .nx-agent{padding-left:30px;display:flex;flex-direction:column} .nx-agent .nx-persona{align-items:center} .nx-agent .nx-persona::before{content:attr(data-mono);width:30px;height:30px;flex:none; border-radius:9px;background:var(--nx-sig-1);color:var(--nx-sig-txt); font-size:13px;font-weight:800;display:grid;place-items:center;margin-right:2px} .nx-agent>p:not(.nx-persona):not(.nx-never){flex:1} .nx-never{margin:16px -30px -30px -30px;padding:15px 30px;border-top:1px solid var(--nx-line); background:var(--nx-flag-1);border-radius:0 0 var(--nx-r-lg) var(--nx-r-lg); font-size:12.5px;line-height:1.55} /* --- lens cards: the footer was floating mid-card on the shorter ones -- */ .nx-lens{display:flex;flex-direction:column} .nx-lens .auth{margin-top:auto;padding-top:16px} .nx-lens>p:not(.auth){flex:0 0 auto} /* --- data tables: a magnitude bar behind the leading number ------------ */ .nx-tbl td.n{position:relative;font-variant-numeric:tabular-nums;font-weight:800; color:var(--nx-ink);white-space:nowrap} .nx-tbl .bar{display:block;height:6px;border-radius:3px;background:var(--nx-sig); margin-top:7px;min-width:4px} .nx-tbl .bar--q{background:var(--nx-sig-2)} .nx-tbl th:first-child,.nx-tbl td:first-child{width:44%} .nx-tbl td.n,.nx-tbl th.n{width:28%} /* --- ranked list: a hero panel that shows the ranking, not six tiles ---- */ .nx-rank{list-style:none;margin:0;padding:16px 18px;display:grid;gap:13px;background:var(--nx-paper)} .nx-rank li{display:grid;grid-template-columns:16px 92px 1fr auto;align-items:center;gap:12px} .rk-n{font-size:11px;font-weight:800;color:var(--nx-mut);font-variant-numeric:tabular-nums} .rk-l{font-size:13px;font-weight:700;color:var(--nx-ink);white-space:nowrap} .rk-t{height:9px;border-radius:5px;background:var(--nx-line-2);overflow:hidden} .rk-b{display:block;height:100%;border-radius:5px;background:var(--nx-sig)} .rk-v{font-size:12.5px;font-weight:800;color:var(--nx-ink);font-variant-numeric:tabular-nums} .nx-rank-f{margin:0;padding:14px 18px;border-top:1px solid var(--nx-line-2); background:var(--nx-sig-0);font-size:12px;color:var(--nx-mut);border-radius:0 0 var(--nx-r-lg) var(--nx-r-lg)} .nx-rank-f b{color:var(--nx-ink);font-weight:800} /* ====================================================================== LAYOUT PASS — 2026-09-01b Feedback: "everything looks the same". It did: every section was a header block over a grid of white bordered cards. These are three genuinely different archetypes so the page has rhythm rather than repetition. ====================================================================== */ /* --- A. editorial split: sticky title left, numbered list right --------- */ .nx-ed{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:70px;align-items:start} .nx-ed-h{position:sticky;top:150px} .nx-ed-h .nx-eye{margin-bottom:16px} .nx-ed-h h2{font-size:clamp(28px,3vw,40px);margin:0} .nx-ed-h p{margin:18px 0 0;font-size:15.5px;line-height:1.68;color:var(--nx-mut);max-width:40ch} .nx-ed-cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:14px; font-weight:700;color:var(--nx-sig-txt);text-decoration:none} .nx-rows{border-top:1px solid var(--nx-line)} .nx-row{display:grid;grid-template-columns:64px minmax(0,1fr) 26px;gap:22px;align-items:start; padding:26px 4px;border-bottom:1px solid var(--nx-line);text-decoration:none; transition:background .18s,padding .18s;position:relative} .nx-row:hover{background:var(--nx-sig-0);padding-left:14px;padding-right:14px} .nx-row-n{font-size:30px;font-weight:800;letter-spacing:-.05em;color:var(--nx-sig-2); line-height:1;font-variant-numeric:tabular-nums;transition:color .18s} .nx-row:hover .nx-row-n{color:var(--nx-sig)} .nx-row-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--nx-sig-txt);margin-bottom:7px} .nx-row-t{display:block;font-size:19px;font-weight:800;color:var(--nx-ink);letter-spacing:-.024em} .nx-row-p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--nx-mut)} .nx-row-a{align-self:center;color:var(--nx-sig);font-weight:800;font-size:17px; opacity:0;transform:translateX(-6px);transition:.18s} .nx-row:hover .nx-row-a{opacity:1;transform:none} @media(max-width:1000px){ .nx-ed{grid-template-columns:1fr;gap:38px} .nx-ed-h{position:static} } /* --- B. dark agent board: inverted, colour-blocked, 2x2 ---------------- */ .nx-board{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.13); border-radius:var(--nx-r-lg);overflow:hidden} .nx-ag{background:var(--nx-deep);padding:32px 30px;display:flex;flex-direction:column} .nx-ag-h{display:flex;align-items:center;gap:13px;margin:0 0 16px} .nx-ag-m{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center; background:var(--nx-on-deep-a);color:var(--nx-deep);font-size:14px;font-weight:900} .nx-ag-h b{display:block;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em} /* scoped to the ROLE span only. As a bare `.nx-ag-h span` this also hit the monogram chip and painted its letter the same colour as its own background. */ .nx-ag-h b+span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--nx-on-deep-a);margin-top:3px} .nx-ag-h>span:last-child{min-width:0} .nx-ag>p{margin:0;font-size:14.5px;line-height:1.62;color:var(--nx-on-deep);flex:1} .nx-ag-never{margin:22px -30px -32px;padding:16px 30px;background:rgba(0,0,0,.22); display:flex;gap:11px;font-size:12.5px;line-height:1.55;color:var(--nx-on-deep)} .nx-ag-never b{flex:none;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase; color:#F0A97E;padding-top:2px} @media(max-width:820px){.nx-board{grid-template-columns:1fr}} /* --- C. lens columns: tall, big numeral, footer as a mini spec table --- */ .nx-lenses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .nx-lensc{background:var(--nx-paper);border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); padding:0;display:flex;flex-direction:column;overflow:hidden;transition:.2s} .nx-lensc:hover{transform:translateY(-3px);box-shadow:var(--nx-sh-md)} .nx-lensc-t{padding:26px 26px 0;border-top:4px solid var(--nx-sig)} .nx-lensc:nth-child(2) .nx-lensc-t{border-top-color:var(--nx-flag)} .nx-lensc:nth-child(3) .nx-lensc-t{border-top-color:var(--nx-live)} .nx-lensc-n{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1; color:var(--nx-sig-2);font-variant-numeric:tabular-nums} .nx-lensc:nth-child(2) .nx-lensc-n{color:#EBC7B2} .nx-lensc:nth-child(3) .nx-lensc-n{color:#AEE0C8} .nx-lensc-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--nx-sig-txt);margin:16px 0 8px} .nx-lensc:nth-child(2) .nx-lensc-k{color:var(--nx-flag)} .nx-lensc:nth-child(3) .nx-lensc-k{color:var(--nx-live)} .nx-lensc-h{font-size:20px;font-weight:800;color:var(--nx-ink);letter-spacing:-.025em;margin:0} .nx-lensc-q{margin:14px 0 0;font-size:15px;font-style:italic;color:var(--nx-ink);line-height:1.5} .nx-lensc-b{padding:16px 26px 24px;font-size:13.5px;line-height:1.6;color:var(--nx-mut);flex:1} .nx-lensc-f{margin-top:auto;border-top:1px solid var(--nx-line);background:var(--nx-sig-0)} .nx-lensc-f div{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:13px 26px; font-size:12.5px;line-height:1.5;color:var(--nx-body)} .nx-lensc-f div+div{border-top:1px solid var(--nx-line-2)} .nx-lensc-f b{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; color:var(--nx-mut);padding-top:2px} .nx-lensc-f .no b{color:var(--nx-flag)} @media(max-width:900px){.nx-lenses{grid-template-columns:1fr}} /* chips sitting on the dark agent band */ .nx-sec--deep .nx-assure .nx-chip{background:rgba(255,255,255,.08);color:var(--nx-on-deep); border-color:rgba(255,255,255,.16)} /* --- stat band: sits between the hero and the first section ------------ */ .nx-band{background:var(--nx-deep);padding:0} .nx-band-g{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(4,minmax(0,1fr))} .nx-band-g>li{padding:36px 30px;border-left:1px solid rgba(255,255,255,.12)} .nx-band-g>li:first-child{border-left:0;padding-left:0} .nx-band-g b{display:block;font-size:clamp(32px,3.6vw,44px);font-weight:800;color:#fff; letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums} .nx-band-g span{display:block;margin-top:12px;font-size:13px;line-height:1.5; color:var(--nx-on-deep)} @media(max-width:900px){ .nx-band-g{grid-template-columns:1fr 1fr} .nx-band-g>li{padding:26px 20px} .nx-band-g>li:nth-child(odd){border-left:0;padding-left:0} .nx-band-g>li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)} } /* --- gradient emphasis for the hero headline --------------------------- Stops validated against both surfaces the H1 sits on: #1A46C2 is 10.0:1 on paper, #0E8F86 is 3.97:1 — above the 3:1 AA floor for large text at every point along the ramp. #1BB39C was tried and rejected at 2.63:1. `color` is declared FIRST so browsers without background-clip:text keep a solid, legible fill instead of transparent text. */ .nx-grad{ color:var(--nx-sig-txt); background-image:linear-gradient(97deg,#10275A 0%,#1D4ED8 42%,#4A8AF5 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; -webkit-box-decoration-break:clone;box-decoration-break:clone; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .nx-grad{-webkit-text-fill-color:currentColor;background-image:none} } @media (forced-colors:active){ .nx-grad{-webkit-text-fill-color:currentColor;background-image:none;color:CanvasText} } /* ====================================================================== SECTION INDEX — replaces the sticky sub-nav Two stacked navbars is one too many. The section's pages are reachable from the Solutions menu above and from this block, which is a piece of content near the end of the page rather than a second chrome bar. ====================================================================== */ .nx-index{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:64px; align-items:start} .nx-index-h h2{font-size:clamp(24px,2.4vw,32px);margin:0} .nx-index-h p.d{margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--nx-mut);max-width:38ch} .nx-index-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .nx-ix{position:relative;display:block;padding:22px 46px 22px 22px;border-radius:var(--nx-r-md); background:var(--nx-paper);border:1px solid var(--nx-line);text-decoration:none; transition:transform .18s,box-shadow .18s,border-color .18s} .nx-ix:hover{transform:translateY(-3px);box-shadow:var(--nx-sh-md);border-color:var(--nx-sig-2)} .nx-ix-n{display:block;font-size:10.5px;font-weight:900;letter-spacing:.14em; color:var(--nx-sig-txt);margin-bottom:9px;font-variant-numeric:tabular-nums} .nx-ix b{display:block;font-size:16px;font-weight:800;color:var(--nx-ink);letter-spacing:-.022em; line-height:1.25} .nx-ix em{display:block;font-style:normal;font-size:12.5px;color:var(--nx-mut);margin-top:7px; line-height:1.5} .nx-ix::after{content:"→";position:absolute;right:20px;top:22px;color:var(--nx-sig); font-weight:800;font-size:15px;opacity:0;transform:translateX(-5px);transition:.18s} .nx-ix:hover::after{opacity:1;transform:none} /* the page you are already on stays in the list but is not a link */ .nx-ix.is-here{background:var(--nx-sig-0);border-color:var(--nx-sig-2);pointer-events:none} .nx-ix.is-here::after{content:"You are here";position:static;display:block;opacity:1;transform:none; font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; color:var(--nx-sig-txt);margin-top:10px} @media(max-width:1000px){.nx-index{grid-template-columns:1fr;gap:32px}} @media(max-width:620px){.nx-index-g{grid-template-columns:1fr}} /* ====================================================================== HERO EVIDENCE CARD — replaces the built portal mock and the stat grids A framed card with a header strip, a body that carries the page's own visual, and a provenance footer. The frame is consistent across pages; only the body changes, so the section reads as one product. ====================================================================== */ .nx-ev{position:relative;background:var(--nx-paper);border:1px solid var(--nx-line); border-radius:var(--nx-r-xl);box-shadow:0 40px 90px -34px rgba(4,38,42,.30), 0 2px 6px rgba(4,38,42,.05);overflow:hidden} /* a second card peeking behind, for depth */ .nx-ev::before{content:"";position:absolute;inset:14px -12px -14px 12px;z-index:-1; background:var(--nx-sig-0);border:1px solid var(--nx-line);border-radius:var(--nx-r-xl)} .nx-ev-top{display:flex;align-items:center;gap:10px;padding:15px 22px; border-bottom:1px solid var(--nx-line-2);background:var(--nx-paper)} .nx-ev-top b{font-size:13px;font-weight:800;color:var(--nx-ink);letter-spacing:-.015em} .nx-ev-top .sp{margin-left:auto} .nx-ev-body{padding:8px 22px 4px} .nx-ev-foot{padding:14px 22px;border-top:1px solid var(--nx-line-2);background:var(--nx-sig-0); font-size:11.5px;color:var(--nx-mut);line-height:1.5} .nx-ev-foot b{color:var(--nx-ink);font-weight:800} /* --- the layer stack: market → vocabulary → your institution ---------- */ .nx-stack{display:grid;gap:0;padding:6px 0 10px} .nx-sl{padding:18px 0;position:relative} .nx-sl+.nx-sl{border-top:1px solid var(--nx-line-2)} .nx-sl-k{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:900; letter-spacing:.14em;text-transform:uppercase;color:var(--nx-mut);margin-bottom:10px} .nx-sl-k i{width:6px;height:6px;border-radius:50%;background:var(--v-sig);flex:none} .nx-sl-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .nx-sl-n{font-size:26px;font-weight:800;color:var(--nx-ink);letter-spacing:-.04em; line-height:1;font-variant-numeric:tabular-nums} .nx-sl-s{font-size:12px;color:var(--nx-mut);text-align:right;line-height:1.45;max-width:19ch} .nx-sl-bar{margin-top:11px;height:10px;border-radius:5px;background:var(--v-track);overflow:hidden} .nx-sl-bar i{display:block;height:100%;border-radius:5px;background:var(--v-sig)} .nx-sl--tight .nx-sl-bar i{background:var(--v-r2)} /* the narrowing arrow between layers */ .nx-sl-link{display:flex;align-items:center;gap:9px;padding:0 0 2px; font-size:11px;font-weight:700;color:var(--nx-sig-txt)} .nx-sl-link::before{content:"";width:1px;height:16px;background:var(--nx-sig-2);margin-left:3px} /* the institution row: chips rather than a number */ .nx-sl-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .nx-sl-chips span{font-size:11.5px;font-weight:700;color:var(--nx-body); background:var(--nx-sig-0);border:1px solid var(--nx-sig-2);border-radius:999px;padding:5px 11px} /* Chart tokens. These were referenced by the newer components but never declared in this stylesheet, so every bar resolved to transparent. Ordinal ramp r1→r3 is validator-passed (monotone L, light end 2.04:1). */ .nx{ --v-sig:#1D4ED8; --v-dim:#CBD2E0; --v-track:#E8EBF3; --v-r1:#86AEF2; --v-r2:#4A7CE4; --v-r3:#1D4ED8; } /* --- ranked rows inside the evidence card ----------------------------- */ .nx-ev .nx-rank{padding:14px 0 6px;background:none} .nx-ev .nx-rank li{grid-template-columns:14px 88px 1fr auto;gap:11px} .nx-ev .nx-rank-f{display:none} /* --- a compact two-up figure pair -------------------------------------- */ .nx-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px 0} .nx-pair>div{padding:16px 0} .nx-pair>div+div{border-left:1px solid var(--nx-line-2);padding-left:20px} .nx-pair b{display:block;font-size:26px;font-weight:800;color:var(--nx-ink); letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .nx-pair span{display:block;margin-top:8px;font-size:11.5px;color:var(--nx-mut);line-height:1.45} /* --- flow rows: step, arrow, step -------------------------------------- */ .nx-flow{display:grid;gap:0;padding:6px 0 10px} .nx-fw{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:14px 0;align-items:start} .nx-fw+.nx-fw{border-top:1px solid var(--nx-line-2)} .nx-fw-n{width:26px;height:26px;border-radius:8px;background:var(--nx-sig-1); color:var(--nx-sig-txt);font-size:11px;font-weight:900;display:grid;place-items:center} .nx-fw b{display:block;font-size:14px;font-weight:800;color:var(--nx-ink);letter-spacing:-.018em} .nx-fw span{display:block;font-size:12px;color:var(--nx-mut);margin-top:4px;line-height:1.5} .nx-fw em{font-style:normal;font-weight:800;color:var(--nx-ink)} /* --- the official Nexus mark, in the hero badge ------------------------ The mark lost its only on-page home when the section sub-nav was removed. It now sits in the badge, which every page already carries. */ .nx-badge img{width:17px;height:17px;display:block;flex:none;margin-right:1px} .nx-badge{gap:8px} /* ====================================================================== COMPONENT PASS — 2026-09-17 19 of the section's ~60 body sections were the same shape: a header over a grid of white bordered icon cards. These replace the ones whose content is actually a different KIND of thing (a proportion, an ordinal ladder, a question set, a field mapping, a resolution decision), so the page reads as a sequence of different arguments rather than one repeated tile. ====================================================================== */ /* --- gate: an ordinal trust ladder over a sourced proportion ----------- The three states do NOT sum to the collected total (327,031 of 337,470), so they are never drawn as a part-to-whole. The only proportion shown is the one the console states outright: 8,159 governed of 337,470 collected. */ .nx-gate{border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); background:var(--nx-paper);overflow:hidden} .nx-gate-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px; padding:26px 28px 20px} .gt-fig{display:flex;flex-direction:column;gap:2px;line-height:1} .gt-fig b{font-size:40px;font-weight:800;color:var(--nx-sig-txt); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .gt-fig span{font-size:11.5px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--nx-mut)} .gt-fig--dim b{color:var(--nx-ink);opacity:.42;font-size:30px} .gt-of{font-size:13px;color:var(--nx-mut);padding-bottom:8px} .gt-note{flex:1 1 260px;margin:0 0 4px;font-size:13.5px;color:var(--nx-body); max-width:380px} .nx-gate-bar{position:relative;height:10px;margin:0 28px 4px;border-radius:5px; background:var(--nx-line-2);overflow:hidden} .gt-fill{display:block;height:100%;border-radius:5px;background:var(--nx-sig)} .nx-gate-sc{display:flex;justify-content:space-between;margin:0 28px 22px; font-size:11px;color:var(--nx-mut);font-variant-numeric:tabular-nums} .nx-gate-t{list-style:none;margin:0;padding:0;border-top:1px solid var(--nx-line)} .gt-t{display:grid;grid-template-columns:3px 1fr auto;gap:0 20px;align-items:start; padding:22px 28px;border-bottom:1px solid var(--nx-line-2)} .gt-t:last-child{border-bottom:0} .gt-t::before{content:"";grid-row:1;align-self:stretch;border-radius:2px;min-height:44px} .gt-t--a::before{background:var(--v-r3)} .gt-t--b::before{background:var(--v-r2)} .gt-t--c::before{background:var(--v-r1)} .gt-name{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--nx-ink)} .gt-name em{font-style:normal;font-weight:600;color:var(--nx-mut);font-size:14px} .gt-name em::before{content:"·";margin:0 7px;color:var(--nx-line)} .gt-gate{display:inline-block;margin:0 0 8px;padding:3px 9px;border-radius:99px; background:var(--nx-sig-1);color:var(--nx-sig-deep);font-size:11.5px;font-weight:700} .gt-d{margin:0;font-size:14px;line-height:1.62;color:var(--nx-body);max-width:56ch} .gt-n{font-size:22px;font-weight:800;color:var(--nx-ink);text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .gt-t--c .gt-n{color:var(--nx-mut)} @media(max-width:700px){ .gt-t{grid-template-columns:3px 1fr;gap:0 14px;padding:18px 20px} .gt-n{grid-column:2;text-align:left;margin-top:10px;font-size:19px} .nx-gate-top{padding:20px 20px 16px} .nx-gate-bar,.nx-gate-sc{margin-left:20px;margin-right:20px} .gt-fig b{font-size:32px} } /* --- mag: nominal categories, one hue, length is the only variable ----- These four DO sum exactly to 337,470, so the shares are a true part-to-whole and are labelled as such. Nominal set => single hue. */ .nx-mag{border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); background:var(--nx-paper);overflow:hidden} .nx-mag-l{list-style:none;margin:0;padding:8px 0} .mg{display:grid;grid-template-columns:1fr;gap:9px;padding:20px 28px; border-bottom:1px solid var(--nx-line-2)} .mg:last-child{border-bottom:0} .mg-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .mg-name{font-size:16px;font-weight:800;color:var(--nx-ink)} .mg-sub{font-size:13px;color:var(--nx-mut);flex:1 1 auto} .mg-n{font-size:15px;font-weight:800;color:var(--nx-ink); font-variant-numeric:tabular-nums} .mg-pc{font-size:12px;font-weight:700;color:var(--nx-mut); font-variant-numeric:tabular-nums;min-width:38px;text-align:right} .mg-track{height:11px;border-radius:6px;background:var(--nx-line-2);overflow:hidden} .mg-bar{display:block;height:100%;border-radius:6px;background:var(--nx-sig)} .mg-d{margin:0;font-size:13.5px;line-height:1.6;color:var(--nx-body);max-width:66ch} .nx-mag-f{margin:0;padding:16px 28px;border-top:1px solid var(--nx-line); background:var(--nx-sig-0);font-size:12.5px;color:var(--nx-mut)} .nx-mag-f b{color:var(--nx-ink);font-weight:800} @media(max-width:700px){ .mg{padding:16px 20px} .nx-mag-f{padding:14px 20px} } /* --- qa: a question set, answered. Used where the content is literally "four questions this answers" - a Q leads, the answer follows. --------- */ .nx-qa{list-style:none;margin:0;padding:0;display:grid;gap:0; border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); background:var(--nx-paper);overflow:hidden} .qa{display:grid;grid-template-columns:auto 1fr;gap:6px 22px; padding:26px 30px;border-bottom:1px solid var(--nx-line-2)} .nx-qa .qa:last-child{border-bottom:0} .qa-n{grid-row:1/span 2;font-size:12px;font-weight:900;color:var(--nx-sig); font-variant-numeric:tabular-nums;letter-spacing:.06em;padding-top:5px} .qa-q{margin:0;font-size:19px;line-height:1.36;font-weight:700;color:var(--nx-ink); letter-spacing:-.011em;max-width:30ch} .qa-a{margin:0;font-size:14.5px;line-height:1.66;color:var(--nx-body);max-width:64ch} @media(max-width:700px){ .qa{grid-template-columns:1fr;gap:8px;padding:20px} .qa-n{grid-row:auto;padding-top:0} .qa-q{font-size:17px} } /* --- map: one thing resolved against another. A field ledger, not cards. */ .nx-map{border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); background:var(--nx-paper);overflow:hidden} .nx-map-h{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:24px;padding:13px 26px;background:var(--nx-bone); border-bottom:1px solid var(--nx-line);font-size:11px;font-weight:900; letter-spacing:.09em;text-transform:uppercase;color:var(--nx-mut)} .nx-map-l{list-style:none;margin:0;padding:0} .mp{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:8px 24px; padding:19px 26px;border-bottom:1px solid var(--nx-line-2);align-items:baseline} .nx-map-l .mp:last-child{border-bottom:0} .mp-k{display:flex;align-items:baseline;gap:10px;font-size:15.5px;font-weight:800; color:var(--nx-ink)} .mp-k::before{content:"";width:6px;height:6px;border-radius:2px;flex:none; background:var(--nx-sig);transform:translateY(-3px)} .mp-v{margin:0;font-size:14px;line-height:1.62;color:var(--nx-body)} .mp-v b{color:var(--nx-ink);font-weight:700} @media(max-width:760px){ .nx-map-h{display:none} .mp{grid-template-columns:1fr;gap:5px;padding:16px 20px} } /* --- deliv: numbered artefacts, each with what it answers ------------- */ .nx-deliv{list-style:none;margin:0;padding:0;display:grid;gap:14px} .dv{display:grid;grid-template-columns:52px 1fr;gap:0 20px;align-items:start; padding:24px 26px;border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); background:var(--nx-paper)} .dv-n{grid-row:1/span 3;display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:12px;background:var(--nx-sig-1); color:var(--nx-sig-deep);font-size:14px;font-weight:900; font-variant-numeric:tabular-nums} .dv-k{margin:0 0 2px;font-size:17px;font-weight:800;color:var(--nx-ink); letter-spacing:-.008em} .dv-s{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--nx-sig-txt)} .dv-d{margin:0;font-size:14px;line-height:1.64;color:var(--nx-body);max-width:68ch} @media(max-width:700px){ .dv{grid-template-columns:1fr;gap:12px;padding:20px} .dv-n{grid-row:auto} } /* --- guard: a governance block. Reads as policy, not as a feature tile. */ .nx-guard{border:1px solid var(--nx-line);border-left:3px solid var(--nx-sig); border-radius:var(--nx-r-lg);background:var(--nx-sig-0);padding:8px 0} .nx-guard-l{list-style:none;margin:0;padding:0} .gd{padding:20px 28px;border-bottom:1px solid var(--nx-line-2)} .nx-guard-l .gd:last-child{border-bottom:0} .gd-k{margin:0 0 6px;font-size:15.5px;font-weight:800;color:var(--nx-ink)} .gd-d{margin:0;font-size:14px;line-height:1.64;color:var(--nx-body);max-width:72ch} @media(max-width:700px){ .gd{padding:17px 20px} } /* --- res: the entity-resolution decision, drawn as the decision it is -- */ .nx-res{border:1px solid var(--nx-line);border-radius:var(--nx-r-lg); background:var(--nx-paper);overflow:hidden} .nx-res-d{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center; padding:28px 30px;background:var(--nx-bone);border-bottom:1px solid var(--nx-line)} .rs-rec{border:1px solid var(--nx-line);border-radius:10px;background:var(--nx-paper); padding:13px 15px} .rs-rec b{display:block;font-size:14px;font-weight:800;color:var(--nx-ink)} .rs-rec span{display:block;margin-top:3px;font-size:12px;color:var(--nx-mut); font-variant-numeric:tabular-nums} .rs-link{display:flex;flex-direction:column;align-items:center;gap:5px; font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--nx-flag);white-space:nowrap} .rs-link::before{content:"";width:54px;height:2px;border-radius:2px; background:repeating-linear-gradient(90deg,var(--nx-flag) 0 6px,transparent 6px 11px)} .nx-res-o{display:flex;align-items:center;gap:12px;padding:16px 30px; border-bottom:1px solid var(--nx-line);background:var(--nx-flag-1)} .nx-res-o b{font-size:14px;font-weight:800;color:var(--nx-flag)} .nx-res-o span{font-size:13.5px;color:var(--nx-body)} .nx-res-l{list-style:none;margin:0;padding:0} .nx-res-l li{padding:18px 30px;border-bottom:1px solid var(--nx-line-2)} .nx-res-l li:last-child{border-bottom:0} .nx-res-l b{display:block;margin-bottom:4px;font-size:15px;font-weight:800; color:var(--nx-ink)} .nx-res-l p{margin:0;font-size:14px;line-height:1.62;color:var(--nx-body);max-width:70ch} @media(max-width:760px){ .nx-res-d{grid-template-columns:1fr;gap:12px;padding:20px} .rs-link{flex-direction:row} .rs-link::before{width:30px} .nx-res-o,.nx-res-l li{padding-left:20px;padding-right:20px} }