/* Ni Biashara Networks home (/networks/), 2026-10-20, Msanii.
   Dossier: pan-african-contemporary (structure; "Restrained Ledger" register) with NB Brand Kit
   tokens replacing the dossier's (ENGINE rule 3; brand/tokens/tokens.css). Blue #1f3fbf is for
   actions only. Plum #6e3553 (seal v2 dot) appears once, in the jina band.
   Structural device: the kanga's three parts (pindo border, mji centre, jina saying; Swahili
   coast) used as layout logic in "How it all connects". No pattern, no drawn graphics, no CSS
   motion (Ni Biashara AGENTS.md). Header/footer stay on company-shell.css. */
:root{
  --nw-paper:#f3eee6;--nw-surface:#fbf8f2;--nw-ink:#1a1614;--nw-ink-2:#5c564c;--nw-rule:#d8cfbd;
  --nw-rule-strong:#8f836d;--nw-accent:#1f3fbf;--nw-accent-deep:#172f8f;--nw-plum:#6e3553;
  --nw-wash:rgba(26,22,20,.05);
  --nw-d:"Fraunces","Iowan Old Style",Georgia,serif;
  --nw-b:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --nw-m:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nw-r:3px;--nw-line:1.5px solid var(--nw-ink);
}
*{box-sizing:border-box}
html{background:var(--nw-paper)}
body.nw-page{margin:0;background:var(--nw-paper);color:var(--nw-ink);font:400 16px/1.55 var(--nw-b);-webkit-font-smoothing:antialiased;color-scheme:light}
main.nw img{display:block;max-width:100%}
.nw a{color:inherit}
:where(.nw) p{margin:0}/* zero specificity so single-class margins (.nw-lead, .nw-checked, .nw-note) apply */
.nw-shell{width:min(1280px,100%);margin:0 auto;padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px)}
.nw-label{margin:0;color:var(--nw-ink-2);font:600 11px/1.2 var(--nw-b);letter-spacing:.1em;text-transform:uppercase}
.nw h1,.nw h2,.nw h3{margin:0;font-family:var(--nw-d);font-weight:400;font-variation-settings:"opsz" 144;text-wrap:balance}
.nw :focus-visible{outline:2px solid var(--nw-accent);outline-offset:2px}
.nw [hidden]{display:none!important}
/* Art review 2026-10-20 fixes: anchors clear the sticky header; the shared header is
   0.96 opaque, so the hero label showed through it on mobile, made solid on this page only. */
