/*! * [CALLBACK 2026-08-31] Sitewide phone-first capture: mobile call pill, * callback modal, desktop slide-in, and the inline .ll-cb-form rows baked * into the generated pages (green CTA band and mid-page sections). * Scoped .llcb- / .ll-cb- throughout. Ships in so first layout is * final (zero CLS). * * [CONSISTENCY 2026-08-31 v10] Every identity property is pinned with * !important, ll-chat.js style: the legacy signup pages carry hostile * globals (body{font-weight:300}, template h3/p/input/button/a rules) that * restyled the popup. Within this sheet the cascade order is base rule -> * variant rule -> media rule, so equal-importance later rules still win as * designed. Transitions/transforms/opacity states keep their specificity * ladder. Page CSS must never restyle the widget. */ .llcb-overlay *,.llcb-slidein *,.ll-cb-form *,.llcb-pill *{box-sizing:border-box !important} .llcb-overlay,.llcb-slidein,.ll-cb-form,.llcb-pill{box-sizing:border-box !important} .llcb-overlay,.llcb-overlay *,.llcb-slidein,.llcb-slidein *,.ll-cb-form,.ll-cb-form *,.llcb-pill,.llcb-pill *{font-family:Rubik,Lato,Arial,sans-serif !important;text-transform:none !important;letter-spacing:normal !important} a[data-ll-callback]{cursor:pointer} /* ------------------------- inline forms ------------------------- */ .ll-cb-form{margin:0 !important} .ll-cb-fields{display:flex !important;gap:10px !important;flex-wrap:wrap !important;max-width:680px} .ll-cb-fields input{flex:1 1 180px;min-width:0;height:48px !important;margin:0 !important;border:0 !important;border-radius:9px !important;padding:0 14px !important;font-size:16px !important;font-weight:400 !important;line-height:normal !important;color:#20303c !important;background:#fff !important;outline:none;box-shadow:none !important;-webkit-appearance:none;appearance:none} .ll-cb-fields input::placeholder{color:#8a98a3 !important;opacity:1 !important} .ll-cb-fields input[aria-invalid="true"]{box-shadow:0 0 0 3px rgba(200,54,43,.55) !important} .ll-cb-submit{flex:0 0 auto;display:inline-flex !important;align-items:center !important;justify-content:center !important;height:48px !important;margin:0 !important;padding:0 26px !important;border:0 !important;border-radius:9px !important;font-size:16px !important;font-weight:600 !important;line-height:normal !important;letter-spacing:.2px !important;text-decoration:none !important;cursor:pointer} .ll-cb-submit[disabled]{opacity:.65;cursor:default} .ll-cb-hp{position:absolute !important;left:-9999px !important;top:-9999px !important;height:0 !important;width:0 !important;overflow:hidden !important} .ll-cb-status{display:none;margin:10px 0 0 !important;padding:10px 14px !important;border-radius:8px !important;font-size:14px !important;font-weight:400 !important;line-height:1.5 !important;max-width:680px} .ll-cb-status.ll-cb-err{display:block;background:#fdecec !important;border:1px solid #f3c6c1 !important;color:#b3261e !important} .ll-cb-done{margin:6px 0 !important;font-size:16px !important;font-weight:500 !important;line-height:1.5 !important} .ll-cb-lead{font-size:16px !important;font-weight:400 !important;line-height:1.6 !important;margin:0 0 12px !important} /* [PRICING-GATE] "I have reviewed the pricing" row on every capture form */ .ll-cb-price{display:flex !important;align-items:flex-start !important;gap:8px !important;margin:10px 0 0 !important;max-width:680px;font-size:14px !important;line-height:1.5 !important;font-weight:400 !important;cursor:pointer} .ll-cb-price input[type="checkbox"]{flex:0 0 auto;width:17px !important;height:17px !important;margin:2px 0 0 !important;padding:0 !important;accent-color:#259457;-webkit-appearance:checkbox;appearance:checkbox;cursor:pointer} .ll-cb-price input[aria-invalid="true"]{outline:2px solid #c8362b !important;outline-offset:2px} .ll-cb-price a{font-weight:600 !important;text-decoration:none !important} .ll-cb-band .ll-cb-price{color:#eafaf1 !important} .ll-cb-band .ll-cb-price a{color:#fff !important} .ll-cb-band .ll-cb-price a:hover{color:#eafaf1 !important} .ll-cb-mid .ll-cb-price,.ll-cb-si .ll-cb-price,.ll-cb-modal .ll-cb-price{color:#42525d !important} .ll-cb-mid .ll-cb-price a,.ll-cb-si .ll-cb-price a,.ll-cb-modal .ll-cb-price a{color:#1d7a48 !important} .ll-cb-mid .ll-cb-price a:hover,.ll-cb-si .ll-cb-price a:hover,.ll-cb-modal .ll-cb-price a:hover{color:#259457 !important} .llcb-slidein .ll-cb-price{font-size:13px !important;margin-top:8px !important} /* [CAPTCHA] Badge hidden sitewide; attribution rides with every capture */ .grecaptcha-badge{visibility:hidden !important} .ll-cb-rc{margin:8px 0 0 !important;font-size:11px !important;font-weight:400 !important;line-height:1.5 !important;color:#7a8893 !important;max-width:680px} .ll-cb-rc a{color:inherit !important;font-weight:400 !important;text-decoration:none !important;border-bottom:1px dotted currentColor !important} .ll-cb-band .ll-cb-rc{color:rgba(234,250,241,.75) !important} .llcb-slidein .ll-cb-rc{font-size:10.5px !important} /* On the green CTA band (#259457) */ .ll-cb-band .ll-cb-lead{color:#eafaf1 !important;max-width:680px} .ll-cb-band .ll-cb-fields input{border:1px solid rgba(255,255,255,.35) !important} .ll-cb-band .ll-cb-fields input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35) !important} .ll-cb-band .ll-cb-submit{background:#fff !important;color:#1d7a48 !important} .ll-cb-band .ll-cb-submit:hover{background:#e9f5ee !important;color:#1d7a48 !important} .ll-cb-band .ll-cb-done{color:#fff !important} .ll-cb-band .ll-cb-status.ll-cb-err{background:rgba(255,255,255,.95) !important} .ll-cb-tel{color:#fff !important;font-weight:600 !important;text-decoration:none !important} .ll-cb-tel:hover,.ll-cb-tel:focus{color:#eafaf1 !important;text-decoration:none !important} /* On the soft-green mid-page section (#e9f5ee) */ .ll-cb-mid .ll-cb-fields input{border:1px solid #ccd7de !important} .ll-cb-mid .ll-cb-fields input:focus{border-color:#259457 !important;box-shadow:0 0 0 3px rgba(37,148,87,.14) !important} .ll-cb-mid .ll-cb-fields input[aria-invalid="true"]{border-color:#c8362b !important;box-shadow:0 0 0 3px rgba(200,54,43,.12) !important} .ll-cb-mid .ll-cb-submit{background:#259457 !important;color:#fff !important} .ll-cb-mid .ll-cb-submit:hover{background:#1d7a48 !important;color:#fff !important} .ll-cb-mid .ll-cb-done{color:#1d7a48 !important} /* ---------------------- mobile bottom pill row -------------------- */ /* [MOBILE-ROW r3] Three floating pills fill the row: equal thirds of (100vw - 44px), 12px edges, 10px gaps, centered content. Keep the width formula identical in all three rules. */ .llcb-pill{display:none} @media (max-width:767px){ /* [AUDIT r2] All three pills carry an EXPLICIT height:44px: each one otherwise derives height from a different inherited line-height (page template vs chat widget vs ours) and they visibly mismatch. Keep the height identical in all three rules below. */ .llcb-pill{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;position:fixed !important;left:50% !important;transform:translateX(-50%);bottom:20px !important;z-index:999;width:calc((100vw - 44px)/3) !important;height:44px !important;background-color:#1570b3 !important;color:#fff !important;padding:0 6px !important;font-size:16px !important;font-weight:700 !important;line-height:normal !important;text-decoration:none !important;border-radius:50px !important;box-shadow:2px 2px 5px rgba(0,0,0,.3) !important;cursor:pointer;white-space:nowrap !important} .llcb-pill svg{width:16px !important;height:16px !important;flex:0 0 auto} .llcb-pill:hover,.llcb-pill:focus,.llcb-pill:active{background-color:#115e96 !important;color:#fff !important;text-decoration:none !important} /* Demo pill: darker yellow so the label reads WHITE (site orange token) */ html body .mobile-demo-button{display:flex !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important;width:calc((100vw - 44px)/3) !important;height:44px !important;background-color:#de9600 !important;color:#fff !important;left:12px !important;bottom:20px !important;padding:0 6px !important;font-size:16px !important;font-weight:700 !important;line-height:normal !important;box-shadow:2px 2px 5px rgba(0,0,0,.3) !important;white-space:nowrap !important} html body .mobile-demo-button i{color:#fff !important;margin-right:5px !important;font-size:15px !important} /* Chat pill (runtime launcher AND the static boot placeholder) */ html body .llwc-launcher,html body #llwc-boot{justify-content:center !important;box-sizing:border-box !important;width:calc((100vw - 44px)/3) !important;height:44px !important;right:12px !important;bottom:20px !important;padding:0 6px !important;font-size:16px !important;font-weight:700 !important;line-height:normal !important;gap:5px !important;box-shadow:2px 2px 5px rgba(0,0,0,.3) !important;white-space:nowrap !important} html body .llwc-launcher svg,html body #llwc-boot svg{width:16px !important;height:16px !important} } /* ------------------------- desktop slide-in --------------------- */ .llcb-slidein{display:none} @media (min-width:992px){ .llcb-slidein{display:block !important;position:fixed !important;left:35px !important;bottom:104px !important;z-index:1001;width:330px !important;background:#fff !important;border:1px solid #e3e9ed !important;border-radius:14px !important;box-shadow:0 18px 50px rgba(10,20,30,.25) !important;padding:20px 22px !important;margin:0 !important;transform:translateY(16px);opacity:0;transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s ease} .llcb-slidein.llcb-on{transform:none;opacity:1} .llcb-si-title{margin:0 26px 6px 0 !important;padding:0 !important;font-size:18px !important;line-height:24px !important;font-weight:600 !important;color:#20303c !important;border:0 !important;background:none !important} .llcb-si-sub{margin:0 0 12px !important;font-size:14px !important;font-weight:400 !important;line-height:1.55 !important;color:#5b6b76 !important} .llcb-slidein .ll-cb-fields{flex-direction:column !important;gap:8px !important} .llcb-slidein .ll-cb-fields input{flex:1 1 auto;width:100% !important;height:42px !important;border:1px solid #ccd7de !important} .llcb-slidein .ll-cb-fields input:focus{border-color:#259457 !important;box-shadow:0 0 0 3px rgba(37,148,87,.14) !important} .llcb-slidein .ll-cb-submit{width:100% !important;height:42px !important;background:#259457 !important;color:#fff !important} .llcb-slidein .ll-cb-submit:hover{background:#1d7a48 !important} .llcb-si-alt{margin:10px 0 0 !important;font-size:13px !important;font-weight:400 !important;color:#5b6b76 !important} .llcb-si-alt a{color:#1d7a48 !important;font-weight:600 !important;text-decoration:none !important} } /* ----------------------------- modal ---------------------------- */ /* Explicit top/right/bottom/left ride alongside inset:0 on purpose: Safari before 14.5 ignores inset and would otherwise lose the overlay geometry entirely (same fix applied to ll-contact.css). */ .llcb-overlay{position:fixed !important;inset:0;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;z-index:2147481000;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;padding:20px !important;background:rgba(15,26,36,.55) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease} .llcb-overlay.llcb-show{opacity:1} /* The card is a flex column with a scrollable body: the call slide-up (call button + form + checkbox + signup + footer) is taller than an iPhone SE viewport, and without this the top clips unreachably. */ .llcb-card{position:relative !important;display:flex !important;flex-direction:column !important;width:100% !important;max-width:480px !important;max-height:calc(100vh - 40px) !important;margin:0 !important;padding:0 !important;background:#fff !important;border:0 !important;border-radius:14px !important;box-shadow:0 24px 64px rgba(10,20,30,.35) !important;color:#33434e !important;font-size:15px !important;font-weight:400 !important;line-height:1.5 !important;text-align:left !important;transform:translateY(14px);transition:transform .18s ease} .llcb-overlay.llcb-show .llcb-card{transform:translateY(0)} .llcb-head{flex:0 0 auto;margin:0 !important;padding:22px 56px 12px 26px !important;border:0 !important;background:none !important} .llcb-title{margin:0 !important;padding:0 !important;font-size:22px !important;line-height:28px !important;font-weight:600 !important;color:#20303c !important;border:0 !important;background:none !important;text-align:left !important} .llcb-sub{margin:6px 0 0 !important;padding:0 !important;font-size:14px !important;font-weight:400 !important;line-height:1.55 !important;color:#5b6b76 !important;text-align:left !important} .llcb-x{position:absolute !important;top:14px !important;right:14px !important;width:34px !important;height:34px !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:8px !important;background:transparent !important;color:#5b6b76 !important;font-size:22px !important;font-weight:400 !important;line-height:1 !important;cursor:pointer;z-index:1} .llcb-x:hover{background:#eef3f6 !important;color:#20303c !important} .llcb-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 !important;padding:14px 26px 24px !important} .llcb-body .ll-cb-fields{flex-direction:column !important;gap:10px !important} .llcb-body .ll-cb-fields input{flex:1 1 auto;width:100% !important;border:1px solid #ccd7de !important} .llcb-body .ll-cb-fields input:focus{border-color:#259457 !important;box-shadow:0 0 0 3px rgba(37,148,87,.14) !important} .llcb-body .ll-cb-fields input[aria-invalid="true"]{border-color:#c8362b !important;box-shadow:0 0 0 3px rgba(200,54,43,.12) !important} .llcb-body .ll-cb-submit{width:100% !important;background:linear-gradient(135deg,#2aa261,#1f8a50) !important;color:#fff !important;box-shadow:0 6px 16px rgba(31,138,80,.28) !important} .llcb-body .ll-cb-submit:hover{background:linear-gradient(135deg,#249257,#1b7a46) !important} .llcb-body .ll-cb-done{color:#1d7a48 !important;font-size:17px !important;text-align:center !important;padding:14px 0 !important} /* [MOBILE-ROW] Call slide-up: tap-to-call button + divider above the form */ .llcb-callbtn{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;width:100% !important;height:50px !important;margin:0 !important;border:0 !important;border-radius:9px !important;background:#1570b3 !important;color:#fff !important;font-size:17px !important;font-weight:600 !important;line-height:normal !important;letter-spacing:.2px !important;text-decoration:none !important;cursor:pointer;box-shadow:0 6px 16px rgba(21,112,179,.28) !important} .llcb-callbtn:hover,.llcb-callbtn:focus,.llcb-callbtn:active{background:#115e96 !important;color:#fff !important;text-decoration:none !important} .llcb-or{margin:14px 0 10px !important;font-size:13.5px !important;font-weight:500 !important;color:#7a8893 !important;text-align:center !important} /* [ROUTER v9] Modal first step: three equal full-width direction buttons (Please Call Me / See Pricing / Sign Up Now), then the centered footer. */ .llcb-gate{margin:0 !important;padding:2px 0 4px !important} .llcb-gate-lead{margin:0 0 16px !important;font-size:15px !important;font-weight:400 !important;line-height:1.6 !important;color:#33434e !important;text-align:left !important} .llcb-gate-btn{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;height:48px !important;margin:0 0 10px !important;padding:0 !important;border:0 !important;border-radius:9px !important;background:linear-gradient(135deg,#2aa261,#1f8a50) !important;color:#fff !important;font-size:16px !important;font-weight:600 !important;line-height:normal !important;letter-spacing:.2px !important;text-decoration:none !important;cursor:pointer;box-shadow:0 6px 16px rgba(31,138,80,.28) !important} .llcb-gate-btn:hover,.llcb-gate-btn:focus{background:linear-gradient(135deg,#249257,#1b7a46) !important;color:#fff !important;text-decoration:none !important} /* Router button colors (owner 2026-08-31): blue call, dark-yellow pricing, green signup. These come AFTER the base rule so their !important wins. */ .llcb-gate-btn.llcb-gate-call{background:#1570b3 !important;box-shadow:0 6px 16px rgba(21,112,179,.28) !important} .llcb-gate-btn.llcb-gate-call:hover,.llcb-gate-btn.llcb-gate-call:focus{background:#115e96 !important} .llcb-gate-btn.llcb-gate-pricing{background:#de9600 !important;box-shadow:0 6px 16px rgba(222,150,0,.28) !important} .llcb-gate-btn.llcb-gate-pricing:hover,.llcb-gate-btn.llcb-gate-pricing:focus{background:#c68600 !important} .llcb-signup-alt{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;height:44px !important;margin:10px 0 0 !important;padding:0 !important;border:2px solid #259457 !important;border-radius:9px !important;background:#fff !important;color:#1d7a48 !important;font-size:14.5px !important;font-weight:600 !important;line-height:normal !important;text-decoration:none !important;cursor:pointer} .llcb-signup-alt:hover,.llcb-signup-alt:focus{background:#e9f5ee !important;color:#1d7a48 !important;text-decoration:none !important} /* [LAYOUT v9] Centered footer stack at the very bottom of the popup: the two tap-to-call lines, the verify line, then the attribution last. */ .llcb-foot{margin:16px 0 0 !important;padding:0 !important;text-align:center !important} .llcb-foot p{margin:0 !important;padding:0 !important;text-align:center !important} .llcb-foot-l1{font-size:14px !important;font-weight:400 !important;line-height:1.5 !important;color:#5b6b76 !important} .llcb-foot-l2{margin:2px 0 0 !important;font-size:14px !important;font-weight:400 !important;line-height:1.5 !important;color:#5b6b76 !important} .llcb-foot-verify{margin:10px 0 0 !important;font-size:12px !important;font-weight:400 !important;line-height:1.5 !important;color:#7a8893 !important} .llcb-foot .ll-cb-rc{margin:4px 0 0 !important;max-width:none;text-align:center !important} .llcb-alt-tel{color:#1d7a48 !important;font-weight:600 !important;text-decoration:none !important} .llcb-alt-tel:hover{color:#259457 !important;text-decoration:none !important} @media (max-width:640px){ .llcb-overlay{padding:0 !important;align-items:flex-end !important} .llcb-card{max-width:none !important;max-height:94vh !important;border-radius:16px 16px 0 0 !important;transform:translateY(30px)} .llcb-head{padding:20px 52px 10px 20px !important} .llcb-body{padding:12px 20px calc(20px + env(safe-area-inset-bottom)) !important} }