/* ==========================================================================
   Two ways — Birch AI / Birch MCP / «Learn the difference» (site/src/components/TwoWays.astro, 22.10.2026).
   Requires: tokens.css, surface.css (.card), button.css, chat-card.css.
   Live bir.ch/ai and bir.ch/mcp (Webflow .card-base--yellow / --purple / --grey + embeds promo-ai-e, promo-mcp-e),
   measured 22.10.2026: cards 16 radius, picture 32 under the title, text on the card's bottom; the grey card holds
   a Light Blue banner with the three product logos, then a centred heading, text and the yellow button.
   ========================================================================== */

.two-ways__grid { row-gap: var(--grid-gap); }
.two-ways__card { display: flex; flex-direction: column; }
.theme-dark .two-ways__card--ai { background: var(--color-primary); color: var(--color-text-inverted); }
.theme-dark .two-ways__card--mcp { background: var(--color-accent-purple); color: var(--color-text); }
.two-ways__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.two-ways__head h3 { margin: 0; }
.two-ways__media { flex: 1; margin-block: var(--space-lg); } /* takes the card's spare height: the text sits on the card's bottom */
.two-ways__text { margin: 0; }

/* «Explore →»: a pill link, white under the mouse (live .btn-ghost) */
.two-ways__explore {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) { .two-ways__explore:hover { background: var(--color-bg-white); color: var(--color-text-inverted); } } /* live: white with black text */
.two-ways__explore:focus-visible { outline: var(--border-thick) solid currentColor; outline-offset: var(--border-thin); }

/* ---------- Birch AI: the product with a chat popover ---------- */
.two-ways__shot {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}
.two-ways__shot { aspect-ratio: 2168 / 1080; background: center / cover no-repeat; }
.two-ways__pop {
  position: absolute;
  left: 57%;
  top: 15%;
  width: 41%;
  height: 81%;
  opacity: 0;
  transform: translateY(3%) scale(0.96);
  transform-origin: 72% 22%;
  --motion-dur: var(--duration-reveal); /* the Reveal character */
  --motion-ease: var(--ease-reveal);
  transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease);
}
.two-ways__shot.is-live .two-ways__pop { opacity: 1; transform: none; }
.two-ways__pop .chat-card-wrap { width: 100%; height: 100%; aspect-ratio: auto; }
.two-ways__pop .chat-card {
  border-radius: 7cqi;
  box-shadow: 0 4cqi 12cqi rgba(0, 0, 0, 0.22);
  font-size: 4.2cqi; /* live: the popover's text scales off its width */
}
.two-ways__pop .chat-card__body { overflow: hidden; } /* a still picture: the reply fits, nothing scrolls */
.two-ways__pop .chat-card__feed { gap: 0.8em; }
.two-ways__pop .chat-card__response-content p { margin-bottom: 0.4em; }
.two-ways__pop .chat-card__action { margin-top: 0.3em; }
.two-ways__pop .chat-card__input-area { padding: 0.5em 1.3em 1.1em; }
/* one line, as live: the request types in and runs out of the field rather than growing it to three lines */
.two-ways__pop .chat-card__input-wrap { border-radius: var(--radius-pill); min-height: 0; padding: 0.6em 2.4em 0.6em 0.9em; }
.two-ways__pop .chat-card__text-flow { white-space: nowrap; overflow: hidden; }
.two-ways__pop .chat-card__typed { white-space: nowrap; }
.two-ways__pop .chat-card__send { right: 0.35em; bottom: 50%; transform: translateY(50%); width: 1.6em; height: 1.6em; }
.two-ways__pop .chat-card__send.is-active { background: var(--chat-send); color: var(--color-text-grey); }
.two-ways__pop .chat-card__input-area::before { content: none; }

