/* ==========================================================================
   AI for Business — hero visuals of the 5 sub-service pages (docs/ai-for-business/HERO-SLOT.md).
   The card itself is .vpanel (ai4b.css); everything here is namespaced .ai4b-vis*.
   Only the site's :root tokens + --ai4b-* from ai4b.css. One easing: var(--ai4b-ease).
   Hidden «before» states live ONLY under .ai4b-motion:not(.ai4b-safe) — without JS,
   with reduced motion or after a JS failure the static HTML shows the final state.
   ========================================================================== */

/* ---------- slot widths (HERO-SLOT §4) ---------- */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .ai4b-top--consulting, .ai4b-top--digitization, .ai4b-top--agents, .ai4b-top--training, .ai4b-top--security { --vis-w-md: 380px; }
}
@media (max-width: 1023.98px) {
  .ai4b-top--consulting, .ai4b-top--digitization, .ai4b-top--agents, .ai4b-top--training, .ai4b-top--security { --vis-max: 520px; }
}

/* ---------- shared pieces ---------- */
.ai4b-vis { position: relative; }
.ai4b-vis p { margin: 0; }
.ai4b-vis ol, .ai4b-vis ul { list-style: none; margin: 0; padding: 0; }
.ai4b-vis .vpanel__caption { padding-right: 104px; }
.ai4b-vis .vpanel__replay { font-family: inherit; }

.ai4b-vis-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border: 1px solid var(--color-grey); border-radius: 30px; background: var(--color-white);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--color-dark-2); white-space: nowrap;
}
.ai4b-vis-chip--blue { background: var(--ai4b-blue-tint); border-color: rgba(0, 122, 255, 0.4); }
.ai4b-vis-chip--yellow { background: var(--ai4b-yellow-tint); border-color: rgba(255, 198, 94, 0.9); }
.ai4b-vis-chip--grey { background: var(--color-light-bck); }
.ai4b-vis-chip--dash { background: transparent; border-style: dashed; border-color: var(--color-grey-2); color: var(--color-grey-4); }
.ai4b-vis-chip--pilot { background: var(--color-dark-2); border-color: var(--color-dark-2); color: var(--color-white); }
.ai4b-vis-chip--ok .ai4b-vis-check { width: 14px; height: 14px; margin-left: -3px; }
.ai4b-vis-chip__ico { width: 15px; height: 15px; color: var(--color-blue); }

.ai4b-vis-check, .ai4b-vis-x { width: 16px; height: 16px; flex: none; }
.ai4b-vis-check path, .ai4b-vis-x path {
  fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s var(--ai4b-ease) 0.1s;
}
.ai4b-vis-check path { stroke: var(--ai4b-ok); }
.ai4b-vis-x path { stroke: var(--ai4b-stop); }
.ai4b-vis-arrow { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--color-grey-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* label · value on one line, the bar under them */
.ai4b-vis-meterline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b";
  column-gap: 12px; row-gap: 7px; align-items: baseline;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ai4b-line);
  font-size: 0.8125rem; line-height: 1.35; color: var(--color-grey-4);
}
.ai4b-vis-meterline__label { grid-area: l; font-weight: 600; }
.ai4b-vis-meterline__value { grid-area: v; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai4b-vis-meterline > .ai4b-vis-bar, .ai4b-vis-meterline > .ai4b-vis-steps { grid-area: b; }
.ai4b-vis-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--color-light-bck); box-shadow: inset 0 0 0 1px var(--ai4b-line); overflow: hidden; }
.ai4b-vis-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--color-blue); transition: width 0.6s var(--ai4b-ease); }
.ai4b-vis-steps { display: flex; gap: 4px; }
.ai4b-vis-steps i, .ai4b-vis-meter i { position: relative; display: block; border-radius: 2px; background: var(--color-light-bck); box-shadow: inset 0 0 0 1px var(--color-grey); overflow: hidden; }
.ai4b-vis-steps i { flex: 1 1 0; height: 6px; border-radius: 3px; }
.ai4b-vis-steps i.is-fill::after, .ai4b-vis-meter i.is-fill::after {
  content: ""; position: absolute; inset: 0; background: var(--color-blue); transform-origin: left center;
  transition: transform 0.35s var(--ai4b-ease);
}
.ai4b-vis-steps i:nth-child(2)::after, .ai4b-vis-meter i:nth-child(2)::after { transition-delay: 0.09s; }
.ai4b-vis-steps i:nth-child(3)::after, .ai4b-vis-meter i:nth-child(3)::after { transition-delay: 0.18s; }
.ai4b-vis-steps i:nth-child(4)::after { transition-delay: 0.27s; }
.ai4b-vis-steps i:nth-child(n+5)::after { transition-delay: 0.36s; }

