/* Book a demo — a conversion page, so the form is light and readable rather
   than sitting in the dark band the rest of the site uses for content. */

.demo-hero{padding:120px 0 110px}
.demo-band{padding:0 0 110px}

.demo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}

/* ---- left: what actually happens ---- */
.demo-side h2{font-family:'Sora';font-size:clamp(20px,2.3vw,26px);font-weight:700;margin-bottom:22px}
.dsteps{list-style:none;counter-reset:d;margin:0}
.dsteps li{counter-increment:d;position:relative;padding-left:44px;margin-bottom:20px;
 font-size:14.8px;line-height:1.65;color:var(--muted)}
.dsteps li b{color:var(--ink);font-weight:600}
.dsteps li::before{content:counter(d);position:absolute;left:0;top:-2px;
 width:29px;height:29px;border-radius:9px;display:grid;place-items:center;
 font-family:'Sora';font-size:13px;font-weight:700;color:#FF8A6B;
 background:rgba(255,122,92,.13);border:1px solid rgba(255,122,92,.3)}

.dnote{margin-top:34px;padding:22px;border-radius:16px;
 background:rgba(255,255,255,.04);border:1px solid var(--line2)}
.dnote h5{font-family:'Sora';font-size:14px;font-weight:700;margin-bottom:8px}
.dnote p{font-size:14px;line-height:1.6;color:var(--muted)}
.dnote a{color:#FF8A6B;font-weight:600;text-decoration:none}
.dnote a:hover{text-decoration:underline}

/* ---- right: the form ---- */
.demo-form{background:var(--l-card,#FFFFFF);border:1px solid var(--l-line,rgba(0,0,0,.1));
 border-radius:22px;padding:34px;color:var(--l-ink,#221C18);
 box-shadow:0 44px 100px -46px rgba(0,0,0,.6)}
.demo-form h2{font-family:'Sora';font-size:21px;font-weight:700;margin-bottom:22px;color:var(--l-ink,#221C18)}

.drow{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.dform .fld{margin-bottom:16px}
.dform .fld label{display:block;font-family:'Sora';font-size:12.5px;font-weight:600;
 color:#6A6159;margin-bottom:7px}
.dform .fld label i{font-style:normal;color:#E43A3F}
.dform .fld input,.dform .fld select,.dform .fld textarea{
 width:100%;font-family:'Inter';font-size:14.5px;color:var(--l-ink,#221C18);
 background:#FFFFFF;border:1px solid rgba(0,0,0,.16);border-radius:11px;padding:12px 14px}
.dform .fld textarea{min-height:104px;resize:vertical}
.dform .fld select{appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6159' stroke-width='2.4'%3E%3Cpath d='M5 8.5l7 7 7-7'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:38px}
.dform .fld input:focus,.dform .fld select:focus,.dform .fld textarea:focus{
 outline:0;border-color:#E43A3F;box-shadow:0 0 0 3px rgba(228,58,63,.12)}
.dform .fld input::placeholder,.dform .fld textarea::placeholder{color:#9A928B}

.dsub{width:100%;justify-content:center;margin-top:6px}
.dsmall{font-size:12.5px;color:#6A6159;text-align:center;margin-top:12px;line-height:1.5}
.dfail{font-size:13.5px;color:#C62F34;background:rgba(228,58,63,.08);
 border:1px solid rgba(228,58,63,.25);border-radius:11px;padding:12px 14px;margin-bottom:18px}

/* the honeypot is never shown and never announced */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- the thank-you state ---- */
.dthanks{text-align:center;padding:26px 6px}
.dtick{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
 background:rgba(46,160,110,.12);border:1px solid rgba(46,160,110,.34)}
.dtick svg{width:26px;height:26px;fill:none;stroke:#2EA06E;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dthanks h2{margin-bottom:10px}
.dthanks p{font-size:14.8px;line-height:1.65;color:#6A6159;margin-bottom:22px}

@media(max-width:940px){
 .demo-grid{grid-template-columns:1fr;gap:38px}
 .demo-hero{padding:100px 0 80px}
}
@media(max-width:560px){
 .drow{grid-template-columns:1fr;gap:0}
 .demo-form{padding:24px 20px}
}

/* The form is not gated behind the scroll-reveal observer: if that ever fails
   to fire, a reveal-gated form sits at opacity 0 and every lead on the page is
   lost silently. Belt and braces - these are visible whatever else happens. */
.demo-side,.demo-form{opacity:1!important;transform:none!important}

/* ---- shared form additions: modules, consent, locked country ---- */
.dform .dmods{border:0;padding:0;margin:0 0 16px;min-width:0}
.dform .dmods legend{display:block;font-family:'Sora';font-size:12.5px;font-weight:600;color:#6A6159;margin-bottom:9px;padding:0}
.dform .dmods legend span{font-family:'Inter';font-weight:400;color:#9A928B}
.dform .dmgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dform .dchk{display:flex;align-items:center;gap:10px;margin:0;padding:11px 13px;background:#FFFFFF;border:1px solid rgba(0,0,0,.16);border-radius:11px;cursor:pointer;font-family:'Inter';font-size:14px;color:var(--l-ink,#221C18)}
.dform .dchk input{width:16px;height:16px;margin:0;flex:0 0 auto;accent-color:#E43A3F}
.dform .dchk:has(input:checked){border-color:#E43A3F;background:#FFF5F4}
.dform .dconsent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;font-family:'Inter';font-size:13.5px;line-height:1.5;color:#6A6159;cursor:pointer}
.dform .dconsent input{width:16px;height:16px;margin:2px 0 0;flex:0 0 auto;accent-color:#E43A3F}
.dform .dconsent a{color:#E43A3F}
.dform .fld select[disabled]{opacity:.75;cursor:not-allowed;background-image:none}
.dform .dlock{display:block;margin-top:6px;font-size:12px;color:#9A928B}
@media (max-width:640px){.dform .dmgrid{grid-template-columns:1fr}}