/* ---------- Birch MCP: the tile, the dots, the client ---------- */
.two-ways__card--mcp .two-ways__media { container-type: inline-size; } /* the drawing's cqi units read the card's width */
.two-ways__mcp > * { flex: 0 0 auto; }
.two-ways__mcp {
  display: flex;
  align-items: center;
  justify-content: space-between; /* edge to edge of the card's text, as live: the chip on the left edge, the tile on the right */
  gap: 3cqi;
  aspect-ratio: 447 / 200;
}
.two-ways__src { position: relative; width: 25cqi; margin-left: 5.425cqi; } /* the «M» chip (21.7 % of the tile out) meets the card's text edge */
.two-ways__tile { display: block; width: 100%; height: auto; }
.two-ways__chip { position: absolute; width: 43%; height: auto; }
.two-ways__chip--m { left: -21.7%; top: 35.7%; }
.two-ways__chip--c { left: 50%; top: 71.4%; }
.two-ways__chip--p { left: 86%; top: 30%; }
.two-ways__dots { display: flex; align-items: center; gap: 1.5cqi; }
.two-ways__dot { width: 2.1cqi; height: 2.1cqi; border-radius: 50%; background: var(--color-text); opacity: 0.28; }
.two-ways__dest {
  position: relative;
  width: 25cqi;
  aspect-ratio: 1;
  background: var(--color-bg-white);
  border-radius: 26%;
  box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.2);
  perspective: 45cqi;
}
/* the logo sits on the shared prism (prism.css): three faces, one face 60 % of the tile */
.two-ways__drum { inset: 20%; --prism-h: 15cqi; }
.two-ways__face { inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* the ChatGPT mark ships white — drawn dark through a mask so it reads on the white tile */
.two-ways__face--mask { background: var(--color-text-inverted); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.two-ways__mcp.is-live .two-ways__dot { animation: two-ways-dot 1600ms linear infinite; animation-delay: calc(var(--i) * 80ms); } /* a wave: each dot 5 % of the wave later */
@keyframes two-ways-dot { 0% { opacity: 0.28; } 12% { opacity: 1; } 30%, 100% { opacity: 0.28; } }

/* ---------- Learn the difference ---------- */
.two-ways__compare { padding: var(--space-xs); text-align: center; } /* live 16; 8 keeps the banner's corners nested in the card's 16 */
.two-ways__banner {
  display: flex;
  justify-content: center;
  padding-block: var(--space-xl); /* live 99 at 1440 — the nearer step */
  border-radius: var(--radius-sm); /* nested: card 16 − gutter 8 (live 16 in 16) */
  background: var(--color-accent-light-blue);
}
.two-ways__chain { display: flex; align-items: center; gap: var(--space-sm); max-width: 100%; padding-inline: var(--space-md); }
/* the logos keep their live size (262 / 306 / 288 × 83, the width attributes) and shrink together when the banner
   is narrower than the row — tablets (Liliya's review 27.10.2026: they ran out of the card at 768–1024) */
.two-ways__chain img { display: block; flex: 0 1 auto; min-width: 0; height: auto; }
.two-ways__link-dot { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--color-accent-purple); }
.two-ways__copy {
  display: grid;
  justify-items: center;
  gap: var(--gap-heading-large); /* H2 → its text */
  padding: var(--space-lg) var(--space-sm) var(--space-md); /* 32 under the button */
}
.two-ways__copy h2, .two-ways__copy p { margin: 0; }
.two-ways__copy p { max-width: 40rem; }
@media (min-width: 48rem) { .two-ways__copy p { text-wrap: balance; } }
.two-ways__note { color: var(--color-text-grey-on-grey); }
.two-ways__cta { margin-top: calc(var(--space-md) - var(--gap-heading-large)); } /* + the gap = 32 from the text, as live */

@media (max-width: 47.9375rem) {
  .two-ways__explore { min-height: var(--tap-min); } /* 44 to tap */
  .two-ways__media { margin-block: var(--space-md); }
  .two-ways__banner { padding-block: var(--gap-md); }
  .two-ways__chain { flex-direction: column; gap: var(--space-xxs); }
  .two-ways__chain img { width: auto; height: 3.125rem; }
  .two-ways__link-dot { width: 1.3rem; height: 1.3rem; }
  .two-ways__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .two-ways__pop { transition: none; }
  .two-ways__mcp.is-live .two-ways__dot { animation: none; opacity: 0.7; }
}