/* Voice AI diagrams — scoped for .voice-ai-diagram */

/* The mock markup paints its charts and rules with the shared design tokens.
   Those are declared on .sol-body for the Solutions pages, and the platform
   pages never bring them into scope, so `fill="var(--accent-subtle)"` fell
   back to black and `stroke="var(--border)"` fell back to none — solid black
   chart wedges and missing gridlines. Same values as css/solutions.css:14-43,
   so the identical markup now renders identically in both places. */
.voice-ai-diagram {
  --font-sans: inherit;
  --accent: #094fb7;
  --accent-subtle: #f0f5ff;
  --accent-subtle-2: #dfeaff;
  --text-tertiary: #6c757d;
  --border: #dee2e6;
  --border-subtle: #e9ecef;
  --marketing-deep: #0a1425;
}

.voice-ai-diagram .mock, .voice-ai-diagram .table-scroll {
 --focus-ring: #094fb7; 
}

.voice-ai-diagram .tnum {
 font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; 
}

.voice-ai-diagram .arrow-link {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  font-size: 1rem;
  color: #094fb7;
  text-decoration: none;
  border-bottom: 2px solid transparent;

}

.voice-ai-diagram .arrow-link .icon {
 width: 18px; height: 18px; transition: transform 150ms cubic-bezier(0.16, 0.84, 0.44, 1); 
}

.voice-ai-diagram .arrow-link:hover {
 color: #003a8c; 
}

.voice-ai-diagram .arrow-link:hover .icon {
 transform: translateX(4px); 
}

.voice-ai-diagram .on-dark .arrow-link {
 color: #7fb3f5; 
}

.voice-ai-diagram .on-dark .arrow-link:hover {
 color: #ffffff; 
}

.voice-ai-diagram .tabs__tab:active {
 transform: translateY(1px); 
}

.voice-ai-diagram .card__icon {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 10px;
  background: #f8f9fa;
  color: #094fb7;
  margin-bottom: 24px;

}

.voice-ai-diagram .card__title {
 margin-bottom: 12px; 
}

.voice-ai-diagram .card__body {
 font-size: 1rem; color: #212529; 
}

.voice-ai-diagram .card__foot {
 margin-top: 16px; 
}

.voice-ai-diagram .card--problem .card__icon {
 background: #fff1f0; color: #dc3545; 
}

.voice-ai-diagram .card--dark {

  background: #0a1425;
  border-color: #dee2e6;
  color: #ffffff;

}

.voice-ai-diagram .on-dark .card .card__body, .voice-ai-diagram .card--dark .card__body {
 color: #7fb3f5; 
}

.voice-ai-diagram .on-dark .card .card__icon, .voice-ai-diagram .card--dark .card__icon {
 background: #0a3572; color: #7fb3f5; 
}

.voice-ai-diagram .card--dark:hover {
 border-color: #7fb3f5; box-shadow: none; 
}

.voice-ai-diagram .mock-figure {
 margin: 0; 
}

.voice-ai-diagram .mock-cap {

  margin-top: 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6c757d;
  max-width: 62ch;

}

.voice-ai-diagram .on-dark .mock-cap {
 color: #93a9c9; 
}

.voice-ai-diagram .hero .mock-cap, .voice-ai-diagram .cta-band .mock-cap {
 color: #7fb3f5; 
}

.voice-ai-diagram .mock {

  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0, 12, 34, 0.38), 0 4px 14px rgba(0, 12, 34, 0.2);
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;

}

/* Reset Bootstrap margins inside mocks */
.voice-ai-diagram .mock p,
.voice-ai-diagram .mock ul,
.voice-ai-diagram .mock li {
  margin-top: 0;
  margin-bottom: 0;
}
.voice-ai-diagram .mock ul {
  padding-left: 0;
  list-style: none;
}
.voice-ai-diagram .mock__main p {
  margin-bottom: 0;
}

.voice-ai-diagram .mock--flat {
 box-shadow: 0 12px 32px rgba(0, 31, 77, 0.12), 0 2px 6px rgba(0, 31, 77, 0.06); 
}

.voice-ai-diagram .mock__chrome {

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #eef1f5;
  border-bottom: 1px solid #e5e5e5;

}

.voice-ai-diagram .mock__dots {
 display: flex; gap: 6px; flex: none; 
}

.voice-ai-diagram .mock__dots i {
 width: 10px; height: 10px; border-radius: 50%; background: #a3a3a3; display: block; 
}

.voice-ai-diagram .mock__title {

  font-size: 0.75rem;
  font-weight: 700;
  color: #6c757d;
  letter-spacing: 0.01em;

}

.voice-ai-diagram .mock__tabs {
 display: flex; gap: 4px; margin-left: auto; 
}

.voice-ai-diagram .mock__tab {

  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6c757d;
  background: #ffffff;
  border: 1px solid #e5e5e5;

}

.voice-ai-diagram .mock__tab--on {
 background: #094fb7; color: #ffffff; border-color: #094fb7; 
}

.voice-ai-diagram .mock__body {
 display: grid; background: #f7f9fc; 
}

.voice-ai-diagram .mock__rail {

  background: #072146;
  color: #7fb3f5;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;

}

.voice-ai-diagram .mock__railhead {

  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a9c9;
  padding: 0 10px 12px;

}