main.nw [id]{scroll-margin-top:92px}
body.nw-page .tw-head{background:#0b0b0a!important}

/* Buttons and links */
.nw-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:var(--nw-r);border:1.5px solid var(--nw-ink);background:transparent;color:var(--nw-ink);font:600 15px/1.2 var(--nw-b);text-align:center;text-decoration:none;cursor:pointer}
.nw-btn:hover{background:var(--nw-wash)}
.nw-btn.primary{background:var(--nw-accent);border-color:var(--nw-accent);color:var(--nw-surface)}
.nw-btn.primary:hover{background:var(--nw-accent-deep);border-color:var(--nw-accent-deep)}
.nw-btn:disabled{opacity:.55;cursor:progress}
.nw-actions{display:flex;flex-wrap:wrap;gap:12px}
.nw-go{display:inline-block;padding:6px 0;color:var(--nw-accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.nw-go:hover{color:var(--nw-accent-deep)}

/* Status tags: live = ink fill, coming = outline. */
.nw-tag{display:inline-block;padding:3px 8px;border-radius:var(--nw-r);font:600 11px/1.3 var(--nw-b);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.nw-tag.live{background:var(--nw-ink);color:var(--nw-paper)}
.nw-tag.soon{border:1.5px solid var(--nw-ink-2);color:var(--nw-ink-2);padding:1.5px 6.5px}

/* Sections */
.nw-section{padding-top:clamp(56px,9vw,112px);padding-bottom:clamp(56px,9vw,112px);border-bottom:1px solid var(--nw-rule)}
.nw-head{display:grid;gap:14px;margin-bottom:clamp(28px,5vw,52px)}
.nw-head h2{font-size:clamp(2rem,5.4vw,3.6rem);line-height:1;letter-spacing:-.02em;max-width:16ch}
.nw-sub{max-width:38rem;color:var(--nw-ink-2);font-size:17px}

/* 1. Hero: mission left, pledge right */
.nw-hero{display:grid;gap:40px;padding-top:clamp(48px,9vw,120px);padding-bottom:clamp(56px,9vw,112px);border-bottom:1px solid var(--nw-rule)}
.nw-hero h1{margin-top:20px;padding-bottom:.12em;font-size:clamp(2.75rem,9.4vw,6rem);line-height:.94;letter-spacing:-.025em}
.nw-hero h1 em{font-style:italic}
.nw-lead{margin-top:28px;max-width:36rem;color:var(--nw-ink-2);font-size:clamp(17px,1.6vw,19px);line-height:1.6}
.nw-hero .nw-actions{margin-top:32px}
.nw-pledge{align-self:end;background:var(--nw-surface);border:var(--nw-line);padding:24px}
.nw-pledge h2{margin-top:10px;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.05}
.nw-pledge ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:p}
.nw-pledge li{counter-increment:p;display:grid;grid-template-columns:34px 1fr;gap:8px;padding:13px 0;border-top:1px solid var(--nw-rule);line-height:1.45}
.nw-pledge li::before{content:counter(p,decimal-leading-zero);color:var(--nw-ink-2);font:600 12px/1.9 var(--nw-b);font-variant-numeric:tabular-nums}

/* 2. Find your tool: segmented picker over answer panels */
.nw-picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.nw-picker button{min-height:44px;padding:0 16px;border:1.5px solid var(--nw-ink);border-radius:var(--nw-r);background:transparent;color:var(--nw-ink);font:600 15px/1 var(--nw-b);cursor:pointer}
.nw-picker button:hover{background:var(--nw-wash)}
.nw-picker button[aria-selected=true]{background:var(--nw-ink);color:var(--nw-paper)}
.nw-tools{display:grid;gap:16px}
.nw-tool{border:var(--nw-line);background:var(--nw-surface);padding:24px;display:grid;gap:16px;align-content:start}
.nw-tool-copy,.nw-tool-do{display:grid;gap:14px;align-content:start;justify-items:start}
.nw-tool-do>*{justify-self:stretch}
.nw-tool-do>.nw-go{justify-self:start}
.nw-tool h3{font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.02}
.nw-tool .nw-for{color:var(--nw-ink-2);font-weight:600}
.nw-tool p{color:var(--nw-ink-2);max-width:44rem}
.nw-facts{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--nw-rule)}
.nw-facts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--nw-rule);color:var(--nw-ink)}
.nw-facts b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nw-cmd{display:grid;gap:6px}
.nw-cmd .nw-label{color:var(--nw-ink-2)}
.nw-cmd-row{display:flex;align-items:stretch;border:1.5px solid var(--nw-ink);border-radius:var(--nw-r);background:var(--nw-ink);color:var(--nw-paper);overflow:hidden}
.nw-cmd pre{margin:0;flex:1 1 auto;min-width:0;padding:12px 14px;font:400 13.5px/1.5 var(--nw-m);white-space:pre-wrap;overflow-wrap:anywhere}
.nw-copy{flex:0 0 auto;min-width:76px;min-height:44px;padding:0 14px;border:0;border-left:1.5px solid var(--nw-ink-2);background:var(--nw-paper);color:var(--nw-ink);font:600 14px/1 var(--nw-b);cursor:pointer}
.nw-copy:hover{background:var(--nw-surface)}
.nw-copy:focus-visible{outline-offset:-4px}

/* 3. Free listing value block: the one inverted panel on the page */
.nw-list{background:var(--nw-ink);color:var(--nw-paper);padding:clamp(24px,5vw,56px);display:grid;gap:28px}
.nw-list .nw-label{color:var(--nw-rule)}
.nw-list h2{margin-top:12px;font-size:clamp(2.4rem,7vw,5rem);line-height:.96;letter-spacing:-.025em}
.nw-list p{color:var(--nw-rule);max-width:34rem;font-size:17px}
.nw-list h2{padding-bottom:.1em}
.nw-list-head>p:not(.nw-label){margin-top:20px}
.nw-list ol{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;border-top:1px solid var(--nw-ink-2)}
.nw-list li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:8px;padding:14px 0;border-bottom:1px solid var(--nw-ink-2)}
.nw-list li::before{content:counter(s,decimal-leading-zero);color:var(--nw-rule);font:600 12px/1.9 var(--nw-b);font-variant-numeric:tabular-nums}
.nw-list li strong{display:block;color:var(--nw-paper);font-weight:600}
.nw-list li span{color:var(--nw-rule)}
.nw-list .nw-btn{border-color:var(--nw-paper);color:var(--nw-paper)}
.nw-list .nw-btn:hover{background:rgba(243,238,230,.1)}
.nw-list .nw-btn.light{background:var(--nw-paper);color:var(--nw-ink)}
.nw-list .nw-btn.light:hover{background:var(--nw-surface)}
.nw-list :focus-visible{outline-color:var(--nw-paper)}
.nw-list .nw-small{margin-top:14px;font-size:14px;color:var(--nw-rule)}
.nw-list .nw-small a{color:var(--nw-paper);text-underline-offset:3px}

