*{box-sizing:border-box;margin:0}
html{font-size:16px}
body{font-family:var(--font-sans);background:var(--bg-canvas);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}
.tnum{font-variant-numeric:tabular-nums}
a{color:var(--brand);text-decoration:none}
button{font:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-8);z-index:1600}
.skip:focus{left:var(--sp-8);top:var(--sp-8)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-6)}

/* ---- app frame ---- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"top top" "side main";min-height:100vh}
.topbar{grid-area:top;position:sticky;top:0;z-index:1100;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp-24);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}
.brandmark{display:flex;align-items:center}
.brandmark img{display:block}
.topbar-right{display:flex;align-items:center;gap:var(--sp-12)}
.brand-pill{display:flex;align-items:center;gap:var(--sp-8);padding:6px 14px;border:1px solid var(--border-default);
  border-radius:var(--r-full);background:var(--bg-surface);color:var(--text-secondary);font-size:var(--fs-14);font-weight:500;cursor:pointer}
.brand-pill:hover{border-color:var(--border-strong);color:var(--text-primary)}
.brand-pill .dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--border-strong)}
.brand-pill.has-brand .dot{background:var(--intent-success)}
.avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-14)}

/* ---- sidebar ---- */
.sidebar{grid-area:side;background:var(--bg-surface);border-right:1px solid var(--border-subtle);
  padding:var(--sp-16) var(--sp-12);display:flex;flex-direction:column;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto}
#nav{flex:1}
.nav-group{font-size:var(--fs-12);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);
  padding:var(--sp-16) var(--sp-12) var(--sp-4)}
.nav-item{display:flex;align-items:center;gap:var(--sp-12);width:100%;padding:9px var(--sp-12);border:0;background:transparent;
  color:var(--text-secondary);border-radius:var(--r-8);cursor:pointer;text-align:left;font-size:var(--fs-14);font-weight:500}
.nav-item:hover{background:var(--bg-sunken);color:var(--text-primary)}
.nav-item[aria-current=page]{background:var(--brand-subtle);color:var(--brand)}
.nav-item svg{width:20px;height:20px;flex:none}
.nav-item .s-dot{margin-left:auto}
.s-dot{width:7px;height:7px;border-radius:var(--r-full)}
.s-dot.live{background:var(--intent-success)}
.s-dot.build{background:transparent;border:1.5px solid var(--border-strong)}
.sidebar-foot{display:flex;gap:var(--sp-16);padding:var(--sp-12);border-top:1px solid var(--border-subtle);margin-top:var(--sp-8)}
.legend{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--text-muted)}

/* ---- main ---- */
main#view{grid-area:main;overflow:auto}
.page{max-width:1120px;margin:0 auto;padding:var(--sp-40) var(--sp-32) var(--sp-64)}
@media(max-width:900px){
  .app{grid-template-columns:1fr;grid-template-areas:"top" "side" "main"}
  .sidebar{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-subtle)}
  #nav{display:flex;gap:4px}.nav-group{display:none}.nav-item .s-dot{display:none}.sidebar-foot{display:none}
  .page{padding:var(--sp-24) var(--sp-20) var(--sp-48)}
}

/* ---- home: hero ---- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-16);background:var(--neutral-900);color:#fff;
  padding:var(--sp-48);margin-bottom:var(--sp-40);box-shadow:var(--shadow-lg)}
.hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.025em;font-weight:800;max-width:16ch}
.hero p{margin-top:var(--sp-16);font-size:var(--fs-18);color:#c9ccd6;max-width:52ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-24)}
.hero .swatch{position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(6deg);width:300px;opacity:.95;pointer-events:none}
@media(max-width:760px){.hero .swatch{display:none}.hero{padding:var(--sp-32)}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--sp-8);font-weight:600;padding:12px 20px;min-height:44px;
  border-radius:var(--r-8);border:1px solid transparent;cursor:pointer;transition:background .12s var(--ease),border-color .12s var(--ease)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.btn-ghost-light:hover{background:rgba(255,255,255,.18)}
.btn-secondary{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-default)}
.btn-secondary:hover{border-color:var(--border-strong)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* section heads */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-16);margin:var(--sp-32) 0 var(--sp-16)}
.sec-head h2{font-size:var(--fs-24);font-weight:700;letter-spacing:-.02em}
.sec-head p{color:var(--text-secondary);font-size:var(--fs-14)}