.voice-ai-diagram .mock__railitem {

  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;

}

.voice-ai-diagram .mock__railitem--on {
 background: #0e3468; color: #ffffff; 
}

.voice-ai-diagram .mock__railitem i {

  width: 7px; height: 7px; border-radius: 2px;
  background: #93a9c9;
  display: block;
  flex: none;

}

.voice-ai-diagram .mock__railitem--on i {
 background: #7fb3f5; 
}

.voice-ai-diagram .mock__railfoot {
 margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px; 
}

.voice-ai-diagram .av {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #094fb7;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: none;

}

.voice-ai-diagram .av--sm {
 width: 26px; height: 26px; font-size: 0.625rem; 
}

.voice-ai-diagram .av--lg {
 width: 44px; height: 44px; font-size: 0.875rem; 
}

.voice-ai-diagram .av--alt {
 background: #0a1425; 
}

.voice-ai-diagram .av--tint {
 background: #f8f9fa; color: #094fb7; 
}

.voice-ai-diagram .av--ghost {
 background: #f5f5f5; color: #212529; border: 1px solid #e5e5e5; 
}

.voice-ai-diagram .mock__main {
 padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; 
}

.voice-ai-diagram .mock > .mock__main {
 background: #f7f9fc; 
}

.voice-ai-diagram .mock sup {
 font-size: 0.625rem; font-weight: 800; color: #094fb7; padding-left: 1px; 
}

.voice-ai-diagram .mock__panel {

  background: #ffffff;
  border-left: 1px solid #e5e5e5;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;

}

.voice-ai-diagram .mock__sectitle {

  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6c757d;

}

.voice-ai-diagram .mock__flush {
 padding: 0; overflow: hidden; 
}

.voice-ai-diagram .mockcard {

  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 12px;

}

.voice-ai-diagram .mockcard--accent {
 border-color: #094fb7; box-shadow: 0 0 0 3px #f8f9fa; 
}

.voice-ai-diagram .mockcard--tint {
 background: #f8f9fa; border-color: #d2e8ff; 
}

.voice-ai-diagram .mock__callhead {
 display: flex; align-items: center; gap: 12px; flex-wrap: wrap; 
}

.voice-ai-diagram .mock__callwho {
 min-width: 0; flex: 1 1 120px; 
}

.voice-ai-diagram .mock__callname {
 display: block; font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em; 
}

.voice-ai-diagram .mock__callmeta {
 display: block; color: #6c757d; font-size: 0.6875rem; 
}

.voice-ai-diagram .mock__calltimer {

  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #212529;

}

.voice-ai-diagram .pill {

  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

}

.voice-ai-diagram .pill--live {
 background: #fff1f0; color: #c9202e; 
}

.voice-ai-diagram .pill--live i {
 width: 6px; height: 6px; border-radius: 50%; background: #dc3545; display: block; 
}

.voice-ai-diagram .pill--ok {
 background: #f6ffed; color: #157347; 
}

.voice-ai-diagram .pill--warn {
 background: #fffbe6; color: #8a6d00; 
}

.voice-ai-diagram .pill--info {
 background: #f8f9fa; color: #094fb7; 
}

.voice-ai-diagram .pill--neutral {
 background: #f5f5f5; color: #5d6469; 
}

.voice-ai-diagram .wave {
 width: 100%; height: 34px; color: #094fb7; 
}

.voice-ai-diagram .turn {
 display: flex; gap: 9px; align-items: flex-start; 
}

.voice-ai-diagram .turn__txt {

  border-radius: 10px;
  padding: 8px 11px;
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 92%;

}

.voice-ai-diagram .turn--cust .turn__txt {
 background: #f5f5f5; color: #0a0a0a; 
}

.voice-ai-diagram .turn--agent .turn__txt {
 background: #f8f9fa; color: #0a0a0a; 
}

.voice-ai-diagram .turn__time {
 font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace; font-size: 0.625rem; color: #6c757d; flex: none; padding-top: 9px; 
}

.voice-ai-diagram .copilot {
 display: flex; flex-direction: column; gap: 9px; 
}

.voice-ai-diagram .copilot__head {
 display: flex; align-items: center; gap: 8px; flex-wrap: wrap; 
}

.voice-ai-diagram .copilot__badge {

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #094fb7;

}

.voice-ai-diagram .copilot__text {
 font-size: 0.8125rem; line-height: 1.55; color: #0a0a0a; 
}

.voice-ai-diagram .mock__actions {
 display: flex; gap: 6px; flex-wrap: wrap; 
}

.voice-ai-diagram .kv {
 display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.75rem; 
}

.voice-ai-diagram .kv + .kv {
 margin-top: 7px; 
}

.voice-ai-diagram .kv__k {
 color: #6c757d; 
}

.voice-ai-diagram .kv__v {
 font-weight: 700; color: #0a0a0a; 
}

.voice-ai-diagram .dot {
 width: 8px; height: 8px; border-radius: 50%; display: inline-block; 
}

.voice-ai-diagram .dot--ok {
 background: #198754; 
}

.voice-ai-diagram .dot--warn {
 background: #ffc107; 
}

.voice-ai-diagram .dot--off {
 background: #a3a3a3; 
}

.voice-ai-diagram .segbar {
 display: flex; gap: 4px; flex-wrap: wrap; 
}