.ai4b-vis-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.875rem; line-height: 1.35; }

/* ==========================================================================
   1 · ai-consulting — process scorecard
   ========================================================================== */
.ai4b-vis-sc__head, .ai4b-vis-sc__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 50px); column-gap: 4px; align-items: center; }
.ai4b-vis-sc__head { padding: 0 8px 6px; border-bottom: 1px solid var(--ai4b-line); font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--color-grey-4); }
.ai4b-vis-sc__col { text-align: center; }
.ai4b-vis-sc { position: relative; }
.ai4b-vis-sc__row { position: relative; row-gap: 6px; padding: 9px 8px; border-bottom: 1px solid var(--ai4b-line); border-radius: 0; background-color: transparent; }
.ai4b-vis-sc__row:last-child { border-bottom: 0; }
.ai4b-vis-sc__row .ai4b-vis-sc__name { font-weight: 600; line-height: 1.3; }
.ai4b-vis-sc__row.is-pilot { background-color: var(--ai4b-blue-tint); border-radius: 4px; }
.ai4b-vis-sc__row.is-moving { z-index: 1; background-color: var(--color-white); }
.ai4b-vis-sc__row.is-pilot.is-moving { z-index: 2; }
.ai4b-vis-meter { justify-self: center; display: inline-flex; gap: 3px; }
.ai4b-vis-meter i { width: 11px; height: 8px; }
.ai4b-vis-meter[data-col="2"] i.is-fill::after { background: var(--color-dark); }
.ai4b-vis-sc__verdict { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ai4b-vis-sc__note { font-size: 0.8125rem; line-height: 1.35; color: var(--color-grey-4); }

/* ==========================================================================
   2 · ai-business-digitization — labelled register + trap check
   ========================================================================== */
.ai4b-vis-reg__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: start;
  padding: 9px 0; border-bottom: 1px solid var(--ai4b-line);
}
.ai4b-vis-reg__row:first-child { padding-top: 2px; }
.ai4b-vis-reg__name { font-weight: 600; line-height: 1.35; }
.ai4b-vis-reg__row > .ai4b-vis-chip { justify-self: end; }
.ai4b-vis-reg__src { grid-column: 1 / -1; font-size: 0.8125rem; line-height: 1.35; color: var(--color-grey-4); }
.ai4b-vis-reg__gap { display: flex; align-items: center; gap: 8px; }
.ai4b-vis-reg__empty { flex: none; width: 52px; height: 18px; border: 1px dashed var(--color-grey-2); border-radius: 4px; }
.ai4b-vis-trap { margin-top: 12px; padding: 10px 12px; border-radius: 4px; background: var(--color-light-bck); }
.ai4b-vis-trap__title { margin-bottom: 3px !important; font-size: 0.8125rem; font-weight: 600; color: var(--color-grey-4); }
.ai4b-vis-trap__quote { line-height: 1.4; }
.ai4b-vis-trap__obj { position: relative; font-weight: 600; white-space: nowrap; color: var(--color-grey-4); }
.ai4b-vis-trap__obj::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: var(--ai4b-stop);
  transform-origin: left center; transition: transform 0.45s var(--ai4b-ease);
}
.ai4b-vis-trap__res { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }

/* ==========================================================================
   3 · ai-agents — an agent run
   ========================================================================== */
