/* ==========================================================================
   AI for Business — page components (v2, ported from the approved pilot
   docs/ai-for-business/ai4b/site/static/css/ai4b.css).
   Loaded ONLY by templates/frontend/ai_for_business/_layout.html (hub + 6 sub-pages).
   Hero slot contract for the sub-page visuals: docs/ai-for-business/HERO-SLOT.md.
   Built on top of style.css / media.css; only the site's :root tokens.
   Semantic green #34c759 / red #ff3b30 appear only in checks, dots and tables.
   One easing family: cubic-bezier(.16,1,.3,1).
   ========================================================================== */

:root {
  --ai4b-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ai4b-ok: #34c759;
  --ai4b-stop: #ff3b30;
  --ai4b-blue-tint: rgba(0, 122, 255, 0.08);
  --ai4b-yellow-tint: rgba(255, 198, 94, 0.18);
  --ai4b-line: rgba(208, 208, 208, 0.6);
  --ai4b-hang: 0px;
}

/* ---------- browser surfaces ---------- */
::selection { background: var(--color-yellow); color: var(--color-black); }
html { scrollbar-width: thin; scrollbar-color: var(--color-grey) var(--color-light-bck); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-light-bck); }
::-webkit-scrollbar-thumb { background: var(--color-grey); border-radius: 10px; border: 2px solid var(--color-light-bck); }
::-webkit-scrollbar-thumb:hover { background: var(--color-grey-2); }
input, textarea { caret-color: var(--color-blue); }
.ai4b-page a, .footer a { text-underline-offset: 3px; }
.ai4b-page a:focus-visible, .ai4b-page button:focus-visible, .ai4b-page [tabindex]:focus-visible,
.header a:focus-visible, .header button:focus-visible, .footer a:focus-visible, .ai4b-ctabar a:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  box-shadow: none;
}
.bg__black-noise a:focus-visible, .bg__black-noise button:focus-visible,
.page__top a:focus-visible, .form__section a:focus-visible, .form__section button:focus-visible,
.ai4b-ctabar a:focus-visible, .page__top .vpanel button:focus-visible { outline-color: var(--color-yellow); }
.page__top .vpanel button:focus-visible { outline-color: var(--color-blue); }
.ai4b-page .tab-pane:focus-visible { outline-offset: -2px; }
.trust__info-title, .ai4b-table, .vpanel__rows, .ai4b-quiz__count, .ai4b-rail { font-variant-numeric: tabular-nums; }

/* site scale for utility heading classes (the site styles by tag; semantic h3 keeps the h5/h4 look) */
.ai4b-page .h5 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: normal; margin-bottom: 0.5rem; }
.ai4b-page .h4 { font-size: 1.875rem; line-height: 1.2; font-weight: 700; letter-spacing: -1px; margin-bottom: 0.5rem; }

/* ---------- typography polish ---------- */
.ai4b-page h2, .ai4b-page h3, .ai4b-page h5, .ai4b-page .h5 { text-wrap: balance; }
.ai4b-page p, .ai4b-page li, .ai4b-page dd { text-wrap: pretty; }
@media (min-width: 768px) { .ai4b-hero .service__top-title { text-wrap: balance; } }

/* ==========================================================================
   HERO — site band height; visual overhangs into the white intro at ≥1200
   ========================================================================== */
