/* intelligence — one conversation, and the stack it runs through.

   The previous version was two bands that shared a slide but not a story. Now
   the chat window IS the demo (same .win and .bub vocabulary as the edge
   mockups, so 08 and 09 read as one product) and the stack beside it is the
   machine answering. The linkage is typographic, not drawn: turn numbers on
   the user bubbles reappear on the contracts layer, and roadmap pieces are
   dashed on both sides, never a different colour alone, so the distinction
   survives a black-and-white printout. */
[data-slide="intelligence"] .duo { display: grid; grid-template-columns: 1.12fr 1fr;
                                   gap: 1rem; align-items: stretch; margin-top: 0.2rem; }

/* ---- left: the conversation ---- */
[data-slide="intelligence"] .win-body { gap: 0.4rem; justify-content: center; }
[data-slide="intelligence"] .bub { font-size: 0.8rem; line-height: 1.35; padding: 0.3rem 0.55rem; }
[data-slide="intelligence"] .tn { font-family: var(--font-mono); font-size: 0.6rem;
                                  color: var(--accent); margin-right: 0.45rem; }
/* the contract an answer came from, named verbatim inside the bubble */
[data-slide="intelligence"] .call { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.25rem; }
[data-slide="intelligence"] .call code { font-family: var(--font-mono); font-size: 0.62rem;
                                         color: var(--accent); border: 1px solid var(--accent);
                                         padding: 0.08rem 0.3rem; white-space: nowrap; }
/* the roadmap turn, marked the same way the roadmap layers are */
[data-slide="intelligence"] .bub.soon { border-style: dashed; color: var(--fg-muted); }
[data-slide="intelligence"] .bub.me.soon { border-color: var(--border); background: none; }
[data-slide="intelligence"] .bub.soon .tn { color: var(--fg-muted); }
[data-slide="intelligence"] .bub.soon .call code { color: var(--fg-muted);
                                                   border-style: dashed; border-color: var(--border); }

/* ---- right: the stack ---- */
[data-slide="intelligence"] .stack { display: flex; flex-direction: column; }
[data-slide="intelligence"] .node { flex: 1; background: var(--surface); border: 1px solid var(--accent);
                                    padding: 0.5rem 0.7rem;
                                    display: flex; align-items: center; gap: 0.6rem; }
[data-slide="intelligence"] .node .icon { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
[data-slide="intelligence"] .nb { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
[data-slide="intelligence"] .node strong { font-size: 0.86rem; font-weight: 500; line-height: 1.2; }
[data-slide="intelligence"] .node .sub { font-size: 0.66rem; color: var(--fg-muted); line-height: 1.3; }
[data-slide="intelligence"] .node .when { margin-left: auto; font-family: var(--font-mono); font-size: 0.56rem;
                                          letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
/* roadmap layers: dashed and quiet, never the accent */
[data-slide="intelligence"] .node.next { border-style: dashed; border-color: var(--border); background: none; }
[data-slide="intelligence"] .node.next .icon,
[data-slide="intelligence"] .node.next .when { color: var(--fg-muted); }
/* the connector between layers, drawn in its own slot so the boxes stay equal */
[data-slide="intelligence"] .vlink { align-self: center; width: 1px; height: 16px; flex: 0 0 auto;
                                     background: var(--border); position: relative; }
[data-slide="intelligence"] .vlink::after { content: ''; position: absolute; bottom: 0; left: -3px;
                                            border: 3px solid transparent; border-top-color: var(--border); }

@media (max-height: 780px) {
  [data-slide="intelligence"] .win-body { gap: 0.3rem; }
  [data-slide="intelligence"] .bub { font-size: 0.76rem; padding: 0.24rem 0.5rem; }
  [data-slide="intelligence"] .node { padding: 0.4rem 0.6rem; }
  [data-slide="intelligence"] .vlink { height: 10px; }
}

@media (max-width: 860px) {
  [data-slide="intelligence"] .duo { grid-template-columns: 1fr; }
  [data-slide="intelligence"] .node { flex: none; }
}