/* p1 */

/* Layout: a slim reviewer bar above one product window (rail, workspace, notes drawer). The window is the thing being judged; the bar and drawer are review tools. Dark venture-terminal palette, blue as the only brand accent. */
:root{
  --bg:#060a14; --chrome:#060a14; --win:#070c18; --card:#0d1428; --card2:#131c38;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.24); --ink:#ffffff; --muted:rgba(255,255,255,.62); --dim:rgba(255,255,255,.42);
  --accent:#4C8DFF; --accent-ink:#04101f; --accent-soft:rgba(76,141,255,.14); --accent-line:rgba(76,141,255,.45);
  --good:#34D399; --good-soft:rgba(52,211,153,.13); --warn:#D8A94E; --warn-soft:rgba(216,169,78,.14); --bad:#E67575; --bad-soft:rgba(230,117,117,.14);
  --scrim:rgba(4,8,15,.72); --shadow:0 18px 50px rgba(0,0,0,.45); --grid:rgba(120,140,180,.07);
  --f-body:'Inter','Segoe UI',system-ui,Arial,sans-serif; --f-head:'Space Grotesk','Inter',system-ui,sans-serif; --f-mono:'Space Grotesk','Inter',system-ui,sans-serif; --f-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#EEF1F7; --chrome:#ffffff; --win:#F6F8FC; --card:#ffffff; --card2:#F1F4FA;
  --line:#D5DCE9; --line2:#B4BFD3; --ink:#0E1626; --muted:#4f5a70; --dim:#7a859b;
  --accent:#2563D6; --accent-ink:#ffffff; --accent-soft:rgba(37,99,214,.1); --accent-line:rgba(37,99,214,.4);
  --good:#1a7a4b; --good-soft:rgba(26,122,75,.1); --warn:#8a5a08; --warn-soft:rgba(138,90,8,.11); --bad:#b23b3b; --bad-soft:rgba(178,59,59,.1);
  --scrim:rgba(20,28,45,.5); --shadow:0 18px 50px rgba(20,30,60,.18); --grid:rgba(20,40,90,.06); color-scheme:light}}
:root[data-theme="light"]{
  --bg:#EEF1F7; --chrome:#ffffff; --win:#F6F8FC; --card:#ffffff; --card2:#F1F4FA;
  --line:#D5DCE9; --line2:#B4BFD3; --ink:#0E1626; --muted:#4f5a70; --dim:#7a859b;
  --accent:#2563D6; --accent-ink:#ffffff; --accent-soft:rgba(37,99,214,.1); --accent-line:rgba(37,99,214,.4);
  --good:#1a7a4b; --good-soft:rgba(26,122,75,.1); --warn:#8a5a08; --warn-soft:rgba(138,90,8,.11); --bad:#b23b3b; --bad-soft:rgba(178,59,59,.1);
  --scrim:rgba(20,28,45,.5); --shadow:0 18px 50px rgba(20,30,60,.18); --grid:rgba(20,40,90,.06); color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--chrome);z-index:60}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.01em}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ic{flex:none;vertical-align:-3px}
.mono{font-family:var(--f-mono)}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* reviewer bar */
.rv{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--chrome);border-bottom:1px solid var(--line);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rv-in{max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding-block:10px}
.rv-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{width:28px;height:28px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:600 13px var(--f-mono)}
.brand b{font-weight:600;font-size:14px;display:block;line-height:1.2}
.brand span{font:11px var(--f-mono);color:var(--muted);letter-spacing:.04em}
.tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;max-width:100%}
.journey{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.jchip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12.5px;color:var(--muted);white-space:nowrap}
.jchip i{font:500 10.5px var(--f-mono);font-style:normal;color:var(--dim)}
.jchip:hover{border-color:var(--line2);color:var(--ink)}
.jchip[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)}
.jchip[aria-current="true"] i{color:var(--accent)}
.jsep{flex:none;align-self:center;color:var(--dim)}