.ai4b-top::after {
  background: linear-gradient(90deg, rgba(28, 31, 39, 0.92) 0%, rgba(28, 31, 39, 0.78) 50%, rgba(28, 31, 39, 0.55) 100%);
}
.ai4b-top .servise__top-wrap { width: 100%; padding-top: 24px; padding-bottom: 44px; }
.ai4b-hero { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.ai4b-hero .service__top-title { margin-bottom: 12px; }
.ai4b-hero .service__undertitle { max-width: 680px; margin-bottom: 0; text-wrap: pretty; }
.ai4b-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.page__top .ai4b-hero__actions .button__hov, .page__top .vpanel .button__hov { margin-top: 0; }
/* site's secondary: .serviceTabs__details-btn; white text on dark like the site's .bg__black-noise variant */
.page__top .serviceTabs__details-btn { color: var(--color-white); margin: 0; display: inline-block; text-align: center; }
.page__top .serviceTabs__details-btn:hover { background-color: var(--color-blue); color: var(--color-white); }
.ai4b-hero__note { margin: 14px 0 0; font-size: 0.875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.ai4b-hero__visual { position: relative; }
.ai4b-hero__visual:empty { display: none; }

/* slot widths (HERO-SLOT.md §4): --vis-w ≥1200, --vis-w-md 1024–1199, --vis-max ≤1023 */
.ai4b-top { --vis-w: 420px; --vis-w-md: 360px; --vis-max: 560px; }
.ai4b-top--hub { --vis-w: 460px; }
.ai4b-top--integration { --vis-w: 400px; --vis-w-md: 400px; --vis-max: 460px; }
@media (min-width: 1200px) {
  :root { --ai4b-hang: 180px; }
  .ai4b-top { overflow: visible; }
  .ai4b-top--integration .imap { padding: 18px 20px 20px; }
  .ai4b-hero { position: relative; }
  .ai4b-hero__text { max-width: calc(100% - var(--vis-w) - 64px); }
  .ai4b-hero__visual { position: absolute; top: 0; right: 0; width: var(--vis-w); z-index: 3; }
  .ai4b-hero__visual > .vpanel { box-shadow: 0 16px 40px rgba(28, 31, 39, 0.22), 0 4px 12px rgba(28, 31, 39, 0.12); }
  .ai4b-top + .ai4b-intro .section__wrap-2 { padding-top: calc(80px + var(--ai4b-hang)); }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .ai4b-hero { grid-template-columns: minmax(0, 1fr) var(--vis-w-md); gap: 40px; align-items: start; }
  .ai4b-hero__visual > .vpanel { padding: 20px; }
  .ai4b-hero__visual .vpanel__checks, .ai4b-hero__visual .vpanel__line { display: none; }
  .ai4b-hero__visual .vpanel__q { margin-bottom: 8px; }
}
@media (max-width: 1023.98px) {
  .ai4b-hero__visual { margin-top: 32px; max-width: var(--vis-max); }
}
@media (max-width: 767.98px) {
  .ai4b-top .servise__top-wrap { padding-top: 12px; padding-bottom: 40px; }
  .ai4b-hero__actions { margin-top: 22px; gap: 12px; }
  .ai4b-hero__visual { margin-top: 24px; }
}
@media (max-width: 575.98px) {
  .ai4b-hero .service__undertitle { font-size: 1.25rem; line-height: 1.35; letter-spacing: 0; }
  .ai4b-hero__actions > a { width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   VERIFIED-ANSWER PANEL (hub hero)
   ========================================================================== */
.vpanel {
  margin: 0;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
  padding: 24px;
  color: var(--color-dark-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.vpanel__caption { font-size: 0.875rem; font-weight: 600; color: var(--color-grey-4); margin-bottom: 12px; }
.vpanel__q { display: flex; gap: 10px; align-items: flex-start; background: var(--color-light-bck); border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; }
.ai4b-ico { width: 24px; height: 24px; flex: none; }
.vpanel__q-ico { width: 20px; height: 20px; color: var(--color-grey-4); margin-top: 1px; }
.vpanel__q-text { margin: 0; font-weight: 600; }
.vpanel__q-text.is-typing [data-type]::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em;
  background: var(--color-blue); animation: ai4b-blink 0.9s steps(1) infinite;
}
.ai4b-page .vpanel__line { margin: 0 0 4px; text-wrap: balance; }
.vpanel__line, .vpanel__rows li, .vpanel__action { transition: background-color 0.3s var(--ai4b-ease); }
.vpanel__line { padding: 2px 8px; margin-left: -8px; margin-right: -8px; border-radius: 4px; }
.vpanel__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; margin: 0 -8px; border-bottom: 1px solid var(--ai4b-line); border-radius: 0; }
.vpanel__rows li span:last-child { color: var(--color-grey-4); }
.vpanel .is-src { background-color: var(--ai4b-blue-tint); }
.vpanel__rows li.is-src span:first-child { color: var(--color-blue); }

.vpanel__sources { margin: 14px 0 12px; }
.vpanel__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.vpanel__chip, .vpanel__srcs-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  border: 1px solid var(--color-grey); border-radius: 30px; padding: 4px 9px 4px 6px;
  font: inherit; font-size: 0.875rem; line-height: 1.2; color: var(--color-dark); background: var(--color-white); cursor: pointer;
  transition: border-color 0.3s var(--ai4b-ease), background-color 0.3s var(--ai4b-ease), color 0.3s var(--ai4b-ease);
}
.vpanel__chip:hover, .vpanel__chip.is-hot { border-color: var(--color-blue); color: var(--color-blue); background: var(--ai4b-blue-tint); }
.vpanel__chip-ico { width: 15px; height: 15px; color: var(--color-blue); }
.vpanel__srcs-toggle { display: none; }
.vpanel__srcs-chev { width: 16px; height: 16px; color: var(--color-grey-4); transition: transform 0.35s var(--ai4b-ease); }
.vpanel.is-srcs-open .vpanel__srcs-chev { transform: rotate(180deg); }

.vpanel__checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--ai4b-line); font-size: 0.875rem; color: var(--color-dark); }
.vpanel__checks li { display: inline-flex; align-items: center; gap: 6px; }
.vpanel__check { width: 16px; height: 16px; flex: none; }
.vpanel__check path, .vpanel__approve-check path, .ai4b-quiz__lead-check path {
  fill: none; stroke: var(--ai4b-ok); 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;
}
.vpanel__action {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 10px 10px 10px 14px; border: 1px solid var(--color-grey); border-radius: 4px; background: var(--ai4b-yellow-tint);
}
.vpanel__action.is-src { background: var(--ai4b-blue-tint); }
.vpanel__action-text { margin: 0; font-size: 0.875rem; }
.vpanel__action-text > span:first-child { font-weight: 700; }
.vpanel__badge { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 30px; font-size: 0.875rem; font-weight: 600; background: var(--color-white); color: var(--color-dark-2); white-space: nowrap; }
.vpanel__approve { flex: none; display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 10px 20px; font-size: 0.875rem; transition: background-color 0.35s var(--ai4b-ease), color 0.35s, gap 0.35s var(--ai4b-ease), padding 0.35s var(--ai4b-ease); }
.vpanel__approve-check { width: 0; height: 16px; flex: none; transition: width 0.35s var(--ai4b-ease); }
.vpanel__approve-check path { stroke: var(--ai4b-ok); stroke-width: 2; stroke-dashoffset: 1; transition-delay: 0.2s; }
.vpanel__approve.is-wave::before { --size: 2000px; }
.vpanel__approve.is-approved { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-grey); color: var(--color-dark-2); cursor: default; gap: 6px; padding-left: 16px; }
.vpanel__approve.is-approved::before { display: none; }
.vpanel__approve.is-approved .vpanel__approve-check { width: 16px; }
.vpanel__approve.is-approved .vpanel__approve-check path { stroke-dashoffset: 0; }
.vpanel__receipt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ai4b-ease); }
.vpanel__receipt-in { min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 8px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.45s var(--ai4b-ease) 0.1s, transform 0.5s var(--ai4b-ease) 0.1s, visibility 0s linear 0.5s; }
.vpanel__receipt-in p { margin: 0; padding-top: 10px; font-size: 0.875rem; color: var(--color-dark-2); }
.vpanel__receipt-in .vpanel__check { margin-top: 10px; }
.vpanel__receipt.is-open { grid-template-rows: 1fr; }
.vpanel__receipt.is-open .vpanel__receipt-in { visibility: visible; opacity: 1; transform: none; transition-delay: 0.1s, 0.1s, 0s; }
.vpanel__receipt:not(.is-open) .vpanel__check path { stroke-dashoffset: 1; }
.vpanel__receipt.is-open .vpanel__check path { transition-delay: 0.35s; }
.vpanel { position: relative; }
.vpanel__foot { position: absolute; top: 16px; right: 24px; display: flex; }
.vpanel__replay {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 0; border: 0; background: none;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--color-blue); cursor: pointer;
}
.vpanel__replay .ai4b-ico { width: 16px; height: 16px; }
.vpanel__replay[hidden] { display: inline-flex; visibility: hidden; }

/* sequence states: only while motion is allowed and the JS has not finished */
[data-vpanel] [data-step] { transition: opacity 0.5s var(--ai4b-ease), transform 0.5s var(--ai4b-ease), clip-path 0.6s var(--ai4b-ease), background-color 0.3s var(--ai4b-ease); }
.ai4b-motion [data-vpanel] { transition: opacity 0.7s var(--ai4b-ease), transform 0.7s var(--ai4b-ease); }
.ai4b-motion:not(.ai4b-safe) [data-vpanel]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.ai4b-motion:not(.ai4b-safe) [data-vpanel] [data-step]:not(.is-on) { opacity: 0; transform: translateY(8px); }
.ai4b-motion:not(.ai4b-safe) [data-vpanel] .vpanel__line:not(.is-on),
.ai4b-motion:not(.ai4b-safe) [data-vpanel] .vpanel__rows li:not(.is-on) { transform: none; clip-path: inset(0 100% 0 0); }
.ai4b-motion:not(.ai4b-safe) [data-vpanel] .vpanel__chips li:not(.is-on) { transform: translateX(-12px); }
.ai4b-motion:not(.ai4b-safe) [data-vpanel] .vpanel__checks li:not(.is-on) { transform: none; }
.ai4b-motion:not(.ai4b-safe) [data-vpanel] .vpanel__checks li:not(.is-on) .vpanel__check path { stroke-dashoffset: 1; }
[data-vpanel] .vpanel__line.is-on, [data-vpanel] .vpanel__rows li.is-on { clip-path: inset(0 0 0 0); }

