:root{
  /* ─────────────────────────────────────────────────────────────
     Elevate Color System V2 — SOURCE OF TRUTH
     These are the canonical tokens from the color-system reference.
     ───────────────────────────────────────────────────────────── */
  --color-brand-primary:#0B7A55;   /* emerald — primary actions, brand, key metrics */
  --color-brand-bright:#22C38A;    /* emerald bright — highlights, hover, chart lines */
  --color-brand-tint:#DCF5E8;      /* emerald tint — success tags, subtle fills */
  --color-secondary:#4F46E5;       /* indigo — secondary accents, links, tier badges */
  --color-secondary-tint:#E7E5FB;  /* indigo tint — badge fills */
  --color-secondary-text:#3730A3;  /* indigo dark — text on indigo tint */
  --color-ink:#10151A;             /* body text, headers, dark surfaces */
  --color-text-2:#5B6470;          /* secondary text */
  --color-border:#D7DBE0;          /* borders, dividers */
  --color-bg:#F5F8F6;              /* page background */
  --color-warning:#D97706;         /* pending, at-risk */
  --color-error:#DC2626;           /* declined, critical */
  --color-nav-muted:#9BA2AC;       /* muted text on ink surfaces */

  /* ─────────────────────────────────────────────────────────────
     Compatibility aliases — old variable names default to their
     STRUCTURAL role (ink), since that's what most uses of navy/gold
     actually were. The handful of small brand-accent rules (buttons,
     logo, key highlights) reference the canonical tokens directly,
     further down, rather than relying on these aliases — so a big
     surface never silently inherits the brand color again.
     ───────────────────────────────────────────────────────────── */
  --navy-900:var(--color-ink); --navy-800:var(--color-ink); --navy-700:#232a31;
  --indigo:var(--color-secondary); --indigo-400:#6D65EA;
  --gold-600:var(--color-secondary-text); --gold-500:var(--color-secondary); --gold-400:#6D65EA; --gold-100:var(--color-secondary-tint);
  --ink:var(--color-ink); --slate-700:#2b3138; --slate-500:var(--color-text-2); --slate-400:#98a1ac; --slate-300:var(--color-border);
  --slate-200:#e3e7ec; --slate-100:#eef1f4; --slate-50:var(--color-bg); --white:#fff;
  --green-600:var(--color-brand-primary); --green-500:var(--color-brand-bright); --green-100:var(--color-brand-tint);
  --amber-500:var(--color-warning); --amber-100:#fbe7c6; --red-500:var(--color-error); --red-100:#fadcdc;
  --blue-500:var(--color-secondary); --blue-100:var(--color-secondary-tint);
  --shadow-sm:0 1px 2px rgba(16,21,26,.06),0 1px 3px rgba(16,21,26,.04);
  --shadow-md:0 4px 12px rgba(16,21,26,.08),0 2px 4px rgba(16,21,26,.04);
  --shadow-lg:0 18px 40px rgba(16,21,26,.14),0 6px 14px rgba(16,21,26,.08);
  --radius:14px; --sidebar-w:250px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--slate-50);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--navy-900);letter-spacing:-.02em;line-height:1.15}
