/* The client recovery story. All rules stay inside this one demonstration. */
.brain-demo.client-journey {
  --journey-signal: #81b2fb;
  --journey-traffic: #93dbe8;
  --journey-line: #293d57;
  --journey-subtle: #849ab9;
  --journey-warning: #e4b77e;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 2.1vw, 24px);
  border: 1px solid #304b6b;
  border-radius: 10px;
  background: linear-gradient(145deg, #142238 0%, #0d192a 65%, #0b1626 100%);
  box-shadow: 0 24px 65px #02091429, inset 0 1px 0 #bbd8ff05;
  color: #e8f0fc;
}
.client-journey > * { min-width: 0; }
.client-journey .demo-heading {
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--journey-line);
}
.client-journey .demo-heading > div { min-width: 0; gap: 10px; }
.client-journey .demo-heading b { font-size: 13px; font-weight: 650; letter-spacing: -.015em; }
.client-journey .brain-link-mark.mini { width: 27px; height: 25px; }
.client-journey .demo-tag {
  flex: none;
  padding: 5px 7px;
  border-color: #345171;
  border-radius: 3px;
  color: #a1b7d5;
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .11em;
}
.client-journey .journey-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 12px;
  line-height: 1.5;
}
.client-journey .journey-caption > span:first-child { font-size: 12px; font-weight: 550; color: #d6e5fa; }
.client-journey #journey-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .065em;
  color: #94b8e6;
}
.client-journey .journey-graph {
  min-width: 0;
  padding: 13px 12px 5px;
  overflow: hidden;
  border: 1px solid #253b56;
  border-radius: 6px;
  background: #091524a6;
}
.client-journey .journey-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 5px 8px;
  color: #9fb3cf;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
}
.client-journey .journey-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.client-journey .journey-legend i { width: 14px; height: 2px; flex: none; border-radius: 1px; background: var(--journey-signal); }
.client-journey .journey-legend i.traffic-key { background: var(--journey-traffic); }
.client-journey .journey-graph svg { display: block; width: 100%; max-width: 100%; height: auto; max-height: 210px; overflow: hidden; }
.client-journey .journey-graph svg text { font-family: var(--font, Manrope, Arial, sans-serif); }
.client-journey .journey-grid { fill: none; stroke: #25384f; stroke-width: .8; stroke-dasharray: 2 5; }
.client-journey .journey-lane-divider { fill: none; stroke: #304760; stroke-width: .8; }
.client-journey .journey-axis { fill: #829ab9; font-size: 9px; font-weight: 550; letter-spacing: .065em; }
.client-journey .journey-lane-label,
.client-journey .journey-lane-title { fill: #b9cde8; font-size: 10px; font-weight: 600; letter-spacing: .015em; }
.client-journey .journey-axis-value,
.client-journey .journey-unit-label { fill: #7d97b7; font-size: 9px; font-variant-numeric: tabular-nums; }
.client-journey .journey-signal-area { opacity: .72; }
.client-journey .journey-signal-line,
.client-journey .journey-traffic-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.client-journey .journey-signal-line { stroke: var(--journey-signal); }
.client-journey .journey-traffic-line { stroke: var(--journey-traffic); stroke-width: 2.5; }
.client-journey #journey-clip { transition: width 1700ms cubic-bezier(.22,.61,.36,1); }
.client-journey #journey-guide {
  stroke: #526e93;
  stroke-width: .8;
  stroke-dasharray: 3 4;
  opacity: .65;
  transition: transform 1700ms cubic-bezier(.22,.61,.36,1), opacity 400ms ease;
}
.client-journey #journey-signal-dot,
.client-journey #journey-traffic-dot {
  stroke: #0b1829;
  stroke-width: 2;
  transition: cx 1700ms cubic-bezier(.22,.61,.36,1), cy 1700ms cubic-bezier(.22,.61,.36,1);
}
.client-journey #journey-signal-dot { fill: #a8ceff; }
.client-journey #journey-traffic-dot { fill: #b0edf3; }
.client-journey[data-playback="playing"] #journey-guide { opacity: .9; }

/* Six direct-access stages remain comfortably tappable. */
.client-journey .journey-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0 14px;
}
.client-journey .journey-steps button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 51px;
  padding: 8px 2px 7px;
  border: 1px solid transparent;
  border-top-color: #2a405d;
  border-radius: 0 0 4px 4px;
  color: #8da2bf;
  font-size: 9px;
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}
.client-journey .journey-steps button > span {
  font-size: 9px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .07em;
  color: #6e8bb0;
}
.client-journey .journey-steps button:hover { background: #182c46; color: #dcecff; border-top-color: #608ebc; }
.client-journey .journey-steps button.is-complete { color: #a4c6ed; border-top-color: #4c769e; }
.client-journey .journey-steps button.is-complete > span { color: #8ebff2; }
.client-journey .journey-steps button.is-current,
.client-journey .journey-steps button[aria-current="step"] {
  background: #193656;
  border-top-color: #94c3ff;
  color: #f1f6ff;
}
.client-journey .journey-steps button.is-current > span,
.client-journey .journey-steps button[aria-current="step"] > span { color: #aed3ff; }
.client-journey .journey-steps button:focus-visible,
.client-journey .demo-trigger:focus-visible { outline: 2px solid #a8ceff; outline-offset: 3px; position: relative; z-index: 1; }

.client-journey .journey-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 12px;
  border: 1px solid var(--journey-line);
  border-radius: 5px;
  background: #0a1728;
  overflow: hidden;
}
.client-journey .journey-checks > div { min-width: 0; padding: 11px 9px 12px; border-right: 1px solid var(--journey-line); }
.client-journey .journey-checks > div:last-child { border-right: 0; }
.client-journey .journey-checks dt { margin: 0 0 8px; color: #95acc9; font-size: 9px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.client-journey .journey-checks dd { display: flex; align-items: center; gap: 5px; min-height: 20px; margin: 0; color: #7890b0; line-height: 1.4; }
.client-journey [data-check-value] { min-width: 0; font-size: 10px; font-weight: 600; overflow-wrap: anywhere; transition: color 500ms ease; }
.client-journey .check-indicator {
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  opacity: .8;
  transition: color 500ms ease, border-color 500ms ease, background 500ms ease;
}
.client-journey .journey-checks [data-state="warning"] dd { color: var(--journey-warning); }
.client-journey .journey-checks [data-state="working"] dd { color: #a0cbff; }
.client-journey .journey-checks [data-state="passed"] dd { color: #a9dbf6; }
.client-journey .journey-checks [data-state="passed"] .check-indicator { background: #21415b; border-color: #5a93bd; color: #c6e9ff; opacity: 1; }
.client-journey .journey-checks [data-state="waiting"] .check-indicator { border-color: #3b5270; color: #7e99bc; }
.client-journey .signal-bars { display: inline-flex; align-items: flex-end; flex: 0 0 20px; width: 20px; height: 17px; gap: 2px; }
.client-journey .signal-bars i { display: block; width: 3px; flex: 0 0 3px; height: 4px; border-radius: 1px 1px 0 0; background: #2d4563; transition: background 700ms ease; }
.client-journey .signal-bars i:nth-child(1) { background: var(--journey-warning); }
.client-journey .signal-bars i:nth-child(2) { height: 8px; transition-delay: 90ms; }
.client-journey .signal-bars i:nth-child(3) { height: 12px; transition-delay: 180ms; }
.client-journey .signal-bars i:nth-child(4) { height: 17px; transition-delay: 270ms; }
.client-journey[data-client-stage="2"] .signal-bars i,
.client-journey[data-client-stage="3"] .signal-bars i,
.client-journey[data-client-stage="4"] .signal-bars i,
.client-journey[data-client-stage="5"] .signal-bars i,
.client-journey [data-check="wifi"][data-state="passed"] .signal-bars i { background: #98cbff; }

.client-journey .demo-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 124px;
  padding: 18px 16px;
  border: 1px solid #314866;
  border-radius: 5px;
  background: #0c1a2d;
  transition: border-color 700ms ease, background 700ms ease;
}
.client-journey .demo-event > span {
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  border: 1px solid #92744e66;
  border-radius: 50%;
  color: #e5ba84;
  background: #b58c5320;
  font-size: 14px;
  line-height: 1;
  transition: color 700ms ease, border-color 700ms ease, background 700ms ease;
}
.client-journey .demo-event > div { min-width: 0; }
.client-journey .demo-event strong { display: block; margin: 0 0 7px; color: #e6effc; font-size: 12px; font-weight: 650; line-height: 1.6; letter-spacing: -.015em; }
.client-journey .demo-event p { color: #a1b5d0; font-size: 10.5px; line-height: 1.85; }
.client-journey[data-demo-phase="understand"] .demo-event { border-color: #3c5b7d; }
.client-journey[data-demo-phase="understand"] .demo-event > span { background: #244b7430; border-color: #537da7; color: #aed4ff; }
.client-journey[data-demo-phase="heal"] .demo-event { background: #10243a; border-color: #48779d; }
.client-journey[data-demo-phase="heal"] .demo-event > span { background: #2d5c7733; border-color: #6cacc8; color: #c6eaff; }
.client-journey .journey-progress { height: 2px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: #263b56; }
.client-journey .journey-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #8bbcf9;
  transform: scaleX(var(--journey-progress, 0));
  transform-origin: left center;
  transition: transform 160ms linear, background 500ms ease;
}
.client-journey[data-playback="complete"] .journey-progress > span { background: #9bd9ef; }
.client-journey .demo-trigger {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 47px;
  margin-top: 13px;
  padding: 11px 15px;
  border: 1px solid #42658c;
  border-radius: 5px;
  color: #b8d7ff;
  background: #17314f;
  white-space: normal;
}
.client-journey .demo-trigger:hover { border-color: #749dcb; background: #214363; }
.client-journey .demo-trigger [data-play-label] { font-size: 11px; font-weight: 650; line-height: 1.5; text-align: left; }
.client-journey .demo-trigger [data-play-icon] { flex: none; min-width: 16px; font-size: 18px; font-weight: 400; line-height: 1; text-align: center; }
.client-journey[data-playback="playing"] .demo-trigger { background: #12273f; border-color: #4d6c92; }
.client-journey[data-playback="paused"] .demo-trigger { border-color: #7b9fc6; }
.client-journey .journey-playback-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; color: #8ca5c5; font-size: 8px; line-height: 1.6; }
.client-journey #journey-playback-state { color: #a4bedf; font-variant-numeric: tabular-nums; }
.client-journey .micro-copy { margin-top: 11px; color: #829abb; font-size: 8px; line-height: 1.8; }

/* Container sizing also protects narrow desktop grid columns. */
@container (max-width: 360px) {
  .client-journey .journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .client-journey .journey-steps button { min-height: 46px; flex-direction: row; gap: 7px; font-size: 10px; padding: 10px 7px; }
  .client-journey .journey-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-journey .journey-checks > div { padding: 11px 12px; }
  .client-journey .journey-checks > div:nth-child(2) { border-right: 0; }
  .client-journey .journey-checks > div:nth-child(-n+2) { border-bottom: 1px solid var(--journey-line); }
  .client-journey .journey-checks dt { font-size: 9px; margin-bottom: 6px; }
  .client-journey [data-check-value] { font-size: 11px; }
  .client-journey .demo-event { min-height: 140px; padding: 16px 13px; gap: 10px; }
  .client-journey .demo-event strong { font-size: 11.5px; }
  .client-journey .demo-event p { font-size: 10.5px; }
  .client-journey .journey-graph { padding: 12px 7px 5px; }
  .client-journey .journey-legend { gap: 15px; font-size: 8px; padding-left: 4px; }
}
@media (max-width: 480px) {
  .brain-demo.client-journey { padding: 19px 17px; border-radius: 8px; }
  .client-journey .journey-caption { margin-top: 17px; gap: 8px; }
  .client-journey .journey-caption > span:first-child { font-size: 11px; }
  .client-journey #journey-count { font-size: 9px; }
  .client-journey .journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .client-journey .journey-steps button { min-height: 46px; flex-direction: row; gap: 7px; font-size: 10px; }
  .client-journey .journey-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-journey .journey-checks > div { padding: 11px 12px; }
  .client-journey .journey-checks > div:nth-child(2) { border-right: 0; }
  .client-journey .journey-checks > div:nth-child(-n+2) { border-bottom: 1px solid var(--journey-line); }
  .client-journey [data-check-value] { font-size: 11px; }
  .client-journey .demo-event { min-height: 140px; }
  .client-journey .journey-playback-note { font-size: 8px; }
  .client-journey .micro-copy { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-demo.client-journey,
  .client-journey *,
  .client-journey *::before,
  .client-journey *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (min-width: 381px) and (max-width: 480px) {
  .client-journey .journey-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .client-journey .journey-steps button { flex-direction: column; gap: 4px; min-height: 46px; padding: 6px 0; font-size: 8px; }
}

/* Visitors choose which recovery story to run. */
#intelligence .scenario-picker{margin:25px 0 0;display:grid;gap:8px}
#intelligence .scenario-picker-label{font-size:8px;letter-spacing:.11em;color:#8daed6;margin-bottom:3px;font-weight:650}
#intelligence .scenario-choice{display:grid;grid-template-columns:22px 1fr 15px;gap:12px;align-items:center;width:100%;padding:14px 15px;text-align:left;border:1px solid #2d4564;border-radius:5px;background:#0c1727;color:#8ca6c8}
#intelligence .scenario-choice strong{display:block;font-size:12px;font-weight:600;line-height:1.6;color:#bfcee2}
#intelligence .scenario-choice small{display:block;font-size:9px;line-height:1.7;margin-top:2px;color:#7d97b8}
#intelligence .scenario-choice-number{font-size:9px;letter-spacing:.06em}
#intelligence .scenario-choice-arrow{font-size:17px}
#intelligence .scenario-choice:hover{border-color:#618bb8;background:#14253b}
#intelligence .scenario-choice.is-selected{border-color:#729fcf;background:#162d49;color:#b9dbff}
#intelligence .scenario-choice.is-selected strong{color:#e3f0ff}
#intelligence .scenario-choice.is-selected small{color:#a8c3e5}
#intelligence .scenario-choice:focus-visible{outline:2px solid #b0d5ff;outline-offset:3px}
#intelligence .scenario-picker+.brain-steps{margin-top:23px}
.client-journey[data-scenario="access-point"] .signal-bars{display:none}
.client-journey[data-scenario="client"] .first-check-icon{display:none}
.client-journey .journey-checks [data-state="isolated"] dd{color:#9eafc5}
.client-journey .journey-checks [data-state="isolated"] .check-indicator{border-color:#637894;color:#b2bfd0;background:#1d2c40}
.client-journey[data-scenario="access-point"] .demo-event{min-height:133px}
@media(max-width:480px){#intelligence .scenario-choice{padding:13px 12px;gap:9px}#intelligence .scenario-choice small{font-size:9px}.client-journey[data-scenario="access-point"] .demo-event{min-height:157px}}

.client-journey .journey-caption+.demo-trigger{margin:0 0 14px}