/* compact panel ≤1023: question + 3 rows + approve; sources collapse into one chip */
@media (max-width: 1023.98px) {
  .vpanel { padding: 18px 16px; }
  .vpanel .vpanel__line, .vpanel .vpanel__checks { display: none; }
  .vpanel__q { margin-bottom: 8px; padding: 10px 12px; }
  .vpanel__srcs-toggle { display: inline-flex; }
  .vpanel__chips { display: none; }
  .vpanel.is-srcs-open .vpanel__chips { display: flex; margin-top: 8px; }
  .vpanel__sources { margin: 10px 0 0; }
  .vpanel__action { margin-top: 10px; }
  .vpanel__foot { top: 12px; right: 16px; }
}
@media (max-width: 575.98px) {
  .vpanel { font-size: 0.875rem; padding: 14px; }
  .vpanel__caption { margin-bottom: 6px; }
  .vpanel__foot { top: 8px; right: 14px; }
  .vpanel__q { padding: 8px 10px; }
  .vpanel__rows li { padding: 4px 8px; }
  .vpanel__sources { margin-top: 8px; }
  .vpanel__action { margin-top: 8px; padding: 6px 6px 6px 12px; }
  .vpanel__approve { padding: 10px 16px; }
  .ai4b-top .servise__top-wrap { padding-bottom: 28px; }
  .ai4b-hero__visual { margin-top: 18px; }
  .ai4b-hero__note { margin-top: 10px; }
}

/* ==========================================================================
   INTEGRATION MAP (sub hero)
   ========================================================================== */
.imap { padding: 20px 24px 22px; }
.imap__hint { font-weight: 400; }
@media (max-width: 1023.98px) { .imap__hint { display: none; } }  /* tap now traces too (ai4b.js), so touch ≥1024 keeps the hint */
.imap__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: "Open Sans", Arial, sans-serif; }
.imap__group { font-size: var(--fs); font-weight: 600; fill: var(--color-grey-4); }
.imap__node { cursor: default; outline: none; }
.imap__node rect { fill: var(--color-white); stroke: var(--color-grey); stroke-width: 1; transition: stroke 0.3s var(--ai4b-ease), fill 0.3s var(--ai4b-ease); }
.imap__node text { font-size: var(--fs); font-weight: 600; fill: var(--color-dark-2); }
.imap__node .imap__sub { font-size: calc(var(--fs) - 1px); font-weight: 400; fill: var(--color-grey-4); }
.imap__node--sys rect { fill: var(--color-light-bck); }
.imap__node--ch rect, .imap__node--copy rect { stroke: var(--color-grey-2); stroke-dasharray: 4 3; }
.imap__node--gw rect { fill: var(--ai4b-blue-tint); stroke: var(--color-blue); }
.imap__node--gw text:first-of-type { fill: var(--color-blue); }
.imap__node--ok rect { fill: var(--color-yellow); stroke: var(--color-yellow); }
.imap__node:focus-visible rect { stroke: var(--color-blue); stroke-width: 2; }
.imap__wire { fill: none; stroke: var(--color-grey-2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--ai4b-ease), stroke 0.3s var(--ai4b-ease), opacity 0.3s var(--ai4b-ease); }
.imap__arrow { fill: none; stroke: var(--color-grey-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s var(--ai4b-ease); }
.imap__node { transition: opacity 0.5s var(--ai4b-ease), transform 0.5s var(--ai4b-ease); transform-box: fill-box; transform-origin: center; }
.imap__dot { fill: var(--color-blue); }
.imap.is-tracing .imap__wire:not(.is-trace) { opacity: 0.22; }
.imap.is-tracing .imap__node:not(.is-trace) { opacity: 0.35; }
.imap__wire.is-trace { stroke: var(--color-blue); stroke-width: 2; }
.imap__node.is-trace rect { stroke: var(--color-blue); }
.imap__node.is-trace .imap__arrow { stroke: var(--color-blue); }
.imap__node--ok.is-trace rect { stroke: var(--color-dark-2); }
.ai4b-motion:not(.ai4b-safe) [data-imap]:not(.is-drawn) .imap__wire { stroke-dashoffset: 1; }
.ai4b-motion:not(.ai4b-safe) [data-imap]:not(.is-drawn) .imap__node { opacity: 0; transform: scale(0.96); }
.imap__svg--tall { display: none; }
@media (max-width: 767.98px) {
  .imap { padding: 14px 10px 16px; }
  .imap__svg--wide { display: none; }
  .imap__svg--tall { display: block; }
}

/* ==========================================================================
   STATS — site .trust__info canon on dark: centred, footnote numbers, one sources line
   ========================================================================== */
.ai4b-stats { margin-top: 40px; }
.ai4b-stat { text-align: center; }
.bg__black-noise .ai4b-stat__num { color: var(--color-white); line-height: 1; margin-bottom: 16px; letter-spacing: -1px; font-weight: 700; }
.ai4b-stat__label { max-width: 270px; margin: 0 auto; color: var(--color-white); }
.ai4b-stat__label sup, .ai4b-stats__foot sup { font-size: 0.75em; line-height: 0; }
.ai4b-stat__label sup a { color: var(--color-yellow); font-weight: 700; text-decoration: none; padding: 0 2px; }
.ai4b-stats__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 20px; max-width: 1000px; margin: 36px auto 0; text-align: center; font-size: 0.875rem; line-height: 1.6; color: var(--color-grey-2); }
.ai4b-stats__foot-title { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.ai4b-stats__srcs { display: contents; list-style: none; margin: 0; padding: 0; }
.ai4b-stats__srcs li { margin: 0; line-height: inherit; }
.ai4b-stats__foot a { color: inherit; text-decoration: underline; text-decoration-color: rgba(138, 140, 144, 0.6); transition: color 0.3s; }
.ai4b-stats__foot a:hover { color: var(--color-white); }
@media (max-width: 767.98px) {
  /* mobile: «Sources:» then one source per line, number hanging in its own column */
  .ai4b-stats__foot { display: block; text-align: left; }
  .ai4b-stats__foot-title { margin-bottom: 8px; font-weight: 600; color: var(--color-grey); }
  .ai4b-stats__srcs { display: grid; gap: 8px; }
  .ai4b-stats__srcs li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; line-height: 1.45; overflow-wrap: anywhere; }
  .ai4b-stats__srcs sup { top: 0.1em; line-height: 1.45; }
}

/* ==========================================================================
   SERVICES GRID + owner row
   ========================================================================== */
