/* Demo starting points, ported from the phase 2 Book a demo concept (bd-start): three WhatsApp setups, coloured like
   the three signposts Flo points along. Each card spans three rows (title, text, the usual path), so the paths start
   level (the Level Row Rule). Flo stands beside the heading at the physical right, pointing back along the signposts
   towards the cards in both directions (her artwork never mirrors, so the right-to-left grid names her column first);
   her sticker has its own band above her. */
.bd-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
  grid-template-areas: "head flo" "list list";
  column-gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
[dir="rtl"] .bd-start-grid { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); grid-template-areas: "flo head" "list list"; }
.bd-start-head { grid-area: head; align-self: end; display: grid; gap: 18px; max-width: 760px; padding-bottom: 8px; }
.bd-start-list { grid-area: list; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.bd-start-card {
  min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px;
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
  border-radius: var(--r-lg);
  background: var(--s);
}
@supports not (grid-template-rows: subgrid) {
  .bd-start-card { display: flex; flex-direction: column; gap: 12px; }
}
.bd-start-card h3 { font: 800 1.25rem/1.25 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.bd-start-card p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.bd-start-path { align-self: end; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--sheet-bg); color: var(--ink); font: 600 14px/1.45 var(--text); box-shadow: var(--shadow-xs); }
.bd-start-path .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }
.bd-start-flo { grid-area: flo; position: relative; margin: 0; padding-top: 64px; }
.bd-start-flo img { display: block; width: 100%; height: auto; }
.bd-start-sticker { position: absolute; z-index: 2; top: 6px; right: 4px; white-space: nowrap; --rot: 4deg; }
[dir="rtl"] .bd-start-sticker { --rot: 4deg; }
@media (max-width: 1179px) {
  .bd-start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 230px); }
  [dir="rtl"] .bd-start-grid { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .bd-start-list { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .bd-start-card { grid-row: auto; display: flex; flex-direction: column; gap: 12px; }
}
@media (max-width: 479px) {
  .bd-start-sticker { padding: 8px 12px 9px; font-size: 14px; }
}
@media (max-width: 719px) {
  .bd-start-grid, [dir="rtl"] .bd-start-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "flo" "list"; }
  .bd-start-flo { justify-self: center; width: min(70%, 260px); margin-top: 16px; }
}