/* buttons, pills, fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:9px;border:1px solid var(--line2);background:var(--card2);font-weight:500;font-size:14px;line-height:1.2;transition:transform .12s,border-color .12s,background .12s}
.btn:hover{border-color:var(--accent-line)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.lg{padding:12px 20px;font-size:15px;border-radius:10px}
.btn.danger{border-color:var(--bad);color:var(--bad);background:transparent}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.on{background:var(--accent-soft);border-color:var(--accent-line)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font:500 11px var(--f-mono);letter-spacing:.03em;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.pill.good{color:var(--good);background:var(--good-soft);border-color:transparent}
.pill.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.pill.bad{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.pill.acc{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.pill.new{color:var(--accent);border:1px dashed var(--accent-line)}
.eyebrow{font:500 11px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.lab{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;color:var(--muted)}
.input{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:10px 12px;min-width:0}
.input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea.input{resize:vertical;min-height:72px;line-height:1.45}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}

/* product window */
.stage{max-width:1560px;margin:0 auto;padding-block:16px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.win{border:1px solid var(--line);border-radius:16px;background:var(--win);box-shadow:var(--shadow);overflow:clip;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--chrome);flex-wrap:wrap}
.top .sp{flex:1}
.logo{display:flex;align-items:center;gap:9px;font-weight:600}
.logo .mark{width:24px;height:24px;font-size:11px;border-radius:6px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);display:grid;place-items:center;font:600 12px var(--f-mono)}
.shell{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:640px}
.shell.notes-on{grid-template-columns:208px minmax(0,1fr) 332px}
.rail{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px;background:var(--chrome)}
.rail .navb{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;border:1px solid transparent;background:none;text-align:left;color:var(--muted);width:100%}
.rail .navb:hover{background:var(--card);color:var(--ink)}
.rail .navb[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)}
.rail .navb .pill{margin-left:auto}
.rail hr{border:0;border-top:1px solid var(--line);margin:8px 4px}
.main{padding:22px clamp(14px,2.4vw,30px) 34px;min-width:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:36px 36px;background-position:-1px -1px}
.screen{display:flex;flex-direction:column;gap:18px;max-width:1040px;animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.h1{font-size:26px;line-height:1.18;font-weight:600}
.h2{font-size:18px;line-height:1.25;font-weight:600}
.h3{font-size:15px;font-weight:600}
.lede{color:var(--muted);max-width:66ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
.card.flat{background:transparent}
.card.hl{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.sb{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--card)}
.banner.warn{background:var(--warn-soft);border-color:transparent;color:var(--ink)}
.banner.bad{background:var(--bad-soft);border-color:transparent}
.banner.good{background:var(--good-soft);border-color:transparent}
.banner.acc{background:var(--accent-soft);border-color:transparent}
.banner .ic{margin-top:2px}
.warn .ic.t,.t-warn{color:var(--warn)} .t-good{color:var(--good)} .t-bad{color:var(--bad)} .t-acc{color:var(--accent)}
.meter{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.meter.good i{background:var(--good)} .meter.warn i{background:var(--warn)} .meter.bad i{background:var(--bad)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font:600 24px var(--f-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--muted)}

/* steppers */
.lane{display:flex;flex-direction:column;gap:10px}
.lane-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 7px;border-radius:9px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--muted)}
.step i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:500 10.5px var(--f-mono);font-style:normal;background:var(--card2);border:1px solid var(--line2);color:var(--muted)}
.step:hover:not([disabled]){border-color:var(--accent-line);color:var(--ink)}
.step.done i{background:var(--good-soft);border-color:transparent;color:var(--good)}
.step.cur{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.step.cur i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step[disabled]{opacity:.55;cursor:not-allowed}
.bar-steps{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);z-index:5;background:var(--win);padding:6px 0 10px;border-bottom:1px solid var(--line);margin-bottom:-6px}