.ai4b-sgrid { grid-template-columns: repeat(3, 1fr); }
.ai4b-scard .solution-card__bg { aspect-ratio: 3 / 2; }
@media (max-width: 767.98px) { .ai4b-scard .solution-card__bg { aspect-ratio: 1 / 1; } }
.ai4b-scard .solution-card__bottom { padding-right: 56px; }
.ai4b-scard .solution-card-title { margin: 0; color: var(--color-white); }
.ai4b-scard .solution-card__overlay {
  opacity: 1; transform: none; justify-content: flex-end;
  background: linear-gradient(to top, rgba(28, 31, 39, 0.95), rgba(28, 31, 39, 0.62));
  clip-path: inset(100% 0 0 0); transition: clip-path 0.6s var(--ai4b-ease); padding-right: 56px;
}
.ai4b-scard .solution-card__overlay .solution-card-title { margin-bottom: 12px; }
.ai4b-scard .solution-card__overlay .solution-card-text { margin-bottom: 16px; color: var(--color-white); hyphens: manual; -webkit-hyphens: manual; }
.ai4b-scard .solution-card__bottom { transition: opacity 0.4s var(--ai4b-ease); }
.ai4b-scard__corner { display: flex; transition: padding 0.4s var(--ai4b-ease); }
.ai4b-scard__corner img { width: 24px; height: 24px; display: block; }
.ai4b-scard__touch { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ai4b-scard:hover .solution-card__overlay { clip-path: inset(0 0 0 0); transform: none; }
  .ai4b-scard:hover .ai4b-scard__corner { padding: 10px 8px 8px 10px; }
}
.ai4b-scard:focus-visible .solution-card__overlay { clip-path: inset(0 0 0 0); }
.ai4b-scard:focus-visible .solution-card__bottom { opacity: 0; }
.ai4b-scard:focus-visible { outline-offset: -3px; outline-color: var(--color-yellow); }
@media (hover: none), (pointer: coarse) {
  .ai4b-scard .solution-card__overlay { display: none; }
  .ai4b-scard__touch { display: block; margin: 8px 0 0; font-size: 0.875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
}
.ai4b-owner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 32px; padding: 20px 28px; background: var(--color-light-bck); border: 1px solid var(--color-grey); border-radius: 4px;
}
.ai4b-owner .h5 { margin-bottom: 6px; }
.ai4b-owner p { margin: 0; max-width: 720px; color: var(--color-dark); }
.ai4b-owner .serviceTabs__details-btn { flex: none; margin: 0; white-space: nowrap; }

/* mobile swiper (services + cases) — the site's basic-swiper dots */
.ai4b-swipe:not(.swiper) > .swiper-pagination { display: none; }
.ai4b-swipe.swiper { overflow: hidden; }
.ai4b-swipe.swiper > .swiper-wrapper { display: flex; gap: 0; grid-template-columns: none; margin-top: 32px; }
.ai4b-swipe .swiper-slide { height: auto; }
.ai4b-swipe > .swiper-pagination { position: static; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
.ai4b-swipe .ai4b-case.swiper-slide:hover { margin-top: 0; margin-bottom: 0; }

/* ==========================================================================
   READINESS QUIZ
   ========================================================================== */
.ai4b-quiz { max-width: 824px; margin: 0 auto; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 4px; padding: 40px; }
.ai4b-quiz__bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 6px; }
.ai4b-quiz__count { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-grey-4); }
.ai4b-quiz__back, .ai4b-quiz__restart {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--color-blue); cursor: pointer;
}
.ai4b-quiz__back .ai4b-ico, .ai4b-quiz__restart .ai4b-ico { width: 18px; height: 18px; }
.ai4b-quiz__back[hidden] { display: none; }
.ai4b-quiz__progress { height: 4px; background: var(--color-light-bck); border-radius: 4px; overflow: hidden; margin-bottom: 32px; }
.ai4b-quiz__progress span { display: block; height: 100%; width: 0; background: var(--color-blue); border-radius: 4px; transition: width 0.45s var(--ai4b-ease); }
.ai4b-quiz__viewport { overflow: hidden; transition: height 0.25s var(--ai4b-ease); }
.ai4b-quiz__track { display: flex; align-items: flex-start; transition: transform 0.25s var(--ai4b-ease); }
.ai4b-quiz__step { flex: 0 0 100%; min-width: 0; padding: 2px; }
.ai4b-quiz__step[inert] { visibility: hidden; transition: visibility 0s linear 0.25s; }
.ai4b-quiz__q { margin-bottom: 20px; }
.ai4b-quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai4b-opt {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; min-height: 44px;
  background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 4px; padding: 16px 18px;
  font: inherit; line-height: 1.4; color: var(--color-dark-2); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.15s var(--ai4b-ease);
}
.ai4b-opt__ring { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--color-grey-2); background: var(--color-white); transition: border-color 0.2s, box-shadow 0.25s var(--ai4b-ease), background-color 0.2s; }
.ai4b-opt:hover { border-color: var(--color-blue); }
.ai4b-opt:hover .ai4b-opt__ring { border-color: var(--color-blue); }
.ai4b-opt:active { transform: scale(0.98); }
.ai4b-opt.is-picked { border-color: var(--color-blue); background: var(--ai4b-blue-tint); }
.ai4b-opt.is-picked .ai4b-opt__ring { border-color: var(--color-blue); background: var(--color-blue); box-shadow: inset 0 0 0 4px var(--color-white); }
.ai4b-quiz__result:focus { outline: none; }
.ai4b-quiz__lead { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.875rem; font-weight: 600; color: var(--color-grey-4); }
.ai4b-quiz__lead-check { width: 20px; height: 20px; }
.ai4b-quiz__lead-check path { transition-delay: 0.45s; }
.ai4b-quiz__rtitle { margin-bottom: 12px; clip-path: inset(0 0 0 0); transition: clip-path 0.65s var(--ai4b-ease) 0.15s; }
.ai4b-quiz__result.is-revealing .ai4b-quiz__rtitle { clip-path: inset(0 100% 0 0); transition: none; }
.ai4b-quiz__result.is-revealing .ai4b-quiz__lead-check path { stroke-dashoffset: 1; transition: none; }
.ai4b-quiz__rtext { margin-bottom: 12px; max-width: 680px; }
.ai4b-quiz__note { margin: 0; font-size: 0.875rem; color: var(--color-grey-4); }
.ai4b-quiz__ractions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.ai4b-quiz__ractions .giper-link { font-size: 0.9375rem; }

/* ==========================================================================
   APPROACH TABS: balanced panel + gate lock that opens
   ========================================================================== */
