/* ═══════════════════════════════════════════════════════════════════════════
   LEADLY — BOOK A DEMO  ·  /assets/leadly-book.css

   Every "Book demo" button on the page opens this. Pick a day, pick a time,
   leave a name and a number. Business name is optional — asking for it is fine,
   requiring it costs you bookings from the exact people most worth talking to.

   The calendar is built from the REAL system date. Weekdays only, from two days
   out. A funnel that offers a slot in the past is dead on arrival.
   ═══════════════════════════════════════════════════════════════════════════ */

.bk-scrim{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,8,12,.62);
  -webkit-backdrop-filter:blur(6px) saturate(.9); backdrop-filter:blur(6px) saturate(.9);
  display:grid; place-items:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1);
}
.bk-scrim.on{ opacity:1; pointer-events:auto; }

.bk{
  position:relative;
  width:min(640px, 100%);
  max-height:min(760px, calc(100dvh - 40px));
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 30px 90px rgba(6,8,12,.44), 0 0 0 1px rgba(255,255,255,.08);
  transform:translateY(22px) scale(.97);
  opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.bk-scrim.on .bk{ transform:none; opacity:1; }

.bk-top{
  flex:none; position:relative;
  padding:22px 24px;
  background:var(--panel); color:#fff;
  overflow:hidden;
}
/* the grid + bloom now come from .tex-dark in brand.css — one pitch, everywhere */
.bk-top > *{ position:relative; }
.bk-eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:#9DC0FF; margin-bottom:7px;
}
.bk-top h2{ font-size:22px; font-weight:600; letter-spacing:-.026em; color:#fff; margin:0 0 5px; }
.bk-top p{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.68); margin:0; }
.bk-x{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:10px; border:0; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center;
  transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.bk-x:hover{ background:rgba(255,255,255,.24); transform:rotate(90deg); }
.bk-x svg{ width:15px; height:15px; }

.bk-body{ flex:1; min-height:0; overflow-y:auto; padding:22px 24px; }
.bk-foot{
  flex:none; padding:16px 24px 18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.bk-back{
  background:none; border:0; cursor:pointer; font-family:var(--font);
  font-size:14px; font-weight:600; color:var(--text-3-aa); padding:10px 4px;
}
.bk-back:hover{ color:var(--text-1); }
.bk-go{ margin-left:auto; flex:1; justify-content:center; }
.bk-legal{ margin-top:12px; font-size:11px; line-height:1.5; color:var(--text-3-aa); }

/* ── steps ────────────────────────────────────────────────────────────────*/
.bk-step{ display:none; }
.bk-step.on{ display:block; animation:bk-in .36s cubic-bezier(.16,1,.3,1); }
@keyframes bk-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.bk-h{ font-size:15.5px; font-weight:600; color:var(--text-1); margin:0 0 3px; letter-spacing:-.018em; }
.bk-sub{ font-size:13px; color:var(--text-2); margin:0 0 16px; }

/* ── the calendar ─────────────────────────────────────────────────────────*/
.bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.bk-month{ font-size:15px; font-weight:600; color:var(--text-1); }
.bk-nav{ display:flex; gap:6px; }
.bk-nav button{
  width:32px; height:32px; border-radius:9px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; color:var(--text-2); font-size:15px; line-height:1;
  font-family:inherit;
  transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.bk-nav button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); background:var(--tint); }
.bk-nav button:disabled{ opacity:.3; cursor:not-allowed; }
.bk-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:5px; }
.bk-dow span{ font-size:10px; font-weight:600; color:var(--text-3-aa); text-align:center;
  text-transform:uppercase; letter-spacing:.06em; }