.voice-ai-diagram .segbar span {

  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid #e5e5e5;
  color: #212529;
  background: #ffffff;

}

.voice-ai-diagram .segbar span.is-on {
 background: #094fb7; color: #ffffff; border-color: #094fb7; 
}

.voice-ai-diagram .meter {
 flex: 1 1 auto; height: 7px; border-radius: 4px; background: #f5f5f5; overflow: hidden; min-width: 60px; 
}

.voice-ai-diagram .meter i {
 display: block; height: 100%; background: #198754; 
}

.voice-ai-diagram .meter--warn i {
 background: #ffc107; 
}

.voice-ai-diagram .meter--danger i {
 background: #dc3545; 
}

.voice-ai-diagram .meter--accent i {
 background: #094fb7; 
}

.voice-ai-diagram .usage-row .meter {
 min-width: 40px; 
}

.voice-ai-diagram .mock__rowhead {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;

}

.voice-ai-diagram .mock__total {

  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0a0a0a;

}

.voice-ai-diagram .score-row {
 display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; gap: 10px; align-items: center; font-size: 0.75rem; 
}

.voice-ai-diagram .score-row + .score-row {
 margin-top: 7px; 
}

.voice-ai-diagram .score-row__val {
 font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace; font-size: 0.6875rem; text-align: right; font-weight: 700; 
}

.voice-ai-diagram .table-scroll {

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: #ffffff;

}

.voice-ai-diagram .table-scroll:focus-visible {
 outline: 3px solid #094fb7; outline-offset: 2px; 
}

.voice-ai-diagram .dtable {
 width: 100%; font-variant-numeric: tabular-nums; 
}

.voice-ai-diagram .dtable th, .voice-ai-diagram .dtable td {

  padding: 16px;
  text-align: left;
  vertical-align: top;
  font-size: 0.9375rem;
  border-bottom: 1px solid #e5e5e5;

}

.voice-ai-diagram .dtable thead th {

  background: #f5f5f5;
  border-bottom: 2px solid #dee2e6;
  font-weight: 800;
  color: #212529;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;

}

.voice-ai-diagram .dtable tbody th {

  font-weight: 700;
  color: #0a0a0a;
  width: 34%;

}

.voice-ai-diagram .dtable tbody tr:last-child th, .voice-ai-diagram .dtable tbody tr:last-child td {
 border-bottom: 0; 
}

.voice-ai-diagram .dtable tbody tr:hover td, .voice-ai-diagram .dtable tbody tr:hover th {
 background: #fafafa; 
}

.voice-ai-diagram .dtable--wide {
 min-width: 760px; 
}

.voice-ai-diagram .dtable--compact th, .voice-ai-diagram .dtable--compact td {
 padding: 12px 16px; 
}

.voice-ai-diagram .dtable code {
 font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace; font-size: 0.9em; color: #094fb7; 
}

.voice-ai-diagram .dtable__band th {

  background: #0a1425;
  color: #ffffff;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  border-bottom: 0;

}

.voice-ai-diagram .dtable--pinned tbody th, .voice-ai-diagram .dtable--pinned thead th:first-child {

  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  border-right: 1px solid #e5e5e5;

}

.voice-ai-diagram .dtable--pinned thead th:first-child {
 background: #f5f5f5; z-index: 3; 
}