.ai4b-vis-task {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 12px !important;
  padding: 8px 12px; border-radius: 4px; background: var(--color-light-bck); font-size: 0.875rem; font-weight: 600; line-height: 1.35;
}
.ai4b-vis-run__step { position: relative; padding: 0 0 10px 24px; }
.ai4b-vis-run__step:last-child { padding-bottom: 0; }
.ai4b-vis-run__step::before {
  content: ""; position: absolute; left: 7px; top: 19px; bottom: 1px; width: 1.5px; background: var(--color-grey);
  transform-origin: top center; transition: transform 0.45s var(--ai4b-ease);
}
.ai4b-vis-run__step:last-child::before { display: none; }
.ai4b-vis-run__step:has(+ .is-gate:not(.is-done))::before { background: repeating-linear-gradient(to bottom, var(--color-grey-2) 0 3px, transparent 3px 6px); }
.ai4b-vis-run__dot { position: absolute; left: 3px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-blue); transition: background-color 0.35s var(--ai4b-ease), box-shadow 0.35s var(--ai4b-ease); }
.ai4b-vis-run__step.is-gate .ai4b-vis-run__dot { background: var(--color-white); box-shadow: inset 0 0 0 2.5px var(--color-yellow); }
.ai4b-vis-run__step.is-gate.is-done .ai4b-vis-run__dot { background: var(--color-blue); box-shadow: none; }
.ai4b-vis-run__text { font-weight: 600; line-height: 1.35; }
.ai4b-vis-run__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px !important; font-size: 0.8125rem; line-height: 1.35; color: var(--color-grey-4); }
.ai4b-vis-gate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px;
  margin: 8px 0 0 -24px; padding: 6px 6px 6px 12px; border-radius: 4px; background: var(--ai4b-yellow-tint);
}
.ai4b-vis-gate__text { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; line-height: 1.35; }
.ai4b-vis-gate__ico { width: 18px; height: 18px; color: var(--color-dark-2); }
.page__top .ai4b-vis .vpanel__approve { margin-top: 0; }

/* ==========================================================================
   4 · ai-training — before / after on a real task
   ========================================================================== */
.ai4b-vis-tr__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 10px; }
.ai4b-vis-tr__task { flex: 1 1 170px; font-weight: 600; line-height: 1.35; }
.ai4b-vis-tr__task > span { font-weight: 400; color: var(--color-grey-4); }
.ai4b-vis-seg { flex: none; display: inline-flex; gap: 6px; }
.ai4b-vis-seg__btn {
  position: relative; min-width: 64px; min-height: 34px; padding: 4px 14px; border: 1px solid var(--color-grey); border-radius: 30px; background: var(--color-white);
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: var(--color-grey-4); cursor: pointer;
  transition: color 0.3s var(--ai4b-ease), background-color 0.3s var(--ai4b-ease), border-color 0.3s var(--ai4b-ease);
}
/* ≥44px hit area on every device without changing how the chip looks */
.ai4b-vis-seg__btn::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; transform: translateY(-50%); }
.ai4b-vis-seg__btn.is-active { background: var(--ai4b-blue-tint); border-color: var(--color-blue); color: var(--color-dark-2); cursor: default; }
@media (hover: hover) and (pointer: fine) { .ai4b-vis-seg__btn:not(.is-active):hover { border-color: var(--color-blue); color: var(--color-blue); } }
html:not(.ai4b-js) .ai4b-vis-seg { display: none; }
/* both panes share one grid cell: the card keeps the taller pane's height, so toggling never jumps */
.ai4b-vis-tr__panes { display: grid; }
.ai4b-vis-tr__pane { grid-area: 1 / 1; transition: opacity 0.35s var(--ai4b-ease), visibility 0s linear 0s; }
.ai4b-vis-tr__pane.is-off { opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ai4b-ease), visibility 0s linear 0.2s; }
.ai4b-vis-tr__pane li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ai4b-line); line-height: 1.35; }
.ai4b-vis-tr__pane li:last-child { border-bottom: 0; }
.ai4b-vis-tr__pane li > svg { margin-top: 2px; }
.ai4b-vis-tr__pane--before li { color: var(--color-grey-4); }
.ai4b-vis-tr__pane--before li.is-bad { color: var(--color-dark-2); }
.ai4b-vis-tr__dash { position: relative; width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ai4b-vis-tr__dash::before { content: ""; position: absolute; left: 4px; right: 4px; top: 7.5px; height: 1.5px; border-radius: 1px; background: var(--color-grey-2); }
/* «before»: nothing is kept yet and no session has happened — the artifacts fade out in place, the track reads empty */
.ai4b-vis-tr__keep { transition: opacity 0.35s var(--ai4b-ease), visibility 0s linear 0s; }
.ai4b-vis--training.is-before .ai4b-vis-tr__keep { opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ai4b-ease), visibility 0s linear 0.2s; }
.ai4b-vis--training.is-before .ai4b-vis-tr__progress i.is-fill::after { transform: scaleX(0); }
.ai4b-vis-tr__when-before, .ai4b-vis--training.is-before .ai4b-vis-tr__when-after { display: none; }
.ai4b-vis--training.is-before .ai4b-vis-tr__when-before { display: inline; }
.ai4b-vis-tr__keep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ai4b-vis-tr__keep-label { width: 100%; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--color-grey-4); }

