/* ═══════════════════════════════════════════════════════════════════
   docs.loteflow.com — diagrams.css
   The custom flowchart kit. Pure HTML/CSS connectors; phase tones:
   marketing (blue) / sales (green) / closed (grey); brand = pine/gold.
   ═══════════════════════════════════════════════════════════════════ */

.diagram { margin: 26px 0; }
.diagram--narrow { max-width: 600px; margin-left: auto; margin-right: auto; }
.diagram__canvas {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.diagram__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 18px;
  padding: 10px 4px 0;
}
.diagram__caption { font-size: 13px; color: var(--muted-2); }
.diagram__legend { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--brand { background: var(--pine-3); }
.dot--gold { background: var(--gold); }
.dot--marketing { background: var(--phase-marketing); }
.dot--sales { background: var(--phase-sales); }
.dot--closed { background: var(--phase-closed); }
.dot--muted { background: var(--line-2); }
.dot--warn { background: var(--warn); }

/* ── Nodes ──────────────────────────────────────────────────────── */
.dnode {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 11px;
  border: 1.5px solid var(--line-2); background: var(--white);
  font-size: 14px; line-height: 1.35; text-align: left;
}
.dnode__icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pine-soft); color: var(--pine-3);
}
.dnode__body { display: flex; flex-direction: column; }
.dnode__text { font-weight: 600; color: var(--pine-2); }
.dnode__sub { font-size: 12px; color: var(--muted-2); }
.dnode--brand { border-color: rgba(27, 77, 58, .35); background: #F4F8F5; }
.dnode--marketing { border-color: rgba(75, 127, 153, .4); background: var(--phase-marketing-bg); }
.dnode--marketing .dnode__icon { background: rgba(75, 127, 153, .12); color: var(--phase-marketing); }
.dnode--sales { border-color: rgba(61, 122, 87, .4); background: var(--phase-sales-bg); }
.dnode--sales .dnode__icon { background: rgba(61, 122, 87, .12); color: var(--phase-sales); }
.dnode--closed { border-color: var(--line-2); background: var(--phase-closed-bg); }
.dnode--closed .dnode__icon { background: rgba(139, 132, 122, .14); color: var(--phase-closed); }
.dnode--gold { border-color: rgba(201, 168, 106, .55); background: #FBF5E9; }
.dnode--gold .dnode__icon { background: rgba(201, 168, 106, .18); color: var(--accent); }
.dnode--muted { border-style: dashed; background: var(--cream-2); }
.dnode--muted .dnode__text { color: var(--muted); font-weight: 550; }

/* ── Arrows ─────────────────────────────────────────────────────── */
.darrow { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.darrow__stick { display: inline-flex; align-items: center; }
.darrow--down { flex-direction: row; gap: 10px; align-items: center; align-self: center; }
.darrow--down .darrow__stick { flex-direction: column; }
.darrow--down .darrow__shaft { width: 2px; height: 15px; background: var(--line-2); }
.darrow--down .darrow__head { color: var(--muted-2); margin-top: -4px; display: inline-flex; }
.darrow--down .darrow__label { white-space: normal; text-align: left; max-width: 420px; }
.darrow--right .darrow__shaft { width: 20px; height: 2px; background: var(--line-2); }
.darrow--right .darrow__head { color: var(--muted-2); margin-left: -4px; display: inline-flex; }
.darrow__label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  text-align: center; line-height: 1.35;
}

.flow-row {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; width: max-content; margin: 0 auto; padding: 2px;
}

.flow-col { display: flex; flex-direction: column; align-items: center; }

.looprow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 10px auto 0;
  font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 5px 14px;
}
.looprow--marketing { color: var(--phase-marketing); background: var(--phase-marketing-bg); border: 1px dashed rgba(75, 127, 153, .4); }
.looprow--sales { color: var(--phase-sales); background: var(--phase-sales-bg); border: 1px dashed rgba(61, 122, 87, .4); }
.looprow--closed { color: var(--phase-closed); background: var(--phase-closed-bg); border: 1px dashed var(--line-2); }
.looprow--warn { color: var(--warn); background: #FDF3E4; border: 1px dashed rgba(201, 119, 59, .45); }
.looprow__icon { display: inline-flex; }

.kbadge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.kbadge--brand { color: var(--pine-3); background: var(--pine-soft); }
.kbadge--gold { color: #8A6A2F; background: #FBF5E9; }
.kbadge--marketing { color: var(--phase-marketing); background: var(--phase-marketing-bg); }
.kbadge--sales { color: var(--phase-sales); background: var(--phase-sales-bg); }
.kbadge--closed { color: var(--phase-closed); background: var(--phase-closed-bg); }
.kbadge--muted { color: var(--muted); background: var(--cream-3); }
.kbadge--warn { color: var(--warn); background: #FDF3E4; }

/* ── Stage chips ────────────────────────────────────────────────── */
.schip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  background: var(--white); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 4px 12px 4px 9px;
}
.schip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.schip--marketing .schip__dot { background: var(--phase-marketing); }
.schip--sales .schip__dot { background: var(--phase-sales); }
.schip--closed .schip__dot { background: var(--phase-closed); }
.schip--marketing { border-color: rgba(75, 127, 153, .3); background: var(--phase-marketing-bg); }
.schip--sales { border-color: rgba(61, 122, 87, .3); background: var(--phase-sales-bg); }
.schip--closed { border-color: var(--line-2); background: var(--phase-closed-bg); }
.schip__note { font-weight: 500; color: var(--muted-2); font-size: 11.5px; }

/* ── Phase rail ─────────────────────────────────────────────────── */
.phaserail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.phaserail__band {
  border-radius: 13px; padding: 15px 15px 13px;
  border: 1.5px solid var(--line-2); background: var(--cream-2);
}
.phaserail__band--marketing { border-color: rgba(75, 127, 153, .35); background: linear-gradient(180deg, var(--phase-marketing-bg), var(--white) 130%); }
.phaserail__band--sales { border-color: rgba(61, 122, 87, .35); background: linear-gradient(180deg, var(--phase-sales-bg), var(--white) 130%); }
.phaserail__band--closed { border-color: var(--line-2); background: linear-gradient(180deg, var(--phase-closed-bg), var(--white) 130%); }
.phaserail__head { display: flex; gap: 9px; align-items: center; margin-bottom: 11px; }
.phaserail__icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line);
}
.phaserail__band--marketing .phaserail__icon { color: var(--phase-marketing); }
.phaserail__band--sales .phaserail__icon { color: var(--phase-sales); }
.phaserail__band--closed .phaserail__icon { color: var(--phase-closed); }
.phaserail__head strong { display: block; font-size: 14.5px; color: var(--pine-2); line-height: 1.25; }
.phaserail__tagline { font-size: 12px; color: var(--muted-2); }
.phaserail__stages { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.phaserail__bullets { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 4px; }
.phaserail__bullets li { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.phaserail__bullets li::marker { color: var(--gold); }

/* ── Matrix (perfiles × etapas) ─────────────────────────────────── */
.matrix {
  display: grid; min-width: 640px;
  grid-template-columns: minmax(150px, 1.15fr) repeat(var(--matrix-cols), minmax(130px, 1fr));
  gap: 7px;
}
.matrix__corner {
  display: flex; align-items: end; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2); padding: 4px 6px; text-align: center; line-height: 1.4;
}
.matrix__colhead {
  border-radius: 10px; padding: 9px 8px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--pine-2);
  border: 1.5px solid var(--line-2); background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  line-height: 1.3;
}
.matrix__colhead i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.matrix__colhead--marketing { border-color: rgba(75, 127, 153, .35); background: var(--phase-marketing-bg); }
.matrix__colhead--marketing i { background: var(--phase-marketing); }
.matrix__colhead--sales { border-color: rgba(61, 122, 87, .35); background: var(--phase-sales-bg); }
.matrix__colhead--sales i { background: var(--phase-sales); }
.matrix__colhead--closed { background: var(--phase-closed-bg); }
.matrix__colhead--closed i { background: var(--phase-closed); }
.matrix__rowhead {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid rgba(27, 77, 58, .3); border-radius: 10px;
  background: #F4F8F5; padding: 9px 11px;
}
.matrix__rowicon {
  width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line); color: var(--pine-3);
}
.matrix__rowname { display: flex; flex-direction: column; line-height: 1.25; }
.matrix__rowname strong { font-size: 13px; color: var(--pine-2); }
.matrix__rowname em { font-style: normal; font-size: 11px; color: var(--muted-2); }
.matrix__cell { border-radius: 10px; border: 1px dashed var(--line-2); background: var(--cream-2); padding: 4px; min-height: 52px; display: flex; }
.mchip { border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; justify-content: center; width: 100%; }
.mchip strong { font-size: 12.5px; line-height: 1.3; }
.mchip span { font-size: 11px; line-height: 1.35; }
.mchip--active { background: var(--phase-sales-bg); border: 1px solid rgba(61, 122, 87, .3); }
.mchip--active strong { color: var(--phase-sales-text); }
.mchip--active span { color: var(--phase-sales); font-weight: 550; }
.mchip--provisioned { background: var(--phase-marketing-bg); border: 1px solid rgba(75, 127, 153, .3); }
.mchip--provisioned strong { color: var(--phase-marketing-text); }
.mchip--provisioned span { color: var(--phase-marketing); font-weight: 550; }
.mchip--ghost { align-items: center; background: transparent; }
.mchip--ghost span { color: var(--muted-2); font-size: 11.5px; }