.voice-ai-diagram .diagram {

  background-color: #ffffff;
  /* Edge shadows that appear only while there is more to scroll to. */
  background-image:
    linear-gradient(to right, #ffffff 60%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff 60%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(9, 79, 183, 0.18), rgba(9, 79, 183, 0)),
    linear-gradient(to left, rgba(9, 79, 183, 0.18), rgba(9, 79, 183, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(0, 31, 77, 0.06), 0 2px 8px rgba(0, 31, 77, 0.05);
  overflow-x: auto;

}

.voice-ai-diagram .diagram svg {
 width: 100%; height: auto; min-width: 520px; 
}

.voice-ai-diagram .on-dark .diagram {
 background: #0a1425; border-color: #dee2e6; 
}

.voice-ai-diagram .diagram__cap {

  margin-top: 12px;
  font-size: 0.8125rem;
  color: #6c757d;
  width:100%!important;
  display:block!important;

}

.voice-ai-diagram .on-dark .diagram__cap {
 color: #93a9c9; 
}

.voice-ai-diagram .dg-box {
 fill: #ffffff; stroke: #a3a3a3; stroke-width: 1.5; 
}

.voice-ai-diagram .dg-box--accent {
 fill: #f8f9fa; stroke: #094fb7; 
}

.voice-ai-diagram .dg-box--dark {
 fill: #0a1425; stroke: #0a1425; 
}

.voice-ai-diagram .dg-boundary {
 fill: none; stroke: #094fb7; stroke-width: 2; stroke-dasharray: 7 5; 
}

.voice-ai-diagram .dg-line {
 stroke: #6c757d; stroke-width: 1.5; fill: none; 
}

.voice-ai-diagram .dg-line--flow {
 stroke: #094fb7; stroke-width: 2.5; 
}

.voice-ai-diagram .dg-label {
 fill: #0a0a0a; font-size: 13px; font-weight: 600; font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif; 
}

.voice-ai-diagram .dg-label--sm {
 fill: #6c757d; font-size: 11px; font-weight: 600; 
}

.voice-ai-diagram .dg-label--inv {
 fill: #ffffff; 
}

.voice-ai-diagram .longform .table-scroll, .voice-ai-diagram .longform .diagram {
 max-width: none; 
}

.voice-ai-diagram .tabs__list {

  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid #e5e5e5;
  margin-bottom: 32px;

}

.voice-ai-diagram .tabs__tab {

  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: #212529;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;

}

.voice-ai-diagram .tabs__tab:hover {
 color: #003a8c; background: #f8f9fa; 
}

.voice-ai-diagram .tabs__tab[aria-selected="true"] {
 color: #094fb7; border-bottom-color: #094fb7; 
}

.voice-ai-diagram .on-dark .tabs__list {
 border-bottom-color: #24548f; 
}

.voice-ai-diagram .on-dark .tabs__tab {
 color: #7fb3f5; 
}

.voice-ai-diagram .on-dark .tabs__tab:hover {
 color: #ffffff; background: #0a1425; 
}

.voice-ai-diagram .on-dark .tabs__tab[aria-selected="true"] {
 color: #ffffff; border-bottom-color: #7fb3f5; 
}

.voice-ai-diagram .tabs__panel[hidden] {
 display: none; 
}

@media (max-width: 640px) {
.voice-ai-diagram .dtable th, .voice-ai-diagram .dtable td {
 padding: 12px; overflow-wrap: anywhere; 
}
.voice-ai-diagram .dtable tbody th {
 width: 40%; 
}
.voice-ai-diagram .dtable--pinned {
 table-layout: fixed; 
}
.voice-ai-diagram .dtable--pinned tbody th, .voice-ai-diagram .dtable--pinned thead th:first-child {
 width: min(150px, 40vw); 
}
}

@media (max-width: 560px) {
.voice-ai-diagram .usage-row .meter {
 display: none;
}
}

.voice-ai-diagram .mock--desk .mock__body {
 grid-template-columns: 136px minmax(0, 1fr) 204px; 
}

.voice-ai-diagram .mock--inbox .mock__body {
 grid-template-columns: 160px minmax(0, 1fr); 
}

.voice-ai-diagram .mock--ground .mock__body {
 grid-template-columns: 148px minmax(0, 1fr); 
}

.voice-ai-diagram .mock--router .mock__body {
 grid-template-columns: 150px minmax(0, 1fr); 
}

.voice-ai-diagram .mock--finops .mock__body {
 grid-template-columns: 148px minmax(0, 1fr); 
}

.voice-ai-diagram .mock--builder .mock__body {
 grid-template-columns: 150px minmax(0, 1fr); 
}

.voice-ai-diagram .mock--wfm .mock__body {
 grid-template-columns: 148px minmax(0, 1fr); 
}

.voice-ai-diagram .mock--quality .mock__body {
 grid-template-columns: 148px minmax(0, 1fr) 190px; 
}

.voice-ai-diagram .mock--analytics .mock__body {
 grid-template-columns: minmax(0, 1fr); 
}

@media (max-width: 1180px) {
.voice-ai-diagram .mock--desk .mock__body {
 grid-template-columns: minmax(0, 1fr) 220px; 
}
.voice-ai-diagram .mock--quality .mock__body {
 grid-template-columns: minmax(0, 1fr) 190px; 
}
.voice-ai-diagram .mock--desk .mock__rail, .voice-ai-diagram .mock--quality .mock__rail, .voice-ai-diagram .mock--inbox .mock__rail {
 display: none; 
}
.voice-ai-diagram .mock--inbox .mock__body {
 grid-template-columns: minmax(0, 1fr); 
}
}

@media (max-width: 860px) {
.voice-ai-diagram .mock--ground .mock__rail, .voice-ai-diagram .mock--router .mock__rail, .voice-ai-diagram .mock--builder .mock__rail, .voice-ai-diagram .mock--wfm .mock__rail, .voice-ai-diagram .mock--finops .mock__rail {
 display: none; 
}
.voice-ai-diagram .mock--ground .mock__body, .voice-ai-diagram .mock--router .mock__body, .voice-ai-diagram .mock--builder .mock__body, .voice-ai-diagram .mock--wfm .mock__body, .voice-ai-diagram .mock--finops .mock__body {
 grid-template-columns: minmax(0, 1fr); 
}
}

@media (max-width: 991.98px) {
.voice-ai-diagram .dtable--wide {
 min-width: 0;
}
}

@media (max-width: 575.98px) {
.voice-ai-diagram .diagram {
 padding: 16px;
}
}

@media (max-width: 760px) {
.voice-ai-diagram .mock--desk .mock__body, .voice-ai-diagram .mock--quality .mock__body {
 grid-template-columns: minmax(0, 1fr); 
}
.voice-ai-diagram .mock--desk .mock__panel, .voice-ai-diagram .mock--quality .mock__panel {
 display: none; 
}
.voice-ai-diagram .mock__chrome .mock__tabs {
 display: none; 
}
}

@media print {
.voice-ai-diagram .tabs__panel[hidden] {
 display: block !important; 
}
.voice-ai-diagram .table-scroll {
 overflow: visible; border-color: #a3a3a3; 
}
.voice-ai-diagram .dtable {
 min-width: 0; table-layout: auto; 
}
.voice-ai-diagram .dtable--pinned tbody th {
 position: static; 
}
.voice-ai-diagram .mock {
 box-shadow: none; border-color: #a3a3a3; break-inside: avoid; 
}
}

/* Site-template layout helpers */
.voice-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.voice-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d2e3f5;
  border-radius: 999px;
  background: #f8f9fa;
  font-size: 0.8125rem;
  color: #212529;
}
.voice-ai-arrow-link {
  display: inline-block;
  padding-block: 3px;
  color: #094fb7;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.voice-ai-arrow-link:hover {
  color: #0b5e9d;
  text-decoration: underline;
}
.voice-ai-arrow-link i {
  font-size: 0.75rem;
  margin-left: 4px;
}
.voice-ai-cap-split {
  gap: 1.5rem;
}
.voice-ai-cap-text {
  flex: 5 1 0;
  min-width: 0;
}
.voice-ai-cap-diagram {
  flex: 7 1 0;
  width: 100%;
  min-width: 0;
}
@media (min-width: 992px) {
  .voice-ai-cap-diagram {
    min-width: 340px;
  }
}
.voice-ai-diagram .mock-figure {
  max-width: 720px;
  margin: 0 auto;
}
/* A mock dropped straight into a full-width capability card is centred by the
   rule above, which put its left edge 169px inside the card while the heading,
   the body copy and the caption all start at the card's padding edge. Line it
   up with the copy it belongs to. Only a direct child of the card is hit, so
   the split layout (.voice-ai-cap-diagram) and the centred product showcase
   (.voice-ai-product) keep their own alignment. */
.single_service_box_inner > .voice-ai-diagram .mock-figure {
  margin-left: 0;
  margin-right: 0;
}
.voice-ai-diagram .mock {
  max-width: 100%;
}
.voice-ai-diagram .diagram svg {
  width: 100%;
  height: auto;
}

/* Product UI section */
.voice-ai-product {
  overflow-x: auto;
  padding: 8px;
}
.voice-ai-product .voice-ai-diagram .mock-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.voice-ai-product .voice-ai-diagram .mock {
  max-width: min(100%, 720px);
  width: 100%;
}
.voice-ai-product .voice-ai-diagram .mock-cap {
  text-align: center;
  max-width: 760px;
}

/* Why it exists - split section head */
.voice-ai-why-head {
  align-items: flex-start;
  gap: 1.5rem 0;
  padding: 0 0 1rem 0;
}
.voice-ai-why-title {
  position: relative;
}
.voice-ai-rule {
  display: block;
  width: 40px;
  height: 3px;
  background: #094fb7;
  margin-bottom: 16px;
}
.voice-ai-title-swipe {
  color: #094fb7;
  background: linear-gradient(120deg, #d2e8ff 0%, #d2e8ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 88%;
  padding: 0 4px;
}
.voice-ai-why-body {
  display: flex;
  align-items: center;
}
.voice-ai-why-body p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #212529;
}
@media (min-width: 992px) {
  .voice-ai-why-head {
    align-items: center;
  }
  .voice-ai-why-title h2 {
    text-align: left;
  }
  .voice-ai-why-body p {
    text-align: left;
  }
}

/* Use case cards */
.voice-use-case p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #212529;
  margin-bottom: 0.75rem;
}
.voice-use-case-feature {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f8f9fa;
  border: 1px solid #d2e3f5;
  color: #094fb7;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.voice-use-case-client {
  font-size: 0.875rem;
  font-weight: 700;
  color: #094fb7;
  margin-bottom: 0.75rem;
}
.voice-use-case-client i {
  margin-right: 6px;
}
.voice-use-case-block {
  margin-top: 0.75rem;
}
.voice-use-case-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 4px;
}
.voice-use-case-block p {
  margin-bottom: 0;
}

