/* startbuddi popups (startbuddi-core Popups, assets/popups/popups.js).
   The look is the CTA blocks' (theme assets/css/cta-blocks.css: the .sbcta card,
   pill, heading, buttons with the arrow, blob + cut-out person, round faces), which
   popups.js loads after the page. This file only places those pieces in a centred
   box, a corner card, a phone bottom sheet and the top bar, and is small because the
   bar needs it at first paint. Fixed layers only: nothing here moves the page. */
.sbp{--k:var(--royal,#2447F5);font-family:var(--fb,'Instrument Sans',system-ui,sans-serif);-webkit-font-smoothing:antialiased}
.sbp *,.sbp *::before,.sbp *::after{box-sizing:border-box}
.sbp-scrim{position:fixed;inset:0;background:rgba(12,22,56,.42);opacity:0;transition:opacity .22s ease-out}
.sbp .sbp-box{position:relative;background:#fff;border:1px solid var(--line,#E2E6F0);border-radius:28px;box-shadow:0 1px 0 rgba(12,22,56,.04),0 30px 70px -30px rgba(12,22,56,.45);outline:none;color:var(--ink,#0C1638);text-align:left}
.sbp .sbp-body{display:grid;gap:14px;justify-items:start;min-width:0}
.sbp .sbcta-h.sbp-h{font-size:30px;line-height:1.08;max-width:16ch;padding-right:8px}
.sbp .sbcta-p.sbp-p{font-size:16px;max-width:40ch;white-space:pre-line}
.sbp .sbcta-row.sbp-row{margin-top:4px}
.sbp .sbcta-fine.sbp-fine{display:block;font-size:13px;line-height:1.5}
.sbp .sbp-form{width:100%;margin:4px 0 0}
.sbp .sbp-form .sbcta-nl{width:100%}
.sbp .sb-thanks{width:100%;margin:4px 0 0}
.sbp .sb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sbp .sbp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sbp .sbp-msg:empty{display:none}
.sbp .sbp-msg.is-err{color:#C0262D}
.sbp-x{position:absolute;top:14px;right:14px;z-index:4;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line,#E2E6F0);border-radius:12px;background:#fff;color:var(--ink-2,#3A4568);cursor:pointer;padding:0;transition:border-color .2s,color .2s}
.sbp-x:hover{border-color:var(--ink,#0C1638);color:var(--ink,#0C1638)}
.sbp-x:focus-visible,.sbp .sbp-box:focus-visible{outline:3px solid var(--royal,#2447F5);outline-offset:3px}
.sbp-tag{font:700 11px/1 var(--fb,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;background:#FFF4DE;color:#8A5A00;border-radius:6px;padding:5px 7px}

/* Centred box: copy beside a tinted panel, the person popping out of its top edge
   (the CTA blocks' "pop-out person"). */
.sbp-modal{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;padding:72px 20px 20px;pointer-events:none}
.sbp-modal .sbp-scrim,.sbp-modal .sbp-box{pointer-events:auto}
.sbp-modal .sbp-box{width:100%;max-width:460px;padding:36px 34px 30px;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .2s ease-out,transform .25s cubic-bezier(.2,.8,.2,1)}
.sbp-modal.sbp-has-art .sbp-box{max-width:760px;padding:0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.sbp-modal.sbp-has-art .sbp-body{padding:44px 12px 36px 40px;align-content:center}
.sbp-modal.on .sbp-scrim{opacity:1}
.sbp-modal.on .sbp-box{opacity:1;transform:none}
.sbp-art{position:relative;min-height:360px;margin:10px 10px 10px 0;border-radius:22px;background:color-mix(in srgb,var(--k) 11%,#fff)}
.sbp-art .sbcta-blob{position:absolute;left:50%;bottom:0;height:86%;aspect-ratio:1;max-width:92%;border-radius:999px 999px 0 0;transform:translateX(-50%);background:var(--k);opacity:.16}
.sbp .sbp-cut{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:calc(100% + 64px);width:auto;max-width:none;z-index:2;pointer-events:none;border-radius:0 0 22px 22px}
.sbp .sbp-cut-chip{height:calc(100% + 24px)}
.sbp-has-art .sbp-x{background:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:no-preference){
  .sbp.on .sbp-cut{animation:sbctaPop .8s cubic-bezier(.2,.8,.2,1) both}
  .sbp.on .sbp-face{animation:sbctaFaceIn .6s cubic-bezier(.2,.8,.2,1) both}
}

/* Round face (the CTA blocks' .sbcta-fh) for the corner card and phones. */
.sbp .sbcta-fh.sbp-face{width:64px;height:64px;margin:0;border-width:3px;box-shadow:0 8px 20px -12px rgba(12,22,56,.45);background-color:color-mix(in srgb,var(--k) 18%,#fff)}
.sbp .sbcta-fh.sbp-face-crop{background-size:220% auto;background-position:50% 5%}
.sbp .sbcta-fh-chip.sbp-face{background-color:#E9EDFF;background-size:120% auto;background-position:50% 14%}

/* Corner card: bottom left, clear of the chat launcher on the right. Not modal. */
.sbp-corner{position:fixed;left:24px;bottom:24px;z-index:990;width:400px;max-width:calc(100vw - 48px)}
.sbp-corner .sbp-box{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 16px;align-items:start;padding:22px 22px 22px;border-radius:24px;opacity:0;transform:translateY(18px);transition:opacity .22s ease-out,transform .3s cubic-bezier(.2,.8,.2,1)}
.sbp-corner .sbp-box:not(:has(.sbp-face)){grid-template-columns:minmax(0,1fr)}
.sbp-corner.on .sbp-box{opacity:1;transform:none}
.sbp-corner .sbp-body{gap:10px}
.sbp-corner .sbcta-h.sbp-h{font-size:21px;line-height:1.15;padding-right:34px}
.sbp-corner .sbcta-p.sbp-p{font-size:14.5px}
.sbp-corner .sbp-x{top:12px;right:12px;width:32px;height:32px;border-radius:10px}
.sbp-corner .sbcta .sbcta-btn,.sbp-sheet .sbcta .sbcta-btn{height:44px;padding:0 16px;font-size:15px;border-radius:12px}
.sbp-corner .sbcta .sbcta-pill{padding:4px 10px 4px 8px;font-size:13px}

/* Phones: a bottom sheet, never full screen. */
.sbp-sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;padding:0;z-index:9990}
.sbp-sheet.sbp-modal{inset:0;display:flex;align-items:flex-end;padding:0}
.sbp-sheet .sbp-box{width:100%;max-width:none;max-height:82vh;overflow-y:auto;display:block;border-radius:24px 24px 0 0;border-bottom:0;padding:30px 20px calc(20px + env(safe-area-inset-bottom,0px));opacity:1;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.sbp-sheet.on .sbp-box{transform:none}
.sbp-sheet .sbp-box::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line,#E2E6F0)}
.sbp-sheet .sbp-face{width:56px;height:56px;margin-bottom:12px}
.sbp-sheet .sbp-body{gap:10px}
.sbp-sheet .sbcta-h.sbp-h{font-size:24px;padding-right:40px;max-width:none}
.sbp-sheet .sbcta-p.sbp-p{font-size:15.5px}
.sbp-sheet .sbcta-row.sbp-row{width:100%}
.sbp-sheet .sbcta-row.sbp-row .sbcta-btn{flex:1 1 auto}
@media (max-width:420px){.sbp .sbcta-nl{flex-direction:column}.sbp .sbcta-nl .sbcta-btn{width:100%}}

/* Announcement bar: sits where the site top bar sits, same height (one line). */
.sbp-bar{--k:var(--royal,#2447F5);position:relative;display:flex;align-items:center;justify-content:center;padding:9px 48px;background:color-mix(in srgb,var(--k) 9%,#fff);border-bottom:1px solid var(--line,#E2E6F0);color:var(--ink-2,#3A4568);font:500 14px/1.45 var(--fb,system-ui,sans-serif);text-align:center}
.sbp-bar-t{margin:0}
.sbp-bar-a{color:var(--royal,#2447F5)!important;font-weight:650;margin-left:6px;text-decoration:underline;text-underline-offset:3px}
.sbp-bar-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--ink-2,#3A4568);cursor:pointer;padding:0}
.sbp-bar-x:hover{background:rgba(12,22,56,.06)}
.sbp-bar-x:focus-visible,.sbp-bar-a:focus-visible{outline:3px solid var(--royal,#2447F5);outline-offset:2px}
.sbp-bar .sbp-tag{margin-right:6px;vertical-align:1px}
body[data-promo][data-promo-bar] .sbp-bar{display:none}
@media (max-width:600px){.sbp-bar{padding:8px 44px 8px 14px;font-size:13.5px;text-align:left;justify-content:flex-start}}

@media (prefers-reduced-motion:reduce){.sbp-scrim,.sbp .sbp-box{transition:opacity .01s!important;transform:none!important}}
@media print{.sbp,.sbp-bar{display:none!important}}
/* The live chat launcher (app widget) sits above everything; tuck it away while a box or sheet is open. */
@media (max-width:767px){html.sbp-open #startbuddi-chat-root{visibility:hidden}}
html.sbp-open:has(.sbp-modal) #startbuddi-chat-root{visibility:hidden}
.sbp .sbp-row[hidden]{display:none}

/* Email box in the narrow layouts (corner card, phone sheet): the box sits above a
   full-width button so neither is squeezed or spills past the card. A "Not now"
   after a form is a quiet link, so the form keeps the one clear button. */
.sbp .sbp-form{min-width:0;max-width:100%}
.sbp-corner .sbcta-nl,.sbp-sheet .sbcta-nl{flex-direction:column;align-items:stretch;gap:6px}
.sbp-corner .sbcta-nl input,.sbp-sheet .sbcta-nl input{height:44px;padding:0 12px}
.sbp-corner .sbcta-nl .sbcta-btn,.sbp-sheet .sbcta-nl .sbcta-btn{width:100%;justify-content:center}
.sbp .sbp-form + .sbp-row{margin-top:-2px}
.sbp .sbp-form + .sbp-row .sbcta-btn-s{height:auto;min-height:0;padding:4px 0;border:0;border-radius:6px;background:none;box-shadow:none;color:var(--ink-2,#3A4568);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;transform:none}
.sbp .sbp-form + .sbp-row .sbcta-btn-s:hover{color:var(--ink,#0C1638)}
.sbp .sbp-form + .sbp-row .sbcta-btn-s svg{display:none}

/* The guide after the email box: the card's main button, under the thank-you. Full
   width in the narrow layouts, where the email button was full width too. */
.sbp .sbcta-btn.sbp-dl{margin-top:2px}
.sbp-corner .sbcta-btn.sbp-dl,.sbp-sheet .sbcta-btn.sbp-dl{width:100%;justify-content:center}