.ai4b-approach--white { background: var(--color-white); }
.ai4b-proc .approach-tabs-content > .tab-pane.active { display: flex; flex-direction: column; height: 100%; }
.ai4b-proc .approach-tab-description { margin-bottom: 24px; }
.ai4b-gate { display: flex; gap: 12px; align-items: flex-start; background: var(--ai4b-yellow-tint); border-radius: 4px; padding: 14px 16px; margin-top: 12px; }
.ai4b-gate__ico { width: 22px; height: 22px; color: var(--color-dark-2); margin-top: 1px; }
.ai4b-gate__text { margin: 0; color: var(--color-dark-2); }
.approach-column .check-list { margin-top: 12px; padding: 0; }
.approach-tabs-content .tab-pane.fade { transition: opacity 0.35s var(--ai4b-ease); }
.ai4b-lock .lk-shackle { transform-box: fill-box; transform-origin: 100% 100%; transition: transform 0.55s var(--ai4b-ease) 0.2s; }
.ai4b-lock .lk-body { transition: fill 0.3s var(--ai4b-ease) 0.2s; }
.is-passed .ai4b-lock .lk-shackle { transform: translateY(-2.5px) rotate(24deg); }
.ai4b-lock--nav { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.tab-pane.is-passed .ai4b-gate, .accordion-item.is-passed .ai4b-gate { background: rgba(52, 199, 89, 0.1); }
.tab-pane.is-passed .ai4b-gate__ico, .accordion-item.is-passed .ai4b-gate__ico { color: #1f7a38; }
.ai4b-rail { display: flex; align-items: center; gap: 16px; margin-top: 0; padding-top: 32px; font-size: 0.875rem; color: var(--color-grey-4); }
.ai4b-rail__bar { display: flex; gap: 4px; flex: 1; max-width: 260px; margin-left: auto; }
.ai4b-rail__seg { height: 4px; flex: 1; border-radius: 4px; background: var(--color-grey); }
.ai4b-rail__seg.is-on { background: var(--color-blue); }
.approach-accordion .approach-accordion-title .h5 { margin: 0; font-size: 1.125rem; line-height: 1.33; font-weight: 600; }

/* ==========================================================================
   HOW AI WORKS SAFELY — approach-tab frame with three panes
   ========================================================================== */
.l-short { display: none; }
.ai4b-safety .approach-tabs-content { padding: 32px 36px; }
.ai4b-safety .approach-tab-description { margin-bottom: 20px; }
.ai4b-seg {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 600px; margin: 0 0 28px; padding: 4px; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 30px;
}
.ai4b-seg__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--thumb-w, calc((100% - 8px) / 3));
  border-radius: 30px; background: var(--color-blue); transform: translateX(var(--thumb-x, 4px)); transition: transform 0.45s var(--ai4b-ease), width 0.45s var(--ai4b-ease);
}
/* ai4b.js measures the active button (--thumb-x / --thumb-w): long RU/UA labels make the columns unequal */
.ai4b-seg__btn {
  position: relative; z-index: 1; min-height: 44px; padding: 8px 12px; background: none; border: 0; border-radius: 30px;
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--color-dark-2); cursor: pointer; transition: color 0.3s;
}
.ai4b-seg__btn.is-active { color: var(--color-white); }
.ai4b-seg__btn:focus-visible { outline-offset: 2px; }
.ai4b-autonomy__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.ai4b-autonomy__copy { transition: height 0.45s var(--ai4b-ease); }
.ai4b-level.is-entering { animation: ai4b-in 0.45s var(--ai4b-ease) both; }
.ai4b-level__text { font-size: 1.25rem; line-height: 1.4; color: var(--color-dark-2); margin-bottom: 16px; }
.ai4b-level__example { background: var(--color-light-bck); border-radius: 4px; padding: 14px 18px; }
.ai4b-level__example p { margin: 0; }
.ai4b-level__example .ai4b-level__ex-label { font-size: 0.875rem; font-weight: 600; color: var(--color-grey-4); margin-bottom: 4px; }
.ai4b-flow { display: block; width: 100%; height: auto; overflow: visible; font-family: "Open Sans", Arial, sans-serif; }
.ai4b-flow--narrow { display: none; max-width: 300px; margin: 0 auto; }
.ai4b-flow__w { fill: none; stroke: var(--color-grey); stroke-width: 1.5; stroke-dasharray: 4 5; marker-end: url(#fa-off); transition: stroke 0.45s var(--ai4b-ease); }
.ai4b-flow__w.is-on { stroke: var(--color-blue); stroke-dasharray: none; marker-end: url(#fa-on); }
.ai4b-flow--narrow .ai4b-flow__w { marker-end: url(#fa-off-n); }
.ai4b-flow--narrow .ai4b-flow__w.is-on { marker-end: url(#fa-on-n); }
.ai4b-flow__lbl { font-size: 13px; fill: var(--color-grey-4); opacity: 0; transition: opacity 0.45s var(--ai4b-ease); }
.ai4b-flow__lbl.is-on { opacity: 1; }
.ai4b-flow__node circle { fill: var(--color-white); stroke: var(--color-grey); stroke-width: 1.5; transition: stroke 0.45s var(--ai4b-ease), fill 0.45s var(--ai4b-ease); }
.ai4b-flow__node.is-on circle { stroke: var(--color-blue); }
.ai4b-flow__node--ai circle { fill: var(--color-blue); stroke: var(--color-blue); }
.ai4b-flow__node text { font-size: 13px; font-weight: 600; fill: var(--color-dark-2); }
.ai4b-flow__node--ai text { fill: var(--color-white); }
.ai4b-flow__ok { fill: none; stroke: var(--ai4b-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s var(--ai4b-ease) 0.2s; }
.ai4b-flow.is-approve .ai4b-flow__ok { stroke-dashoffset: 0; }
.ai4b-flow.is-approve .ai4b-flow__node--person circle { fill: rgba(52, 199, 89, 0.08); }
.ai4b-kinds { list-style: none; margin: 0; padding: 0; }
.ai4b-kind { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--ai4b-line); }
.ai4b-kind:first-child { padding-top: 4px; }
.ai4b-kind:last-child { border-bottom: 0; padding-bottom: 0; }
.ai4b-kind .ai4b-dot { margin-top: 8px; }
.ai4b-kind__title { margin-bottom: 6px; }
.ai4b-kind p { margin: 0; max-width: 640px; }
.ai4b-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ai4b-dot--green { background: var(--ai4b-ok); }
.ai4b-dot--yellow { background: var(--color-yellow); }
.ai4b-dot--red { background: var(--ai4b-stop); }

@media (max-width: 1024px) {
  /* the site swaps approach tabs for an accordion here; this frame becomes a 3-way switch instead */
  .ai4b-safety.approach-tabs-wrapper { display: block; }
  .ai4b-safety .approach-tabs-nav { flex-direction: row; height: auto; }
  .ai4b-safety .approach-tabs-nav .nav-item, .ai4b-safety .approach-tabs-nav .nav-item:not(:has(.active)) { flex: 1 1 0; min-width: 0; height: auto; padding-right: 0; }
  .ai4b-safety .approach-tabs-nav .nav-item::after, .ai4b-safety .approach-tabs-nav .nav-link::before, .ai4b-safety .approach-tabs-nav .nav-link::after { display: none; }
  .ai4b-safety .approach-tabs-nav .nav-link { padding: 12px 10px; align-items: center; text-align: center; border: 1px solid var(--color-grey); border-right-width: 0; min-height: 56px; }
  .ai4b-safety .approach-tabs-nav .nav-item:last-child .nav-link { border-right-width: 1px; }
  .ai4b-safety .approach-tabs-nav .nav-link.active { border-color: var(--color-blue); }
  .ai4b-safety .approach-tabs-nav .nav-link h5 { font-size: 1rem; line-height: 1.25; margin: 0; }
  .ai4b-safety .approach-tab-subtitle { display: none; }
  .ai4b-safety .approach-tabs-content { border-left-width: 1px; border-top-width: 0; padding: 24px 20px; height: auto; }
  .ai4b-autonomy__panel { grid-template-columns: 1fr; gap: 24px; }
  .ai4b-autonomy__visual { max-width: 460px; width: 100%; margin: 0 auto; }
  .ai4b-page .h5 { font-size: 1.125rem; line-height: 1.33; }
  .ai4b-page .h4 { font-size: 1.5rem; }
}
@media (max-width: 767.98px) {
  .l-long { display: none; }
  .l-short { display: inline; }
  .ai4b-seg { max-width: none; margin-bottom: 20px; }
  .ai4b-seg__btn { font-size: 0.875rem; padding: 8px 4px; }
  .ai4b-flow--wide { display: none; }
  .ai4b-flow--narrow { display: block; }
  .ai4b-level__text { font-size: 1.125rem; }
}
@media (max-width: 650px) { .ai4b-page .h4 { font-size: 1.375rem; } }

/* ==========================================================================
   TABLES: compare + deployment
   ========================================================================== */
.ai4b-table-wrap { border: 1px solid var(--color-grey); border-radius: 4px; overflow: hidden; background: var(--color-white); }
.ai4b-table { width: 100%; border-collapse: collapse; }
.ai4b-table th, .ai4b-table td { padding: 14px 24px; text-align: left; vertical-align: top; line-height: 1.4; border-bottom: 1px solid var(--color-grey); }
.ai4b-table thead th { font-size: 1.125rem; font-weight: 700; background: var(--color-light-bck); color: var(--color-dark-2); }
.ai4b-table tbody th { font-weight: 700; color: var(--color-dark-2); width: 22%; }
.ai4b-table tbody tr:last-child th, .ai4b-table tbody tr:last-child td { border-bottom: 0; }
.ai4b-compare td { color: var(--color-grey-4); }
.ai4b-compare .ai4b-compare__us { background: var(--ai4b-blue-tint); color: var(--color-dark-2); }
.ai4b-compare thead .ai4b-compare__us { color: var(--color-blue); background: rgba(0, 122, 255, 0.12); }
.ai4b-compare tbody tr { transition: background-color 0.3s; }
.ai4b-compare tbody tr:hover th, .ai4b-compare tbody tr:hover td:not(.ai4b-compare__us) { background: var(--color-light-bck); }
.ai4b-deploy tbody th { width: 30%; }
.ai4b-deploy tbody th .ai4b-dot { margin: 0 10px 1px 0; }
.ai4b-safety .ai4b-table th, .ai4b-safety .ai4b-table td { padding: 16px 18px; }

/* ==========================================================================
   CASES — equal heights, chip beside title, site tag pills
   ========================================================================== */
.ai4b-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; margin-top: 40px; }
.ai4b-cases--2 { grid-template-columns: repeat(2, 1fr); }
.ai4b-case--wide { grid-column: span 2; }
.ai4b-cases--2 .ai4b-case--wide { grid-column: auto; }
.ai4b-case__body { padding: 20px; display: flex; flex-direction: column; height: 100%; }
.ai4b-case__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ai4b-case__top .h5 { margin-bottom: 16px; }
.ai4b-case__dl { margin: 0; }
.ai4b-case__dl > div { margin-bottom: 12px; }
.ai4b-case__dl dt { font-size: 0.875rem; font-weight: 400; color: var(--color-grey-4); margin-bottom: 2px; }
.ai4b-case__dl dd { margin: 0; color: var(--color-dark); }
.ai4b-case__result { margin: 4px 0 0; padding: 0; }
.ai4b-case__result li { font-weight: 600; line-height: 1.4; color: var(--color-dark-2); margin-bottom: 0; }
.ai4b-case--wide .ai4b-case__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
@media (min-width: 1200px) {
  .ai4b-cases--5 { grid-template-columns: repeat(4, 1fr); }
  .ai4b-cases--5 .ai4b-case--wide { grid-column: 1 / -1; }
  .ai4b-cases--5 .ai4b-case--wide .ai4b-case__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 30px; align-items: start; }
  .ai4b-cases--5 .ai4b-case--wide .ai4b-case__top { grid-column: 1 / -1; }
  .ai4b-cases--5 .ai4b-case--wide .ai4b-case__dl { grid-column: 1; grid-row: 2 / span 2; }
  .ai4b-cases--5 .ai4b-case--wide .ai4b-case__result { grid-column: 2; margin-top: 22px; }
  .ai4b-cases--5 .ai4b-case--wide .ai4b-case__tags { grid-column: 2; padding-top: 16px; }
}
.ai4b-case__tags { margin-top: auto; padding-top: 20px; }
.ai4b-case__tags .news-list-card__tag { margin: 0; text-decoration: none; transition: background-color 0.3s var(--ai4b-ease); }
.ai4b-case__tags a.news-list-card__tag:hover { background-color: var(--color-grey); }
.ai4b-chip { flex: none; display: inline-block; margin-top: 2px; padding: 4px 12px; border-radius: 30px; font-size: 0.875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--color-dark-2); }
.ai4b-chip--progress { background: var(--ai4b-yellow-tint); }
.ai4b-chip--trial { background: rgba(0, 122, 255, 0.12); }

/* ==========================================================================
   SUB-SERVICE BLOCKS
   ========================================================================== */
.ai4b-cards-2 { grid-template-columns: repeat(2, 1fr); }
.ai4b-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 60px; margin-top: 40px; }
.ai4b-principle { display: flex; gap: 20px; align-items: flex-start; }
.ai4b-principle__ico { flex: none; width: 40px; height: 40px; color: var(--color-blue); }
.ai4b-principle__ico * { vector-effect: non-scaling-stroke; }
.ai4b-principle .h5 { margin-bottom: 8px; }
.ai4b-principle p { margin: 0; color: var(--color-dark); }
.ai4b-delivs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.ai4b-deliv { background: var(--color-white); box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); padding: 20px; transition: box-shadow 0.5s, transform 0.5s var(--ai4b-ease); }
.ai4b-deliv:hover { transform: translateY(-10px); box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25); }
.ai4b-deliv__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ai4b-deliv__top img { width: 60px; height: 60px; flex: none; }
.ai4b-deliv__top .h5 { margin: 0; }
.ai4b-deliv p { margin: 0; }

/* ==========================================================================
   CONTACT FORM: person (rendered by includes/contact-form.html when contact_person is passed)
   ========================================================================== */
.ai4b-person {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0; margin-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ai4b-person__avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--color-blue); color: var(--color-white); font-weight: 700; font-size: 1.5rem; }
.ai4b-person__who p { margin: 0; }
.ai4b-person__name { font-weight: 700; font-size: 1.125rem; color: var(--color-white); }
.ai4b-person__role { color: var(--color-grey); }
.ai4b-person__reply { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--color-grey); }
.ai4b-person__ico { width: 20px; height: 20px; color: var(--color-yellow); }

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.ai4b-ctabar { display: none; }
@media (max-width: 767.98px) {
  .ai4b-ctabar {
    display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    min-height: 56px; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--color-dark-2); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(110%); transition: transform 0.45s var(--ai4b-ease);
  }
  .ai4b-ctabar.is-shown { transform: none; }
  .ai4b-ctabar .yellow-btn { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; }
  .table-of-content-top-btn { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- keyframes ---------- */
@keyframes ai4b-blink { 50% { opacity: 0; } }
@keyframes ai4b-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   RESPONSIVE (site breakpoints 1200 / 1024 / 768 / 575)
   ========================================================================== */
@media (max-width: 1200px) {
  .ai4b-stats { grid-template-columns: repeat(2, 1fr); gap: 48px 30px; }
}
@media (max-width: 991.98px) {
  .ai4b-sgrid { grid-template-columns: repeat(2, 1fr); }
  .ai4b-cases { grid-template-columns: repeat(2, 1fr); }
  .ai4b-delivs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .ai4b-owner { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; margin-top: 32px; }
  .ai4b-owner .serviceTabs__details-btn { white-space: normal; }
  .ai4b-quiz { padding: 20px 16px; }
  .ai4b-quiz__opts { grid-template-columns: 1fr; }
  .ai4b-quiz__ractions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ai4b-cases, .ai4b-cases--2 { grid-template-columns: 1fr; }
  .ai4b-case--wide { grid-column: auto; }
  .ai4b-case--wide .ai4b-case__dl { display: block; }
  .ai4b-cards-2 { grid-template-columns: 1fr; }
  .ai4b-principles { grid-template-columns: 1fr; gap: 32px; }
  .ai4b-delivs { grid-template-columns: 1fr; gap: 20px; }
  .ai4b-person__reply { margin-left: 0; width: 100%; }
  .ai4b-stats { margin-top: 32px; }
  .ai4b-stats__foot { margin-top: 32px; text-align: left; }
  .ai4b-rail__bar { display: none; }
  /* tables become stacked cards */
  .ai4b-table-wrap { border: 0; background: transparent; overflow: visible; }
  .ai4b-table, .ai4b-table tbody, .ai4b-table tr, .ai4b-table th, .ai4b-table td { display: block; width: 100%; }
  .ai4b-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ai4b-table tbody tr { border: 1px solid var(--color-grey); border-radius: 4px; overflow: hidden; background: var(--color-white); margin-bottom: 12px; }
  .ai4b-table tbody th, .ai4b-safety .ai4b-table tbody th { width: 100%; padding: 14px 16px 6px; border: 0; font-size: 1.125rem; }
  .ai4b-deploy tbody th { width: 100%; }
  .ai4b-table td, .ai4b-safety .ai4b-table td { padding: 8px 16px 12px; border: 0; }
  .ai4b-table td::before { content: attr(data-label); display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-grey-4); margin-bottom: 2px; }
  .ai4b-compare td.ai4b-compare__us::before { color: var(--color-blue); }
  .ai4b-table tbody tr:last-child th, .ai4b-table tbody tr:last-child td { border: 0; }
  .ai4b-sgrid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .ai4b-stats { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .ai4b-stat__label { font-size: 0.9375rem; }
}

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .ai4b-page *, .ai4b-page *::before, .ai4b-page *::after, .ai4b-ctabar { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* v2 balance: the process pane stacks «What you get» over the gate so the panel fills its frame */
@media (min-width: 1025px) {
  .ai4b-proc .approach-columns { grid-template-columns: 1fr; gap: 24px; }
  .ai4b-proc .approach-columns::before { display: none; }
  .ai4b-proc .approach-column:first-child, .ai4b-proc .approach-column:last-child { grid-column: 1; }
  .ai4b-proc .approach-tabs-nav .nav-link { padding-top: 16px; padding-bottom: 16px; }
  .ai4b-proc .approach-tab-description p { font-size: 1.125rem; line-height: 1.5; color: var(--color-dark-2); }
}
.ai4b-case__tags .news-list-card__tag { padding: 6px 10px; }

.ai4b-case:not(.ai4b-case--wide) .ai4b-case__top { flex-direction: column; gap: 0; }
.ai4b-case:not(.ai4b-case--wide) .ai4b-chip { margin: -4px 0 14px; }
@media (max-width: 991.98px) { .ai4b-case--wide .ai4b-case__top { flex-direction: column; gap: 0; } .ai4b-case--wide .ai4b-chip { margin: -4px 0 14px; } }

/* ==========================================================================
   SITE PORT — pieces the pilot never had (Flask integration, 30.09)
   ========================================================================== */

/* FAQ expand/collapse: the site's text controls, as real buttons (main.js binds by class) */
.ai4b-page button.table-of-content-top-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; line-height: inherit; text-transform: uppercase; color: var(--color-dark-2); cursor: pointer; }
.ai4b-page button.table-of-content-top-btn:first-child { border-right: 1px solid var(--color-grey); margin-right: 20px; padding-right: 20px; }
.ai4b-page button.table-of-content-top-btn:hover { color: var(--color-blue); }

/* one number on a sub-page (stats_slot agents / training / security) */
.ai4b-fact__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center;
  max-width: 1000px; margin: 0 auto; padding: 32px 40px; border: 1px solid var(--color-grey); border-radius: 4px; background: var(--color-white);
}
.ai4b-fact__num { margin: 0; line-height: 1; letter-spacing: -1px; font-weight: 700; color: var(--color-dark-2); white-space: nowrap; }
.ai4b-fact__label { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.4; color: var(--color-dark-2); }
.ai4b-fact__src { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-grey-4); overflow-wrap: anywhere; }
.ai4b-fact__src a { color: inherit; text-decoration: underline; text-decoration-color: rgba(138, 140, 144, 0.6); transition: color 0.3s; }
.ai4b-fact__src a:hover { color: var(--color-blue); }
@media (max-width: 767.98px) {
  .ai4b-fact__row { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
  .ai4b-fact__label { font-size: 1.125rem; }
}

/* bordered frame for autonomy (ai-agents) and deployment (secure-ai-adoption) on sub-pages —
   the same frame the hub's safety tabs sit in */
.ai4b-frame { margin-top: 40px; padding: 32px 36px; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 4px; }
.ai4b-frame + .ai4b-frame { margin-top: 24px; }
.ai4b-frame .approach-tab-description { margin-bottom: 20px; }
.ai4b-frame__title { margin-bottom: 8px; }
.ai4b-frame--kinds .ai4b-kind:first-child { padding-top: 12px; }
@media (max-width: 1024px) { .ai4b-frame { padding: 24px 20px; } }

/* formats (ai-consulting ways to work, ai-training tracks) */
.ai4b-formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 40px; }
.ai4b-formats--3 { grid-template-columns: repeat(3, 1fr); }
.ai4b-format { padding: 24px; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 4px; }
.ai4b-format .serviceTabs__panel-title { margin-bottom: 8px; }
.ai4b-format__dur { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--color-grey-4); }
.ai4b-format__ico { width: 18px; height: 18px; margin-top: 1px; color: var(--color-grey-4); }
.ai4b-format .html-style { flex: 1 1 auto; }
.ai4b-format .html-style p { margin-bottom: 0; }
.ai4b-formats__dur { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-grey-4); }
.ai4b-format__result { margin: 0; padding: 20px 0 0; }
.ai4b-format__result li { margin-bottom: 0; font-weight: 600; line-height: 1.4; color: var(--color-dark-2); }
@media (max-width: 1199.98px) { .ai4b-formats--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .ai4b-formats, .ai4b-formats--3 { grid-template-columns: 1fr; gap: 20px; } .ai4b-format { padding: 20px; } }