/* The cards in a use-case row are already equal-height boxes, but each one
   started its own internal rhythm: a title that wrapped to a third line, or a
   chip that wrapped to a second, pushed that card's client line, SCENARIO and
   OUTCOME up to 102px out of step with its neighbours, and the slack piled up
   as blank card under the shortest one. Every card carries the same five
   blocks — title, chip, client, scenario, outcome — so let the row own the
   rows: each band is then as tall as the tallest card in it needs, and the
   labels share a baseline across the row. Guarded on subgrid, so a browser
   without it keeps exactly the flex layout it has today. */
@media (min-width: 992px) {
  @supports (grid-template-rows: subgrid) {
    .pf_uc_row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .pf_uc_row > [class*="col-"] {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      /* the column's percentage max-width would resolve against its grid
         track rather than the row, which would shrink it to a third of a
         third */
      max-width: none;
    }
    .pf_uc_row .voice-use-case {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
  }
}

/* Half-width capability cards are paired, and h-100 stretches the shorter one
   to its partner's height. That slack used to land in one lump below the last
   line — up to 448px of bare card. Where the card ends in a footer row (the
   compliance chips, an arrow link), let that row take the slack and sit on the
   card's bottom edge, so the pair closes together. A card that ends in prose or
   a list is left alone: pushing a sentence to the floor of the card is worse
   than the space below it.

   :has() confines the flex column to the cards that end in a footer, because a
   flex container does not collapse adjacent margins and its items are each a
   block-formatting-context root — switch a card that has no footer and you only
   loosen gaps that were already right. In the cards that do switch, the four
   rules below put back exactly what flex takes away, and the child offsets in
   every capability card on all thirteen pages were diffed against block layout
   to confirm it: the only movement left is the footer travelling to the bottom.
   ------------------------------------------------------------------------- */
.pf_cap_row .single_service_box_inner:has(> :is(.voice-ai-chips, p.mt-2):last-child) {
  display: flex;
  flex-direction: column;
}

/* 1. Every block in these cards that carries a top margin follows a <p> with a
      1rem bottom margin, so the collapsed gap was max(16, own): 16px for the
      chips, tabs, arrow link and callout, 20px for a bullet list. Subtract the
      16px the paragraph already supplies. */
.pf_cap_row .single_service_box_inner:has(> :is(.voice-ai-chips, p.mt-2):last-child)
  > p:not(.voice-ai-cap-intro) + :is(.voice-ai-chips, .voice-ai-tabs, .voice-ai-callout, .voice-ai-diagram, .mt-2, .mt-3) {
  margin-top: 0 !important;
}
.pf_cap_row .single_service_box_inner:has(> :is(.voice-ai-chips, p.mt-2):last-child)
  > p:not(.voice-ai-cap-intro) + ul.list-style_2 {
  margin-top: 4px !important;
}

/* 2. A flex item is a formatting-context root, so the last bullet's bottom
      margin can no longer escape the list and collapse with what follows —
      it would add 10px to the list instead. Drop it and let the following
      block's own top margin set the gap, exactly as it did before. */
.pf_cap_row .single_service_box_inner:has(> :is(.voice-ai-chips, p.mt-2):last-child)
  > ul.list-style_2 > li:last-child {
  margin-bottom: 0;
}

/* 3. The slack rides the gap above the footer rather than the footer's own top
      margin, so a footer that follows a list or the chips keeps the 8-12px it
      declares for itself instead of losing it when there is nothing to absorb. */
.pf_cap_row .single_service_box_inner:has(> :is(.voice-ai-chips, p.mt-2):last-child)
  > *:has(+ :is(.voice-ai-chips, p.mt-2):last-child) {
  margin-bottom: auto;
}

/* 4. Where that block is a paragraph, the 1rem it used to end on has just been
      spent on the slack, so restate it as padding and the rendered gap is the
      same 16px it always was. */
.pf_cap_row .single_service_box_inner:has(> :is(.voice-ai-chips, p.mt-2):last-child)
  > p:has(+ :is(.voice-ai-chips, p.mt-2):last-child) {
  padding-bottom: 1rem;
}

/* Capability intro prose */
.voice-ai-cap-intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  font-style: italic;
  border-left: 3px solid #d2e3f5;
  padding-left: 12px;
}