/* ── Routing flow ───────────────────────────────────────────────── */
.rf__grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; align-items: start; }
.rf__collabel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-2); margin-bottom: 9px;
}
.rf__bubble {
  font-size: 13.5px; line-height: 1.5;
  background: var(--phase-sales-bg); border: 1px solid rgba(61, 122, 87, .25);
  border-radius: 3px 13px 13px 13px; padding: 10px 13px;
  color: var(--pine-2); max-width: 240px;
}
.rf__rules, .rf__profiles { display: flex; flex-direction: column; gap: 7px; }
.rf__rule {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; border: 1px solid var(--line-2);
  background: var(--cream-2); border-radius: 9px; padding: 7px 10px;
  color: var(--muted);
}
.rf__rule code { font-family: var(--mono); font-size: 11px; background: var(--white); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }
.rf__rule-value { font-weight: 600; color: var(--pine-2); }
.rf__rule-to { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.rf__rule--match { border-color: rgba(201, 168, 106, .6); background: #FBF5E9; }
.rf__rule--match .rf__rule-to { color: var(--accent); }
.rf__profile {
  position: relative;
  border: 1.5px solid var(--line-2); background: var(--white);
  border-radius: 11px; padding: 9px 12px;
  display: flex; align-items: center; gap: 9px;
}
.rf__profile--idle { opacity: .55; border-style: dashed; }
.rf__profile--hit { border-color: rgba(201, 168, 106, .65); background: #FBF5E9; box-shadow: var(--shadow-sm); }
.rf__profile-name { display: flex; flex-direction: column; line-height: 1.25; }
.rf__profile-name strong { font-size: 13.5px; color: var(--pine-2); }
.rf__profile-name em { font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.rf__hit {
  margin-left: auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: #8A6A2F;
  background: rgba(201, 168, 106, .22); border-radius: 999px; padding: 2px 8px;
}
.rf__fallback { margin-top: 16px; padding-top: 13px; border-top: 1px dashed var(--line); }
.rf__fallbackchain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rf__fallbackstep {
  font-size: 12.5px; font-weight: 600; color: var(--pine-2);
  border: 1px solid var(--line-2); background: var(--white);
  border-radius: 8px; padding: 5px 11px;
}
.rf__fallbackarrow { color: var(--muted-2); display: inline-flex; }

/* ── Gate + two-track split ─────────────────────────────────────── */
.tsplit { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.gate {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--pine-2);
  background: var(--white);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 168, 106, .14);
  border-radius: 12px; padding: 9px 16px;
  max-width: 100%;
}
.gate__icon { color: var(--accent); display: inline-flex; }
.tsplit__branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 18px; position: relative; min-width: 0; }
.tsplit__branches::before {
  content: ""; position: absolute; top: -10px; left: 25%; right: 25%;
  border-top: 2px dashed var(--line-2); z-index: 0;
}
.tsplit__branch {
  position: relative; z-index: 1;
  border-radius: 13px; padding: 14px 16px 13px;
  border: 1.5px solid var(--line-2); background: var(--white);
  min-width: 0;
}
.tsplit__branch--yes { border-color: rgba(61, 122, 87, .4); background: linear-gradient(180deg, var(--phase-sales-bg), var(--white) 140%); }
.tsplit__branch--no { border-color: rgba(201, 119, 59, .4); background: linear-gradient(180deg, #FDF3E4, var(--white) 140%); }
.tsplit__cond {
  position: absolute; top: -11px; left: 14px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  border-radius: 999px; padding: 2px 10px; background: var(--white);
}
.tsplit__branch--yes .tsplit__cond { color: var(--phase-sales); border: 1px solid rgba(61, 122, 87, .4); }
.tsplit__branch--no .tsplit__cond { color: var(--warn); border: 1px solid rgba(201, 119, 59, .45); }
.tsplit__branch strong { display: block; font-size: 15px; color: var(--pine-2); margin-top: 4px; }
.tsplit__sub { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 1px; }
.tsplit__branch ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.tsplit__branch li { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tsplit__branch li::marker { color: var(--gold); }

/* ── Journey step timeline ──────────────────────────────────────── */
.jtl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jtl__step { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.jtl__step:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px;
  width: 2px; background: var(--line);
}
.jtl__badge {
  width: 35px; height: 35px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-3); color: var(--muted); border: 1px solid var(--line);
}
.jtl__step--ia .jtl__badge { background: var(--pine-soft); color: var(--pine-3); border-color: rgba(27, 77, 58, .25); }
.jtl__step--template .jtl__badge { background: #FBF5E9; color: var(--accent); border-color: rgba(201, 168, 106, .45); }
.jtl__step--escalate .jtl__badge { background: #FDF3E4; color: var(--warn); border-color: rgba(201, 119, 59, .4); }
.jtl__body { flex: 1; min-width: 0; }
.jtl__body header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jtl__num {
  font-size: 11px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.jtl__body strong { font-size: 14.5px; color: var(--pine-2); }
.jtl__kind { font-size: 11.5px; color: var(--muted-2); font-weight: 600; }
.jtl__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.jtl__meta-chip {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.jtl__body p { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 560px; }
.jtl__note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-2); }

/* ── Day timeline ───────────────────────────────────────────────── */
.days { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.days__col {
  flex: 1 0 150px; max-width: 210px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream-2); padding: 11px 11px 9px;
  display: flex; flex-direction: column; gap: 7px;
}
.days__col header strong { display: block; font-size: 13px; color: var(--pine-2); }
.days__col header span { font-size: 11px; color: var(--muted-2); }
.days__event {
  display: flex; gap: 7px; align-items: baseline;
  font-size: 12px; line-height: 1.45;
  border-radius: 8px; padding: 6px 9px;
  background: var(--white); border: 1px solid var(--line);
}
.days__time { font-size: 10.5px; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.days__text { color: var(--muted); }
.days__event--send { border-color: rgba(75, 127, 153, .3); background: var(--phase-marketing-bg); }
.days__event--send .days__text { color: var(--phase-marketing-text); }
.days__event--reply { border-color: rgba(61, 122, 87, .35); background: var(--phase-sales-bg); }
.days__event--reply .days__text { color: var(--phase-sales-text); font-weight: 550; }
.days__event--system { border-style: dashed; background: transparent; }
.days__event--promote { border-color: rgba(201, 168, 106, .55); background: #FBF5E9; }
.days__event--promote .days__text { color: #8A6A2F; font-weight: 600; }
.days__event--human { border-color: rgba(201, 119, 59, .4); background: #FDF3E4; }
.days__event--human .days__text { color: var(--warn); }

/* ── Conversation flow ──────────────────────────────────────────── */
.cflow { display: flex; flex-direction: column; gap: 9px; max-width: 620px; }
.cflow__row { display: flex; gap: 10px; align-items: flex-end; }
.cflow__row--bot, .cflow__row--broker { flex-direction: row; }
.cflow__row--contact { flex-direction: row-reverse; }
.cflow__time {
  font-size: 10.5px; font-weight: 700; color: var(--muted-2);
  font-variant-numeric: tabular-nums; flex-shrink: 0; padding-bottom: 6px; width: 74px;
}
.cflow__row--contact .cflow__time { text-align: right; }
.cflow__bubble {
  max-width: 82%; border-radius: 13px; padding: 9px 13px 8px;
  font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--white);
}
.cflow__row--contact .cflow__bubble {
  background: var(--phase-sales-bg); border-color: rgba(61, 122, 87, .25);
  border-bottom-right-radius: 4px;
}
.cflow__row--bot .cflow__bubble {
  background: var(--phase-marketing-bg); border-color: rgba(75, 127, 153, .22);
  border-bottom-left-radius: 4px;
}
.cflow__row--broker .cflow__bubble {
  background: #FDF3E4; border-color: rgba(201, 119, 59, .3);
  border-bottom-left-radius: 4px;
}
.cflow__who {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 3px; color: var(--muted-2);
}
.cflow__row--bot .cflow__who { color: var(--phase-marketing); }
.cflow__row--contact .cflow__who { color: var(--phase-sales); }
.cflow__row--broker .cflow__who { color: var(--warn); }
.cflow__bubble p { margin: 0; color: var(--pine-2); }
.cflow__tag { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--muted-2); }
.cflow__system { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 2px; flex-wrap: wrap; }
.cflow__system .cflow__time { width: auto; }
.cflow__sysnote {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--pine-2);
  background: var(--cream-2); border: 1px dashed var(--line-2);
  border-radius: 999px; padding: 3px 12px;
}

/* ── Rails checklist ────────────────────────────────────────────── */
.rails { border: 1.5px solid var(--line-2); border-radius: 13px; overflow: hidden; }
.rails__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--pine-2);
  background: var(--cream-2); padding: 10px 15px;
  border-bottom: 1px solid var(--line);
}
.rails__title .ico { color: var(--gold); }
.rails__list { display: flex; flex-direction: column; }
.rails__gate { display: flex; gap: 11px; padding: 10px 15px; align-items: baseline; }
.rails__gate:not(:last-child) { border-bottom: 1px dashed var(--line); }
.rails__icon {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  background: var(--phase-sales-bg); color: var(--phase-sales);
  border: 1px solid rgba(61, 122, 87, .3);
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(3px);
}
.rails__gate strong { display: block; font-size: 13.5px; color: var(--pine-2); }
.rails__gate span { display: block; font-size: 12.5px; color: var(--muted); }

/* ── Tab groups ─────────────────────────────────────────────────── */
.dtabs__list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dtabs__tab {
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  color: var(--muted); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  transition: all .15s;
}
.dtabs__tab:hover { border-color: var(--gold); color: var(--pine-3); }
.dtabs__tab.is-active {
  background: var(--pine-2); border-color: var(--pine-2); color: #F3EAD7;
}
.dtabs__pane { display: none; }
.dtabs__pane.is-active { display: block; animation: dfade .18s ease; }
@keyframes dfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dtabs__pane.is-active { animation: none; } }

/* ── Routing tree (ad sets → hub → profiles) ────────────────────── */
.rtree { display: flex; flex-direction: column; }
.rtree__top { display: flex; flex-direction: column; align-items: center; }
.rtree__vstub { width: 2px; height: 16px; background: var(--line-2); display: block; }
.rtree__mid {
  display: grid; grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  gap: 26px; align-items: stretch; margin-top: 2px;
}
.rtree__flank {
  display: flex; flex-direction: column; justify-content: center;
  gap: 7px; position: relative;
}
.rtree__flank--left { text-align: right; padding-right: 26px; }
.rtree__flank--right { text-align: left; padding-left: 26px; }
.rtree__flank-label {
  font-size: 11px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-2); margin-bottom: 2px;
}
.rtree__set {
  position: relative; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: var(--cream-2); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 5px 11px;
}
.rtree__flank--left .rtree__set::after,
.rtree__flank--right .rtree__set::after {
  content: ""; position: absolute; top: 50%; width: 12px; height: 2px;
  background: var(--line-2); margin-top: -1px;
}
.rtree__flank--left .rtree__set::after { right: -13px; }
.rtree__flank--right .rtree__set::after { left: -13px; }
/* bracket rule on the inner edge of each flank + stub into the hub */
.rtree__flank::before {
  content: ""; position: absolute; top: 8%; bottom: 8%; width: 2px;
  background: var(--line-2);
}
.rtree__flank--left::before { right: 12px; }
.rtree__flank--right::before { left: 12px; }
.rtree__flank::after {
  content: ""; position: absolute; top: 50%; height: 2px; margin-top: -1px;
  background: var(--line-2);
}
.rtree__flank--left::after { left: calc(100% - 12px); width: 38px; }
.rtree__flank--right::after { right: calc(100% - 12px); width: 38px; }
.rtree__hub { display: flex; align-items: center; justify-content: center; }
.rtree__split { display: flex; flex-direction: column; align-items: center; }
.rtree__bus { width: 50%; height: 2px; background: var(--line-2); display: block; }
.rtree__profiles { display: grid; grid-template-columns: 1fr 1fr; }
.rtree__profile {
  display: flex; justify-content: center; position: relative; padding-top: 16px;
}
.rtree__profile::before {
  content: ""; position: absolute; top: 0; left: 50%; margin-left: -1px;
  width: 2px; height: 16px; background: var(--line-2);
}
.dnode--lg { padding: 12px 16px; }
.dnode--lg .dnode__text { font-size: 15px; }
.dnode--lg .dnode__sub { font-size: 12px; }

@media (max-width: 860px) {
  .rtree__mid { grid-template-columns: 1fr; gap: 10px; }
  .rtree__flank--left, .rtree__flank--right { padding: 0; text-align: left; }
  .rtree__flank::before, .rtree__flank::after,
  .rtree__set::after { display: none; }
  .rtree__hub { margin: 6px 0; }
  .rtree__split .rtree__bus { display: none; }
  .rtree__profiles { grid-template-columns: 1fr; gap: 12px; }
  .rtree__profile { padding-top: 12px; }
}

/* ── Stage journey cards (perfil × etapa with the sequence inside) ── */
.scards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.scard {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--phase-marketing);
  border-radius: 12px; padding: 13px 13px 11px;
  box-shadow: var(--shadow-sm);
}
.scard--sales { border-top-color: var(--phase-sales); }
.scard--closed { border-top-color: var(--phase-closed); }
.scard--provisioned {
  border: 1.5px dashed rgba(75, 127, 153, .45);
  border-top: 3px solid var(--phase-marketing);
  background: linear-gradient(180deg, var(--phase-marketing-bg), var(--white) 55%);
}
.scard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scard__profile {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 750; border-radius: 999px; padding: 3px 10px;
}
.scard__profile--brand { color: var(--pine-3); background: var(--pine-soft); }
.scard__profile--gold { color: #8A6A2F; background: #FBF5E9; }
.scard__profile--sales { color: var(--phase-sales); background: var(--phase-sales-bg); }
.scard__stage { font-size: 14px; font-weight: 700; color: var(--pine-2); line-height: 1.3; }
.scard__journey {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--muted-2);
}
.scard__journey .ico { color: var(--gold); }
.scard__steps {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.scard__step {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; line-height: 1.45;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; background: var(--cream-2);
}
.scard__day {
  flex-shrink: 0; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted-2);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; margin-top: 1px; white-space: nowrap;
}
.scard__msg { color: var(--muted); overflow-wrap: anywhere; }
.scard__step--ia { border-color: rgba(27, 77, 58, .25); background: var(--pine-soft); }
.scard__step--ia .scard__msg { color: var(--pine-3); }
.scard__step--template { border-color: rgba(201, 168, 106, .5); background: #FBF5E9; }
.scard__step--template .scard__msg { color: #8A6A2F; }
.scard__more {
  margin-top: auto; font-size: 11.5px; font-style: italic;
  color: var(--muted-2); text-align: center; padding-top: 2px;
}
.scard__more--prov { font-style: normal; font-weight: 650; color: var(--phase-marketing-text); }

/* responsive columns driven by the ARTICLE's width (container query) */
@container (min-width: 560px) {
  .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
  .scards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Interactive system map (routing + stage journeys + detail popover) ── */
.sysmap { position: relative; font-size: 14px; }

/* inspectable nodes — shared interaction states */
.sysmap :where(button[data-detail]) {
  border: 0; background: none; padding: 0; margin: 0;
}
.sysmap [data-detail] {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: box-shadow .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s ease-out;
}
.sysmap [data-detail]:hover { transform: translateY(-2px); }
.sysmap [data-detail]:focus-visible {
  outline: none; box-shadow: 0 0 0 2.5px var(--gold), var(--shadow-md);
}
.sysmap [data-detail].is-inspected {
  box-shadow: 0 0 0 3px rgba(201, 168, 106, .65), var(--shadow-md);
  border-color: var(--gold) !important;
}

/* arrowheads (▼) where wires enter nodes */
.sysmap__vstub::after, .sysmap__trunk::after, .sysmap__branchdrop::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  border: 4.5px solid transparent; border-bottom: 0; border-top: 6px solid var(--line-2);
}

/* ── Zone A: routing ── */
.sysmap__routing { max-width: 800px; margin: 0 auto; position: relative; }
.sysmap__top { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.sysmap__default {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cream-2); border: 1.5px dashed var(--line-2);
  border-radius: 11px; padding: 7px 14px 7px 9px;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sysmap__default:hover { border-color: var(--gold); background: #FBF5E9; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sysmap__default-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--line); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.sysmap__default-body { display: flex; flex-direction: column; line-height: 1.3; }
.sysmap__default-name { font-size: 13.5px; font-weight: 650; color: var(--muted); }
.sysmap__default-sub { font-size: 10.5px; color: var(--muted-2); }
.sysmap__vstub { width: 2px; height: 20px; background: var(--line-2); position: relative; display: block; }

.sysmap__mid {
  display: grid; grid-template-columns: 1fr minmax(280px, 340px) 1fr;
  gap: 28px; align-items: stretch; position: relative; z-index: 2;
}
.sysmap__flank {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; position: relative;
}
.sysmap__flank--left { padding-right: 40px; }
.sysmap__flank--right { padding-left: 40px; }
.sysmap__flank-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted-2); margin-bottom: 2px;
}
.sysmap__flank--left .sysmap__flank-label { text-align: right; }
.sysmap__set {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  background: var(--white); border: 1.5px solid var(--line-2);
  border-radius: 9px; padding: 7px 12px 8px; box-shadow: var(--shadow-sm);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sysmap__flank--left .sysmap__set { border-right: 3.5px solid rgba(27, 77, 58, .45); }
.sysmap__flank--right .sysmap__set { border-left: 3.5px solid rgba(201, 168, 106, .75); }
.sysmap__set:hover {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 46, 34, 0.08);
}
.sysmap__set-kicker {
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}
.sysmap__set-name {
  font-size: 12.5px; font-weight: 750; letter-spacing: .04em;
  color: var(--text); text-transform: uppercase;
}
.sysmap__hubcell { display: flex; align-items: center; justify-content: center; position: relative; }
.sysmap__hub {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--pine-2);
  background: var(--white); border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 168, 106, .16), var(--shadow-sm);
  border-radius: 12px; padding: 11px 18px; max-width: 100%; line-height: 1.35;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sysmap__hub-icon { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.sysmap__hub:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(201, 168, 106, .3), var(--shadow-md);
  transform: translateY(-2px);
}

.sysmap__profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; position: relative; z-index: 2; }
.sysmap__profilecell { display: flex; justify-content: center; }
.sysmap__profilenode {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 320px; padding: 12px 20px; border-radius: 14px;
  border: 1.5px solid rgba(27, 77, 58, .35); background: #F4F8F5;
  box-shadow: var(--shadow-sm);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sysmap__profilenode--gold { border-color: rgba(201, 168, 106, .65); background: #FBF5E9; }
.sysmap__profilenode:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 46, 34, 0.1);
}
.sysmap__profilenode-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line); color: var(--pine-3);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sysmap__profilenode--gold .sysmap__profilenode-icon { color: var(--accent); }
.sysmap__profilenode-body { display: flex; flex-direction: column; line-height: 1.3; }
.sysmap__profilenode-name { font-size: 15px; font-weight: 750; color: var(--pine-2); }
.sysmap__profilenode-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }

/* ── Zone B: stage journeys ── */
.sysmap__stagezone { margin-top: 28px; padding-top: 22px; border-top: 1.5px dashed var(--line-2); position: relative; z-index: 2; }
.sysmap__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.sysmap__group {
  text-align: center; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 7px; position: relative;
}
.sysmap__group::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0;
  height: 2px; border-radius: 2px;
}
.sysmap__group--brand { color: var(--pine-3); }
.sysmap__group--brand::after { background: linear-gradient(90deg, transparent, rgba(27, 77, 58, .4), transparent); }
.sysmap__group--gold { color: #8A6A2F; }
.sysmap__group--gold::after { background: linear-gradient(90deg, transparent, rgba(201, 168, 106, .65), transparent); }

.sysmap__phase-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-radius: 9px; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.sysmap__phase-banner--marketing {
  background: var(--phase-marketing-bg); color: var(--phase-marketing-text);
  border: 1px solid rgba(75, 127, 153, .3);
}
.sysmap__phase-banner--sales {
  background: var(--phase-sales-bg); color: var(--phase-sales-text);
  border: 1px solid rgba(61, 122, 87, .35);
  margin-top: 54px;
}
.sysmap__phase-banner--closed {
  background: #FBF7EE; color: #785A24;
  border: 1px solid rgba(201, 168, 106, .4);
  margin-top: 54px;
}
.sysmap__phase-banner-desc { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal; opacity: .85; }

.sysmap__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sysmap__cards--sales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sysmap__cards--closed { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container (max-width: 779px) {
  .sysmap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sysmap__cards--sales,
  .sysmap__cards--closed { grid-template-columns: 1fr; }
  .sysmap__groups { display: none; }
}
@container (max-width: 459px) {
  .sysmap__cards { grid-template-columns: 1fr; }
}
.sysmap__card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--phase-marketing);
  border-radius: 12px; padding: 11px 11px 9px;
  box-shadow: var(--shadow-sm);
}
.sysmap__card--sales {
  border-top: 3.5px solid var(--phase-sales);
  background: linear-gradient(180deg, #F5FAF7, var(--white) 65%);
}
.sysmap__card--closed {
  border-top: 3.5px solid var(--gold);
  background: linear-gradient(180deg, #FDFBF7, var(--white) 65%);
}
.sysmap__card--provisioned {
  border: 1.5px dashed rgba(75, 127, 153, .45);
  border-top: 3px solid var(--phase-marketing);
  background: linear-gradient(180deg, var(--phase-marketing-bg), var(--white) 55%);
}
.sysmap__cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sysmap__stage { display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: all .15s ease; }
.sysmap__stage:hover { transform: translateY(-1px); }
.sysmap__stage-kicker {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}
.sysmap__stage-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sysmap__stage-dot--brand { background: var(--pine-3); }
.sysmap__stage-dot--gold { background: var(--gold); }
.sysmap__stage-dot--sales { background: var(--phase-sales); }
.sysmap__stage-name { font-size: 13px; font-weight: 750; color: var(--pine-2); line-height: 1.25; }
.sysmap__journey {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; color: var(--muted-2);
}
.sysmap__journey .ico { color: var(--gold); }
.sysmap__journey--sales { color: var(--phase-sales-text); font-weight: 700; }
.sysmap__journey--sales .ico { color: var(--phase-sales); }
.sysmap__steps { display: flex; flex-direction: column; gap: 6px; }
.sysmap__step {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 9px 7px; background: var(--cream-2);
  transition: all .15s ease;
}
.sysmap__step:hover {
  border-color: var(--gold); background: #FDFBF7;
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.sysmap__step-kicker {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
}
.sysmap__step-num { color: var(--gold); font-variant-numeric: tabular-nums; }
.sysmap__step-kicker .ico { display: inline-flex; }
.sysmap__step-text { font-size: 11.8px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.sysmap__step--ia { border-color: rgba(27, 77, 58, .25); background: var(--pine-soft); }
.sysmap__step--ia .sysmap__step-text { color: var(--pine-3); }
.sysmap__step--template { border-color: rgba(201, 168, 106, .5); background: #FBF5E9; }
.sysmap__step--template .sysmap__step-text { color: #8A6A2F; }
.sysmap__step--broker { border-color: rgba(61, 122, 87, .35); background: #EDF7F1; }
.sysmap__step--broker .sysmap__step-kicker { color: var(--phase-sales); }
.sysmap__step--broker .sysmap__step-text { color: var(--pine-2); font-weight: 600; }
.sysmap__step--quote { border-color: rgba(201, 168, 106, .6); background: #FFF9ED; }
.sysmap__step--quote .sysmap__step-kicker { color: #8A6A2F; }
.sysmap__step--quote .sysmap__step-text { color: #5D4316; font-weight: 600; }
.sysmap__step--more {
  border: 1.5px dashed var(--line-2); background: rgba(245, 243, 237, 0.6);
  opacity: .85; transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.sysmap__step--more .sysmap__step-kicker { color: var(--gold); }
.sysmap__step--more .sysmap__step-text { color: var(--muted-2); font-style: italic; }
.sysmap__step--more:hover {
  opacity: 1; border-color: var(--gold); border-style: solid;
  background: var(--white); transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.sysmap__step--more:hover .sysmap__step-text { color: var(--pine-3); font-style: normal; }
.sysmap__cardprov {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; font-size: 10.5px; font-weight: 650; color: var(--phase-marketing-text);
  padding-top: 3px; text-align: center;
}
.sysmap__cardprov .ico { flex-shrink: 0; }

/* ── Detail popover ── */
.sysmap-pop {
  position: fixed; top: 0; left: 0; z-index: 9999; width: 420px;
  max-width: calc(100vw - 24px);
  background: var(--white); border: 1.5px solid var(--line-2);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(15, 46, 34, 0.2), 0 4px 12px rgba(15, 46, 34, 0.06);
  opacity: 0; pointer-events: none; transform: translateY(4px) scale(.985);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
.sysmap-pop.is-open { opacity: 1; pointer-events: auto; transform: none; }
.sysmap-pop.is-pinned {
  border-color: rgba(201, 168, 106, .85);
  box-shadow: 0 16px 44px rgba(15, 46, 34, 0.18), 0 0 0 3.5px rgba(201, 168, 106, .25);
}
.sysmap-pop__fill { display: flex; flex-direction: column; min-width: 0; }
.sysmap-pop__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.sysmap-pop__head strong { font-weight: 750; color: var(--pine-2); }
.sysmap-pop__head .kbadge { margin-left: 0; flex-shrink: 0; }
.sysmap-pop__close {
  border: 0; background: var(--cream-2); color: var(--muted);
  border-radius: 6px; width: 24px; height: 24px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; flex-shrink: 0; transition: all .15s ease;
}
.sysmap-pop__close:hover { background: var(--cream-3); color: var(--text); }
.sysmap-pop__scroll { max-height: 440px; overflow-y: auto; }
.sysmap-pop__body { padding: 13px 16px 15px; font-size: 13.2px; line-height: 1.6; color: var(--muted); }
.sysmap-pop__body > * + * { margin-top: 10px; }
.sysmap-pop__body p { margin: 0; }
.sysmap-pop__body strong { color: var(--text); }
.sysmap-pop__body code {
  font-family: var(--mono); font-size: 11.5px; color: var(--pine-2);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}
.sysmap-pop__bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sysmap-pop__bullets li { position: relative; padding-left: 15px; }
.sysmap-pop__bullets li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.sysmap-pop__why {
  list-style: none; margin: 0; padding: 10px 0 0;
  border-top: 1px dashed var(--line-2);
  display: flex; flex-direction: column; gap: 7px;
}
.sysmap-pop__why li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
.sysmap-pop__why .ico { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.sysmap-pop__where {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px 10px; border-top: 1px solid var(--line);
  background: var(--cream); border-radius: 0 0 13px 13px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.sysmap-pop__where span {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); flex-shrink: 0;
}

/* WhatsApp-style bubble for journey-message details */
.sysmap-bubble-wrap { margin-top: 10px; margin-bottom: 8px; }
.sysmap-bubble-label {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px;
}
.sysmap-bubble {
  margin-left: auto; max-width: 96%;
  background: #DCF7C5; color: #21321F;
  border-radius: 12px 3px 12px 12px;
  padding: 8px 11px 5px; box-shadow: var(--shadow-sm);
  position: relative;
}
.sysmap-bubble__name { display: block; font-size: 10.5px; font-weight: 750; color: #075E54; margin-bottom: 2px; }
.sysmap-bubble p,
.sysmap-bubble__text {
  margin: 0; font-size: 12.8px; line-height: 1.48; word-break: break-word;
  white-space: pre-wrap !important;
}
.sysmap-bubble p + p { margin-top: 6px; }
.sysmap-bubble .wa-link {
  color: #027EB5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.sysmap-bubble .wa-link:hover {
  color: #015B83;
}
.sysmap-bubble__meta {
  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  font-size: 10px; color: #6B8A79; margin-top: 3px;
}
.sysmap-bubble__meta svg { vertical-align: middle; color: #53BDEB; }

/* Meta Ads Creative preview inside ad set popovers */
.sysmap-ad-preview { margin-top: 10px; margin-bottom: 10px; }
.sysmap-ad-card {
  background: var(--white); border: 1.5px solid var(--line-2);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.sysmap-ad-card__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.sysmap-ad-card__caption {
  padding: 8px 11px 9px; background: var(--cream-2);
  display: flex; flex-direction: column; gap: 3px;
}
.sysmap-ad-card__tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 750; color: var(--pine-2); text-transform: uppercase; letter-spacing: .06em;
}
.sysmap-ad-card__tag .ico { color: var(--gold); }
.sysmap-ad-card__text {
  font-size: 11.5px; line-height: 1.35; color: var(--muted);
}

/* Push notification card for broker assignment */
.sysmap-push {
  background: var(--white); color: var(--text);
  border: 1px solid var(--line-2); border-left: 4px solid var(--pine-3);
  border-radius: 10px; padding: 10px 12px;
  box-shadow: var(--shadow-sm); margin-top: 4px;
}
.sysmap-push__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; font-size: 11px; color: var(--muted-2);
}
.sysmap-push__app {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; color: var(--pine-2);
}
.sysmap-push__app .ico { color: var(--gold); }
.sysmap-push__time { font-size: 10.5px; }
.sysmap-push__title {
  display: block; font-size: 12.8px; font-weight: 750; color: var(--pine);
  margin-bottom: 3px;
}
.sysmap-push__body {
  font-size: 12px; line-height: 1.45; color: var(--muted);
  white-space: pre-wrap !important;
}

/* WhatsApp Document / PDF attachment inside bubble */
.sysmap-doc {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px; padding: 7px 10px;
  margin-bottom: 6px; text-decoration: none;
}
.sysmap-doc__icon {
  width: 32px; height: 36px; border-radius: 4px;
  background: #E53935; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sysmap-doc__icon-ext { font-size: 8.5px; font-weight: 900; letter-spacing: 0.05em; line-height: 1; }
.sysmap-doc__body { flex: 1; min-width: 0; }
.sysmap-doc__title {
  display: block; font-size: 12px; font-weight: 700; color: #1f2c24;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.sysmap-doc__sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: #6B8A79; margin-top: 1px;
}
.sysmap-doc__badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: rgba(0,0,0,0.08); padding: 1px 4px; border-radius: 3px;
}
.sysmap-doc__action {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.06); color: #075E54;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* WhatsApp Image attachment inside bubble */
.sysmap-img-card {
  border-radius: 8px; overflow: hidden; margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}
.sysmap-img-card__banner {
  height: 52px; background: linear-gradient(135deg, #1B4D3A, #2A6850);
  display: flex; align-items: center; justify-content: center;
  color: #F8F5EE; gap: 8px; font-size: 11.5px; font-weight: 600;
}
.sysmap-img-card__banner--gold {
  background: linear-gradient(135deg, #8A6A2F, #C9A86A);
}

@media (prefers-reduced-motion: reduce) {
  .sysmap-pop { transition: none; }
  .sysmap [data-detail] { transition: none; }
  .sysmap [data-detail]:hover { transform: none; }
}

/* ── Concept cards ──────────────────────────────────────────────── */
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 11px; }
.ccard {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); padding: 13px 14px;
}
.ccard__icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pine-soft); color: var(--pine-3);
}
.ccard strong { font-size: 14px; color: var(--pine-2); }
.ccard strong a { color: inherit; }
.ccard p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .diagram__canvas { padding: 16px 12px; }
  .rf__grid { grid-template-columns: 1fr; }
  .tsplit__branches { grid-template-columns: 1fr; }
  .tsplit__branches::before { display: none; }
  .matrix { min-width: 560px; }
  .cflow__row--contact { flex-direction: row; }
  .cflow__row--contact .cflow__time { text-align: left; order: -1; }
  .cflow__system { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   SYSTEM MAP UPGRADE — animated wires, spotlight, enhanced polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── SVG wire overlay ── */
.sysmap { position: relative; }
.sysmap__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; overflow: visible;
}
.sysmap__wire {
  fill: none; stroke: var(--line-2); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease;
}
.sysmap__wire--brand { stroke: rgba(27, 77, 58, .32); }
.sysmap__wire--gold { stroke: rgba(201, 168, 106, .5); }
.sysmap__wire--muted { stroke: var(--line-2); stroke-dasharray: 6 4; }
.sysmap__wire.is-active { stroke-width: 3.5; }
.sysmap__wire--brand.is-active { stroke: var(--pine-3); }
.sysmap__wire--gold.is-active { stroke: var(--gold); }
.sysmap__wire.is-dimmed { opacity: .1; }
.sysmap__marker { fill: var(--line-2); transition: fill .25s ease; }
.sysmap__marker--brand { fill: rgba(27, 77, 58, .4); }
.sysmap__marker--gold { fill: rgba(201, 168, 106, .6); }
.sysmap__marker--brand.is-active { fill: var(--pine-3); }
.sysmap__marker--gold.is-active { fill: var(--gold); }

/* ── Animated Pulse Dots ── */
.sysmap__wire-dot {
  r: 3.5; fill: var(--gold);
  filter: drop-shadow(0 0 4px rgba(201, 168, 106, .6));
  opacity: 0;
}
.sysmap__wire-dot.is-active {
  opacity: 1;
  animation: sysmap-dot-travel 2.5s ease-in-out infinite;
}
.sysmap__wire-dot--brand {
  fill: var(--pine-3);
  filter: drop-shadow(0 0 4px rgba(27, 77, 58, .6));
}
@keyframes sysmap-dot-travel {
  0% { offset-distance: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── Spotlight Toolbar ── */
.sysmap__toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; padding: 10px 14px;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 12px; flex-wrap: wrap; position: relative; z-index: 3;
}
.sysmap__toolbar-label {
  font-size: 12px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px;
}
.sysmap__spot {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--line);
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--pine-3);
  border-radius: 999px; padding: 5px 13px 5px 5px; cursor: pointer;
  transition: all .2s ease;
}
.sysmap__spot:hover {
  border-color: var(--gold); color: var(--pine-2);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.sysmap__spot.is-active {
  background: var(--pine-2); color: var(--cream); border-color: var(--pine-2);
  box-shadow: var(--shadow-md);
}
.sysmap__spot-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sysmap__spot-avatar--brand { background: var(--pine-soft); }
.sysmap__spot-avatar--gold { background: #FBF5E9; }

/* ── Spotlight Dimming States ── */
.sysmap--spotlight .sysmap__default,
.sysmap--spotlight .sysmap__set,
.sysmap--spotlight .sysmap__hub,
.sysmap--spotlight .sysmap__profilenode,
.sysmap--spotlight .sysmap__card,
.sysmap--spotlight .sysmap__group {
  opacity: .18; filter: grayscale(.5);
  transition: opacity .35s ease, filter .35s ease, transform .2s ease, box-shadow .2s ease;
}
.sysmap--spotlight .is-on-path {
  opacity: 1 !important; filter: none !important;
}
.sysmap--spotlight .sysmap__card.is-on-path {
  box-shadow: 0 0 0 3px rgba(201, 168, 106, .35), var(--shadow-md);
}
.sysmap--spotlight .sysmap__flank::before,
.sysmap--spotlight .sysmap__flank::after,
.sysmap--spotlight .sysmap__set::after,
.sysmap--spotlight .sysmap__down,
.sysmap--spotlight .sysmap__vstub {
  opacity: .15;
  transition: opacity .35s ease;
}
.sysmap--spotlight .sysmap__flank.is-on-path::before,
.sysmap--spotlight .sysmap__flank.is-on-path::after {
  opacity: 1;
}

/* ── Step Number Badges ── */
.sysmap__stepnum {
  display: none; position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 22px; text-align: center;
  z-index: 5; box-shadow: 0 2px 8px rgba(201, 168, 106, .45);
  pointer-events: none;
}
.sysmap--spotlight .sysmap__stepnum.is-visible {
  display: block;
  animation: sysmap-badge-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes sysmap-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Enhanced Node States ── */
.sysmap__profilenode { position: relative; }
.sysmap__profilenode::after {
  content: ""; position: absolute; inset: -5px; border-radius: 18px;
  opacity: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse, rgba(27, 77, 58, .07), transparent 70%);
  animation: sysmap-glow 3.5s ease-in-out infinite;
}
.sysmap__profilenode--gold::after {
  background: radial-gradient(ellipse, rgba(201, 168, 106, .1), transparent 70%);
}
@keyframes sysmap-glow {
  0%, 100% { opacity: 0; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1); }
}

.sysmap__hub::after {
  content: ""; position: absolute; inset: -6px; border-radius: 18px;
  border: 2px solid rgba(201, 168, 106, .25);
  animation: sysmap-hub-ring 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sysmap-hub-ring {
  0%, 100% { opacity: 0; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1); }
}
.sysmap__hub { position: relative; }

/* ── Card & Zone Entry Animations ── */
.sysmap__card {
  animation: sysmap-card-in .5s ease both;
}
.sysmap__card:nth-child(1) { animation-delay: .06s; }
.sysmap__card:nth-child(2) { animation-delay: .14s; }
.sysmap__card:nth-child(3) { animation-delay: .22s; }
.sysmap__card:nth-child(4) { animation-delay: .30s; }
@keyframes sysmap-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.sysmap__stagezone {
  animation: sysmap-zone-in .6s ease .1s both;
}
@keyframes sysmap-zone-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Enhanced Popover Additions ── */
.sysmap-pop__connects {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px 9px; border-top: 1px dashed var(--line-2);
  background: var(--cream);
}
.sysmap-pop__connects-label {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted-2); flex-shrink: 0;
}
.sysmap-pop__conn-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--pine-3);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; cursor: pointer;
  transition: all .15s;
}
.sysmap-pop__conn-chip:hover {
  border-color: var(--gold); background: #FBF5E9; color: #8A6A2F;
}

.sysmap-pop__typing {
  display: inline-flex; gap: 4px; padding: 7px 12px;
  background: #DCF7C5; border-radius: 12px 3px 12px 12px;
  margin-left: auto; max-width: 94%; margin-bottom: 6px;
}
.sysmap-pop__typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #6B8A79;
  animation: sysmap-typing 1.2s ease-in-out infinite;
}
.sysmap-pop__typing-dot:nth-child(2) { animation-delay: .16s; }
.sysmap-pop__typing-dot:nth-child(3) { animation-delay: .32s; }
@keyframes sysmap-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.sysmap-pop__progress {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 8px; border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--muted-2);
}
.sysmap-pop__progress-bar {
  flex: 1; height: 4px; background: var(--cream-3); border-radius: 2px; overflow: hidden;
}
.sysmap-pop__progress-fill {
  height: 100%; border-radius: 2px; background: var(--gold);
  transition: width .3s ease;
}
.sysmap-pop__progress-text { font-weight: 700; white-space: nowrap; }

/* ── Interactive Legend ── */
.sysmap .legend-chip {
  cursor: pointer; padding: 3px 10px; border-radius: 999px;
  border: 1.5px solid transparent; transition: all .2s ease;
}
.sysmap .legend-chip:hover {
  border-color: var(--line-2); background: var(--white);
}
.sysmap .legend-chip.is-filtering {
  border-color: var(--gold); background: #FBF5E9;
  box-shadow: var(--shadow-sm);
}
.sysmap .legend-chip.is-dimmed { opacity: .3; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .sysmap__wire-dot { animation: none !important; opacity: 0 !important; }
  .sysmap__profilenode::after { animation: none; opacity: 0; }
  .sysmap__hub::after { animation: none; opacity: 0; }
  .sysmap__card { animation: none !important; opacity: 1; transform: none; }
  .sysmap__stagezone { animation: none; opacity: 1; }
  .sysmap__stepnum { animation: none; }
  .sysmap-pop.is-open { animation: none; }
  .sysmap-pop__typing-dot { animation: none; opacity: .4; }
}

/* ── Responsive & Mobile Polish ── */
@media (max-width: 860px) {
  .sysmap__svg { display: none; }
  .sysmap__toolbar {
    gap: 6px; padding: 8px 10px; margin-bottom: 14px;
    justify-content: flex-start; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sysmap__spot { font-size: 12px; padding: 5px 10px; white-space: nowrap; }
  .sysmap__toolbar-label { display: none; }
  .sysmap__stepnum { width: 18px; height: 18px; font-size: 10px; line-height: 18px; top: -7px; right: -7px; }

  /* Stack routing zone neatly on mobile */
  .sysmap__mid {
    display: flex; flex-direction: column; gap: 14px;
  }
  .sysmap__flank {
    padding: 0 !important;
  }
  .sysmap__flank-label {
    text-align: left !important;
    margin-bottom: 4px;
  }
  .sysmap__flank--left .sysmap__set {
    border-right: 1.5px solid var(--line-2);
    border-left: 3.5px solid rgba(27, 77, 58, .45);
  }
  .sysmap__hubcell {
    margin: 4px 0;
  }
  .sysmap__hub {
    width: 100%; justify-content: center;
    padding: 10px 14px; font-size: 13px;
  }
  .sysmap__default {
    width: 100%; justify-content: center;
    padding: 8px 12px;
  }
  .sysmap__profiles {
    grid-template-columns: 1fr;
    gap: 10px; margin-top: 14px;
  }
  .sysmap__profilenode {
    min-width: 0; width: 100%;
    padding: 10px 14px;
  }

  /* Phase banners */
  .sysmap__phase-banner {
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 10px 12px;
  }
  .sysmap__phase-banner--sales,
  .sysmap__phase-banner--closed {
    margin-top: 28px;
  }

  /* Bottom sheet style popover on mobile */
  .sysmap-pop {
    position: fixed !important;
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom: none !important;
    max-height: 85vh;
    box-shadow: 0 -8px 32px rgba(15, 46, 34, 0.25) !important;
    transform: translateY(100%) !important;
    transition: transform .24s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease !important;
  }
  .sysmap-pop.is-open {
    transform: translateY(0) !important;
  }
  .sysmap-pop__scroll {
    max-height: calc(85vh - 100px) !important;
  }
  .sysmap-pop__head {
    padding: 12px 14px 10px;
  }
  .sysmap-pop__body {
    padding: 12px 14px 16px;
  }
  .sysmap-pop__where {
    padding: 8px 14px 12px;
    border-radius: 0;
  }
}

.sysmap__default,
.sysmap__hub,
.sysmap__profilenode,
.sysmap__stage {
  position: relative;
}