/* Tool-demo kit. The marketing page around it stays paper & ink (v3.css);
   everything inside .stage deliberately looks like software — cool neutrals,
   white cards, app typography — because "real software, running" IS the
   pitch. One accent color per demo, set via --app on the stage. */

.stage { border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:34px;
  box-shadow:0 30px 80px rgba(74,58,30,.18); background:#191410; }
.stageBar { display:flex; align-items:center; gap:8px; padding:11px 16px; background:#191410; }
.stageBar .dot { width:10px; height:10px; border-radius:50%; background:#3A322A; }
.stageBar .stTitle { flex:1; text-align:center; font:600 12.5px ui-monospace,Consolas,monospace; color:#8A7F70; }
.stageBar .stamp { font:700 11px 'Inter'; color:#8A7F70; letter-spacing:.08em; text-transform:uppercase; }

.stageBody { display:grid; grid-template-columns:1fr 340px; background:#EEF0F3; min-height:520px; }
.stageBody.solo { grid-template-columns:1fr; }

/* ---- the app pane ---- */
.app { padding:26px 28px; color:#1A1E26; font-family:Inter,-apple-system,sans-serif; min-width:0; }
.app .appHead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.app .appName { font-weight:800; font-size:15px; letter-spacing:-.01em; }
.app .appName .lg { display:inline-block; width:9px; height:9px; border-radius:3px; background:var(--app); margin-right:7px; }
.app .bignum { font-weight:800; font-size:34px; letter-spacing:-.02em; margin-top:14px; line-height:1.1; }
.app .bignum small { display:block; font-size:13px; font-weight:600; color:#697180; letter-spacing:0; margin-top:2px; }
.app .bignum.alert { color:#B3402A; }
.app .bignum.good { color:#177A4C; }

.cardList { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.rowCard { background:#fff; border:1px solid #E1E4EA; border-radius:11px; padding:13px 16px;
  display:flex; align-items:center; gap:14px; box-shadow:0 1px 2px rgba(20,24,33,.04); }
.rowCard .who { flex:1; min-width:0; }
.rowCard .who b { display:block; font-size:14.5px; }
.rowCard .who span { display:block; font-size:12.5px; color:#697180; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rowCard .amt { font-weight:800; font-size:15px; }
.rowCard.enter { animation:slideIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.rowCard.won { border-color:#BFE3CF; background:#F2FBF6; }
.rowCard.dead { opacity:.45; }
@keyframes slideIn { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }

.pill { font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pill.new { background:color-mix(in srgb, var(--app) 14%, #fff); color:var(--app); }
.pill.warn { background:#FBEEE4; color:#B25E13; }
.pill.bad { background:#FAEAE7; color:#B3402A; }
.pill.ok { background:#E7F6EE; color:#177A4C; }
.pill.dim { background:#EDF0F4; color:#697180; }

.flash { animation:flash 1.1s ease-out; }
@keyframes flash { 0% { box-shadow:0 0 0 3px color-mix(in srgb, var(--app) 55%, #fff); } 100% { box-shadow:0 0 0 3px transparent; } }

/* timeline (follow-up cadence, reminder chains) */
.tline { margin-top:18px; border-left:2px solid #D8DCE3; padding-left:18px; display:flex; flex-direction:column; gap:12px; }
.tstep { position:relative; font-size:13.5px; color:#697180; }
.tstep::before { content:''; position:absolute; left:-24.5px; top:5px; width:11px; height:11px; border-radius:50%; background:#D8DCE3; border:2px solid #EEF0F3; }
.tstep b { color:#1A1E26; }
.tstep.fired { color:#1A1E26; }
.tstep.fired::before { background:var(--app); }
.tstep .tmsg { display:block; margin-top:5px; background:#fff; border:1px solid #E1E4EA; border-radius:9px; padding:8px 11px; font-size:12.5px; color:#3A4150; max-width:44ch; }

/* week calendar (deposit demo) */
.cal { margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.cal .day { background:#fff; border:1px solid #E1E4EA; border-radius:10px; padding:10px 10px 12px; min-height:104px; }
.cal .day h5 { font-size:11.5px; font-weight:800; color:#697180; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.cal .slot { font-size:12px; font-weight:700; border-radius:7px; padding:5px 8px; margin-top:5px; background:#EDF0F4; color:#697180; }
.cal .slot.held { background:#FBEEE4; color:#B25E13; }
.cal .slot.locked { background:color-mix(in srgb, var(--app) 13%, #fff); color:var(--app); }
.cal .slot.gone { background:#FAEAE7; color:#B3402A; text-decoration:line-through; }

/* ---- the phone pane ---- */
.phoneWrap { background:#E3E6EB; border-left:1px solid #D8DCE3; display:flex; align-items:center; justify-content:center; padding:26px 20px; }
.phone { width:280px; height:470px; background:#fff; border-radius:34px; border:7px solid #14171C; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 18px 40px rgba(20,24,33,.25); }
.phone .pTop { text-align:center; padding:14px 10px 10px; border-bottom:1px solid #EDF0F4; font-size:12px; font-weight:700; color:#697180; }
.phone .pTop b { display:block; color:#1A1E26; font-size:13px; }
.thread { flex:1; overflow-y:auto; padding:12px 12px 16px; display:flex; flex-direction:column; gap:8px; }
.bub { max-width:82%; padding:8px 12px; border-radius:16px; font-size:13px; line-height:1.45;
  animation:bubIn .35s cubic-bezier(.2,.9,.3,1.25) both; white-space:pre-line; }
.bub.them { align-self:flex-start; background:#E9EBEF; color:#1A1E26; border-bottom-left-radius:5px; }
.bub.us { align-self:flex-end; background:#2C7BF6; color:#fff; border-bottom-right-radius:5px; }
.bub.sys { align-self:center; background:none; color:#8A93A3; font-size:11px; font-weight:700; padding:2px 0; animation:none; }
@keyframes bubIn { from { opacity:0; transform:translateY(8px) scale(.92); } to { opacity:1; transform:none; } }
.typing { align-self:flex-start; background:#E9EBEF; border-radius:16px; border-bottom-left-radius:5px; padding:11px 14px; display:flex; gap:4px; }
.typing i { width:7px; height:7px; border-radius:50%; background:#9AA3B2; animation:tp 1s infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes tp { 0%,60%,100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }
.callCard { align-self:center; width:92%; background:#fff; border:1px solid #E1E4EA; border-radius:14px; padding:12px 14px; text-align:center;
  animation:bubIn .35s both; }
.callCard b { font-size:14px; }
.callCard span { display:block; font-size:12px; color:#B3402A; font-weight:700; margin-top:2px; }

/* ---- run controls ---- */
.runRow { display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap; }
.runBtn { background:var(--hand); color:#fff; border:0; border-radius:10px; padding:14px 30px; font:800 16px Inter; cursor:pointer; }
.runBtn:disabled { opacity:.55; cursor:default; }
.runNote { color:var(--dim); font-size:14px; }

/* ---- explainer ---- */
.exp { max-width:720px; }
.exp .fn { display:grid; grid-template-columns:44px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.exp .fn .n { font-family:'Newsreader',Georgia,serif; font-size:30px; color:var(--hand); line-height:1; }
.exp .fn b { font-size:16px; }
.exp .fn p { color:var(--dim); font-size:15px; margin-top:6px; }
.exp .fn p .q { font-style:italic; }
.demoGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:38px; }
.demoCard { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:28px 28px 24px; text-decoration:none; display:block; }
.demoCard:hover { border-color:var(--hand); }
.demoCard .dk { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.demoCard h3 { font-family:'Newsreader',Georgia,serif; font-weight:420; font-size:24px; margin-top:10px; line-height:1.15; }
.demoCard p { color:var(--dim); font-size:14.5px; margin-top:10px; }
.demoCard .go { display:inline-block; margin-top:16px; font-weight:800; font-size:14.5px; border-bottom:2px solid var(--hand); padding-bottom:2px; }
.demoCard .go::after { content:' \2192'; }

@media (max-width:860px) {
  .stageBody, .stageBody.solo { grid-template-columns:1fr; }
  .phoneWrap { border-left:0; border-top:1px solid #D8DCE3; }
  .cal { grid-template-columns:repeat(2,1fr); }
  .demoGrid { grid-template-columns:1fr; }
}