/* Tabbed content (details/summary) */
.voice-ai-tabs {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-ai-tab {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
}
/* The vertical padding lives on the summary so the click target is the full
   44px rather than the 24px text line. Closed-tab height is unchanged. */
.voice-ai-tab[open] {
  padding-bottom: 10px;
}
.voice-ai-tab > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #094fb7;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.voice-ai-tab > summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: #6c757d;
  transition: transform 200ms;
}
.voice-ai-tab[open] > summary::after {
  content: '\2212';
}
.voice-ai-tab > summary::-webkit-details-marker {
  display: none;
}
.voice-ai-tab > p {
  margin: 8px 0 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #212529;
}

/* Callout card */
.voice-ai-callout {
  background: #f0f5ff;
  border: 1px solid #d2e3f5;
  border-radius: 10px;
  padding: 14px 18px;
}
.voice-ai-callout h4 {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #094fb7;
  margin-bottom: 6px;
}
.voice-ai-callout p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #212529;
  margin-bottom: 0;
}

/* CTA reassurance text */
.requestAdemoform_reassurance {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6c757d;
  margin-top: 8px;
  margin-bottom: 12px;
}

/* ===== MISSING MOCK CSS CLASSES (from reference styles.css) ===== */
/* Scoped under .voice-ai-diagram, using hardcoded values instead of CSS vars */

/* Mock buttons */
.voice-ai-diagram .mockbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: #f5f5f5;
  color: #3a3a3a;
  border: 1px solid #e5e5e5;
}
.voice-ai-diagram .mockbtn--primary {
  background: #0747a6;
  color: #ffffff;
  border-color: #0747a6;
}

/* Timeline (omnichannel continuity callout) */
.voice-ai-diagram .timeline {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.voice-ai-diagram .tl {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.6875rem;
}
.voice-ai-diagram .tl__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0747a6;
  margin-top: 5px;
  flex: none;
}
.voice-ai-diagram .tl__dot--muted {
  background: #a3a3a3;
}
.voice-ai-diagram .tl__ch {
  font-weight: 700;
  color: #0a0a0a;
}
.voice-ai-diagram .tl__meta {
  color: #525252;
}

/* KPI cards (analytics, supervisor, outbound wallboards) */
.voice-ai-diagram .kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.voice-ai-diagram .kpi {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 9px 10px;
  background: #ffffff;
}
.voice-ai-diagram .kpi__k {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #525252;
  font-weight: 700;
}
.voice-ai-diagram .kpi__v {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 3px;
}
.voice-ai-diagram .kpi__d {
  display: block;
  font-size: 0.625rem;
  color: #0d5b07;
  font-weight: 700;
}