img{max-width:100%}
.muted{color:var(--slate-500)} .small{font-size:13px} .tiny{font-size:11.5px}
.mono{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-600)}
input,select,textarea,button{font-family:inherit;font-size:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:box-shadow .2s,background .2s,transform .1s;white-space:nowrap;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--color-brand-primary),var(--color-ink));color:#fff;box-shadow:var(--shadow-md)}
.btn-gold{background:linear-gradient(135deg,var(--color-brand-primary),var(--color-brand-bright));color:#fff}
.btn-ghost{background:#fff;color:var(--navy-800);border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--slate-50)}
.btn-sm{padding:7px 13px;font-size:13px}.btn-lg{padding:14px 26px;font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge.green{background:var(--green-100);color:var(--green-600)} .badge.gold{background:var(--gold-100);color:var(--gold-600)}
.badge.amber{background:var(--amber-100);color:var(--amber-500)} .badge.red{background:var(--red-100);color:var(--red-500)}
.badge.blue{background:var(--blue-100);color:var(--blue-500)} .badge.slate{background:var(--slate-100);color:var(--slate-500)}
.badge.navy{background:var(--color-ink);color:#fff}

/* cards / layout */
.card{background:#fff;border-radius:var(--radius);border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}
.pad{padding:20px} .pad-lg{padding:26px}
.card-hover{transition:transform .16s,box-shadow .2s}.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.grid{display:grid;gap:18px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}.items-center{align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}
.w-full{width:100%}.text-right{text-align:right}.text-center{text-align:center}

/* app shell */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:none;background:var(--navy-900);color:#cdd6ee;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40}
.brand{padding:20px 20px;display:flex;align-items:center;gap:11px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--color-brand-primary),var(--color-brand-bright));position:relative;box-shadow:var(--shadow-md);flex:none}
.logo::after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--color-secondary);top:6px;right:6px;box-shadow:0 0 0 3px var(--color-ink)}
.brand b{color:#fff;font-weight:800;font-size:17px}.brand b i{font-style:normal;color:var(--color-secondary-tint)}
.snav{flex:1;overflow-y:auto;padding:8px 12px}
.snav .sec{padding:14px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b79a3}
.snav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:#b9c3e0;font-size:14px;font-weight:500;margin-bottom:2px}
.snav a:hover{background:rgba(255,255,255,.06);color:#fff}
.snav a.active{background:linear-gradient(135deg,rgba(79,70,229,.55),rgba(11,122,85,.45));color:#fff}
.snav a .nb{margin-left:auto;background:var(--color-brand-bright);color:var(--color-ink);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.sfoot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#9aa6c9}
.main{flex:1;margin-left:var(--sidebar-w);min-width:0}
.topbar{height:62px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--slate-200);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:30}
.topbar .title{font-weight:700;font-size:16px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px;flex:none}
.content{padding:26px 30px 60px;max-width:1180px;margin:0 auto}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:25px;margin-bottom:5px}.page-head .sub{color:var(--slate-500);font-size:14px;max-width:640px}

/* stat tiles */
.stat .label{font-size:12.5px;color:var(--slate-500);font-weight:600}
.stat .value{font-size:27px;font-weight:800;color:var(--navy-900);margin-top:6px}
.stat .delta{font-size:12px;font-weight:600;margin-top:5px}.delta.up{color:var(--green-600)}

/* trust ring */
.ring{position:relative;flex:none}
.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .n{font-size:32px;font-weight:800;color:var(--navy-900);line-height:1}.ring .o{font-size:11px;color:var(--slate-400);font-weight:600}

/* progress */
.prog{height:8px;background:var(--slate-200);border-radius:999px;overflow:hidden}
.prog>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--indigo),var(--indigo-400))}
.prog.green>span{background:linear-gradient(90deg,var(--green-600),var(--green-500))}
.prog.gold>span{background:linear-gradient(90deg,var(--color-secondary),#6D65EA)}
.prog.red>span{background:linear-gradient(90deg,#b01c1c,var(--red-500))}

/* fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--slate-700);margin-bottom:6px}
.input,.select,.textarea{width:100%;padding:10px 13px;border:1px solid var(--slate-300);border-radius:10px;background:#fff;color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--indigo-400);box-shadow:0 0 0 3px rgba(109,101,234,.15)}
.textarea{resize:vertical;min-height:88px}
.hint{font-size:12px;color:var(--slate-400);margin-top:5px}

/* rows / kv */
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--slate-200);font-size:13px}
.kv:last-child{border-bottom:none}.kv .k{color:var(--slate-500)}.kv .v{font-weight:600;color:var(--navy-900)}
.vrow{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff;margin-bottom:10px}
.vico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:16px}

/* tables */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--slate-200);background:#fff}
table.data{width:100%;border-collapse:collapse;min-width:520px}
table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);font-weight:700;padding:12px 16px;background:var(--slate-50);border-bottom:1px solid var(--slate-200)}
table.data td{padding:12px 16px;border-bottom:1px solid var(--slate-100);font-size:13.5px}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--slate-50)}