/* journey cards */
.journey{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-16)}
.jcard{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-12);padding:var(--sp-20);
  display:flex;flex-direction:column;gap:var(--sp-8);transition:box-shadow .15s var(--ease),transform .15s var(--ease),border-color .15s}
.jcard.clickable{cursor:pointer}
.jcard.clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-default)}
.jcard .top{display:flex;align-items:center;gap:var(--sp-12)}
.jcard .jicon{width:40px;height:40px;border-radius:var(--r-8);display:grid;place-items:center;background:var(--brand-subtle);color:var(--brand);flex:none}
.jcard .jicon svg{width:22px;height:22px}
.jcard.live .jicon{background:var(--brand);color:#fff}
.jcard h3{font-size:var(--fs-16);font-weight:700}
.jcard .does{color:var(--text-secondary);font-size:var(--fs-14);flex:1}
.jcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-8)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:600;padding:3px 10px;border-radius:var(--r-full)}
.chip.ready{background:var(--intent-success-bg);color:var(--intent-success)}
.chip.build{background:var(--bg-sunken);color:var(--text-muted)}
.chip.est{background:var(--accent-yellow-bg);color:var(--intent-warning);border:1px solid var(--intent-warning-border)}
.chip.src{background:var(--bg-sunken);color:var(--text-muted)}
.chip.calc{background:var(--brand-subtle);color:var(--brand)}
.open-link{font-size:var(--fs-14);font-weight:600;color:var(--brand)}

.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-16);margin-top:var(--sp-40)}
.promise .p{padding:var(--sp-20);border-radius:var(--r-12);background:var(--bg-surface);border:1px solid var(--border-subtle)}
.promise .p .k{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.promise .p .k .bar{width:18px;height:4px;border-radius:2px}
.promise .p p{color:var(--text-secondary);font-size:var(--fs-14)}

/* ---- generic room ---- */
.room-head{display:flex;align-items:center;gap:var(--sp-16);margin-bottom:var(--sp-8)}
.room-head .jicon{width:48px;height:48px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--brand-subtle);color:var(--brand);flex:none}
.room-head .jicon svg{width:26px;height:26px}
.room-head h1{font-size:var(--fs-30);font-weight:800;letter-spacing:-.02em}
.room-sub{color:var(--text-secondary);font-size:var(--fs-18);max-width:60ch;margin-bottom:var(--sp-24)}
.inbuild-banner{display:flex;gap:var(--sp-12);padding:var(--sp-16);border-radius:var(--r-12);background:var(--accent-yellow-bg);
  border:1px solid var(--intent-warning-border);color:var(--text-primary);margin-bottom:var(--sp-24);font-size:var(--fs-14)}
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-12)}
.caps .cap{display:flex;gap:var(--sp-12);padding:var(--sp-16);border:1px solid var(--border-subtle);border-radius:var(--r-12);background:var(--bg-surface)}
.caps .cap .tick{width:22px;height:22px;border-radius:var(--r-full);background:var(--brand-subtle);color:var(--brand);display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.caps .cap b{display:block}
.caps .cap span{color:var(--text-secondary);font-size:var(--fs-13)}

/* ---- costs room (waterfall) ---- */
.two-col{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:var(--sp-24);align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-12);box-shadow:var(--shadow-sm)}
.card>.card-h{font-size:var(--fs-13);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  padding:var(--sp-16) var(--sp-24);border-bottom:1px solid var(--border-subtle)}
.card .card-b{padding:var(--sp-24)}
.field{margin-bottom:var(--sp-16)}
.field label{display:block;font-size:var(--fs-14);font-weight:600;margin-bottom:2px}
.field .help{font-size:var(--fs-12);color:var(--text-muted);margin-bottom:var(--sp-8)}
.field input,.field textarea{width:100%;font:inherit;padding:11px var(--sp-12);border:1px solid var(--border-default);border-radius:var(--r-8);background:var(--bg-surface);color:var(--text-primary)}
.field textarea{resize:vertical;min-height:70px}
.field .money{position:relative}.field .money input{padding-left:26px;font-variant-numeric:tabular-nums}
.field .money::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.seg{display:flex;gap:4px;background:var(--bg-sunken);padding:4px;border-radius:var(--r-8)}
.seg button{flex:1;font-weight:600;padding:8px;border:0;background:transparent;color:var(--text-secondary);border-radius:var(--r-6);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}