/* Live floor strip (analytics, supervisor) */
.voice-ai-diagram .floor {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.voice-ai-diagram .floor__cell {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.voice-ai-diagram .floor__name {
  font-size: 0.6875rem;
  font-weight: 700;
}
.voice-ai-diagram .floor__state {
  font-size: 0.625rem;
  color: #525252;
}
.voice-ai-diagram .floor__cell--on {
  border-color: #0d5b07;
}
.voice-ai-diagram .floor__cell--busy {
  border-color: #6b4500;
}
.voice-ai-diagram .floor__cell--alert {
  border-color: #a8071a;
}

/* FinOps / usage rows (ai-governance, analytics, outbound, supervisor) */
.voice-ai-diagram .usage-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.voice-ai-diagram .usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) 60px;
  gap: 10px;
  align-items: center;
  font-size: 0.75rem;
}
.voice-ai-diagram .usage-row__label {
  min-width: 0;
}
.voice-ai-diagram .usage-row__label b {
  display: block;
  font-weight: 700;
}
.voice-ai-diagram .usage-row__label span {
  display: block;
  font-size: 0.625rem;
  color: #525252;
}
.voice-ai-diagram .usage-row__val {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.6875rem;
  text-align: right;
  color: #3a3a3a;
}

/* Code block (ticketing universal adapter) */
.voice-ai-diagram .code-block {
  background: #001f4d;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #16407c;
}
.voice-ai-diagram .code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #062a5e;
  border-bottom: 1px solid #16407c;
  flex-wrap: wrap;
}
.voice-ai-diagram .code-block__lang {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: #93a9c9;
}
.voice-ai-diagram .code-block pre {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #c9d8ee;
}

/* Widget-on-a-site mock (omnichannel web widget) */
.voice-ai-diagram .sitemock {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
}
.voice-ai-diagram .sitemock__bar {
  height: 26px;
  background: #eef1f5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}
.voice-ai-diagram .sitemock__url {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.5625rem;
  color: #525252;
  background: #ffffff;
  border-radius: 999px;
  padding: 2px 10px;
}
.voice-ai-diagram .sitemock__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  min-height: 150px;
}

/* Responsive: KPIs and floor collapse on narrow screens */
@media (max-width: 760px) {
  .voice-ai-diagram .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .voice-ai-diagram .floor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== ADDITIONAL MISSING MOCK CSS CLASSES ===== */

/* Chat bubbles */
.voice-ai-diagram .bubble {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 172px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 12px 32px rgba(0, 31, 77, 0.12), 0 2px 6px rgba(0, 31, 77, 0.06);
  overflow: hidden;
}
.voice-ai-diagram .bubble__head {
  background: #0747a6;
  color: #ffffff;
  padding: 7px 10px;
  font-size: 0.625rem;
  font-weight: 700;
}
.voice-ai-diagram .bubble__body {
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Flow canvas */
.voice-ai-diagram .canvas {
  position: relative;
  background: #f7f9fc;
  padding: 16px;
  min-height: 210px;
}
.voice-ai-diagram .canvas__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #e5e5e5 1px, transparent 1px),
    linear-gradient(to bottom, #e5e5e5 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.7;
  pointer-events: none;
}
.voice-ai-diagram .canvas__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Chart container */
.voice-ai-diagram .chart {
  width: 100%;
  height: 168px;
}

/* Chip tags */
.voice-ai-diagram .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3a3a3a;
}
.voice-ai-diagram .chip .icon {
  width: 14px;
  height: 14px;
  color: #0747a6;
}
.voice-ai-diagram .chip--accent {
  background: #e6f4ff;
  border-color: #d2e8ff;
  color: #0747a6;
}
.voice-ai-diagram .chip--muted {
  background: #f5f5f5;
  color: #525252;
}
.voice-ai-diagram .on-dark .chip {
  background: #062a5e;
  border-color: #24548f;
  color: #c9d8ee;
}
.voice-ai-diagram .on-dark .chip .icon {
  color: #7fb3f5;
}

/* Citations */
.voice-ai-diagram .cite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px dashed #0747a6;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0747a6;
}
.voice-ai-diagram .cite__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 3px;
  background: #0747a6;
  color: #ffffff;
  font-size: 0.5625rem;
  font-weight: 800;
}

/* Copy button */
.voice-ai-diagram .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #93a9c9;
  border-radius: 6px;
  background: transparent;
  color: #c9d8ee;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.16, 0.84, 0.44, 1), color 150ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.voice-ai-diagram .copy-btn:hover {
  background: #062a5e;
  color: #ffffff;
}
.voice-ai-diagram .copy-btn:active {
  transform: translateY(1px);
}
.voice-ai-diagram .copy-btn .icon {
  width: 15px;
  height: 15px;
}

/* Evaluation gate */
.voice-ai-diagram .gate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #f6ffed;
  border: 1px solid #0d5b07;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0d5b07;
}