/* ==========================================================================
   5 · secure-ai-adoption — AI gateway log
   ========================================================================== */
.ai4b-vis-log__row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; column-gap: 10px; row-gap: 5px;
  margin: 0 -8px; padding: 9px 8px; border-bottom: 1px solid var(--ai4b-line); border-radius: 0;
}
.ai4b-vis-log__row:last-child { border-bottom: 0; }
.ai4b-vis-log__row--deny { border-radius: 4px; background-color: rgba(255, 59, 48, 0.05); }
.ai4b-vis-log__time { grid-column: 1; grid-row: 1; padding-top: 1px; font-size: 0.8125rem; line-height: 1.35; color: var(--color-grey-4); font-variant-numeric: tabular-nums; }
.ai4b-vis-log__req { grid-column: 2; grid-row: 1; line-height: 1.35; }
.ai4b-vis-log__route { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.8125rem; line-height: 1.35; }
.ai4b-vis-log__to { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ai4b-vis-log__dest { font-weight: 600; }
.ai4b-vis-log__row--deny .ai4b-vis-arrow { display: none; }
.ai4b-vis-log__st { grid-column: 3; grid-row: 1; padding-top: 2px; line-height: 0; }
.ai4b-vis-cls { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--color-grey); border-radius: 30px; font-weight: 600; white-space: nowrap; }
.ai4b-vis-cls i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ai4b-ok); }
.ai4b-vis-cls--1 i { background: var(--color-yellow); }
.ai4b-vis-cls--2 i { background: var(--ai4b-stop); }
.ai4b-vis-pii {
  display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--color-light-bck); box-shadow: inset 0 0 0 1px var(--color-grey);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--color-grey-4); white-space: nowrap;
  transition: opacity 0.16s linear, background-color 0.3s var(--ai4b-ease), box-shadow 0.3s var(--ai4b-ease), color 0.3s var(--ai4b-ease);
}
.ai4b-vis-pii.is-raw { background: var(--ai4b-yellow-tint); box-shadow: inset 0 0 0 1px rgba(255, 198, 94, 0.9); font-weight: 400; color: var(--color-dark-2); }
.ai4b-vis-pii.is-swap { opacity: 0; }

/* ==========================================================================
   SEQUENCE STATES — only while motion is allowed and the sequence has not finished
   ========================================================================== */
