:root{--bg:#f6f1e7;--card:#fffdf8;--ink:#22232b;--ink2:#5d5f6b;--line:#e2d9c6;--amber:#f2a93b;--red:#d4533b;--green:#3f8a52;--teal:#1f7a78}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "DM Sans",system-ui,sans-serif;background-image:radial-gradient(circle at 1px 1px,rgba(34,35,43,.06) 1px,transparent 0);background-size:22px 22px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;margin:0;line-height:1.1}
h1{font-size:clamp(38px,6vw,64px)} h1 em{color:var(--red)} h2{font-size:clamp(26px,3.6vw,36px)} h3{font-size:19px}
a{color:inherit}
.fine{font-size:14px;color:var(--ink2);margin:8px 0}.mono{font-family:"JetBrains Mono",monospace;font-size:12px}
.kicker{font:700 12px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.grow{flex:1}
.ico{display:inline-block;vertical-align:-4px;flex:none}.inl{vertical-align:-2px;margin:0 3px}

/* header */
.top{display:flex;align-items:center;gap:12px;padding:14px 24px;max-width:1100px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;font:700 26px Fraunces,serif;color:var(--ink);text-decoration:none}
.who{font-size:13px;color:var(--ink2)}
main{max-width:1100px;margin:0 auto;padding:6px 24px 40px}
section{margin-top:54px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 15px "DM Sans",sans-serif;border:2px solid var(--ink);background:var(--amber);color:var(--ink);padding:10px 17px;border-radius:12px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--card)}.btn.sm{padding:6px 12px;font-size:13px;box-shadow:2px 2px 0 var(--ink);border-radius:10px}.btn.big{padding:14px 22px;font-size:17px}.btn.green{background:#b9e0c2}.btn[disabled]{opacity:.55;cursor:wait}
.row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;padding:26px 0 0}
@media(max-width:820px){.hero{grid-template-columns:1fr}.facebox{order:-1;max-width:260px}}
.lead{font-size:19px;color:var(--ink2);max-width:34em;margin:18px 0 22px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.facebox{justify-self:center;text-align:center;width:100%;max-width:330px}
.bigface{width:100%;aspect-ratio:1;animation:bob 3.4s ease-in-out infinite}.bigface svg{display:block;width:100%;height:100%}
.facecap{display:inline-block;margin-top:6px;font:700 12px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;background:var(--card)}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}

/* demo explainer */
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.s3{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;position:relative}
.s3 .num{position:absolute;top:-14px;left:14px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:700 15px "JetBrains Mono",monospace;display:grid;place-items:center}
.s3 b{display:block;margin:6px 0 4px;font-size:17px}.s3 p{margin:0;color:var(--ink2);font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin-top:22px}
.scn{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:20px;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.scn.link:hover{transform:translate(-1px,-1px)}
.scn p{margin:0;color:var(--ink2);font-size:15px;flex:1}.scn-ico{width:60px;height:60px;border:2px solid var(--ink);border-radius:14px;background:#fff6e0;display:grid;place-items:center}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:16px}
.how>div{border-top:3px solid var(--ink);padding-top:10px;font-size:14px;color:var(--ink2)}.how b{display:block;color:var(--ink);font-size:16px;margin:4px 0 2px}

/* status pills */
.pill{font:700 11.5px "JetBrains Mono",monospace;padding:4px 10px;border-radius:999px;border:2px solid var(--ink);background:var(--card);text-transform:uppercase;white-space:nowrap}
.s-awaiting_approval,.s-awaiting_confirmation{background:#ffe3a3}.s-waiting{background:#e5ecff}.s-working,.s-planning{background:#d8f0ee}.s-resolved{background:#b9e0c2}.s-stalled,.s-stopped{background:#eadfd0}

/* case view */
.back{font-size:14px;color:var(--ink2)}
.case-head{display:flex;gap:18px;align-items:center;margin:10px 0 14px;flex-wrap:wrap}
.pills{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mascot{width:96px;height:96px;flex:none}.mascot svg{display:block;width:100%;height:100%}
.mood-nagging svg{animation:shake .5s ease-in-out infinite}.mood-victory svg{animation:hop .7s ease-in-out infinite}.mood-napping svg{animation:breathe 3.6s ease-in-out infinite}.mood-worried svg{animation:wobble 1.4s ease-in-out infinite}
@keyframes shake{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes hop{50%{transform:translateY(-10px) scale(1.04)}}@keyframes breathe{50%{transform:scale(1.04)}}@keyframes wobble{50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.mascot svg,.bigface{animation:none!important}}
.coach{display:flex;gap:14px;align-items:flex-start;background:#fff6e0;border:2px dashed var(--ink);border-radius:14px;padding:12px 16px;margin:6px 0 16px;font-size:15px}.coach svg{flex:none}.coach b{font-weight:700}
.grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;margin-top:6px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.box{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;margin-bottom:18px}.box h3{margin-bottom:6px}

/* progress stepper */
.stepper{list-style:none;margin:6px 0 20px;padding:14px 10px 6px;display:flex;gap:0;overflow-x:auto;background:var(--card);border:2px solid var(--ink);border-radius:16px}
.st{flex:1 0 118px;text-align:center;position:relative;padding:0 6px 8px;min-width:118px}
.st:not(:last-child)::after{content:"";position:absolute;top:17px;left:calc(50% + 20px);right:calc(-50% + 20px);height:3px;background:var(--line);border-radius:2px}
.st.done:not(:last-child)::after{background:var(--ink)}
.dotc{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 6px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;font:700 13px "JetBrains Mono",monospace;position:relative;z-index:1;color:var(--ink2)}
.st.done .dotc{background:#b9e0c2;border-color:var(--ink);padding:0}.st.skip .dotc{background:#eadfd0;text-decoration:line-through}
.st.active .dotc{background:var(--amber);color:var(--ink);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(242,169,59,.35)}}
.sl{display:block;font-weight:700;font-size:13.5px;line-height:1.25}.ss{display:block;font:500 11px "JetBrains Mono",monospace;color:var(--ink2);margin-top:2px}.st.todo .sl{color:var(--ink2);font-weight:500}

/* timeline, plan, sources, thread */
.ev{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:9px 0;border-top:1px dashed var(--line)}.ev:first-of-type{border-top:0}
.dot{width:12px;height:12px;border-radius:50%;background:var(--ink2);margin-top:6px}
.ev .t{font-weight:700}.ev .b{color:var(--ink2);font-size:14px;white-space:pre-wrap;word-break:break-word}.ev time{font:500 11px "JetBrains Mono",monospace;color:#9a9588}
.ev.email_sent .dot{background:var(--teal)}.ev.reply .dot{background:var(--amber)}.ev.resolved .dot{background:var(--green)}.ev.approval_needed .dot,.ev.need_info .dot{background:var(--red)}.ev.fast_forward .dot{background:var(--amber);box-shadow:0 0 0 3px rgba(242,169,59,.35)}.ev.error .dot,.ev.blocked .dot,.ev.form_failed .dot{background:#b00}
.approve{border:3px solid var(--red);background:#fff6ea}
.approve textarea,.approve input{width:100%;font:14px/1.45 "JetBrains Mono",monospace;border:2px solid var(--ink);border-radius:10px;padding:10px;background:#fff;margin-top:6px}.approve textarea{min-height:230px;resize:vertical}
.step{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px dashed var(--line);font-size:14px}.step:first-of-type{border-top:0}
.step .n{font:700 11px "JetBrains Mono",monospace;background:var(--ink);color:#fff;border-radius:6px;padding:2px 6px;min-width:46px;text-align:center}.step.done{opacity:.55;text-decoration:line-through}.step.skipped{opacity:.4}
.src{font-size:13px;color:var(--ink2);margin:8px 0;padding-left:10px;border-left:3px solid var(--amber)}.src a{color:var(--teal)}
.msg{border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px;white-space:pre-wrap;word-break:break-word}.msg.out{background:#e7f2f1;border:1px solid #bcd9d6}.msg.in{background:#fff1d4;border:1px solid #ecd49a}.msg small{display:block;font:700 11px "JetBrains Mono",monospace;color:var(--ink2);margin-bottom:4px}
iframe.live{width:100%;height:340px;border:2px solid var(--ink);border-radius:12px;background:#fff;margin-top:6px}img.shot{width:100%;border:2px solid var(--ink);border-radius:12px;margin-top:6px}

/* confetti (shapes, not emoji) */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}.confetti i{position:absolute;top:-20px;width:11px;height:15px;animation:fall 2.8s ease-in forwards}
@keyframes fall{to{top:110vh;opacity:.25}}

/* footer, dialog, toast */
.foot{max-width:1100px;margin:30px auto 40px;padding:20px 24px;border-top:2px solid var(--ink);font-size:13px;color:var(--ink2);display:grid;gap:8px}.foot a{color:var(--ink)}
dialog{border:3px solid var(--ink);border-radius:18px;padding:22px;background:var(--card);box-shadow:6px 6px 0 var(--ink);max-width:420px;width:92vw}dialog::backdrop{background:rgba(34,35,43,.45)}
dialog input{width:100%;font:16px "DM Sans",sans-serif;border:2px solid var(--ink);border-radius:10px;padding:11px;margin:6px 0 12px;background:#fff}dialog label{font-weight:700;font-size:13px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--amber);padding:10px 16px;border-radius:10px;font:700 14px "JetBrains Mono",monospace;opacity:0;transition:.2s;pointer-events:none;z-index:30}.toast.on{opacity:1}

/* chat (assistant-ui) */
.chat-wrap{background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);margin-top:14px;overflow:hidden}
.chat-start{padding:26px;text-align:center;display:grid;justify-items:center;gap:6px}.chat-start p{color:var(--ink2);margin:0 0 8px;max-width:30em}
.bc-thread{display:flex;flex-direction:column;height:480px}.bc-viewport{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.bc-welcome{margin:auto 0}.bc-hi{font:600 24px Fraunces,serif;margin-bottom:6px}.bc-welcome p{color:var(--ink2);margin:0 0 12px}
.bc-starters{display:grid;gap:8px}.bc-chip{text-align:left;font:500 14px "DM Sans",sans-serif;border:2px dashed var(--ink2);background:transparent;border-radius:12px;padding:9px 12px;cursor:pointer;color:var(--ink)}.bc-chip:hover{border-style:solid;background:#fff}
.bc-msg{display:flex;gap:8px;align-items:flex-start}.bc-user{justify-content:flex-end}.bc-avatar{flex:none;width:34px;height:34px}.bc-avatar svg{width:100%;height:100%}
.bc-bubble{max-width:82%;border-radius:14px;padding:9px 13px;border:2px solid var(--ink);background:#fff}.bc-user .bc-bubble{background:#ffe3a3}
.bc-text{margin:0;white-space:pre-wrap;word-break:break-word;font-size:15px}.bc-tool{font-size:13px;color:var(--ink2);font-style:italic}
.bc-card{border:2px solid var(--ink);border-radius:12px;padding:10px 12px;background:#e7f2f1;margin:6px 0}.bc-card-t{font-weight:700;display:flex;align-items:center;gap:6px}.bc-card-b{margin:4px 0 8px;font-size:14px}.bc-card-err{background:#fde8e3}.bc-card-wait{background:#fff6ea;display:flex;gap:8px;align-items:center}
.bc-composer{display:flex;gap:10px;padding:12px;border-top:2px solid var(--ink);background:#fbf6ea}.bc-input{flex:1;resize:none;border:2px solid var(--ink);border-radius:10px;padding:10px;font:15px "DM Sans",sans-serif;background:#fff;max-height:110px}

/* nav */
.nav{display:flex;gap:4px;margin-left:10px}.nav a{font-weight:700;font-size:14px;text-decoration:none;color:var(--ink2);padding:6px 11px;border-radius:9px}.nav a:hover{background:#ece3d0;color:var(--ink)}.nav a.on{background:var(--ink);color:#fff}
@media(max-width:700px){.nav{order:5;width:100%;margin:6px 0 0}.top{flex-wrap:wrap}}
/* rosters */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}.tbl th{font:700 11px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);text-align:left;padding:6px 8px;border-bottom:2px solid var(--ink)}
.tbl td{padding:9px 8px;border-bottom:1px dashed var(--line);vertical-align:middle}.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.tbl tr:last-child td{border-bottom:0}
.tblwrap{overflow-x:auto}
.owed{color:var(--red)}.clear{color:var(--green)}
.chk{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.chk label{display:flex;gap:6px;align-items:center;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;background:#fff;cursor:pointer;font-weight:700;font-size:14px}.chk input{accent-color:var(--ink)}
.form{display:grid;gap:10px}.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:600px){.form .two{grid-template-columns:1fr}}
.form label{font-weight:700;font-size:13px;display:grid;gap:4px}.form input,.form textarea,.form select{font:15px "DM Sans",sans-serif;border:2px solid var(--ink);border-radius:10px;padding:9px 11px;background:#fff;width:100%}
.form textarea{min-height:90px;font-family:"JetBrains Mono",monospace;font-size:13px}.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:500;background:#fff6e0;border:2px dashed var(--ink);border-radius:12px;padding:10px 12px}.form .check input{width:auto;margin-top:3px}
.toggle{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:10px 12px}.toggle input{width:20px;height:20px;accent-color:var(--ink);margin-top:2px;flex:none}
.tag{font:700 11px "JetBrains Mono",monospace;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:2px 8px;background:#fff;white-space:nowrap}.tag.amber{background:#ffe3a3}.tag.green{background:#b9e0c2}.tag.grey{background:#eadfd0}
.linkbtn{background:none;border:0;padding:0;font:700 13px "DM Sans",sans-serif;color:var(--teal);cursor:pointer;text-decoration:underline}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:16px}
.app{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:18px;box-shadow:5px 5px 0 var(--ink);display:grid;gap:8px;align-content:start}
.codebox{font:700 26px "JetBrains Mono",monospace;letter-spacing:.2em;background:#fff6e0;border:2px dashed var(--ink);border-radius:12px;padding:10px;text-align:center}
.example{font:500 13px "JetBrains Mono",monospace;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 9px;margin:4px 0}