/* 4. Where we are: ledger rows grouped by place */
.nw-group{margin-top:44px}
.nw-group:first-child{margin-top:0}
.nw-group>.nw-label{padding-bottom:12px;border-bottom:var(--nw-line)}
.nw-rooms{list-style:none;margin:0;padding:0}
.nw-room{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--nw-rule)}
.nw-room h3{font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.1}
.nw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--nw-ink-2);font-size:14px}
.nw-what{color:var(--nw-ink-2);max-width:40rem}

/* 5. How it all connects: laid out like a kanga */
.nw-kanga{background:var(--nw-ink);color:var(--nw-paper);padding:12px}
.nw-pindo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:10px 8px 14px}
.nw-pindo .nw-label{color:var(--nw-rule)}
.nw-pindo a{color:var(--nw-paper);font:500 15px/1.3 var(--nw-b);text-decoration:underline;text-decoration-color:var(--nw-rule-strong);text-underline-offset:4px}
.nw-pindo a:hover{text-decoration-color:var(--nw-paper)}
.nw-kanga :focus-visible{outline-color:var(--nw-paper)}
.nw-mji{display:grid;gap:1px;background:var(--nw-rule);border:1px solid var(--nw-rule)}
.nw-cell{background:var(--nw-paper);color:var(--nw-ink);padding:22px 20px;display:grid;gap:8px;align-content:start}
.nw-cell.main{background:var(--nw-surface)}
.nw-step{display:flex;align-items:center;gap:10px}
.nw-num{color:var(--nw-ink-2);font:600 12px/1 var(--nw-b);font-variant-numeric:tabular-nums}
.nw-cell h3{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.08}
.nw-cell.main h3{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.nw-cell p{color:var(--nw-ink-2);font-size:15.5px}
.nw-jina{display:flex;align-items:baseline;gap:12px;padding:16px 8px 8px;font:italic 400 clamp(1.3rem,3vw,2rem)/1.15 var(--nw-d);font-variation-settings:"opsz" 144}
.nw-jina::before{content:"";flex:0 0 auto;width:.4em;height:.4em;border-radius:50%;background:var(--nw-plum);box-shadow:0 0 0 2px var(--nw-paper)}
.nw-note{margin-top:14px;color:var(--nw-ink-2);font-size:14px;max-width:44rem}

/* 6. Reach out */
.nw-intake{display:grid;gap:40px}
.nw-form{display:grid;gap:18px}
.nw-field{display:grid;gap:8px}
.nw-field label{font:600 14px/1.25 var(--nw-b);color:var(--nw-ink)}
.nw-hint{font-weight:400;color:var(--nw-ink-2)}
.nw-form input[type=text],.nw-form select,.nw-form textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--nw-rule-strong);border-radius:var(--nw-r);background:var(--nw-surface);color:var(--nw-ink);font:400 16px/1.4 var(--nw-b)}
.nw-form textarea{min-height:128px;resize:vertical}
.nw-form input[type=text]:hover,.nw-form select:hover,.nw-form textarea:hover,.nw-form input[type=text]:focus-visible,.nw-form select:focus-visible,.nw-form textarea:focus-visible{border-color:var(--nw-ink)}
.nw-form ::placeholder{color:var(--nw-ink-2);opacity:.85}
.nw-check{display:flex;gap:10px;align-items:flex-start;color:var(--nw-ink);font-size:15px;line-height:1.5}
.nw-check.legal{color:var(--nw-ink-2);font-size:13px;line-height:1.6}
.nw-check input{margin-top:.2rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--nw-accent)}
.nw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nw-form-actions{display:grid;gap:12px;justify-items:start}
.nw-form-status{min-height:1.4em;font-weight:600}
.nw-form[data-sent] .nw-form-status{color:var(--nw-accent-deep)}
.nw-aside{border-top:var(--nw-line);padding-top:16px;display:grid;gap:12px;align-content:start;color:var(--nw-ink-2)}
.nw-aside h3{color:var(--nw-ink);font-size:1.5rem;line-height:1.1}
.nw-aside ul{margin:0;padding-left:18px;display:grid;gap:8px}

