/* Mizan's knowledge network mark and clearly labelled product stages. */
.brand > img { width: 48px; height: 48px; flex: 0 0 auto; }
.welcome-mark { width: 92px; height: 92px; opacity: 1; margin-bottom: 8px; }
.welcome { margin: 8px auto 10px; padding-bottom: 0; }
.starter-questions { margin-top: 17px; }
.starter { padding-top: 5px; padding-bottom: 5px; }
.assistant-mark { width: 27px; height: 27px; }
.mvp-header img { width: 39px; height: 39px; }
.header-actions { gap: 6px; }
.header-button { gap: 7px; }
.header-button svg { flex: 0 0 auto; }

.architecture-dialog,
.roadmap-dialog { width: min(850px, calc(100vw - 30px)); max-height: 90dvh; padding: 30px 34px 34px; }
.architecture-dialog .how-intro,
.roadmap-dialog .how-intro { max-width: 68ch; font-size: 13px; line-height: 1.75; }
.architecture-map { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 23px 0 27px; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #18212b; }
.architecture-map span { padding: 6px 9px; border: 1px solid #415266; border-radius: 4px; color: #d6e3f0; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.architecture-map span:nth-of-type(2) { border-color: #6e806f; color: #d5e9db; }
.architecture-map span:nth-of-type(3) { border-color: #877851; color: #e4d6ae; }
.architecture-map i { color: var(--quiet); font-size: 13px; font-style: normal; }
.architecture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.architecture-grid section { padding: 20px 0 23px; border-bottom: 1px solid var(--line); }
.architecture-grid h3,
.roadmap-list h3 { margin: 8px 0 7px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.architecture-grid p,
.roadmap-list p { font-size: 12px; line-height: 1.8; color: var(--muted); }
.stage-state { display: inline-block; font-size: 9px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.stage-state.live { color: #a6d7b1; }
.stage-state.building { color: var(--accent-strong); }
.stage-state.planned { color: var(--blue); }
.architecture-model { margin-top: 23px; padding: 18px 20px; border-left: 2px solid var(--accent); background: #202932; }
.architecture-model strong { display: block; font-size: 12px; margin-bottom: 8px; }
.architecture-model p { font-size: 11px; line-height: 1.8; color: var(--muted); margin-top: 5px; }
.roadmap-list { margin-top: 24px; border-top: 1px solid var(--line); }
.roadmap-list section { padding: 18px 2px 20px 18px; border-left: 2px solid #455567; border-bottom: 1px solid var(--line); }
.roadmap-list section:first-child { border-left-color: #8eb99a; }
.roadmap-list section:nth-child(2),
.roadmap-list section:nth-child(3) { border-left-color: var(--accent); }
.roadmap-list section:last-child { border-left-color: var(--blue); }
.roadmap-list .roadmap-model-line { margin-top: 9px; color: #cbd9e8; }
.mvp-section .mvp-model-note { color: #d3c5a4; }

@media (max-width: 760px) {
  .app-header { padding: 0 18px; gap: 10px; }
  .brand > img { width: 39px; height: 39px; }
  .header-actions { gap: 3px; }
  .header-button { padding: 8px; }
  .header-button span { display: none; }
  .architecture-grid { grid-template-columns: 1fr; }
  .architecture-dialog, .roadmap-dialog { padding: 24px 22px; }
  .architecture-map { gap: 6px; }
  .architecture-map span { font-size: 10px; }
}
@media (max-width: 600px) {
  .brand > img { width: 38px; height: 38px; }
  .welcome-mark { width: 72px; height: 72px; margin-bottom: 8px; }
  .mvp-header img { width: 35px; height: 35px; }
  .architecture-dialog .how-intro, .roadmap-dialog .how-intro { font-size: 11px; }
  .architecture-grid p, .roadmap-list p { font-size: 11px; }
}