.ai4b-vis { transition: opacity 0.7s var(--ai4b-ease), transform 0.7s var(--ai4b-ease); }
.ai4b-vis [data-v] { transition: opacity 0.5s var(--ai4b-ease), transform 0.5s var(--ai4b-ease), clip-path 0.6s var(--ai4b-ease), background-color 0.35s var(--ai4b-ease); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) [data-v]:not(.is-on) { opacity: 0; transform: translateY(6px); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) [data-v]:not(.is-on) :is(.ai4b-vis-check, .ai4b-vis-x) path { stroke-dashoffset: 1; }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-chip[data-v]:not(.is-on) { transform: scale(0.94); }
/* scorecard: meters fill in place, the pilot row lights up last */
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-meter[data-v]:not(.is-on) { opacity: 1; transform: none; }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-meter:not(.is-on) i.is-fill::after { transform: scaleX(0); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-sc__row.is-pilot:not(.is-lit) { background-color: transparent; }
/* register: rows and the quoted answer write in left to right; the strike draws */
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-reg__row[data-v]:not(.is-on),
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-trap__quote[data-v]:not(.is-on) { transform: none; clip-path: inset(0 100% 0 0); }
[data-ai4b-visual] .ai4b-vis-reg__row.is-on, [data-ai4b-visual] .ai4b-vis-trap__quote.is-on { clip-path: inset(-4px -4px -4px -4px); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-trap__obj[data-v]:not(.is-on) { opacity: 1; transform: none; color: var(--color-dark-2); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-trap__obj:not(.is-on)::after { transform: scaleX(0); }
/* agent run: the rail draws down to the next step */
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) .ai4b-vis-run__step:not(.is-link)::before { transform: scaleY(0); }
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) [data-budget]:not(.is-on) .ai4b-vis-bar i { width: 0 !important; }
/* training: session steps fill */
.ai4b-motion:not(.ai4b-safe) [data-ai4b-visual]:not(.is-played) [data-progress]:not(.is-on) i.is-fill::after { transform: scaleX(0); }

/* ---------- touch: ≥44px hit areas without changing the look ---------- */
@media (pointer: coarse) {
  .ai4b-vis .vpanel__replay { min-width: 44px; margin-right: -6px; }
}

/* ---------- compact ≤1023 / phones ---------- */
@media (max-width: 1023.98px) {
  .ai4b-vis .vpanel__caption { padding-right: 104px; }
}
@media (max-width: 575.98px) {
  .ai4b-vis .vpanel__caption { margin-bottom: 10px; padding-right: 36px; }
  .ai4b-vis-sc__row .ai4b-vis-sc__name, .ai4b-vis-reg__name, .ai4b-vis-run__text, .ai4b-vis-log__req, .ai4b-vis-tr__pane li { font-size: 0.875rem; }
  .ai4b-vis-sc__note { display: none; }
  .ai4b-vis-sc__row--none .ai4b-vis-sc__note { display: inline; }
  .ai4b-vis-chip { padding: 1px 8px; font-size: 0.75rem; }
  /* scorecard on phones: the name takes the full row, each meter carries its own label */
  .ai4b-vis-sc__head { display: none; }
  .ai4b-vis-sc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; padding: 8px 6px; }
  .ai4b-vis-sc__row .ai4b-vis-sc__name, .ai4b-vis-sc__verdict { flex: 1 1 100%; }
  .ai4b-vis-meter { display: inline-flex; align-items: center; gap: 2px; }
  .ai4b-vis-meter::before { content: attr(data-label); margin-right: 4px; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--color-grey-4); white-space: nowrap; }
  .ai4b-vis-meter i { width: 8px; height: 7px; }
  .ai4b-vis-reg__row { padding: 7px 0; }
  .ai4b-vis-trap { padding: 8px 10px; }
  .ai4b-vis-task { margin-bottom: 10px !important; padding: 8px 10px; }
  .ai4b-vis-run__step { padding-bottom: 10px; }
  .ai4b-vis-gate { padding: 6px 6px 6px 10px; }
  .ai4b-vis-gate .vpanel__approve { flex: 1 1 100%; justify-content: center; }
  .ai4b-vis-run__step:nth-child(2) { display: none; }
  .ai4b-vis-run__src { display: none; }
  .ai4b-vis-gate .vpanel__approve { padding: 10px 16px; }
  .ai4b-vis-log__row { grid-template-columns: minmax(0, 1fr) 16px; column-gap: 8px; padding: 8px; }
  .ai4b-vis-log__time { display: none; }
  .ai4b-vis-log__req, .ai4b-vis-log__route { grid-column: 1; }
  .ai4b-vis-log__st { grid-column: 2; }
  .ai4b-vis-cls { padding: 0 7px; }
  .ai4b-vis-meterline { margin-top: 10px; padding-top: 10px; }
  .ai4b-vis-tr__task { flex-basis: 100%; }
}
/* narrowest phones: each meter's label sits above its bars so the three never wrap apart */
@media (max-width: 359.98px) {
  .ai4b-vis-sc__row { align-items: flex-end; gap: 6px 14px; }
  .ai4b-vis-meter { display: inline-grid; grid-template-columns: repeat(3, 9px); column-gap: 3px; row-gap: 3px; }
  .ai4b-vis-meter::before { grid-column: 1 / -1; margin-right: 0; }
  .ai4b-vis-meter i { width: 9px; }
}