/* case status that is not a chip: a small note inside the card */
.ai4b-case__note { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--color-grey-4); }

/* touch: inline controls get a ≥44px hit area without changing how they look */
@media (pointer: coarse) {
  .vpanel__chip, .vpanel__srcs-toggle, .vpanel__replay, .ai4b-case__tags .news-list-card__tag, .ai4b-page .giper-link,
  .ai4b-page .table-of-content__button, .ai4b-stat__label sup a { position: relative; }
  .vpanel__chip::after, .vpanel__srcs-toggle::after, .vpanel__replay::after, .ai4b-case__tags .news-list-card__tag::after, .ai4b-page .giper-link::before,
  .ai4b-page .table-of-content__button::before, .ai4b-stat__label sup a::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .ai4b-page .table-of-content__button::before { left: 0; right: 0; height: calc(100% + 24px); min-height: 44px; }
  .ai4b-stat__label sup a::after { left: -8px; right: -8px; }
  .ai4b-stats__srcs a, .ai4b-fact__src a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .ai4b-quiz__back, .ai4b-quiz__restart { min-width: 44px; padding: 0 4px; }
}

/* narrow integration map: system names get one size smaller so «Documents» fits its 74px box */
.imap__svg--tall .imap__node--sys text { font-size: calc(var(--fs) - 2px); }

