/* The talk-to-sales pop-up: /demo (form) and /demo/time (calendar) in a dialog on any page. Loads next to xbuild-demo.css, which
   styles the steps themselves; this file is the dialog chrome plus the pop-up's compact single-column take on the two steps.
   Pages without the Headquarters brand sheet (home, platform, the verticals) get the font and the tokens from here. */
@font-face{font-family:HeadquartersSwitzer;src:url('/xbuild-brand/fonts/Switzer-Medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:HeadquartersSwitzer;src:url('/xbuild-brand/fonts/Switzer-Semibold.woff2') format('woff2');font-weight:600 900;font-display:swap}
.xb-sales-popup{--hq-ink:#0f0f0f;--hq-paper:#f0ece8;--hq-stone:#dbd6ce;--hq-brass:#a57c45;--hq-muted:#5b574f;box-sizing:border-box;width:min(640px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--hq-stone);border-radius:20px;background:var(--hq-paper);color:var(--hq-ink);font:500 16px/1.5 HeadquartersSwitzer,Arial,sans-serif;overflow:hidden;color-scheme:light;box-shadow:0 24px 64px rgba(15,15,15,.28)}
.xb-sales-popup--time{width:min(920px,calc(100vw - 32px))}
.xb-sales-popup::backdrop{background:rgba(15,15,15,.62)}
.xb-sales-popup *,.xb-sales-popup *::before,.xb-sales-popup *::after{box-sizing:border-box}
.xb-sales-popup [hidden]{display:none!important}
.xb-sales-popup__close{position:absolute;z-index:2;top:20px;right:20px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--hq-ink);color:var(--hq-paper);cursor:pointer;transition:background .2s cubic-bezier(.2,.7,.2,1)}
.xb-sales-popup__close svg{width:16px;height:16px}
.xb-sales-popup__close:hover{background:#292929}
.xb-sales-popup__close:focus-visible{outline:2px solid var(--hq-brass);outline-offset:3px}
.xb-sales-popup__body{max-height:calc(100dvh - 50px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(20px,3vw,28px)}
/* Step 1 in the dialog: one column, the heading and the lede over the form; the page's checklist and Rex line stay on /demo. */
.xb-sales-popup .xb-demo__hero{display:flex;flex-direction:column;gap:28px}
.xb-sales-popup .xb-demo__intro{gap:14px;padding-right:48px}
.xb-sales-popup .xb-checks,.xb-sales-popup .xb-rexline{display:none}
.xb-sales-popup .xb-label{font:600 11.84px/1 HeadquartersSwitzer,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--hq-muted)}
.xb-sales-popup h1,html[data-hq-brand] .xb-sales-popup h1{margin:0;max-width:none;font:600 clamp(26px,2.6vw,34px)/1.1 HeadquartersSwitzer,Arial,sans-serif!important;letter-spacing:-.02em;text-transform:none;color:var(--hq-ink)}
.xb-sales-popup .xb-booked__lede{margin:0;max-width:none;font:500 16px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted)}
.xb-sales-popup .xb-demo__form{padding:20px;gap:16px}
.xb-sales-popup .xb-demo__form h2,html[data-hq-brand] .xb-sales-popup .xb-demo__form h2{margin:0 0 4px;font:600 24px/1.15 HeadquartersSwitzer,Arial,sans-serif!important;letter-spacing:-.02em;text-transform:none;color:var(--hq-ink)}
.xb-sales-popup .xb-field label{font:600 15.2px/1.4 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-ink);margin:0}
.xb-sales-popup .xb-demo__actions{flex-direction:column;align-items:stretch}
.xb-sales-popup .xb-demo__fineprint{max-width:none}
.xb-sales-popup .xb-demo__actions [data-xb-cta]{width:100%}
/* Step 2 in the dialog: heading, the details card with Edit, then the calendar at full dialog width. */
.xb-sales-popup .xb-time{gap:24px}
.xb-sales-popup .xb-time__top{display:flex;flex-direction:column;gap:20px}
.xb-sales-popup .xb-time__intro{gap:14px;padding-right:48px}
.xb-sales-popup .xb-time__details{align-self:stretch;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:16px 20px}
.xb-sales-popup .xb-time__details .xb-label{width:100%}
.xb-sales-popup .xb-time__details .xb-textlink{margin-left:auto}
.xb-sales-popup .xb-time__panel{padding:clamp(16px,2.5vw,24px)}
.xb-sales-popup .xb-time__widget iframe.xb-meeting-frame{min-height:0}
@media(max-width:600px){
.xb-sales-popup,.xb-sales-popup--time{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;inset:0;border:0;border-radius:0}
.xb-sales-popup__body{height:100dvh;max-height:none;padding:20px 16px 28px}
.xb-sales-popup__close{top:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){.xb-sales-popup__close{transition:none}}