/* AI Picker (/networks/ai-picker/) */
.nw-checked{margin-top:20px;max-width:36rem;color:var(--nw-ink-2);font-size:14px}
.nw-ap{display:grid;gap:24px}
.nw-ap-q{display:grid;gap:22px}
.nw-ap fieldset{margin:0;padding:0;border:0;display:grid;gap:10px}
.nw-ap legend{padding:0 0 10px;font:600 15px/1.3 var(--nw-b);color:var(--nw-ink)}
.nw-ap legend .nw-num{margin-right:8px}
.nw-chips{display:flex;flex-wrap:wrap;gap:8px}
.nw-chip{position:relative}
.nw-chip input{position:absolute;opacity:0;width:1px;height:1px}
.nw-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:1.5px solid var(--nw-ink);border-radius:var(--nw-r);background:transparent;font:600 15px/1.2 var(--nw-b);cursor:pointer}
.nw-chip span:hover{background:var(--nw-wash)}
.nw-chip input:checked+span{background:var(--nw-ink);color:var(--nw-paper)}
.nw-chip input:focus-visible+span{outline:2px solid var(--nw-accent);outline-offset:2px}
.nw-result{border:var(--nw-line);background:var(--nw-surface);padding:24px;display:grid;gap:14px;align-content:start;min-height:220px}
.nw-result h3{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1}
.nw-result .nw-why{color:var(--nw-ink);font-size:17px;max-width:40rem}
.nw-result h4{margin:8px 0 0;font:600 13px/1.2 var(--nw-b);letter-spacing:.08em;text-transform:uppercase;color:var(--nw-ink-2)}
.nw-result ol{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--nw-ink)}
.nw-result .nw-also{border-top:1px solid var(--nw-rule);padding-top:12px;color:var(--nw-ink-2)}
.nw-result .nw-also a{color:var(--nw-accent);font-weight:600}
.nw-cards{display:grid;gap:1px;background:var(--nw-rule);border:1px solid var(--nw-rule)}
.nw-card{background:var(--nw-paper);padding:22px 20px;display:grid;gap:10px;align-content:start;scroll-margin-top:90px}
.nw-card:target,.nw-card.is-pick{background:var(--nw-surface);box-shadow:inset 4px 0 0 var(--nw-ink)}
.nw-card h3{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.06}
.nw-card .nw-best{color:var(--nw-ink);font-weight:600}
.nw-card p{color:var(--nw-ink-2);font-size:15.5px}
.nw-card dl,.nw-result dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.nw-card dt,.nw-result dt{color:var(--nw-ink-2)}
.nw-card dd,.nw-result dd{margin:0;color:var(--nw-ink);font-variant-numeric:tabular-nums}
.nw-card ol{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--nw-ink);font-size:15px}
main.nw code{font:400 13px/1.5 var(--nw-m);background:var(--nw-wash);padding:1px 5px;border-radius:2px;overflow-wrap:anywhere}
.nw-card a,.nw-result ol a,.nw-dyk a,.nw-note a{text-underline-offset:3px}
.nw-dyk{display:grid;gap:1px;background:var(--nw-rule);border:1px solid var(--nw-rule)}
.nw-dyk>div{background:var(--nw-paper);padding:22px 20px;display:grid;gap:8px}
.nw-dyk h3{font-size:1.5rem;line-height:1.1}
.nw-dyk p{color:var(--nw-ink-2)}
.nw-sources{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--nw-ink-2);font-size:14px}
.nw-sources a{color:var(--nw-ink)}

/* Tablet */
@media (min-width:700px){
  .nw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nw-dyk{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nw-form{grid-template-columns:1fr 1fr;column-gap:16px}
  .nw-form .full{grid-column:1/-1}
  .nw-room{grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);column-gap:24px;align-items:baseline}
  .nw-room>div:first-child{display:grid;gap:8px}
  .nw-room .nw-go{justify-self:end;text-align:right}
  .nw-mji{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nw-cell.main{grid-column:1/-1}
  .nw-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}
  .nw-list>.nw-list-head{grid-column:1/-1}
}

/* Desktop: 12-column asymmetry */
@media (min-width:1000px){
  .nw-hero{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:end}
  .nw-hero-copy{grid-column:1/span 7}
  .nw-pledge{grid-column:9/span 4}
  .nw-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:end}
  .nw-head>.nw-label{grid-column:1/-1}
  .nw-head>h2{grid-column:1/span 7}
  .nw-head>.nw-sub{grid-column:8/span 5}
  .nw-tool{padding:36px;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
  .nw-tool>.nw-tool-copy{grid-column:1/span 6;display:grid;gap:16px;align-content:start}
  .nw-tool>.nw-tool-do{grid-column:8/span 5;display:grid;gap:16px;align-content:start}
  .nw-list{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
  .nw-list>.nw-list-head{grid-column:1/span 6}
  .nw-list>ol{grid-column:8/span 5;align-self:end}
  .nw-list>.nw-list-act{grid-column:1/-1}
  .nw-kanga{padding:16px}
  .nw-mji{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nw-cell{padding:28px 26px}
  .nw-cell.main{grid-column:1/span 2}
  .nw-intake{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
  .nw-intake>.nw-form{grid-column:1/span 7}
  .nw-intake>.nw-aside{grid-column:9/span 4}
  .nw-ap{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
  .nw-ap>.nw-ap-q{grid-column:1/span 5}
  .nw-ap>.nw-result{grid-column:7/span 6;position:sticky;top:96px;padding:32px}
  .nw-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nw-card{padding:28px 26px}
}