/* case tags never push past the card on narrow screens */
.ai4b-case__tags { flex-wrap: wrap; }
.ai4b-case__tags .news-list-card__tag { max-width: 100%; }

/* autonomy switch on phones: short labels, a long one wraps between words inside its segment */
@media (max-width: 767.98px) {
  .ai4b-seg__btn { white-space: normal; padding: 6px 6px; }
  .ai4b-seg, .ai4b-seg__thumb { border-radius: 22px; }
}
/* stage names in the 306px tab column: one size down so «Масштабирование» fits whole (no hyphenation) */
@media (min-width: 1025px) {
  .ai4b-page .approach-tabs-nav .nav-link h5 { font-size: 1.25rem; line-height: 1.25; }
}
@media (max-width: 767.98px) {
  /* safety switch on phones: UA/RU short names are longer than the EN pilot */
  .ai4b-safety .approach-tabs-nav .nav-link { padding-left: 4px; padding-right: 4px; }
  .ai4b-safety .approach-tabs-nav .nav-link h5 { font-size: 0.875rem; }
}
@media (max-width: 374.98px) {
  .ai4b-safety .approach-tabs-nav .nav-link h5 { font-size: 0.8125rem; }
}
/* three cases (sub-pages): 3 equal columns; on 768–991 the third card takes the full row */
@media (min-width: 768px) and (max-width: 991.98px) { .ai4b-cases--3 > .ai4b-case:last-child { grid-column: 1 / -1; } }
/* verified-answer panel: the caption never runs under the absolutely placed «Replay» (UA/RU labels are longer) */
[data-vpanel] .vpanel__caption { padding-right: 124px; }
@media (max-width: 575.98px) {
  [data-vpanel] .vpanel__caption { padding-right: 36px; }
  .vpanel__replay { min-width: 32px; justify-content: flex-end; }
  .vpanel__replay span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* UA/RU system names («Документи», «Документы») are wider than «Documents»: one px smaller in the wide map */
html[lang="uk"] .imap__svg--wide .imap__node--sys text, html[lang="ru"] .imap__svg--wide .imap__node--sys text { font-size: calc(var(--fs) - 1px); }

/* ≤767 touch service cards: the card text is clamped to whole lines, never cut mid-word */
@media (hover: none), (pointer: coarse) {
  .ai4b-scard__touch { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  /* the site's .solution-card__bottom is height:100% + padding (content-box) → it hangs 40px below the
     card and the last lines were cut; inset 0 alone gives the right box */
  .ai4b-scard .solution-card__bottom { height: auto; }
}
/* ≤400: the long CTA pills stay on one line (ua/ru/en at 375; 320 may wrap) */
@media (max-width: 400px) {
  .ai4b-hero__actions > a, .ai4b-ctabar .yellow-btn { font-size: 0.8125rem; letter-spacing: 0; padding-left: 10px; padding-right: 10px; }
  .ai4b-hero__actions > a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
}
/* the site's round «to top» button rises above the sticky CTA bar while the bar is shown */
@media (max-width: 767.98px) {
  body:has(.ai4b-ctabar.is-shown) .on__header-link { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .on__header-link { transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.45s var(--ai4b-ease); }
}
/* non-numeric fact (training «Ст. 4»): a tinted note, like the process gate */
.ai4b-note { display: flex; gap: 14px; align-items: flex-start; max-width: 1000px; margin: 0 auto; padding: 24px 28px; background: var(--ai4b-yellow-tint); border-radius: 4px; }
.ai4b-note__ico { width: 24px; height: 24px; margin-top: 2px; color: var(--color-dark-2); }
.ai4b-note__text { margin: 0 0 10px; font-size: 1.125rem; line-height: 1.5; color: var(--color-dark-2); }
.ai4b-note__text strong { font-weight: 700; }
@media (max-width: 767.98px) { .ai4b-note { padding: 18px 16px; gap: 10px; } .ai4b-note__text { font-size: 1rem; } }

/* hub «Склад рішення»: the focused card rises above its neighbours so its ring is never covered */
.ai4b-page .ai4b-scard:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; z-index: 3; }
/* panel focused after «Replay» (tabindex=-1): no ring on the whole card */
[data-vpanel]:focus { outline: none; }
/* verified-answer panel, action row: on narrow cards the button drops under the text instead of
   overflowing the card (320–414) */
.vpanel__action { flex-wrap: wrap; row-gap: 8px; }
.vpanel__action-text { flex: 1 1 150px; min-width: 0; }
.vpanel__approve { max-width: 100%; }