/* tables and lists */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tbl th{font:500 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.sel td{background:var(--accent-soft)}
.scrollx{overflow-x:auto;max-width:100%}
.who{display:flex;gap:10px;align-items:center;min-width:0}
.who .avatar{width:32px;height:32px;font-size:11px}
.who b{display:block;font-weight:600;line-height:1.2}
.who span{font-size:12.5px;color:var(--muted)}
.quote{border-left:2px solid var(--accent-line);padding:2px 0 2px 12px;color:var(--ink)}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 16px}
.kv dt{color:var(--muted);font-size:13px} .kv dd{margin:0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13.5px;z-index:90;pointer-events:none;transition:.25s;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%)}
.tip{position:fixed;z-index:95;background:var(--ink);color:var(--bg);padding:5px 9px;border-radius:7px;font-size:12px;pointer-events:none;opacity:0;max-width:260px}
.tip.on{opacity:1}

/* modal */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:80;display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal{background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);width:min(560px,100%);max-height:calc(100% - 8px);overflow-y:auto;padding:22px;animation:rise .22s ease both}
.modal.wide{width:min(980px,100%)}
.skel{background:linear-gradient(90deg,var(--card2),var(--line),var(--card2));background-size:200% 100%;animation:sh 1.1s linear infinite;border-radius:8px;height:14px}
@keyframes sh{to{background-position:-200% 0}}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* notes drawer */
.notes{border-left:1px solid var(--line);background:var(--chrome);padding:16px;display:flex;flex-direction:column;gap:14px;font-size:13.5px;min-width:0}
.notes h3{font-size:15px}
.nrow{display:grid;grid-template-columns:86px minmax(0,1fr);gap:4px 10px}
.nrow dt{font:500 10.5px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.nrow dd{margin:0;color:var(--ink)}
.vbtns{display:flex;gap:6px;flex-wrap:wrap}
.vbtns .btn[aria-pressed="true"].k{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.vbtns .btn[aria-pressed="true"].c{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.vbtns .btn[aria-pressed="true"].u{border-color:var(--accent);color:var(--accent)}

/* charts */
.fun{display:flex;flex-direction:column;gap:2px}
.fun .r{display:grid;grid-template-columns:120px minmax(0,1fr) 56px;gap:10px;align-items:center;font-size:13px}
.fun .r i{display:block;height:18px;border-radius:4px;background:var(--accent);min-width:3px;transition:width .6s}
.fun .r b{font:500 13px var(--f-mono);text-align:right}
.hatch{background-image:repeating-linear-gradient(135deg,var(--line2) 0 3px,transparent 3px 7px)}
svg text{font-family:var(--f-body)}

/* sign in */
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:620px}
.auth-l{padding:34px clamp(18px,4vw,48px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:22px;justify-content:center;background-image:radial-gradient(60% 50% at 20% 10%,var(--accent-soft),transparent 70%)}
.auth-r{padding:34px clamp(18px,4vw,48px);display:flex;flex-direction:column;gap:18px;justify-content:center;max-width:460px;width:100%;margin:0 auto}
.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--bg);width:max-content;max-width:100%}
.tabs button{padding:7px 14px;border-radius:7px;border:0;background:none;color:var(--muted);font-size:13.5px}
.tabs button[aria-selected="true"]{background:var(--card2);color:var(--ink)}
.loop{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;font:500 12px var(--f-mono);color:var(--muted)}
.loop span{padding:4px 9px;border:1px solid var(--line2);border-radius:999px;background:var(--card)}

/* doors */
.door{display:flex;flex-direction:column;gap:12px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.dz{border:1.5px dashed var(--line2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.file{display:flex;gap:10px;align-items:center;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}

/* pipeline board */
.board{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:4px}
.col{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:130px}
.col h4{font:500 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px}
.thread{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px}
.inbox{display:flex;flex-direction:column;gap:6px}
.msg{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.msg[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.msg:hover{border-color:var(--accent-line)}

@media (max-width:1180px){
  .shell.notes-on{grid-template-columns:208px minmax(0,1fr)}
  .shell.notes-on .notes{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:860px){
  .shell,.shell.notes-on{grid-template-columns:minmax(0,1fr)}
  .rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .rail .navb{width:auto;white-space:nowrap;flex:none}
  .rail hr,.rail .lab{display:none}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-l{border-right:0;border-bottom:1px solid var(--line)}
  .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thread{grid-template-columns:minmax(0,1fr)}
  .bar-steps{top:calc(env(safe-area-inset-top,0px) + 100px)}
}
@media (max-width:560px){
  .banner{flex-wrap:wrap}.banner>.btn{margin-left:26px}
  .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:minmax(0,1fr)}
  .h1{font-size:22px}
  .fun .r{grid-template-columns:84px minmax(0,1fr) 44px}
  .nrow{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* p6 */

.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
.bar-steps{position:static}
.shell.nr{grid-template-columns:minmax(0,1fr)}
.shell.nr.notes-on{grid-template-columns:minmax(0,1fr) 332px}
.shell.notes-on .split{grid-template-columns:minmax(0,1fr)}
@media (max-width:1180px){.split{grid-template-columns:minmax(0,1fr)}.shell.nr.notes-on{grid-template-columns:minmax(0,1fr)}.shell.nr.notes-on .notes{border-left:0;border-top:1px solid var(--line)}}
.modal ul,.modal ol{line-height:1.5}
.tabs button:hover{color:var(--ink)}

/* p7 */

/* ===== v2 design layer: brand, customer-first view, progress, motion ===== */
:root{--card-g:linear-gradient(180deg,rgba(22,33,74,.7),rgba(13,20,40,.7));--glow:rgba(76,141,255,.35)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--card-g:linear-gradient(180deg,#ffffff,#F3F6FB);--glow:rgba(37,99,214,.28)}}
:root[data-theme="light"]{--card-g:linear-gradient(180deg,#ffffff,#F3F6FB);--glow:rgba(37,99,214,.28)}
.card{background:var(--card-g)}
.btn.pri{box-shadow:0 8px 22px -12px var(--glow)}
.btn.pri:hover{box-shadow:0 10px 28px -10px var(--glow)}
.eyebrow{letter-spacing:.14em}

/* wordmark: the site's nav lockup, glowing dot + CUBEXLABS in Space Grotesk */
.wm{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--f-head);letter-spacing:.12em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.wm .wdot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}
.wm.big{font-size:18px}
.xmark{flex:none;display:block}

/* live-site typography and controls */
h1,h2,h3,.h1,.h2,.h3,.stat b{font-family:var(--f-head)}
.notes .mono,.modal .mono,.nrow dd.mono{font-family:var(--f-code)}
.btn{background:transparent;border-radius:8px;font-weight:600;font-size:13.5px}
.btn.sm{border-radius:8px}
.btn.lg{border-radius:8px}
.btn.pri{color:var(--accent-ink)}
.loop{font:500 12px var(--f-body)}
.loop span{border-radius:20px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.eyebrow,.lab{font-family:var(--f-head)}
.section-hl .accent,.hero-h .accent{color:var(--accent)}

/* sign-in hero: the live site navy sky, horizon glow and mountains */
.dk{--ink:#ffffff;--muted:rgba(255,255,255,.62);--dim:rgba(255,255,255,.42);--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.24);--card:#0d1428;--card2:#131c38;--card-g:linear-gradient(180deg,rgba(22,33,74,.7),rgba(13,20,40,.7));--accent:#4C8DFF;--accent-ink:#04101f;--accent-soft:rgba(76,141,255,.16);--accent-line:rgba(76,141,255,.45);--good:#34D399;--good-soft:rgba(52,211,153,.14);--bg:#060a14;color:var(--ink)}
.auth-l.dk{position:relative;overflow:hidden;background:linear-gradient(180deg,#0a1330 0%,#0d1a3d 38%,#16255a 62%,#060a14 100%)}
.auth-l .sky{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 900px 480px at 50% 96%,rgba(255,158,87,.30),transparent 60%)}
.auth-l .mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:240px;z-index:1;pointer-events:none}
.auth-l>:not(.sky):not(.mtn){position:relative;z-index:2}
.tagline{font:600 22px 'Caveat',cursive;color:rgba(255,255,255,.58);margin-top:4px}

/* agent lane colour, as on the site: PMF blue, Sales green */
.main{--lane:var(--accent);--lane-ink:var(--accent-ink)}
.main.ls{--lane:var(--good);--lane-ink:#04140d}
:root[data-theme="light"] .main.ls{--lane-ink:#ffffff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .main.ls{--lane-ink:#ffffff}}
.screen .eyebrow{color:var(--lane)}
.main .step.cur i{background:var(--lane);border-color:var(--lane);color:var(--lane-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--lane) 22%,transparent)}
.main .step.cur::before{background:linear-gradient(90deg,var(--good),var(--lane))}
.main.ls .screen .btn.pri{background:var(--lane);border-color:var(--lane);color:var(--lane-ink);box-shadow:0 8px 22px -12px color-mix(in srgb,var(--lane) 60%,transparent)}

/* customer-first view: the product is the page, tools stay in a small dock */
.rv[hidden]{display:none}
body.cv .stage{max-width:none;padding:0}
body.cv .win{border:0;border-radius:0;box-shadow:none;overflow:visible;min-height:100vh;background:var(--win)}
body.cv .top{position:sticky;top:0;z-index:30;padding:12px clamp(14px,2.4vw,30px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--chrome) 88%,transparent)}
body.cv .shell{min-height:calc(100vh - 56px)}
body.cv .rail{position:sticky;top:56px;height:calc(100vh - 56px);align-self:start}
body.cv .auth{min-height:calc(100vh - 56px)}
body.cv .shell.nr .auth-l{padding-left:clamp(20px,6vw,88px)}
.dock{position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;border:1px solid var(--line2);background:color-mix(in srgb,var(--chrome) 90%,transparent);backdrop-filter:blur(12px);box-shadow:var(--shadow);max-width:calc(100vw - 24px)}
.dock[hidden]{display:none}
.dock .dk-l{font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.dock .btn{border-radius:999px}
body.cv .toast{left:auto;right:max(16px,env(safe-area-inset-right,0px));top:calc(16px + env(safe-area-inset-top,0px));bottom:auto;transform:translateY(-14px)}
body.cv .toast.on{transform:none}
.toast::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:9px;vertical-align:1px}
@media (max-width:560px){.dock .dk-l{display:none}.dock{padding-left:6px}}
.dock .btn{white-space:nowrap}
@media (max-width:860px){body.cv .rail{position:static;height:auto;top:auto}body.cv .top{position:static}}

/* step track: one row, readable at a glance */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78px,1fr);gap:0;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 4px;border:0;background:none;border-radius:8px;font-size:12px;line-height:1.25;text-align:center;color:var(--muted)}
.step i{width:24px;height:24px;z-index:1;background:var(--card);transition:box-shadow .2s,border-color .2s}
.step::before{content:"";position:absolute;top:12px;right:50%;width:100%;height:2px;background:var(--line)}
.step:first-child::before{display:none}
.step.done::before{background:var(--good)}
.step.done i{background:var(--good);border-color:var(--good);color:var(--accent-ink)}
.step.cur::before{background:linear-gradient(90deg,var(--good),var(--accent))}
.step.cur{border:0;background:none;color:var(--ink);font-weight:600}
.step.cur i{box-shadow:0 0 0 4px var(--accent-soft)}
.step:hover:not([disabled]){border:0;background:none}
.step:hover:not([disabled]) i{border-color:var(--accent)}
.step[disabled]{opacity:.5}
.step i svg{width:13px;height:13px}
.step[disabled] i svg{width:11px;height:11px}
body.cv .main{padding-bottom:92px}

/* path to first paying customer */
.path{display:flex;flex-direction:column;gap:12px;padding:12px 16px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card-g);margin-bottom:18px;max-width:1040px}
.path-h{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.path-t{list-style:none;margin:0;padding:0 0 4px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);overflow-x:auto;scrollbar-width:thin}
.pn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;line-height:1.25;color:var(--dim);text-align:center;padding:0 3px}
.pn i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);background:var(--card);z-index:1;display:block;transition:background .3s,box-shadow .3s}
.pn::before{content:"";position:absolute;top:6px;right:50%;width:100%;height:2px;background:var(--line)}
.pn:first-child::before{display:none}
.pn.done{color:var(--muted)}
.pn.done i{background:var(--good);border-color:var(--good)}
.pn.done::before{background:var(--good)}
.pn.cur{color:var(--ink);font-weight:600}
.pn.cur i{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pn.cur::before{background:linear-gradient(90deg,var(--good),var(--accent))}
.pn.goal i{border-radius:3px;transform:rotate(45deg)}

/* gate tick on a meter */
.gm{position:relative}
.gm .gtick{position:absolute;top:-4px;height:14px;width:2px;background:var(--ink);opacity:.7;border-radius:2px}
.gm em{position:absolute;left:70%;top:11px;transform:translateX(-50%);font:500 10.5px var(--f-mono);font-style:normal;color:var(--muted);white-space:nowrap}
.gm:has(em){padding-bottom:16px}

/* sign in proof cards */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start;max-width:520px}
.proof .card{padding:14px 16px;box-shadow:var(--shadow)}
.proof .pf1{transform:rotate(-1.2deg)}
.proof .pf2{transform:translateY(14px) rotate(1deg)}
.proof .gm{margin-top:12px}
@media (max-width:560px){.proof{grid-template-columns:minmax(0,1fr)}.proof .pf2{transform:none}.proof .pf1{transform:none}}

/* first-run: how it works */
.howto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:h}
.howto .card{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:20px}
.howto .hn{position:absolute;top:-12px;left:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-mono);background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--win)}
@media (max-width:860px){.howto{grid-template-columns:minmax(0,1fr)}}

/* sourcing engine: visible work */
.eng{display:flex;flex-direction:column;gap:10px}
.eng-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.eng-st{display:grid;font-size:13px;color:var(--muted)}
.eng-st>span{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.eng .st-run{opacity:0;visibility:hidden}
.eng-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.eng-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--good))}
.eng.run .st-run{opacity:1;visibility:visible;animation:swapout .25s 2.3s forwards}
.eng.run .st-done{opacity:0;animation:fadein .35s 2.45s forwards}
.eng.run .eng-bar i{width:0;animation:fillbar 2.4s cubic-bezier(.3,.6,.3,1) forwards}
.eng.run .grid4 .card{opacity:0;animation:rise .45s ease both}
@keyframes swapout{to{opacity:0;visibility:hidden}}
@keyframes fadein{to{opacity:1}}
@keyframes fillbar{to{width:100%}}

/* score reveal */
.rpop{transform-box:fill-box;transform-origin:center;animation:rpop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rpop{from{transform:scale(.15);opacity:0}to{transform:scale(1);opacity:1}}
.verdict{padding:22px 24px}
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.gauge{display:grid;place-items:center}
.gp.an{animation:ring 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes ring{from{stroke-dashoffset:var(--c)}}
@media (max-width:860px){.vgrid{grid-template-columns:minmax(0,1fr)}.gauge{order:-1;justify-self:start}}

/* screen entrance only on route change */
.screen{animation:none}
.screen.enter{animation:rise .34s cubic-bezier(.2,.7,.2,1) both}
.card,.btn,.jchip,.navb{transition:border-color .15s,background-color .15s,box-shadow .2s,transform .12s}
@media (prefers-reduced-motion:reduce){.eng.run .grid4 .card,.screen.enter,.rpop,.gp.an{animation:none!important;opacity:1}.eng.run .st-run{display:none}.eng.run .st-done{opacity:1;animation:none}.eng.run .eng-bar i{width:100%;animation:none}}

/* ===== app-specific ===== */
.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.input.sm{padding:6px 9px;font-size:13px}
select.input{appearance:auto}
.draft{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.draft.blocked{opacity:.75}
.bub{max-width:88%;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.bub.lead{align-self:flex-start;border-color:var(--accent-line);background:var(--accent-soft)}
.bub.agent{align-self:flex-end}
.thr{display:flex;flex-direction:column;gap:8px}
a.btn{text-decoration:none}
.err{color:var(--bad);font-size:13px}
.hide{display:none!important}
.chip-x{cursor:pointer}
.empty{padding:26px;text-align:center;border:1.5px dashed var(--line2);border-radius:12px;color:var(--muted)}
.skelbox{display:flex;flex-direction:column;gap:12px}
.skelbox .skel:nth-child(1){height:28px;width:40%}.skelbox .skel:nth-child(2){height:90px}.skelbox .skel:nth-child(3){height:140px}
.authcard .field input{font-size:15px}
.mini{font-size:12.5px}
td .row{gap:6px}
.nowrap{white-space:nowrap}
.scrim.top{align-items:start}
@media (max-width:560px){.top .pill{display:none}}

/* Buyer Card as a field table (the approved mockup's layout), still editable */
.kvtable{padding:0;overflow:hidden}
.kvhead{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;padding:10px 16px;border-bottom:1px solid var(--line);font:500 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kvrow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:8px 20px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:start}
.kvrow:last-child{border-bottom:0}
.kvrow>label{font-size:13px;color:var(--muted);padding-top:9px}
.kvrow .field{gap:4px}
.kvtable .grid2{padding:12px 16px;border-top:1px solid var(--line)}
@media (max-width:700px){.kvhead{display:none}.kvrow{grid-template-columns:minmax(0,1fr)}.kvrow>label{padding-top:0}}

/* venture name, shown on every step */
.vtag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;line-height:1.3}
.vtag b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:26ch}
.vtag .ic{flex:none}
/* sourcing engine while a real search runs (length unknown) */
.eng.busy .st-run{opacity:1;visibility:visible}
.eng.busy .st-done{opacity:0}
.eng.busy .eng-bar i{width:40%;animation:engslide 1.4s ease-in-out infinite}
@keyframes engslide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.eng.busy .eng-bar i{animation:none;width:100%}}
.btn[disabled].door,.door[disabled]{opacity:.7;cursor:progress}
.tbl select.input.sm{min-width:0;width:100%}

/* ---- Sales parity: Buyer Card table, approve page, find engine ---- */
.cardhead,.cardrow{display:grid;grid-template-columns:190px minmax(0,1fr) 150px;gap:8px 22px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:start}
.cardhead{font:500 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cardrow:last-child{border-bottom:0}
.cardrow .fl{font-size:13px;color:var(--muted);padding-top:9px}
.cardrow .fv{display:flex;flex-direction:column;gap:4px;min-width:0}
.cardrow .fc{display:flex;flex-direction:column;gap:5px;padding-top:7px;font-size:13px}
.input.plain{background:transparent;border-color:transparent;padding:8px 8px;margin:0 -8px;resize:none}
.input.plain:hover{border-color:var(--line)}
.input.plain:focus{background:var(--card);border-color:var(--accent)}
.cardrow .weak{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--warn,#a16207)}
.gate3{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:24px;align-items:center}
.chk{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.chk.bad{border-color:var(--warn,#d8a94e)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:13.5px}
.rules li{display:flex;gap:10px;align-items:flex-start}
.stages .stg{padding:14px 16px;gap:4px;display:flex;flex-direction:column}
.stages .stg b{font-size:30px;font-weight:600;line-height:1.1}
.engbar{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--good,#1a7f4b));position:relative;overflow:hidden}
.engbar.busy::after{content:"";position:absolute;inset:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:engslide 1.1s linear infinite}
@media (max-width:760px){.cardhead{display:none}.cardrow{grid-template-columns:minmax(0,1fr);gap:4px}.cardrow .fl{padding-top:0}.gate3{grid-template-columns:1fr}}
.draftq{border-left:3px solid var(--accent-line,var(--line));padding:6px 0 6px 14px;color:var(--fg);display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.55}
@media (max-width:760px){.grid4.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.stages .stg b{font-size:24px}}

/* supporting agents strip */

/* verdict evidence dashboard */
.evdash .kpis{padding:2px 0}
.evdash .tbl{min-width:560px}
.evdash .tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.evdash .tbl td.num .meter{margin-top:6px;min-width:70px}
.evdash .gline{display:flex;flex-direction:column;gap:8px}
.evdash .gline .gm{padding-bottom:0}
.evdash .evlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.evdash .evnext{margin:0;padding:10px 12px;border-radius:10px;background:var(--accent-soft)}
@media (max-width:640px){.evdash .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Today's touches */
.draft .who{min-width:0}
.card.hl .row.mini{gap:8px}