/* /demo, /demo/time, /demo/booked — Headquarters look (paper surface, ink meeting card, brass rules). Tokens from headquarters-brand.css. */
.xb-booked-nav{display:flex;align-items:center;gap:24px;min-height:72px;padding:12px clamp(20px,4vw,48px);border-bottom:1px solid var(--hq-stone,#dbd6ce);background:var(--hq-paper,#f0ece8);font:500 15.2px/1 HeadquartersSwitzer,Arial,sans-serif}
.xb-booked-nav__logo{display:flex;align-items:center;flex:none}
.xb-booked-nav__logo img{display:block;height:22px;width:auto}
.xb-booked-nav__links{display:flex;gap:24px;margin:0 0 0 auto;padding:0;list-style:none}
.xb-booked-nav__links a{color:var(--hq-ink,#0f0f0f);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.xb-booked-nav__links a:hover{border-bottom-color:var(--hq-brass,#a57c45)}
.xb-booked{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(20px,4vw,48px) clamp(64px,8vw,120px);display:flex;flex-direction:column;gap:clamp(48px,6vw,80px);color:var(--hq-ink,#0f0f0f)}
.xb-booked *,.xb-booked *::before,.xb-booked *::after{box-sizing:border-box}
.xb-booked [hidden]{display:none!important}
.xb-booked__noscript{margin:0;font-size:18px}
.xb-label{display:flex;align-items:center;gap:12px;margin:0;font:600 11.84px/1 HeadquartersSwitzer,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--hq-muted,#5b574f)}
.xb-label--rule::before{content:"";flex:none;width:32px;height:1px;background:var(--hq-brass,#a57c45)}
.xb-label--inverse{color:var(--hq-brass,#a57c45)}
.xb-booked__hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.xb-booked__intro{display:flex;flex-direction:column;gap:28px}
html[data-hq-brand] .xb-booked h1{margin:0;max-width:18ch}
html[data-hq-brand] .xb-booked h2{margin:0}
.xb-booked__lede{margin:0;max-width:34rem;font:500 clamp(1.05rem,1rem + .4vw,1.2rem)/1.55 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f)}
.xb-booked__lede--small{font-size:1rem;max-width:65ch}
.xb-booked__actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.xb-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 25.6px;border-radius:999px;font:600 16px/1;text-decoration:none;white-space:nowrap;color:var(--hq-ink,#0f0f0f);box-shadow:inset 0 0 0 1px rgba(15,15,15,.5);transition:box-shadow .2s cubic-bezier(.2,.7,.2,1)}
.xb-pill:hover{box-shadow:inset 0 0 0 1px var(--hq-ink,#0f0f0f)}
.xb-pill--inverse{color:var(--hq-paper,#f0ece8);box-shadow:inset 0 0 0 1px rgba(240,236,232,.45)}
.xb-pill--inverse:hover{box-shadow:inset 0 0 0 1px var(--hq-paper,#f0ece8)}
.xb-textlink{font:600 15.2px/1.4;color:var(--hq-ink,#0f0f0f);text-decoration:none;padding-bottom:2px;border-bottom:1px solid var(--hq-brass,#a57c45)}
.xb-textlink:hover{border-bottom-color:var(--hq-ink,#0f0f0f)}
.xb-textlink--inverse{color:var(--hq-paper,#f0ece8)}
.xb-textlink--inverse:hover{border-bottom-color:var(--hq-paper,#f0ece8)}
.xb-booked__card{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:14px;background:var(--hq-ink,#0f0f0f);color:var(--hq-paper,#f0ece8)}
.xb-booked__card p{margin:0}
.xb-booked__pending{font:500 18px/1.45 HeadquartersSwitzer,Arial,sans-serif}
.xb-booked__when{font:600 clamp(22px,2.2vw,27.2px)/1.15 HeadquartersSwitzer,Arial,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xb-booked__rep{font:500 16px/1.5 HeadquartersSwitzer,Arial,sans-serif;opacity:.86}
.xb-booked__who{font:500 15.2px/1.5 HeadquartersSwitzer,Arial,sans-serif;opacity:.86;overflow-wrap:anywhere}
.xb-booked__card-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding-top:8px}
.xb-booked__expect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:40px;border-top:1px solid var(--hq-brass,#a57c45)}
.xb-card{display:grid;gap:12px;align-content:start;padding:24px;border-radius:12px;background:#e7e2dc;color:var(--hq-ink,#0f0f0f)}
.xb-card .xb-label{margin-bottom:4px}
html[data-hq-brand] .xb-card__title{font-size:20px!important;line-height:1.2!important;letter-spacing:-.01em!important;margin:0}
.xb-card__body{margin:0;font:500 15.2px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f);max-width:65ch}
.xb-booked__personalize{padding:clamp(24px,4vw,40px);border-radius:14px;background:#e7e2dc}
.xb-booked__personalize form{display:flex;flex-direction:column;gap:32px}
.xb-booked__personalize-intro{display:flex;flex-direction:column;gap:12px}
html[data-hq-brand] .xb-booked__personalize h2{max-width:22ch}
.xb-booked__group{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;border:0;min-width:0}
/* The question is a <legend>, which sits outside the fieldset's flex gap: it needs its own 16px before the chips (W4), while the
   form keeps 32px between the two groups. */
.xb-booked__question{padding:0;margin:0 0 16px;font:600 20px/1.2 HeadquartersSwitzer,Arial,sans-serif;letter-spacing:-.01em}
.xb-chips{display:flex;flex-wrap:wrap;gap:8px}
.xb-chip{appearance:none;cursor:pointer;min-height:44px;padding:11px 18px;border-radius:999px;border:1px solid rgba(15,15,15,.5);background:transparent;color:var(--hq-ink,#0f0f0f);font:500 15.2px/1 HeadquartersSwitzer,Arial,sans-serif;transition:background .2s cubic-bezier(.2,.7,.2,1),color .2s cubic-bezier(.2,.7,.2,1),border-color .2s cubic-bezier(.2,.7,.2,1)}
.xb-chip:hover{border-color:var(--hq-ink,#0f0f0f)}
.xb-chip[aria-pressed="true"]{background:var(--hq-ink,#0f0f0f);color:var(--hq-paper,#f0ece8);border-color:var(--hq-ink,#0f0f0f)}
.xb-booked__note{margin:0;padding:18px 20px;border-radius:14px;border:1px solid var(--hq-stone,#dbd6ce);background:var(--hq-paper,#f0ece8);font:500 17px/1.4 HeadquartersSwitzer,Arial,sans-serif}
.xb-booked__note[data-tone="warn"]{border-color:var(--hq-brass,#a57c45)}
.xb-booked__personalize-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:8px}
.xb-booked__later{margin:0 0 0 auto;font:500 12.8px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f)}
.xb-booked [data-booked-save]:disabled{opacity:.65;cursor:default}
@media(max-width:900px){.xb-booked__hero{grid-template-columns:minmax(0,1fr)}.xb-booked__expect{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.xb-booked-nav__links{gap:16px}.xb-booked__card{padding:22px 20px}.xb-booked__later{margin-left:0}.xb-booked__personalize-actions [data-xb-cta]{width:100%}}
@media(prefers-reduced-motion:reduce){.xb-chip,.xb-pill{transition:none}}
/* /demo (step 1, form) and /demo/time (step 2, calendar) */
.xb-demo__hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.xb-demo__intro{display:flex;flex-direction:column;gap:28px}
.xb-checks{display:grid;gap:10px;margin:0;padding:0;list-style:none;font:500 16px/1.5 HeadquartersSwitzer,Arial,sans-serif;max-width:65ch}
.xb-checks li{display:flex;gap:12px}
.xb-checks li::before{content:"";flex:none;width:14px;height:8px;margin-top:.45em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.xb-rexline{display:grid;gap:8px;margin:0;padding:18px 20px;border-radius:14px;background:#e7e2dc;border:1px solid var(--hq-stone,#dbd6ce)}
.xb-rexline__who{margin:0;font:600 11.2px/1 HeadquartersSwitzer,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--hq-muted,#5b574f)}
.xb-rexline__text{margin:0;font:500 18.4px/1.4 HeadquartersSwitzer,Arial,sans-serif;font-variant-numeric:tabular-nums;max-width:65ch}
.xb-demo__form{display:flex;flex-direction:column;gap:20px;margin:0;padding:clamp(20px,3vw,32px);border-radius:14px;background:#e7e2dc}
html[data-hq-brand] .xb-demo__form h2{margin:0 0 4px;font-size:27.2px!important;line-height:1.15!important;letter-spacing:-.02em!important;max-width:none}
.xb-demo__form fieldset{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;border:0;min-width:0}
.xb-demo__form fieldset:disabled{opacity:.65}
.xb-demo__names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xb-field{display:flex;flex-direction:column;gap:8px}
.xb-field label{font:600 15.2px/1.4 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-ink,#0f0f0f)}
.xb-field__optional{font-weight:500;color:var(--hq-muted,#5b574f)}
html[data-hq-brand] .xb-field input,html[data-hq-brand] .xb-field select{box-sizing:border-box;width:100%;height:48px;margin:0;padding:0 16px;border:1px solid rgba(15,15,15,.5);border-radius:14px!important;background:var(--hq-paper,#f0ece8);color:var(--hq-ink,#0f0f0f);font:500 16px/1.5 HeadquartersSwitzer,Arial,sans-serif}
html[data-hq-brand] .xb-field select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 6 5 5 5-5' stroke='%230f0f0f' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.xb-field input::placeholder{color:var(--hq-muted,#5b574f)}
.xb-field small{font:500 12.8px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f)}
.xb-demo__form [data-sales-error]{margin:0;color:#8b3020;font:500 15.2px/1.5 HeadquartersSwitzer,Arial,sans-serif}
.xb-demo__form [data-sales-error]:empty{display:none}
.xb-demo__form [data-sales-review]{margin:0;padding:10px 12px;border:1px solid var(--hq-brass,#a57c45);border-radius:8px;font:500 14px/1.5 HeadquartersSwitzer,Arial,sans-serif}
.xb-sales-honey{position:absolute;left:-9999px}
.xb-demo__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:8px}
.xb-demo__fineprint{margin:0;font:500 12.8px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f);max-width:30ch}
.xb-demo__fineprint a{color:inherit;text-decoration:underline}
.xb-demo__form button:disabled,.xb-demo__form button[aria-disabled=true]{opacity:.65;cursor:default}
.xb-time{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.xb-time__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.xb-time__intro{display:flex;flex-direction:column;gap:28px}
.xb-time__details{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:12px;background:#e7e2dc;align-self:end}
.xb-time__details p{margin:0}
.xb-time__who{font:500 16px/1.5 HeadquartersSwitzer,Arial,sans-serif}
.xb-time__email{font:500 15.2px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f);overflow-wrap:anywhere}
.xb-time__details .xb-textlink{align-self:flex-start}
.xb-time__panel{display:flex;flex-direction:column;gap:24px;padding:clamp(20px,3vw,32px);border-radius:14px;background:#e7e2dc}
.xb-time__panel-head{display:flex;flex-direction:column;gap:4px}
.xb-time__panel-title{margin:0;font:600 20px/1.2 HeadquartersSwitzer,Arial,sans-serif;letter-spacing:-.01em}
.xb-time__panel-sub{margin:0;font:500 15.2px/1.5 HeadquartersSwitzer,Arial,sans-serif;color:var(--hq-muted,#5b574f)}
.xb-time__widget{color-scheme:light;width:100%}
/* HubSpot lays the month and the slots side by side from ~700px of frame width and reports its own height (715px today);
   the floor only covers the blank frame before that first message, so it must stay below what HubSpot reports. */
.xb-time__widget iframe.xb-meeting-frame{min-height:700px}
.xb-time__widget h2{font:600 22px/1.2 HeadquartersSwitzer,Arial,sans-serif;margin:12px 0}
.xb-time__done{margin:0}
.xb-simulate{align-self:flex-start;margin:0;padding:10px 14px;border:1px dashed var(--hq-brass,#a57c45);border-radius:6px;background:none;color:inherit;font:500 14px/1 HeadquartersSwitzer,Arial,sans-serif;cursor:pointer}
@media(max-width:900px){.xb-demo__hero,.xb-time__top{grid-template-columns:minmax(0,1fr)}.xb-time__details{align-self:start}.xb-time__widget iframe.xb-meeting-frame{min-height:0}}
@media(max-width:600px){.xb-demo__names{grid-template-columns:minmax(0,1fr)}.xb-demo__actions [data-xb-cta]{width:100%}.xb-demo__fineprint{max-width:none}}