/* The demo booking page (src/views/pages/book-a-demo.html), in the design of the homepage and
   pricing page (Ali, 2026-10-26). It loads after /css/home.css and builds on its shared parts;
   everything here is scoped to .bd. The form keeps its Webflow contract (field names, the
   #demo-form wrapper, the success and failure blocks) for /js/forms.js and /js/demo-redirect.js. */

/* A plain bar: the page has no site navbar, so visitors stay on the booking. */
.bd .bd-bar{background:#fafafb}
.bd .bd-bar-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bd .bd-logo img{display:block;width:120px;height:35px}

.bd .bd-main{position:relative;overflow:hidden;background:#fafafb;padding:24px 0 clamp(72px,8vw,120px)}
.bd .bd-bg{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 560px);mask-image:linear-gradient(180deg,#000 0,transparent 560px)} /* taste-skill-ignore: a mask fading the site's grid, as on the homepage and pricing page */
/* The intro and the agenda on the left, the booking card on the right; on a phone the card
   comes straight after the intro. */
.bd .bd-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"intro card" "shot card" "agenda card";grid-template-rows:auto auto 1fr;column-gap:clamp(40px,6vw,96px);row-gap:48px;align-items:start}
.bd .bd-intro{grid-area:intro;padding-top:24px}
.bd .bd-card{grid-area:card}
.bd .bd-agenda{grid-area:agenda}
.bd .bd-shot{grid-area:shot;margin:0}
.bd .h1{font-size:clamp(40px,5vw,72px);line-height:1.04;font-weight:600}
.bd .lead{font-size:19px;font-weight:400;color:#393d4d;max-width:44ch}

/* The booking card */
.bd .bd-card{background:#fff;border:1px solid #e6e9f2;border-radius:24px;padding:clamp(24px,3vw,36px)}
.bd .bd-card-h{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.bd .bd-card-p{margin-top:6px;font-size:16px;line-height:1.5;color:#52596b}
.bd .bd-form{margin-top:24px}
.bd .bd-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bd .bd-wide,.bd .bd-field:has(select){grid-column:1/-1}
.bd .bd-field label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:#15181b}
.bd .w-input,.bd .w-select{height:48px;margin:0;padding:0 14px;border:1px solid #d3d7e5;border-radius:12px;background-color:#fff;font:400 16px Manrope,sans-serif;color:#15181b;transition:border-color .2s,box-shadow .2s}
.bd .w-input::placeholder{color:#6b7186}
.bd .w-input:hover,.bd .w-select:hover{border-color:#b9c5fb}
.bd .w-input:focus,.bd .w-select:focus{border-color:#3453f6;box-shadow:0 0 0 3px rgba(52,83,246,.16);outline:0} /* taste-skill-ignore: the focus ring, not a resting shadow */
.bd .w-select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233453f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.bd .w-select:invalid{color:#6b7186}
.bd .nv-turnstile:not(:empty){margin-top:16px}
.bd .bd-submit{margin-top:22px}
.bd .bd-privacy{margin-top:14px;font-size:13px;line-height:1.5;color:#52596b}
.bd .bd-privacy a{color:#2f4bdd}
.bd .bd-done,.bd .bd-fail{margin-top:20px;padding:0;background:none;text-align:left}
.bd .bd-done .success-message{background:#eff8e6;color:#3d7410;border-radius:12px;padding:18px 20px;font:600 16px/1.5 Manrope,sans-serif;text-align:left}
.bd .bd-fail .form-error-text{background:#fceeee;color:#b31f1f;border-radius:12px;padding:14px 18px;font:600 15px/1.5 Manrope,sans-serif}

/* The product, as the visitor will see it on the call */
.bd .bd-shot .hcard{box-shadow:none} /* rests on the page; the homepage's lifted version floats */
.bd .bd-shot figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:#52596b;max-width:52ch}

/* What the 30 minutes cover */
.bd .bd-h2{font-size:22px;font-weight:700;letter-spacing:-.015em}
.bd .bd-steps{list-style:none;margin-top:18px;display:grid;gap:6px}
.bd .bd-steps li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:14px 0}
.bd .bd-min{font-size:15px;font-weight:700;color:#2f4bdd;white-space:nowrap}
.bd .bd-step{font-size:16px;line-height:1.5;color:#52596b}
.bd .bd-step b{display:block;font-size:17px;font-weight:700;color:#15181b;margin-bottom:2px}
.bd .bd-quote{margin-top:32px;background:#eff1fe;border-radius:20px;padding:24px}
.bd .bd-rating{font-size:15px;color:#52596b}
.bd .bd-rating b{color:#15181b}
.bd .bd-quote blockquote{margin-top:14px;font-size:19px;line-height:1.45;font-weight:600;letter-spacing:-.01em;color:#15181b}
.bd .bd-quote figcaption{margin-top:12px;font-size:14.5px;font-weight:700;color:#15181b}
.bd .bd-quote figcaption span{display:block;font-weight:500;color:#52596b}

@media (min-width:981px){
  /* The card stays in view while the agenda scrolls past. */
  .bd .bd-card{position:sticky;top:24px}
}
@media (max-width:980px){
  .bd .bd-grid{grid-template-columns:1fr;grid-template-areas:"intro" "card" "shot" "agenda";row-gap:36px}
  .bd .bd-intro{padding-top:8px}
}
@media (max-width:560px){
  .bd .bd-fields{grid-template-columns:1fr}
  .bd .bd-steps li{grid-template-columns:1fr;gap:4px}
}

/* Each agenda line rises in after the one before; the reduced-motion rule in home.css stops it. */
@keyframes bdIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bd .bd-steps li{animation:bdIn .7s cubic-bezier(.22,1,.36,1) both}
.bd .bd-steps li:nth-child(1){animation-delay:.32s}
.bd .bd-steps li:nth-child(2){animation-delay:.4s}
.bd .bd-steps li:nth-child(3){animation-delay:.48s}
.bd .bd-steps li:nth-child(4){animation-delay:.56s}
.bd .bd-quote{animation:bdIn .7s .64s cubic-bezier(.22,1,.36,1) both}
.bd .bd-shot .hrow{animation:bdIn .6s cubic-bezier(.22,1,.36,1) both}
.bd .bd-shot .hrow:nth-child(2){animation-delay:.08s}
.bd .bd-shot .hrow:nth-child(3){animation-delay:.16s}
.bd .bd-shot .hrow:nth-child(4){animation-delay:.24s}
.bd .bd-shot .hrow:nth-child(5){animation-delay:.32s}