/* ============================================================
   AI — the /ai page's own pieces (site/src/components/AiPills.astro; the page itself is still on Webflow)
   Requires: tokens.css, word-pills.css
   ============================================================ */

/* The /ai decorations, sized as the 71 pill box (1.365em). Live: embed/ai-promo-pills-embed.html. */
.ai-cols { position: relative; flex-shrink: 0; overflow: hidden; width: 1.596em; height: 1.365em; }
.ai-cols__col { position: absolute; bottom: 0; width: 0.769em; border-radius: 0.199em; }
.ai-cols__col--purple { left: 0; height: 78.9%; background: var(--color-accent-purple); }
.ai-cols__col--blue { left: 0.827em; height: 100%; background: var(--color-accent-blue); }
.ai-bars { display: flex; flex-direction: column; align-items: flex-start; gap: 0.058em; flex-shrink: 0; width: 1.654em; height: 1.365em; }
.ai-bars__bar { height: 0.416em; border-radius: var(--radius-pill); }
.ai-bars__bar--lb { width: 100%; background: var(--color-accent-light-blue); }
.ai-bars__bar--pink { width: 67.4%; background: var(--color-accent-pink); }
.ai-bars__bar--red { width: 34.9%; background: var(--color-accent-red); }

/* ---------- Prompts: three running lines of prompt chips (live embed/ai-promo-prompts-embed.html) ----------
   Measured 22.10.2026: chips 56 high, 32 inside, radius 24, Birch/H6; 16 between chips and rows; the rows run
   the page's full width. The lines move on their own (faster while the page scrolls); «reduce motion» stops them.
   The prompts are in the HTML once as a list for readers; the running copy is aria-hidden. */
.ai-prompts__rows { display: grid; gap: var(--gap-main); overflow: hidden; }
.ai-prompts__belt { display: flex; gap: var(--gap-main); width: max-content; will-change: transform; }
.ai-prompts__chip {
  display: block;
  height: 3.5rem;
  line-height: 3.5rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-xl);
  background: var(--color-bg-grey);
  white-space: nowrap;
}
.ai-prompts__kw--green { color: var(--color-text-accent-green); }
.ai-prompts__kw--pink { color: var(--color-text-accent-pink); }
.ai-prompts__kw--light-blue { color: var(--color-text-accent-light-blue); }
.ai-prompts__more { display: flex; justify-content: center; margin-top: var(--space-md); }

/* ---------- Vision: «Today’s co-pilot» and «Tomorrow’s agent» (live embed/ai-promo-vision-embed.html) ----------
   The co-pilot card holds under the menu while the agent card scrolls up over it, the co-pilot shrinking a little
   (the page's script). From tablet up both cards are a screen high but no more than 40rem (the
   full screen left an empty middle); phones take the content's height. Radius 60 (24 on phones), 48 inside. */
.ai-vision__lead { margin: 0 0 var(--block-gap); text-align: center; } /* the lead belongs to the cards: the block gap (48, phones 24) */
.ai-vision__cards { display: grid; grid-auto-rows: 1fr; gap: var(--space); } /* both cards as tall as the taller one, at every width */
.ai-vision__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  --vision-gap: var(--space-md);
  gap: var(--vision-gap);
  padding: var(--space-lg);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.ai-vision__card h2, .ai-vision__card p { margin: 0; }
@media (min-width: 48rem) { .ai-vision__card { min-height: min(40rem, calc(100vh - var(--nav-height) - var(--space-xl))); } }
.ai-vision__copilot {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-sm));
  background: var(--color-accent-orange);
  color: var(--color-text-inverted);
  transform-origin: top center;
}
.ai-vision__art { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.ai-vision__agent .ai-vision__art { align-items: flex-end; margin-top: calc(var(--space-lg) - var(--vision-gap)); } /* the picture as far from the text as from the card's bottom: 48 */
.ai-vision__copilot img { width: 15.5rem; height: auto; }
.ai-vision__agent { position: relative; z-index: 1; background: var(--color-accent-dark-blue); color: var(--color-text); }
.ai-vision__agent p { max-width: 50rem; }
@media (min-width: 48rem) { .ai-vision__agent p { text-wrap: balance; } }
.ai-vision__agent picture { display: block; width: 100%; }
.ai-vision__agent img { width: 100%; height: auto; }
@media (max-width: 61.9375rem) { .ai-vision__card { border-radius: var(--radius-xl); } }
@media (max-width: 47.9375rem) {
  .ai-vision__card { padding: var(--space-lg) var(--gap-md); --vision-gap: var(--space); }
  .ai-vision__copilot img { width: 50%; }
}

/* ---------- Business Context: the full-width bento card (BentoCards, class ai-context) ----------
   The title in two lines, not three (tablet and desktop). The air around the picture is
   the shared full-width card rule in product-blocks.css. */
@media (min-width: 48rem) {
  .ai-context .bento-cards__head h3 { max-width: calc(2 * var(--measure-card-title)); }
}