/* feed cards */
.match-pill{display:inline-flex;align-items:center;gap:5px;background:var(--green-100);color:var(--green-600);font-weight:700;font-size:12px;padding:4px 10px;border-radius:999px}
.fit-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;color:#fff}

/* chat */
.chat{display:flex;flex-direction:column;height:420px}
.chat-scroll{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--slate-50)}
.msg{max-width:74%}.msg .bub{padding:10px 14px;border-radius:15px;font-size:14px;box-shadow:var(--shadow-sm)}
.msg .meta{font-size:11px;color:var(--slate-400);margin-top:4px}
.msg.them .bub{background:#fff;border-bottom-left-radius:4px}
.msg.me{align-self:flex-end}.msg.me .bub{background:linear-gradient(135deg,var(--color-brand-primary),var(--color-ink));color:#fff;border-bottom-right-radius:4px}.msg.me .meta{text-align:right}
.chat-input{display:flex;gap:10px;padding:12px;border-top:1px solid var(--slate-200);background:#fff}
.chat-input input{flex:1;border:1px solid var(--slate-200);border-radius:999px;padding:10px 15px;outline:none}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--slate-200);margin-bottom:20px;overflow-x:auto}
.tabs a{padding:10px 15px;font-size:14px;font-weight:600;color:var(--slate-500);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.active{color:var(--color-ink);border-bottom-color:var(--color-brand-primary)}

/* banners */
.banner{border-radius:var(--radius);padding:15px 18px;display:flex;gap:13px;align-items:flex-start}
.banner.gold{background:var(--gold-100);border:1px solid var(--gold-400)}
.banner.blue{background:var(--blue-100);border:1px solid #b8d6f5}
.banner.green{background:var(--green-100);border:1px solid #a9e3c9}

/* checklist / timeline */
.chk{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--slate-100)}
.chk:last-child{border-bottom:none}
.chk .box{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:13px;color:#fff}
.box.done{background:var(--green-500)}.box.progress{background:var(--amber-500)}.box.pending{background:#fff;border:2px solid var(--slate-300)}
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--slate-200)}
.tl{position:relative;padding-bottom:22px}.tl:last-child{padding-bottom:0}
.tl .dot{position:absolute;left:-32px;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--slate-300);font-size:12px;color:#fff}
.tl .dot.done{background:var(--green-500);border-color:var(--green-500)}
.tl .dot.active{background:var(--color-brand-bright);border-color:var(--color-brand-bright);color:var(--color-ink);box-shadow:0 0 0 4px rgba(34,195,138,.22)}

/* flash */
.flash-wrap{position:fixed;top:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:10px}
.flash{padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px;max-width:380px;color:#fff;animation:slidein .2s ease}
.flash.ok{background:var(--color-brand-primary)}.flash.warn{background:var(--amber-500)}.flash.info{background:var(--color-ink)}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}}

/* landing */
.mk-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--slate-200)}
.mk-nav .in{max-width:1140px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;gap:20px}
.mk-nav b{font-weight:800;font-size:17px}.mk-nav b i{font-style:normal;color:var(--color-secondary)}
.hero{background:radial-gradient(1000px 500px at 80% -10%,rgba(79,70,229,.22),transparent),radial-gradient(700px 400px at 5% 10%,rgba(34,195,138,.16),transparent),var(--color-ink);color:#fff}
.hero .in{max-width:1140px;margin:0 auto;padding:70px 26px 84px}
.hero h1{color:#fff;font-size:46px;line-height:1.06;max-width:760px}
.hero h1 .g{background:linear-gradient(120deg,var(--color-secondary),#6D65EA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:#c3cbe4;max-width:600px;margin-top:20px}
.corridor{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#d7deef;margin-bottom:22px}
.section{max-width:1140px;margin:0 auto;padding:64px 26px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat .c{padding:24px;border-radius:18px;border:1px solid var(--slate-200);background:#fff}
.feat .c .i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:14px}

@media(max-width:900px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%)}.main{margin-left:0}
  .g2,.g3,.g4,.feat{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* ── legal workflow: timeline states not previously needed ───────── */
.tl .dot.blocked{background:var(--red-500);border-color:var(--red-500);box-shadow:0 0 0 4px rgba(214,69,80,.18)}
.tl .dot.waived{background:var(--slate-300);border-color:var(--slate-300);color:var(--slate-700)}
.tl .dot.pending{background:#fff;border-color:var(--slate-300)}

/* ── legal workflow: parallel status board ─────────────────────── */
.wf-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.wf-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
@media(max-width:1100px){.wf-cols{grid-template-columns:1fr}}
.wf-colhead{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--slate-500)}
.wf-colhead .n{color:var(--slate-400);font-weight:600}
.wf-card{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.wf-card.done{border-color:#a9e3c9;background:var(--green-100)}
.wf-card.blocked{border-color:#f0b8bd;background:var(--red-100)}
.wf-card .t{font-weight:600;font-size:13.5px;color:var(--navy-900);line-height:1.35}
.wf-card.done .t{color:var(--green-600)}
.wf-num{font-size:11px;color:var(--slate-400);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.wf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.wf-empty{border:1px dashed var(--slate-300);border-radius:12px;padding:11px;text-align:center;font-size:12px;color:var(--slate-400)}

/* ── legal workflow: per-step document dropdowns ───────────────── */
.wf-docs{border-top:1px solid var(--slate-100);padding-top:8px}
.wf-docs summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--indigo);list-style:none;display:flex;align-items:center;gap:6px}
.wf-docs summary::-webkit-details-marker{display:none}
.wf-docs summary::before{content:"▸";font-size:10px;color:var(--slate-400)}
.wf-docs[open] summary::before{content:"▾"}
.wf-doccount{background:var(--slate-100);color:var(--slate-500);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.wf-doc{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:9px;padding:9px 11px;margin-bottom:7px}
.wf-doc-name{font-size:12.5px;font-weight:600;color:var(--navy-900);word-break:break-word}

/* ── Elevate reference deal card (from the color-system "Applied" example) ── */
.ev-card{border:1px solid var(--color-border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);background:#fff}
.ev-card-nav{background:var(--color-ink);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.ev-card-nav .brand{font-weight:600;font-size:15px;color:#fff}
.ev-card-nav .context{font-size:12px;color:var(--color-nav-muted)}
.ev-card-body{background:#fff;padding:20px}
.ev-metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.ev-metric{background:var(--color-bg);border-radius:10px;padding:14px}
.ev-metric .label{font-size:12px;color:var(--color-text-2);margin-bottom:4px}
.ev-metric .value{font-weight:600;font-size:22px;color:var(--color-ink)}
.ev-metric .trend{font-size:11px;color:var(--color-brand-primary);margin-top:4px}
.ev-deal-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ev-deal-name{font-weight:600;font-size:16px;color:var(--color-ink)}
.ev-tag{font-size:12px;padding:4px 12px;border-radius:20px;white-space:nowrap;font-weight:500;display:inline-block}
.ev-tag-success{background:var(--color-brand-tint);color:var(--color-brand-primary)}
.ev-tag-tier{background:var(--color-secondary-tint);color:var(--color-secondary-text);margin-bottom:16px}
.ev-deal-actions{display:flex;gap:10px;flex-wrap:wrap}
.ev-btn{border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-block}
.ev-btn-primary{background:var(--color-brand-primary);color:#fff}
.ev-btn-secondary{background:transparent;color:var(--color-ink);border:1px solid var(--color-border)}