/* ============================================================
   BENTO CTA — the closing call to action of the live course pages, home and /manage (Webflow .bento-cta_row,
   moved 09.10.2026 with the Birch Course; BentoCta.astro). Three equal columns: a dotted «Book demo» card,
   the trial tiles («14 days free trial», two perks), a yellow «Try Birch» card. Phones: one column, Try first.
   Requires: tokens.css, page.css. Fill follows the page theme (--ink from page.css).
   States measured on live: both cards turn Accent/Indigo with white text on hover.
   ============================================================ */
.bento-cta { padding-top: var(--space-lg); } /* closer to the content above than a section gap (Liliya's review 09.10.2026) */
.bento-cta__row { align-items: stretch; }
.bento-cta__card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius-lg);
  text-align: center;
  transition: background-color var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
.bento-cta__card--demo { border-style: dotted; border-color: var(--ink); color: var(--ink); }
.bento-cta__card--try { background: var(--color-primary); color: var(--color-text-inverted); }
@media (hover: hover) {
  .bento-cta__card:hover, .bento-cta__card:focus-visible { background: var(--color-accent-indigo); border-color: var(--color-accent-indigo); color: var(--color-text); }
}
@media (prefers-reduced-motion: reduce) { .bento-cta__card { transition: none; } }

.bento-cta__perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-main); }
.bento-cta__stack { display: grid; gap: var(--gap-main); }
.bento-cta__tile {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  text-align: center;
}
.theme-dark .bento-cta__tile { background: var(--color-bg-grey); }

@media (max-width: 47.9375rem) {
  .bento-cta__card { padding: var(--space-lg) var(--space); }
  .bento-cta__card--try { order: -1; } /* live phone order: Try Birch, the trial tiles, Book demo */
  .bento-cta__card--demo { order: 1; }
}