/* Self-running stories, scoped to avoid changing the surrounding site. */
.demo-main {
  padding-block:32px 64px
}
.demo-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px
}
.demo-heading>div {
  max-width:850px
}
.demo-heading .eyebrow {
  margin:24px 0 12px
}
.demo-heading h1 {
  font-size:clamp(2.1rem,4vw,3.3rem);
  margin-bottom:14px
}
.demo-heading .lede {
  font-size:1.08rem
}
.demo-end {
  max-width:760px;
  margin-top:46px
}
.demo-end h2 {
  font-size:1.8rem;
  margin-bottom:18px
}
.demo-end p {
  color:var(--muted);
  margin-bottom:20px
}
.demo-player {
  --accent:#7bdacc;
  background:#101e31;
  border:1px solid #263b53;
  border-radius:18px;
  overflow:hidden;
  color:#eff5ff;
  box-shadow:0 24px 60px #152d491c;
  font-size:14px;
  isolation:isolate
}
.player-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:19px 25px;
  border-bottom:1px solid #ffffff12;
  background:#14243a;
  gap:12px
}
.player-name {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:15px;
  letter-spacing:-.02em
}
.player-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px #7bdacc66
}
.player-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 25px 8px
}
.player-intro p {
  font-size:12px;
  color:#a8bbd2
}
.demo-stage {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  padding:22px 25px 24px;
  position:relative;
  background:radial-gradient(ellipse at 42% 45%,#234a6455,transparent 56%)
}
.icon-message {
  color:#9de8cd;
  background:#56bc9222
}
.icon-email {
  color:#c7b6ff;
  background:#9a79da22
}
.result-paper {
  min-width:0;
  min-height:555px;
  background:#fbfcfe;
  border:1px solid #ffffff;
  border-radius:10px;
  padding:22px 23px;
  color:#192b3f;
  box-shadow:0 16px 38px #0003;
  position:relative;
  align-self:stretch
}
.paper-top {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px;
  letter-spacing:.12em;
  color:#6d7c91;
  padding-bottom:18px;
  border-bottom:1px solid #dfe7ef;
  margin-bottom:20px
}
.paper-mark {
  color:#317d85;
  font-size:18px;
  line-height:1
}
.paper-state {
  margin-left:auto;
  font-size:8px;
  letter-spacing:0;
  color:#49757a;
  background:#e9f3f1;
  padding:3px 6px;
  border-radius:4px
}
.result-title {
  font-size:24px;
  letter-spacing:-.045em;
  line-height:1.12;
  min-height:54px;
  max-width:360px;
  margin-bottom:9px
}
.result-summary {
  font-size:11px;
  line-height:1.6;
  color:#64758a;
  min-height:35px
}
.priority-list {
  list-style:none;
  padding:0;
  margin:14px 0 0;
  position:relative
}
.priority-row {
  padding:13px 0 13px 15px;
  border-top:1px solid #e4e9ef;
  position:relative;
  opacity:0;
  min-height:106px;
  transition:opacity .4s
}
.priority-row:before {
  content:"";
  position:absolute;
  left:0;
  top:16px;
  width:3px;
  height:28px;
  border-radius:2px;
  background:#8baacb
}
.priority-row.urgent:before {
  background:#c77b4a
}
.priority-row.review:before {
  background:#6d92b1
}
.priority-row.revealed {
  opacity:1
}
.priority-tag {
  font-size:8px;
  letter-spacing:.07em;
  color:#6b7a8b;
  font-weight:700
}
.priority-row h4 {
  font-size:14px;
  letter-spacing:-.025em;
  line-height:1.3;
  margin:5px 0 6px;
  font-weight:650;
  min-height:18px
}
.priority-row p {
  font-size:11px;
  line-height:1.6;
  color:#526479;
  margin:0;
  min-height:35px
}
.evidence {
  font-size:8px;
  color:#6c8798;
  display:block;
  margin-top:6px;
  opacity:0
}
.shown {
  opacity:1!important
}
.demo-player .typing:after {
  content:"";
  display:inline-block;
  width:2px;
  height:.9em;
  vertical-align:-.05em;
  margin-left:2px;
  background:#328b90;
  animation:breathe .7s infinite
}
.result-complete {
  font-size:9px;
  color:#32776f;
  background:#ecf6f2;
  border:1px solid #dceee7;
  border-radius:5px;
  padding:9px 11px;
  margin-top:11px;
  opacity:0;
  transition:opacity .4s
}
.result-complete>span {
  margin-right:5px
}
.result-skeleton {
  position:absolute;
  left:23px;
  right:23px;
  top:220px
}
.result-skeleton i {
  display:block;
  height:9px;
  background:linear-gradient(90deg,#edf1f6,#dde7ed,#edf1f6);
  background-size:200% 100%;
  border-radius:4px;
  margin:17px 0;
  width:90%;
  animation:skeleton 2.5s linear infinite
}
.result-skeleton i:nth-child(2) {
  width:70%
}
.result-skeleton i:nth-child(3) {
  width:82%
}
.result-skeleton span {
  display:block;
  margin-top:55px;
  color:#8b9aaa;
  font-size:11px;
  text-align:center
}
.playback-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
  padding:0 25px 18px;
  color:#c4d6e7
}
.phase-status {
  font-size:11px
}
.playback-track {
  height:2px;
  width:100%;
  background:#3b52693d;
  overflow:hidden
}
.playback-track span {
  display:block;
  height:100%;
  background:#84dbcb;
  box-shadow:0 0 10px #84dbcb
}
.is-paused * {
  animation-play-state:paused!important
}
.demo-links {
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  margin-top:24px
}
.demo-links a {
  font-size:.9rem
}
.demo-noscript {
  padding:20px;
  border:1px solid var(--line)
}
@keyframes flow {
  to {
    stroke-dashoffset:-152
  }
}
@keyframes orbit {
  to {
    transform:rotate(360deg)
  }
}
@keyframes breathe {
  50% {
    opacity:.25
  }
}
@keyframes skeleton {
  to {
    background-position:-200% 0
  }
}
@media(min-width:1150px) {
  .demo-stage {
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)
  }
  .priority-row p {
    font-size:12px
  }
  .priority-row h4 {
    font-size:15px
  }
  .result-paper {
    padding:24px 28px
  }
  .result-title {
    font-size:27px
  }
  .priority-row {
    min-height:112px
  }
}
@media(max-width:900px) {
  .player-intro {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }
  .demo-stage {
    grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);
    padding-inline:18px
  }
  .result-paper {
    padding:18px
  }
  .result-title {
    font-size:22px
  }
  .demo-heading {
    display:block
  }
}
@media(max-width:650px) {
  .demo-player {
    border-radius:12px
  }
  .player-bar {
    padding:15px
  }
  .player-name {
    font-size:12px;
    gap:7px
  }
  .player-intro {
    padding:15px 15px 0
  }
  .player-intro p {
    font-size:11px
  }
  .demo-stage {
    display:flex;
    flex-direction:column;
    padding:18px 15px
  }
  .result-paper {
    min-height:550px;
    padding:22px
  }
  .result-title {
    font-size:25px;
    min-height:55px
  }
  .result-summary {
    font-size:12px;
    min-height:38px
  }
  .priority-row {
    min-height:114px
  }
  .priority-row h4 {
    font-size:15px
  }
  .priority-row p {
    font-size:12px
  }
  .evidence,.priority-tag {
    font-size:9px
  }
  .result-complete {
    font-size:10px
  }
  .playback-footer {
    padding-inline:15px
  }
  .demo-links {
    gap:14px
  }
  .demo-links a {
    font-size:.83rem
  }
  .demo-heading .lede {
    font-size:1rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .demo-player * {
    animation:none!important;
    transition:none!important
  }
}

/* Graphical sources converge into the system; only the result contains detail. */
.input-graphic { min-width:0; display:flex; align-items:center; }
.input-network { width:100%; overflow:visible; }
.network-paths { stroke:#5d8092; stroke-opacity:.35; stroke-width:1.5; }
.network-packets path { stroke:#8be9d8; stroke-width:3; stroke-linecap:round; stroke-dasharray:8 310; animation:input-flow 3s linear infinite; animation-delay:var(--delay); }
.input-node { color:#b6d1ff; opacity:.3; transition:opacity .6s; }
.input-node.arrived { opacity:1; }
.input-node.icon-email { color:#d1bdff; }
.input-node.icon-message { color:#9de8cd; }
.node-shadow { fill:#050e1c; opacity:.4; }
.node-face { fill:#21354e; stroke:currentColor; stroke-opacity:.35; }
.node-light { fill:#8be9d8; stroke:#14253a; stroke-width:3; opacity:0; transition:opacity .5s; }
.input-node.read .node-light { opacity:1; }
.system-halo { stroke:#7bdacc; stroke-opacity:.1; stroke-width:16; }
.system-ring { stroke:#7bdacc; stroke-opacity:.6; stroke-dasharray:50 15 4 15; transform-box:fill-box; transform-origin:center; animation:orbit 16s linear infinite; }
.system-face { fill:#213e55; stroke:#8ce3de; stroke-opacity:.7; }
@keyframes input-flow { to { stroke-dashoffset:-318; } }
@media(max-width:650px) {
 .input-graphic { height:240px; justify-content:center; margin-top:-10px; }
 .input-network { width:240px; transform:rotate(90deg); }
 .input-symbol { transform:rotate(-90deg); transform-box:view-box; transform-origin:12px 12px; }
}

.demo-selector { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 24px; }
.demo-selector[hidden] { display:none; }
.demo-selector button { padding:12px 18px; border:1px solid #b8c6d5; border-radius:7px; background:#fff; color:#294970; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.demo-selector button:hover { background:#e9eff6; }
.demo-selector button[aria-pressed="true"] { background:#294970; border-color:#294970; color:#fff; }
.demo-selector button:focus-visible { outline:3px solid #387e9b; outline-offset:3px; }
@media(max-width:650px) { .demo-selector { gap:8px; } .demo-selector button { flex:1 1 100%; padding:12px; text-align:left; } }

.cash-chart { margin:15px 0 8px; opacity:0; border:1px solid #dce6ed; border-radius:9px; padding:14px 10px 4px; background:#f3f7fa; }
.cash-chart.visible { opacity:1; }
.cash-chart figcaption { display:flex; justify-content:space-between; padding:0 5px 8px; font-size:9px; font-weight:700; letter-spacing:.08em; color:#536c80; }
.cash-chart figcaption span { font-weight:400; letter-spacing:0; }
.cash-chart svg { display:block; width:100%; overflow:visible; }
.cash-grid { stroke:#dce5ed; stroke-width:1; }
.cash-axis { fill:#718397; font-size:10px; }
.cash-category { fill:#536479; font-size:12px; }
.cash-value { fill:#21384d; font-size:15px; font-weight:650; opacity:0; }
.cash-connector { stroke:#a1b5c5; stroke-dasharray:3 3; opacity:0; }
.cash-step.drawn .cash-value,.cash-step.drawn .cash-connector { opacity:1; }
.cash-bar.balance { fill:#8ca4bd; }
.cash-bar.inflow { fill:#319b8c; }
.cash-bar.outflow { fill:#d39769; }
.cash-bar.closing { fill:#294970; }
.financial-demo .result-title { min-height:0; }
.financial-demo .result-summary { min-height:20px; }
.financial-demo .priority-row { min-height:100px; }
@media(max-width:650px) {
 .cash-category { font-size:18px; }
 .cash-axis { font-size:16px; }
 .cash-value { font-size:20px; }
}

.approval-action { visibility:hidden; margin-top:10px; }
.approval-action.ready { visibility:visible; }
.approval-action button { border:1px solid #2d706c; background:#2d706c; color:white; padding:9px 12px; border-radius:5px; font:inherit; font-size:11px; font-weight:600; cursor:pointer; min-height:36px; }
.approval-action button:hover:not(:disabled) { background:#235b58; }
.approval-action button:focus-visible { outline:3px solid #3c8d9e; outline-offset:3px; }
.approval-action button:disabled { background:#e5f1ed; color:#34675e; border-color:#c8dfd6; cursor:default; }
.action-status { display:block; margin-top:6px; font-size:10px; color:#307367; }
@media(max-width:650px) { .approval-action button { min-height:44px; font-size:12px; } }

/* Compact presentation keeps the useful output close to its inputs. */
.input-mobile { display:none; }
.demo-stage { grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); padding:16px 20px; }
.player-bar { padding:13px 20px; }
.player-intro { padding:12px 20px 0; }
.result-paper { min-height:0; padding:18px 22px; }
.paper-top { padding-bottom:10px; margin-bottom:12px; }
.result-title { min-height:0; max-width:none; margin-bottom:6px; }
.result-summary { min-height:0; }
.priority-list { margin-top:10px; }
.priority-row,.financial-demo .priority-row { min-height:0; padding:10px 0 10px 12px; }
.priority-row:before { top:13px; }
.priority-row h4 { margin:4px 0; }
.priority-row p { min-height:0; line-height:1.5; }
.approval-action { margin-top:7px; }
.action-status:empty { display:none; }
.result-complete { margin-top:6px; padding:7px 10px; }
.playback-footer { padding:0 20px 12px; gap:8px; }
.cash-chart { margin-top:10px; padding-top:10px; }
.cash-chart svg { max-height:220px; }
@media(max-width:650px) {
 .demo-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:14px; }
 .demo-selector button { padding:9px 6px; font-size:12px; line-height:1.3; text-align:center; min-height:48px; }
 .player-bar { padding:11px 12px; }
 .player-intro { display:none; }
 .demo-stage { padding:0 10px 10px; }
 .input-graphic { height:auto; margin:0; }
 .input-network { display:none; }
 .input-mobile { display:block; width:100%; max-height:100px; }
 .result-paper { padding:14px; }
 .result-title { font-size:22px; }
 .result-summary { font-size:12px; line-height:1.4; }
 .priority-row h4 { font-size:14px; }
 .priority-row p { font-size:12px; }
 .evidence { display:none; }
 .approval-action button { min-height:44px; padding:8px 10px; }
 .paper-top { margin-bottom:10px; padding-bottom:8px; }
 .playback-footer { padding:0 10px 10px; }
 .phase-status { display:none; }
 .cash-chart { padding:10px 6px 2px; }
}

.vendor-comparison { opacity:0; margin:12px 0; border:1px solid #dce6ed; border-radius:7px; overflow:hidden; background:#f3f7fa; }
.vendor-comparison.visible { opacity:1; }
.vendor-comparison table { border-collapse:collapse; width:100%; color:#334c61; font-size:11px; }
.vendor-comparison caption { text-align:left; padding:9px 10px 5px; font-size:9px; font-weight:700; letter-spacing:.08em; }
.vendor-comparison th,.vendor-comparison td { padding:7px 10px; text-align:left; border-bottom:1px solid #dce6ed; }
.vendor-comparison thead th { font-size:10px; color:#64758a; font-weight:500; }
.vendor-comparison tr:last-child>* { border-bottom:0; }
.vendor-comparison td:nth-child(2) { font-weight:700; white-space:nowrap; }
.vendor-comparison span { display:block; font-size:10px; font-weight:400; color:#64758a; }
.vendor-comparison strong { font-weight:500; }
.vendor-comparison .scope-gap { color:#a65d2e; }
@media(max-width:650px){ .vendor-comparison th,.vendor-comparison td { padding:6px 8px; } }