/* Inbox rows */
.voice-ai-diagram .inbox {
  display: flex;
  flex-direction: column;
}
.voice-ai-diagram .inbox__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid #e5e5e5;
  background: #ffffff;
}
.voice-ai-diagram .inbox__row--on {
  background: #e6f4ff;
}
.voice-ai-diagram .inbox__who {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
}
.voice-ai-diagram .inbox__prev {
  display: block;
  font-size: 0.6875rem;
  color: #525252;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-ai-diagram .inbox__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Chart legend (includes is-b color indicator) */
.voice-ai-diagram .legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  color: #525252;
}
.voice-ai-diagram .legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.voice-ai-diagram .legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: block;
}
.voice-ai-diagram .legend i.is-a {
  background: #0747a6;
}
.voice-ai-diagram .legend i.is-b {
  background: #d2e8ff;
}

/* Flow nodes */
.voice-ai-diagram .node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  font-size: 0.6875rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 31, 77, 0.06), 0 2px 8px rgba(0, 31, 77, 0.05);
}
.voice-ai-diagram .node i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #0747a6;
  display: block;
  flex: none;
}
.voice-ai-diagram .node--start i {
  background: #0d5b07;
}
.voice-ai-diagram .node--branch i {
  background: #6b4500;
}
.voice-ai-diagram .node--end i {
  background: #001f4d;
}
.voice-ai-diagram .node--sel {
  border-color: #0747a6;
  box-shadow: 0 0 0 3px #e6f4ff;
}
.voice-ai-diagram .node__meta {
  font-weight: 400;
  color: #525252;
}
.voice-ai-diagram .node-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Provider routing table */
.voice-ai-diagram .prov {
  width: 100%;
  font-size: 0.75rem;
}
.voice-ai-diagram .prov th {
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #525252;
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid #e5e5e5;
}
.voice-ai-diagram .prov td {
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}
.voice-ai-diagram .prov tr:last-child td {
  border-bottom: 0;
}
.voice-ai-diagram .prov__name {
  font-weight: 700;
}
.voice-ai-diagram .prov__byo {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.625rem;
  color: #525252;
  display: block;
}

/* Schedule / roster grid */
.voice-ai-diagram .sched {
  display: grid;
  grid-template-columns: 78px repeat(7, minmax(0, 1fr));
  gap: 3px;
  font-size: 0.625rem;
}
.voice-ai-diagram .sched__h {
  font-weight: 700;
  color: #525252;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px;
}
.voice-ai-diagram .sched__who {
  font-weight: 700;
  padding: 6px 4px;
}
.voice-ai-diagram .sched__cell {
  border-radius: 3px;
  background: #f5f5f5;
  padding: 6px 4px;
  text-align: center;
  color: #525252;
}
.voice-ai-diagram .sched__cell--on {
  background: #0747a6;
  color: #ffffff;
  font-weight: 700;
}
.voice-ai-diagram .sched__cell--half {
  background: #d2e8ff;
  color: #0747a6;
  font-weight: 700;
}
.voice-ai-diagram .sched__cell--off {
  background: #f5f5f5;
  color: #525252;
}

/* Skeleton loading */
.voice-ai-diagram .skel {
  height: 10px;
  border-radius: 3px;
  background: #f5f5f5;
}
.voice-ai-diagram .skel--title {
  height: 18px;
  width: 52%;
  background: #e5e5e5;
}
.voice-ai-diagram .skel--w70 {
  width: 70%;
}
.voice-ai-diagram .skel--w45 {
  width: 45%;
}

/* Sparkline */
.voice-ai-diagram .spark {
  width: 100%;
  height: 40px;
  color: #0747a6;
}

/* Code syntax highlighting (inside code-block) */
.voice-ai-diagram .code-block .tok-attr {
  color: #ffffff;
}
.voice-ai-diagram .code-block .tok-str {
  color: #e6f4ff;
}
.voice-ai-diagram .code-block .tok-com {
  color: #93a9c9;
}

/* Trace / timeline */
.voice-ai-diagram .trace {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.voice-ai-diagram .trace span {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #3a3a3a;
  border: 1px solid #e5e5e5;
}

/* Conversation turns */
.voice-ai-diagram .turns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Visually hidden (accessibility) */
.voice-ai-diagram .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Connecting wire */
.voice-ai-diagram .wire {
  width: 2px;
  height: 14px;
  background: #a3a3a3;
  margin-left: 18px;
}

/* Narrow-screen fits for the mock grids and tables. These sit at the end of
   the file because the components they override are defined further down than
   the earlier breakpoint blocks, and a media query adds no specificity. */
@media (max-width: 560px) {
.voice-ai-diagram .usage-row {
  grid-template-columns: minmax(0, 1fr) 56px;
}
.voice-ai-diagram .prov {
  table-layout: fixed;
}
.voice-ai-diagram .prov th:nth-child(3), .voice-ai-diagram .prov td:nth-child(3) {
  display: none;
}
.voice-ai-diagram .prov th:nth-child(4), .voice-ai-diagram .prov td:nth-child(4) {
  width: 30%;
}
.voice-ai-diagram .prov th, .voice-ai-diagram .prov td {
  padding: 7px 6px;
  overflow-wrap: anywhere;
}
.voice-ai-diagram .prov th {
  letter-spacing: 0.02em;
}
.voice-ai-diagram .sched {
  grid-template-columns: 62px repeat(7, minmax(0, 1fr));
}
.voice-ai-diagram .sched__h {
  letter-spacing: 0;
  padding: 4px 1px;
}
}