/* Demo takeaways, ported from the phase 2 Book a demo concept (bd-keep): four takeaways, each with a small picture of
   the thing you keep. Each card spans three rows of the list grid (picture, title, text), so the pictures start level
   and share one height, and the titles line up, whatever the length of the text (the Level Row Rule). The pictures
   illustrate; the text carries it. Logical properties, so Arabic mirrors. */
.bd-keep-head { display: grid; gap: 18px; max-width: 860px; }
.bd-keep-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px clamp(14px, 1.6vw, 22px); margin-top: clamp(40px, 5vw, 64px); }
.bd-keep-card {
  min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px;
  padding: 14px 14px clamp(20px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--k);
}
@supports not (grid-template-rows: subgrid) {
  .bd-keep-card { display: flex; flex-direction: column; gap: 14px; }
}
.bd-keep-pic { min-width: 0; min-height: 176px; display: grid; align-content: center; gap: 8px; padding: 14px; border-radius: 22px; background: var(--sheet-bg); color: var(--ink); box-shadow: var(--shadow-sm); }
.bd-keep-card h3 { padding-inline: 8px; font: 800 1.2rem/1.25 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.bd-keep-card p { padding-inline: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
/* 1: a Flow, live */
.bd-keep-flow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 2px; font: 800 15px/1.25 var(--text); }
.bd-keep-flow .tag { min-height: 26px; padding: 2px 10px; font-size: 12px; }
.bd-keep-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: 11px; border: 2px solid var(--line); font: 700 14px/1.25 var(--text); }
.bd-keep-opt i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); }
.bd-keep-opt.is-on { border-color: var(--green); background: var(--field-green); }
.bd-keep-opt.is-on i { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--field-green); }
.bd-keep-send { display: grid; place-items: center; min-height: 34px; margin-top: 2px; border-radius: 999px; background: var(--green); color: var(--wa-ink); font: 800 14px/1 var(--text); }
/* 2: an approved result, in the organic blob */
.bd-keep-win { justify-items: start; }
.bd-keep-blob {
  display: grid; place-items: center;
  min-width: 6.6rem; min-height: 4.6rem; padding: 10px 18px;
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
  background: var(--field-mint); color: var(--ink);
  font: 800 clamp(1.8rem, 1.4rem + 0.9vw, 2.3rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  rotate: -3deg;
}
[dir="rtl"] .bd-keep-blob { rotate: 3deg; }
.bd-keep-win-l { font: 700 15px/1.35 var(--text); text-wrap: balance; }
.bd-keep-win-by { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
/* 3: the rollout, as a short rail */
.bd-keep-plan { position: relative; gap: 12px; padding-inline-start: 34px; }
.bd-keep-plan::before { content: ""; position: absolute; inset-inline-start: 19px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--line); }
.bd-keep-step { position: relative; display: grid; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.bd-keep-step b { font: 800 14px/1.3 var(--text); color: var(--ink); }
.bd-keep-step::before { content: ""; position: absolute; inset-inline-start: -21px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--sheet-bg); border: 3px solid var(--sky); }
.bd-keep-step.is-live::before { background: var(--green); border-color: var(--green); }
/* 4: the straight answer, either way */
.bd-keep-fit { gap: 6px; justify-items: start; }
.bd-keep-verdict { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border-radius: 14px; font: 700 14px/1.3 var(--text); }
.bd-keep-verdict .i { flex: none; width: 18px; height: 18px; }
.bd-keep-verdict.is-yes { background: var(--field-green); }
.bd-keep-verdict.is-yes .i { color: var(--ink); }
.bd-keep-verdict.is-no { box-shadow: inset 0 0 0 2px var(--line-strong); }
.bd-keep-or { padding-inline-start: 12px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 1179px) {
  .bd-keep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .bd-keep-list { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .bd-keep-pic { min-height: 0; }
}