/* "Let clients book without leaving your site" - the homepage and every industry page
   (public/assets/embed-section.js fills in the pictures). Uses each page's own color tokens. */
.embed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.embed-card { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 10px 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.embed-card:hover { border-color: var(--border-strong); }
.embed-card[aria-selected="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--primary-soft); }
/* Holds the picture's space (and a soft placeholder) until it arrives, so nothing jumps. */
.embed-card-art { display: block; aspect-ratio: 320 / 200; margin-bottom: 12px; border-radius: 8px; background: var(--surface-2); }
.embed-card-art:not(:empty) { background: none; }
/* The cards not picked fade back (their pictures - the text stays readable), so the eye goes to the
   picked one and its animation below; hovering one brings it back. */
.embed-card-art { transition: opacity 0.15s ease, filter 0.15s ease; }
.embed-card[aria-selected="false"] .embed-card-art { opacity: 0.55; filter: grayscale(0.6); }
.embed-card[aria-selected="false"]:hover .embed-card-art, .embed-card[aria-selected="false"]:focus-visible .embed-card-art { opacity: 1; filter: none; }
.embed-card-title { font-size: 15px; font-weight: 600; margin: 0 4px 4px; }
.embed-card-desc { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); margin: 0 4px; }
.embed-stage { max-width: 760px; margin: 28px auto 0; aspect-ratio: 320 / 200; }
.embed-card-art svg, .embed-stage svg { display: block; width: 100%; height: auto; }
/* The first animation sits on its opening frame until it's scrolled into view (embed-section.js). */
[data-embed-waiting] svg * { animation-play-state: paused !important; }
.embed-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 32px; text-align: center; }
.embed-foot p { font-size: 14.5px; color: var(--text-muted); max-width: 640px; text-wrap: pretty; }
@media (max-width: 960px) { .embed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the four ways stack in one column and only the picked one shows its picture - which plays the
   animation right there (embed-section.js, same 640px) - while the others are just their title and
   description until tapped, so there's no separate stage below. */
@media (max-width: 640px) {
  .embed-grid { grid-template-columns: 1fr; gap: 10px; }
  .embed-card[aria-selected="false"] { padding: 12px 10px 14px; }
  .embed-card[aria-selected="false"] .embed-card-art { display: none; }
  .embed-stage { display: none; }
}
/* Desktop: the four ways as a list on the left (.embed-split) - just their title and description, the
   picked one highlighted - with the animation playing beside them, so there's one picture on screen
   instead of five. Tablets (641-899px) keep the cards above the stage. */
@media (min-width: 900px) {
  .embed-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: center; }
  .embed-grid { grid-template-columns: 1fr; gap: 10px; }
  .embed-card { padding: 14px 14px 16px; }
  .embed-card-art { display: none; }
  .embed-stage { max-width: none; margin: 0; }
}