.bk-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bk-day{
  aspect-ratio:1; display:grid; place-items:center; border:0; background:none;
  font-family:inherit; font-size:14px; color:var(--text-1); border-radius:10px;
  cursor:pointer; font-variant-numeric:tabular-nums;
  transition:background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.bk-day.free{ background:var(--tint); color:var(--accent-ink); font-weight:600; }
.bk-day.free:hover{ background:#D3E1FD; transform:scale(1.06); }
.bk-day.on{
  background:var(--accent); color:#fff; font-weight:700; transform:scale(1.06);
  box-shadow:0 4px 12px rgba(0,85,232,.36);
}
.bk-day:disabled{ color:#CBD2DA; cursor:default; background:none; font-weight:400; }
.bk-day:focus-visible{ outline:3px solid var(--accent); outline-offset:1px; }

/* ── slots ────────────────────────────────────────────────────────────────*/
.bk-slots{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.bk-slot{
  padding:14px 8px; border:1.5px solid var(--line); border-radius:var(--r-btn);
  background:#fff; font-family:inherit; font-size:15px; color:var(--text-1);
  cursor:pointer; font-variant-numeric:tabular-nums;
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.bk-slot:hover{ border-color:var(--accent); transform:translateY(-1px); }
.bk-slot.on{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 4px 14px rgba(0,85,232,.32);
}
.bk-when{
  display:flex; align-items:center; gap:9px; margin-bottom:14px;
  padding:10px 13px; border-radius:10px; background:var(--tint); border:1px solid var(--tint-line);
  font-size:13.5px; font-weight:600; color:var(--accent-strong);
}
.bk-when svg{ width:15px; height:15px; flex:none; }

/* ── fields ───────────────────────────────────────────────────────────────*/
.bk-field{ margin-bottom:13px; }
.bk-field label{ display:block; font-size:13px; font-weight:600; color:var(--text-1); margin-bottom:6px; }
.bk-field label i{ font-style:normal; font-weight:400; color:var(--text-3-aa); }
.bk-field input{
  width:100%; font-family:inherit; font-size:16px;   /* 16px = iOS won't zoom */
  padding:13px 14px; border:1.5px solid var(--line); border-radius:var(--r-btn);
  background:var(--surface-2); color:var(--text-1);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.bk-field input:focus{
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px rgba(0,85,232,.14);
}
.bk-field.bad input{ border-color:var(--danger); }
.bk-err{ display:none; margin-top:5px; font-size:12.5px; color:var(--danger); }
.bk-field.bad .bk-err{ display:block; }
@keyframes bk-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.bk-field.bad{ animation:bk-shake .4s cubic-bezier(.36,.07,.19,.97); }

.bk-consent{
  display:flex; gap:10px; align-items:flex-start;
  padding:13px; border:1.5px solid var(--line); border-radius:var(--r-btn);
  background:var(--surface-2); cursor:pointer;
}
.bk-consent input{ width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--accent); }
.bk-consent span{ font-size:12.5px; line-height:1.5; color:var(--text-2); }
.bk-consent.bad{ border-color:var(--danger); animation:bk-shake .4s cubic-bezier(.36,.07,.19,.97); }

/* ── done ─────────────────────────────────────────────────────────────────*/
.bk-done{ text-align:center; padding:20px 0 8px; }
.bk-tick{
  width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
  background:var(--tint); display:grid; place-items:center; position:relative;
}
.bk-tick svg{ width:30px; height:30px; }
.bk-tick path{
  stroke:var(--accent); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
  animation:bk-draw .55s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@keyframes bk-draw{ to{ stroke-dashoffset:0; } }
.bk-tick::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent);
  animation:bk-ring 1.1s cubic-bezier(.16,1,.3,1) .28s both;
}
@keyframes bk-ring{ 0%{ transform:scale(.85); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }
.bk-done h3{ font-size:22px; font-weight:600; letter-spacing:-.024em; margin:0 0 8px; }
.bk-done p{ font-size:14.5px; line-height:1.6; color:var(--text-2); margin:0 auto; max-width:36ch; }
.bk-done p b{ color:var(--text-1); font-weight:600; }

@media (max-width:560px){
  .bk-scrim{ padding:0; place-items:end center; }
  .bk{ width:100%; max-height:94dvh; border-radius:20px 20px 0 0; }
  .bk-top{ padding:18px 20px; }
  .bk-top h2{ font-size:19px; }
  .bk-body{ padding:18px 20px; }
  .bk-foot{ padding:14px 20px calc(16px + env(safe-area-inset-bottom)); }
  .bk-day{ border-radius:8px; font-size:13px; }
  .bk-slot{ padding:12px 6px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  .bk-scrim, .bk, .bk-step.on, .bk-tick path, .bk-tick::after, .bk-field.bad, .bk-consent.bad{
    animation:none !important; transition:none !important;
  }
  .bk-scrim.on .bk{ transform:none; opacity:1; }
}