:root{
  --bg:#08090c;--panel:#0f1116;--panel2:#151821;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);
  --fg:#eef0f4;--fg2:#a9aebb;--fg3:#6f7584;--acc:#7b96ff;--acc2:#a9bbff;--accbg:rgba(123,150,255,.12);
  --ok:#3fcf8e;--warn:#f2b13a;--bad:#ff6b6b;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* Calm, the procurement app's look, for the in-app mocks */
  --c-canvas:#f4f4f5;--c-paper:#fff;--c-sunk:#f4f4f5;--c-ink:#0b0b0d;--c-ink2:#45474e;--c-ink3:#6b6e75;
  --c-line:#ececee;--c-line2:#d9dadf;--c-act:#2f5ae6;--c-actsoft:#eef2ff;--c-actink:#2448c8;
  --c-done:#13734a;--c-donebg:#e6f4ec;--c-wait:#985700;--c-waitbg:#fdf2df;--c-bad:#c42b21;--c-badbg:#fdebe9;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:76px 20px 80px}
.eyebrow{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc2)}
h1{font-size:clamp(36px,6vw,60px);line-height:1;letter-spacing:-.04em;margin:10px 0 14px;font-weight:650}
h1 em{font-style:normal;color:var(--acc)}
.lede{font-size:18px;color:var(--fg2);margin:0;max-width:720px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font:500 12px var(--mono);padding:5px 10px;border-radius:99px;border:1px solid var(--line2);color:var(--fg2);white-space:nowrap}
.chip.a{border-color:rgba(123,150,255,.5);color:var(--acc2)}
.chip.ok{border-color:rgba(63,207,142,.45);color:var(--ok)}
.chip.w{border-color:rgba(242,177,58,.45);color:var(--warn)}
.chip.r{border-color:rgba(255,107,107,.45);color:var(--bad)}
h2{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin:60px 0 14px;display:flex;gap:12px;align-items:center}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
h3{font-size:22px;letter-spacing:-.02em;margin:0 0 14px;font-weight:620}
h3 em{font-style:normal;color:var(--acc)}
p{margin:0}
.muted{color:var(--fg2)}.quiet{color:var(--fg3)}
.board{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;overflow:hidden}
.board svg{display:block;width:100%;height:auto}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;position:relative}
.card .k{font:600 11px var(--mono);letter-spacing:.08em;color:var(--acc2);text-transform:uppercase}
.card b{display:block;font-size:15.5px;margin:4px 0 4px;font-weight:600}
.card span,.card p{color:var(--fg2);font-size:13.5px}
.card.ok{border-color:rgba(63,207,142,.32)}.card.ok .k{color:var(--ok)}
.card.w{border-color:rgba(242,177,58,.32)}.card.w .k{color:var(--warn)}
.card.r{border-color:rgba(255,107,107,.32)}.card.r .k{color:var(--bad)}
.card.dim{opacity:.6}
ul.t{margin:6px 0 0;padding:0;list-style:none}
ul.t li{font-size:13.5px;color:var(--fg2);padding:3px 0 3px 16px;position:relative}
ul.t li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--fg3)}
ul.t.ok li::before{background:var(--ok)}ul.t.r li::before{background:var(--bad)}ul.t.a li::before{background:var(--acc)}
.foot{margin-top:56px;font:12px var(--mono);color:var(--fg3)}
.tag{display:inline-block;font:600 10.5px var(--mono);letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:var(--panel2);color:var(--fg2);border:1px solid var(--line)}
.tag.ok{color:var(--ok);border-color:rgba(63,207,142,.35)}.tag.w{color:var(--warn);border-color:rgba(242,177,58,.35)}.tag.a{color:var(--acc2);border-color:rgba(123,150,255,.4)}
code{font:12.5px var(--mono);color:var(--acc2)}
/* motion */
.rise{opacity:0;transform:translateY(8px);animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,150,255,.5)}70%{box-shadow:0 0 0 10px rgba(123,150,255,0)}100%{box-shadow:0 0 0 0 rgba(123,150,255,0)}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.mv{display:none}*{animation-duration:0s!important;transition:none!important}}
@media (max-width:860px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.wrap{padding:72px 16px 64px}.lede{font-size:16px}}

/* ---------- Calm app mocks ---------- */
.app{background:var(--c-paper);color:var(--c-ink);border-radius:12px;font:14px/1.45 var(--font);overflow:hidden;border:1px solid #2a2d36}
.app *{font-variant-numeric:tabular-nums}
.c-card{background:var(--c-paper);border:1px solid var(--c-line2);border-radius:12px;padding:12px 14px;color:var(--c-ink)}
.c-h{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.c-sub{font-size:12.5px;color:var(--c-ink3)}
.c-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:1px 8px;border-radius:99px}
.c-pill.done{color:var(--c-done);background:var(--c-donebg)}.c-pill.wait{color:var(--c-wait);background:var(--c-waitbg)}
.c-pill.bad{color:var(--c-bad);background:var(--c-badbg)}.c-pill.act{color:var(--c-actink);background:var(--c-actsoft)}
.c-pill.done::before{content:"✓"}.c-pill.wait::before{content:"◷"}.c-pill.bad::before{content:"!"}
.c-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.c-tbl th{font-weight:500;color:var(--c-ink3);text-align:left;padding:4px 6px;border-bottom:1px solid var(--c-line2);white-space:nowrap}
.c-tbl td{padding:5px 6px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.c-tbl td.n,.c-tbl th.n{text-align:right}
.c-tbl tr.low td{background:var(--c-donebg)}
.c-tbl td.nq{color:var(--c-ink3);font-style:italic}
.c-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.c-btn{font:500 13px var(--font);height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--c-line2);background:var(--c-paper);color:var(--c-ink);display:inline-flex;align-items:center;gap:6px}
.c-btn.p{background:var(--c-act);border-color:var(--c-act);color:#fff}
.c-btn.ghost{border-color:transparent;color:var(--c-ink2)}
.c-bound{font-size:11.5px;color:var(--c-ink3);margin-top:8px;display:flex;gap:6px;align-items:center}
.c-bound::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-done)}
.c-bar{height:10px;border-radius:5px;background:var(--c-sunk);display:flex;overflow:hidden}
.c-bar i{display:block;height:100%}