.wf-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-12);padding:var(--sp-12) 0;
  border-bottom:1px solid var(--border-subtle);opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.wf-row.in{opacity:1;transform:none}
.wf-row .lbl{font-size:var(--fs-14)}
.wf-row .val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-16);text-align:right}
.wf-row .chip{margin-left:var(--sp-8);vertical-align:middle}
.wf-row.landed{border-bottom:2px solid var(--text-primary);margin-top:var(--sp-8);padding-top:var(--sp-16)}
.wf-row.landed .lbl{font-weight:800;font-size:var(--fs-20)}
.wf-row.landed .val{font-size:var(--fs-30);font-weight:800}
.margin{margin-top:var(--sp-24);padding:var(--sp-24);background:var(--accent-yellow-bg);border:1px solid var(--intent-warning-border);border-radius:var(--r-12);
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.margin.in{opacity:1;transform:none}
.margin .row{display:flex;justify-content:space-between;align-items:baseline}
.margin .pct{font-size:var(--fs-36);font-weight:800;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.margin .lbl{font-weight:700}
.margin .bar{height:10px;background:rgba(0,0,0,.08);border-radius:var(--r-full);margin-top:var(--sp-12);overflow:hidden}
.margin .bar i{display:block;height:100%;width:0;background:var(--accent-yellow);border-radius:var(--r-full);transition:width .6s var(--ease)}
.margin .sub{color:var(--text-secondary);font-size:var(--fs-14);margin-top:var(--sp-8)}
.margin .sub b{color:var(--text-primary)}
.note{display:flex;gap:var(--sp-8);margin-top:var(--sp-16);padding:var(--sp-12);border-radius:var(--r-8);background:var(--accent-yellow-bg);color:var(--intent-warning);font-size:var(--fs-12);line-height:1.4}
.placeholder{color:var(--text-muted);text-align:center;padding:var(--sp-48) var(--sp-24)}
.fac-empty{text-align:center;color:var(--text-secondary);padding:var(--sp-24);border:1px dashed var(--border-default);border-radius:var(--r-12)}
.fac-empty strong{color:var(--text-primary);display:block;margin-bottom:4px}
.err{padding:var(--sp-16);border-radius:var(--r-8);background:var(--intent-danger-bg);color:var(--intent-danger);font-size:var(--fs-14)}
.sk{height:16px;border-radius:var(--r-6);background:linear-gradient(90deg,var(--bg-sunken),var(--neutral-100),var(--bg-sunken));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ingest list */
.asset-row{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);border:1px solid var(--border-subtle);border-radius:var(--r-8);margin-bottom:6px;font-size:var(--fs-14)}
.asset-row .k{font-size:var(--fs-12);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.profile-field{display:flex;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-12) 0;border-bottom:1px solid var(--border-subtle)}
.profile-field .v{font-weight:600}
.need{color:var(--intent-warning);font-size:var(--fs-13)}

@media(prefers-reduced-motion:reduce){.wf-row,.margin,.jcard{transition:none}.margin .bar i{transition:none}.sk{animation:none}}