/* AI visuals only. Matches the current continuous-chat theme in North Star
   src/svns/app/page.py (not its earlier editorial/serif rules).
   Original company marketing typography and palette remain in styles.css. */
.demo,.mini-visual{
 --ink:#243d38;--muted:#687871;--line:#e7eeea;--ice:#f5f8f6;
 --blue:#007376;--ns-accent:#029b7e;--ns-soft:#edf4ef;
 --ns-font:"Avenir Next","Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-family:var(--ns-font);color:var(--ink);
}
.demo{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 2px rgba(36,61,56,.04),0 14px 30px -24px rgba(36,61,56,.5)}
.demo-bar{padding:18px 24px;background:#f5f8f6;border-bottom:1px solid var(--line);font:600 12px/1.5 var(--ns-font);color:var(--ink)}
.demo .status-dot{background:var(--ns-accent);height:6px;width:6px}
.demo .badge{background:#e3ede7;color:var(--ink);border:0;border-radius:999px;font:500 10px/1.5 var(--ns-font);padding:4px 8px}
.demo-content{padding:28px}
.demo h3{font:600 23px/1.35 var(--ns-font);letter-spacing:-.5px;color:var(--ink);margin-bottom:26px}
.demo .caption,.demo small{font:400 12px/1.6 var(--ns-font);color:var(--muted)}
.demo .eyebrow{font:600 11px/1.6 var(--ns-font);letter-spacing:0;text-transform:none;color:var(--muted)}
.demo .prompt{display:table;max-width:88%;margin:0 0 28px auto;padding:13px 18px;border-radius:20px 20px 5px 20px;background:var(--ns-soft);font:400 16px/1.6 var(--ns-font);color:var(--ink);overflow-wrap:anywhere}
.demo .answer{border:0;padding:0;margin-bottom:24px}
.demo .answer p{font:400 16px/1.75 var(--ns-font);color:var(--ink);margin-bottom:16px}
.demo .source-link{font:500 13px/1.6 var(--ns-font);color:#007376;text-decoration:underline;text-underline-offset:4px}
.demo blockquote{background:#f5f8f6;border-left:2px solid #007376;border-radius:0 12px 12px 0;padding:16px 18px;font:400 15px/1.65 var(--ns-font);color:var(--ink)}
.demo cite{font:400 12px/1.6 var(--ns-font);color:var(--muted)}
.demo .demo-actions{border:1px solid var(--line);border-radius:26px;padding:8px;gap:8px;box-shadow:0 1px 2px rgba(36,61,56,.04),0 14px 30px -24px rgba(36,61,56,.5)}
.demo button:not(.button){font:500 12px/1.5 var(--ns-font);color:var(--ink);background:#f6f8f7;border:0;border-radius:12px;min-height:44px;padding:10px 13px}
.demo button:not(.button):hover{background:#eaf3ee;color:#007376}
.demo .button{font:600 14px/1.5 var(--ns-font);background:#007376;border-color:#007376;color:#fff;border-radius:18px;min-height:44px}
.demo .button:hover{background:#005e60;border-color:#005e60}
.demo .button:disabled{background:#e1eee7;border-color:#e1eee7;color:var(--ink);cursor:default}
.demo button:focus-visible,.demo a:focus-visible{outline:3px solid #007376;outline-offset:3px;box-shadow:0 0 0 2px #fff}
.demo .flow{font:400 15px/1.65 var(--ns-font);counter-reset:step;margin:0 0 22px;padding:0 0 0 20px;border-left:1px solid #d7e3db}
.demo .flow li{position:relative;padding:4px 0 18px;border-bottom:0}
.demo .flow li::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#029b7e;left:-24px;top:13px;box-shadow:0 0 0 4px white}
.demo .flow li:last-child{padding-bottom:0}
.demo .flow strong{font-weight:600;color:var(--ink)}
.demo .flow span{color:var(--muted);font-size:14px;line-height:1.65}
.mini-visual{background:#f5f8f6;border:1px solid #e7eeea;border-radius:18px;padding:20px 16px;min-height:100px;font:500 14px/1.6 var(--ns-font)}
.mini-visual>span:first-child{background:#e3ede7;border:0;color:#243d38;border-radius:999px;padding:7px 9px;font:500 11px/1.5 var(--ns-font)}
.mini-visual>span:last-child{color:#007376}
@media(max-width:767px){.demo-content{padding:22px 20px}.demo-bar{padding:16px 20px}.demo .prompt{max-width:95%}.demo h3{font-size:22px}.mini-visual{min-height:84px}}
@media(max-width:380px){.demo-content{padding:20px 16px}.demo-bar{padding:14px 16px}.demo .demo-actions{border-radius:18px}.demo .badge{font-size:10px}.demo .prompt{font-size:15px;padding:12px 14px}}
/* Darker North Star analysis-view muted token where the surface is tinted. */
.demo blockquote cite{color:#526860}

/* Source disclosure is a keyboard-operable button, styled as a citation. */
.demo button.source-link{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;text-align:left;min-height:44px}