/* Canvas and White label pages (/canvas, /white-label), brand pass 2026-10-23.
   Site tokens only. Everything is scoped under .np; the product mock-ups use the fictional brand Northwind AI. */
.np{--b:#C4552D;--b2:#1F3A34;--bt:#FBF4EC;font-family:var(--crhq-font-display,'Inter Tight',system-ui,sans-serif);color:var(--crhq-text,#15171A)}
.np *{box-sizing:border-box}
.np .wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative}
.np .sec{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--crhq-border,#E6E8EC);position:relative}
.np .sec.first{border-top:0;padding-top:var(--crhq-hero-top,140px)}
.np .sec.first .split{align-items:start}
.np .eyebrow{font:500 12px var(--crhq-font-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--crhq-primary-text,#3567E0);margin:0 0 14px}
.np h1{font-size:clamp(40px,5.2vw,68px);line-height:1.03;letter-spacing:-.045em;font-weight:500;margin:0 0 20px}
.np h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.04em;font-weight:500;margin:0 0 14px}
.np h1 span,.np h2 span{color:var(--crhq-primary-text,#3567E0)}
.np h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.np .lede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--crhq-text-soft,#4A5161);max-width:600px;margin:0}
.np p{line-height:1.6}
.np .muted{color:var(--crhq-text-muted,#667085)}
.np .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.np .split.rev>:first-child{order:2}
.np .cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:28px}
.np .btnp{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:12px 20px;border-radius:10px;background:var(--crhq-primary,#3567E0);color:#fff;font-weight:600;text-decoration:none}
.np .lnk{color:var(--crhq-primary-text,#3567E0);text-decoration:underline;text-underline-offset:5px;font-size:15px}
.np .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.np .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.np .card{border:1px solid var(--crhq-border,#E6E8EC);border-radius:16px;padding:24px;background:var(--crhq-bg,#fff)}
.np .card p{margin:0;color:var(--crhq-text-soft,#4A5161);font-size:15px}
.np .ico{width:40px;height:40px;display:block;margin-bottom:14px}
.np ul.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.np ul.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--crhq-text-soft,#4A5161)}
.np ul.ticks li::before{content:'';flex:none;width:10px;height:10px;border-radius:2px;margin-top:8px;background:var(--crhq-primary,#3567E0)}
.np ul.ticks b{color:var(--crhq-text,#15171A)}
.np .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.np .chip{border:1px solid var(--crhq-border,#E6E8EC);border-radius:999px;padding:7px 13px;font-size:14px;background:var(--crhq-bg-subtle,#F6F7F9)}
.np .steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.np .step{border-top:2px solid var(--crhq-primary,#3567E0);padding-top:16px}
.np .step .n{font:600 13px var(--crhq-font-mono,monospace);color:var(--crhq-primary-text,#3567E0)}
.np .step h3{margin:8px 0 6px}
.np .step p{margin:0;font-size:15px;color:var(--crhq-text-soft,#4A5161)}
.np .band{background:linear-gradient(135deg,#0E1B4D,#2D4EBD);color:#fff;border-radius:22px;padding:clamp(28px,4vw,48px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.np .band h2{color:#fff;margin:0;max-width:640px}
.np .band .btnp{background:#fff;color:#0E1B4D}
.np .band .lnk{color:#fff}
.np details{border-top:1px solid var(--crhq-border,#E6E8EC);padding:18px 0}
.np details summary{cursor:pointer;font-size:18px;font-weight:500;list-style:none}
.np details p{margin:10px 0 0;color:var(--crhq-text-soft,#4A5161)}
.np .frame{border-radius:16px;overflow:hidden;border:1px solid #E1E5EC;box-shadow:0 30px 70px -40px rgba(14,27,77,.45);background:#fff;color:#15171A;font-family:'Inter Tight',system-ui,sans-serif}
.np .frame .chrome{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#F3F4F6;border-bottom:1px solid #E5E7EB}
.np .frame .chrome i{width:9px;height:9px;border-radius:50%;background:#D5D8DE}
.np .frame .chrome .url{margin-left:10px;font:11.5px ui-monospace,monospace;color:#6B7280;background:#fff;border:1px solid #E5E7EB;border-radius:6px;padding:3px 10px}
.np .nw{--b:#C4552D}
.np .nw-logo{display:inline-flex;align-items:center;gap:8px;font-family:Georgia,'Iowan Old Style',serif;font-size:19px;letter-spacing:-.01em}
.np .nw-logo svg{width:24px;height:24px}
.np .signin{display:grid;place-items:center;padding:34px 20px;background:#FBF4EC;min-height:300px}
.np .signin .box{width:100%;max-width:300px;background:#fff;border-radius:14px;padding:22px;box-shadow:0 10px 30px -18px rgba(0,0,0,.3)}
.np .signin h4{margin:14px 0 14px;font:400 20px Georgia,serif}
.np .fld{height:38px;border:1px solid #E2D9CB;border-radius:10px;margin-bottom:10px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#9A8F80}
.np .bbtn{height:40px;border-radius:10px;background:var(--b);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.np .dash{display:grid;grid-template-columns:150px 1fr;min-height:360px;background:#FBF8F3}
.np .dash aside{background:#1F3A34;color:#E9E2D5;padding:14px 12px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.np .dash aside .nw-logo{color:#fff;font-size:16px;margin-bottom:12px}
.np .dash aside span{padding:7px 9px;border-radius:8px}
.np .dash aside span.on{background:rgba(255,255,255,.12);color:#fff}
.np .dash .m{padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.np .dash .tile{background:#fff;border:1px solid #EADFCF;border-radius:12px;padding:12px;font-size:12.5px}
.np .dash .tile h5{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8A7F6E}
.np .dash .tile.wide{grid-column:1/-1}
.np .agentrow{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid #F1EADF}
.np .agentrow:first-of-type{border-top:0}
.np .av{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:600;font-size:11px;flex:none}
.np .pulse{width:7px;height:7px;border-radius:50%;background:#22A06B;margin-left:auto;box-shadow:0 0 0 3px rgba(34,160,107,.18)}
.np .meter{height:6px;border-radius:3px;background:#F1EADF;overflow:hidden;margin:4px 0 8px}
.np .meter i{display:block;height:100%;background:var(--b)}
.np .big{font:600 22px 'Inter Tight',sans-serif;letter-spacing:-.02em}
.np .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;background:#FBF8F3;min-height:250px}
.np .board .col{background:#F3ECE1;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:7px}
.np .board .col h6{margin:2px 4px 2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8A7F6E;display:flex;justify-content:space-between}
.np .board .it{background:#fff;border-radius:8px;padding:8px 9px;font-size:12px;border:1px solid #EADFCF}
.np .board .it b{display:block;font-size:12.5px}
.np .board .it small{color:#8A7F6E}
.np .model{padding:14px;background:#fff;font-size:12.5px}
.np .model .row{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px 0;border-top:1px solid #EEF0F3}
.np .model .row span:last-child{font-family:ui-monospace,monospace;color:#6B7280;font-size:11.5px}
.np .chat{padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;min-height:330px;font-size:13px}
.np .msg-u{align-self:flex-end;max-width:82%;background:#3567E0;color:#fff;border-radius:14px 14px 4px 14px;padding:9px 12px;line-height:1.45}
.np .msg-a{max-width:88%;background:#F3F5F8;border-radius:14px 14px 14px 4px;padding:9px 12px;line-height:1.45}
.np .msg-a .who{font-size:11px;font-weight:600;color:#3567E0;display:block;margin-bottom:2px}
.np .msg-a.nwv{background:#F3ECE1}
.np .msg-a.nwv .who{color:var(--b)}
.np .thumbrow{display:flex;gap:8px;margin-top:8px}
.np .thumbrow span{flex:1;height:54px;border-radius:8px;border:1px solid #E5E7EB}
.np .settings{padding:16px;background:#fff;font-size:13px;display:grid;gap:12px}
.np .settings .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #EEF0F3}
.np .sw{display:flex;gap:6px}
.np .sw i{width:22px;height:22px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.08)}
.np .ok{font:600 11px ui-monospace,monospace;color:#157347;background:#EAF6EF;border-radius:6px;padding:2px 7px}
.np .tog{width:34px;height:20px;border-radius:999px;background:#3567E0;position:relative;flex:none}
.np .tog::after{content:'';position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.np .tog.off{background:#D5DAE1}
.np .tog.off::after{right:auto;left:2px}
.np .classic{display:grid;grid-template-columns:120px 1fr;min-height:250px;background:#fff;font-size:12px}
.np .classic aside{background:#F7F8FA;border-right:1px solid #EEF0F3;padding:10px;display:flex;flex-direction:column;gap:6px}
.np .classic aside span{height:10px;border-radius:4px;background:#E5E8EE}
.np .classic .m{padding:12px;display:flex;flex-direction:column;gap:8px}
.np .classic .b{height:28px;border-radius:9px;background:#F3F5F8}
.np .classic .b.u{background:#3567E0;opacity:.85;align-self:flex-end;width:60%}
.np .roll{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px;background:var(--crhq-bg-subtle,#F6F7F9);border-radius:16px;border:1px solid var(--crhq-border,#E6E8EC)}
.np .roll .src{display:flex;align-items:center;gap:10px;font-weight:600}
.np .roll .arrow{flex:1;min-width:40px;height:2px;background:repeating-linear-gradient(90deg,var(--crhq-primary,#3567E0) 0 8px,transparent 8px 14px)}
.np .roll .srv{display:grid;grid-template-columns:repeat(4,22px);gap:6px}
.np .roll .srv i{width:22px;height:22px;border-radius:5px;background:var(--crhq-primary,#3567E0);opacity:.85}
.np .roll .srv i:nth-child(3n){background:#5A8BF0}
.np .roll .srv i:nth-child(4n){background:#2D4EBD}
.np .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.np .duo .lab{font:600 12px var(--crhq-font-mono,monospace);letter-spacing:.05em;color:var(--crhq-text-muted,#667085);margin:0 0 10px}
.np .cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:900px){.np .split,.np .grid3,.np .grid2,.np .steps,.np .duo,.np .cols2{grid-template-columns:1fr}
.np .split.rev>:first-child{order:0}
.np .wrap{padding:0 20px}
.np .dash{grid-template-columns:1fr}
.np .dash aside{flex-direction:row;flex-wrap:wrap;align-items:center}
.np .dash aside .nw-logo{margin:0 10px 0 0}
.np .dash .m{grid-template-columns:1fr}
.np .board{grid-template-columns:1fr 1fr}
.np .board .col:nth-child(3){display:none}
.np .band{flex-direction:column;align-items:flex-start}}
.np .stack{display:grid;gap:14px}
.np .stack>.frame:first-child{max-width:340px}
.np .split.top{align-items:start}
.np h1.claim{font-size:clamp(38px,4.4vw,60px)}
.np .kick{font:600 12px var(--crhq-font-mono,monospace);letter-spacing:.06em;color:var(--crhq-primary-text,#3567E0);margin:0 0 10px}