/* =============================================================================
   YesBOS 2.0 — Book a Demo: "Meet your first Digital Employee."
   Framed as the first interview, not a sales call. Anchored on the philosophy:
   every business will have two workforces — Human + Digital — working together.
   The conversation is about the business and the workforce, not finance software.
   Builds on design-system.css.
   ============================================================================= */

/* --- Intro --- */
.dm-intro { padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.dm-intro__head { max-width: 44rem; }
.dm-intro h1 { margin-top: var(--sp-3); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
.dm-intro .lead { margin-top: var(--sp-5); max-width: 40rem; }

/* --- The two workforces (philosophy) --- */
.dm-vision { padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 5rem); text-align: center; }
.dm-vision__lead { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.dm-two { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: stretch; max-width: 46rem; margin-inline: auto; }
@media (min-width: 700px) { .dm-two { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5); } }
.dm-two__col { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); box-shadow: var(--shadow-xs); }
.dm-two__col--digital { border-color: color-mix(in srgb, var(--forest) 45%, var(--line)); background: var(--forest-wash); }
.dm-two__tag { display: block; font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dm-two__col--digital .dm-two__tag { color: var(--forest); }
.dm-two__col p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.dm-two__join { display: grid; place-items: center; width: 40px; height: 40px; margin-inline: auto; border-radius: 50%; background: var(--forest-tint); color: var(--forest); }
.dm-two__join svg { width: 18px; height: 18px; }
@media (max-width: 699px) { .dm-two__join { transform: rotate(45deg); } }
.dm-vision__line { margin-top: var(--sp-7); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); text-wrap: balance; }

/* --- During the meeting --- */
.dm-meeting { background: var(--forest-wash); border-block: 1px solid color-mix(in srgb, var(--forest) 10%, transparent); }
.dm-meeting__head { max-width: 40rem; }
.dm-meeting__head h2 { margin-top: var(--sp-3); }
.dm-meeting__head .lead { margin-top: var(--sp-4); }
.dm-steps { list-style: none; padding: 0; margin-top: var(--sp-8); display: grid; grid-template-columns: 1fr; gap: var(--sp-5); counter-reset: dmstep; }
@media (min-width: 820px) { .dm-steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.dm-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-xs); counter-increment: dmstep; }
.dm-step::before { content: counter(dmstep, decimal-leading-zero); display: block; font-size: var(--fs-sm); font-weight: 700; color: color-mix(in srgb, var(--forest) 55%, var(--line)); margin-bottom: var(--sp-4); }
.dm-step__k { display: block; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--forest); }
.dm-step p { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* --- Book it --- */
.dm-book__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .dm-book__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.dm-form-wrap h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; }
.dm-book__note { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.dm-form { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.dm-form__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 540px) { .dm-form__row { grid-template-columns: 1fr 1fr; } }
.dm-form__submit { align-self: flex-start; margin-top: var(--sp-2); }
.dm-form__ok { font-size: var(--fs-sm); color: var(--forest); font-weight: 600; }

/* Direct / WhatsApp */
.dm-direct { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.dm-direct__tag { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.dm-direct__lead { margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--ink); font-weight: 500; text-wrap: pretty; }
.dm-direct__wa { margin-top: var(--sp-5); width: 100%; }
.dm-direct__reassure { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.dm-direct__reassure span { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--text-muted); }
.dm-direct__reassure svg { flex: none; width: 16px; height: 16px; color: var(--forest); }