/* LeadSync optin forms. Every rule is scoped to .lso so themes and optins don't collide. */

.lso{--lso-bg:#d13a33;--lso-form-bg:#4a4a4a;--lso-btn:#6b6b6b;--lso-hfont:inherit;--lso-bfont:inherit;--lso-radius:0px;--lso-field-radius:6px;--lso-max:960px;box-sizing:border-box;line-height:1.5;text-align:left}
.lso *,.lso *::before,.lso *::after{box-sizing:border-box}
.lso[hidden],.lso [hidden]{display:none!important}
.lso-w-small{--lso-max:480px}.lso-w-medium{--lso-max:720px}.lso-w-large{--lso-max:960px}
.lso-corners-rounded{--lso-radius:14px}
.lso-fields-squared{--lso-field-radius:0px}

/* ---- Card ---- */
.lso-card{position:relative;max-width:var(--lso-max);margin:0 auto;container-type:inline-size;font-family:var(--lso-bfont)}
.lso-header{display:flex;gap:40px;align-items:center;padding:48px 56px 44px;background:var(--lso-bg);border-radius:var(--lso-radius) var(--lso-radius) 0 0}
.lso-img-above .lso-header{flex-direction:column;text-align:center}
.lso-img-below .lso-header{flex-direction:column-reverse;text-align:center}
.lso-img-right .lso-header{flex-direction:row-reverse}
.lso-image{flex:0 0 38%;max-width:38%;text-align:center}
.lso-img-above .lso-image,.lso-img-below .lso-image{flex:none;max-width:72%}
.lso-image img{display:block;max-width:100%;height:auto;margin:0 auto;border:0;box-shadow:none}
.lso-text{flex:1;min-width:0}
.lso .lso-title,.lso .lso-title *{margin:0 0 .35em;padding:0;font-family:var(--lso-hfont);line-height:1.15;color:inherit;letter-spacing:normal;text-transform:none;background:none;border:0}
.lso .lso-title h1{font-size:2.6em}.lso .lso-title h2{font-size:2.3em}.lso .lso-title h3{font-size:1.8em}.lso .lso-title h4{font-size:1.4em}.lso .lso-title p{font-size:1.6em}
.lso .lso-message,.lso .lso-message *{font-family:var(--lso-bfont);color:inherit}
.lso .lso-message{font-size:1.15em;line-height:1.6;opacity:.92}
.lso .lso-message p{margin:0 0 .6em}.lso .lso-message p:last-child{margin-bottom:0}
.lso .lso-message a{color:inherit;text-decoration:underline}
.lso-text-light .lso-header{color:#fff}
.lso-text-dark .lso-header{color:#22252b}

/* ---- Form ---- */
.lso-body{position:relative;padding:56px 56px 48px;background:var(--lso-form-bg);border-radius:0 0 var(--lso-radius) var(--lso-radius)}
.lso-ftext-light .lso-body{color:#f3f4f6}
.lso-ftext-dark .lso-body{color:#22252b}
.lso-fields{display:flex;flex-wrap:wrap;gap:16px 24px}
.lso-form-stacked .lso-fields{flex-direction:column;gap:12px}
.lso.lso-form-stacked .lso-input,.lso.lso-form-stacked .lso-submit{flex:none}
.lso .lso-input{flex:1 1 180px;display:block;width:100%;min-width:0;height:56px;margin:0;padding:0 18px;border:0;border-radius:var(--lso-field-radius);background:#fff;color:#22252b;font:inherit;font-size:17px;line-height:56px;box-shadow:none;outline:none;appearance:none}
.lso .lso-input::placeholder{color:#6b7280;opacity:1}
.lso .lso-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--lso-btn) 55%,transparent)}
.lso .lso-input[aria-invalid=true]{box-shadow:0 0 0 3px #f87171}
.lso .lso-submit{flex:1 1 180px;display:block;width:100%;height:56px;margin:0;padding:0 20px;border:0;border-radius:var(--lso-field-radius);background:var(--lso-btn);font:inherit;font-family:var(--lso-hfont);font-size:17px;font-weight:700;line-height:1;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:none;transition:filter .15s,transform .15s}
.lso-btext-light .lso-submit{color:#fff}.lso-btext-dark .lso-submit{color:#22252b}
.lso .lso-submit:hover{filter:brightness(1.08)}.lso .lso-submit:active{transform:translateY(1px)}
.lso .lso-submit[disabled]{opacity:.65;cursor:default}
.lso-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px;line-height:1.5;cursor:pointer}
.lso .lso-consent input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0;accent-color:var(--lso-btn)}
.lso-status{font-size:14px;line-height:1.5}
.lso-status:not(:empty){margin-top:12px}
.lso-status.lso-error{color:#fecaca;font-weight:600}
.lso-ftext-dark .lso-status.lso-error{color:#b91c1c}
.lso-footer{margin-top:16px;font-size:13px;opacity:.75;text-align:center}
.lso-success{font-size:18px;text-align:center}
.lso-success p{margin:0 0 .5em}.lso-success p:last-child{margin:0}
.lso-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- Form edges: the header colour reaches into the form ---- */
.lso-body::before{content:"";position:absolute;top:-1px;left:0;right:0;pointer-events:none}
.lso-edge-carrot .lso-body::before{left:50%;right:auto;width:0;height:0;margin-left:-16px;border:16px solid transparent;border-top-color:var(--lso-bg);border-bottom:0}
.lso-edge-wedge .lso-body::before{height:30px;background:var(--lso-bg);clip-path:polygon(0 0,100% 0,50% 100%)}
.lso-edge-curve .lso-body::before{height:30px;background:var(--lso-bg);border-radius:0 0 50% 50%/0 0 100% 100%}
.lso-edge-zigzag .lso-body::before{height:15px;background:linear-gradient(135deg,var(--lso-bg) 25%,transparent 25%) 0 0/30px 30px,linear-gradient(225deg,var(--lso-bg) 25%,transparent 25%) 0 0/30px 30px}
.lso-edge-breakout .lso-body{margin:0 -16px;border-radius:var(--lso-radius);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lso-edge-basic .lso-body{padding-top:44px}

/* ---- Narrow containers (fly-ins, widgets, phones): stack everything ---- */
@container (max-width:600px){
	.lso-header{flex-direction:column!important;gap:20px;padding:32px 24px 28px;text-align:center}
	.lso-img-below .lso-header{flex-direction:column-reverse!important}
	.lso-image,.lso-img-above .lso-image,.lso-img-below .lso-image{flex:none;max-width:70%}
	.lso .lso-title h1{font-size:2em}.lso .lso-title h2{font-size:1.7em}.lso .lso-title h3{font-size:1.4em}.lso .lso-title p{font-size:1.3em}
	.lso .lso-message{font-size:1em}
	.lso-body{padding:36px 24px 28px}
	.lso-fields{flex-direction:column;gap:12px}
	.lso .lso-input,.lso .lso-submit{flex:none;height:50px;line-height:50px;font-size:16px}
	.lso .lso-submit{line-height:1}
	.lso-edge-breakout .lso-body{margin:0 -8px}
}
@media (max-width:767px){
	.lso-hide-img-mobile .lso-image{display:none}
}

/* ---- Inline / below post / widget / locked ---- */
.lso-type-inline,.lso-type-below_post,.lso-type-locked{margin:32px 0}
.lso-type-below_post{clear:both}
.lso-type-widget .lso-header{padding:28px 22px 24px}
.lso-type-widget .lso-body{padding:32px 22px 24px}
.lso-locked-content{margin-top:0}

/* ---- Pop-up ---- */
.lso-type-popup{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:8px}
.lso-backdrop{position:absolute;inset:0;background:rgba(10,12,16,.72);opacity:0;transition:opacity .3s}
.lso-open .lso-backdrop{opacity:1}
/* The 16px padding keeps the overhanging close button inside the scroll box. */
.lso-type-popup .lso-dialog{position:relative;width:100%;max-width:calc(var(--lso-max) + 32px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;padding:16px;opacity:0;transition:opacity .3s}
.lso-type-popup .lso-card{box-shadow:0 6px 14px rgba(0,0,0,.35)} /* Small enough to fit the 16px scroll padding. */
.lso-open .lso-dialog{opacity:1}
html.lso-noscroll,html.lso-noscroll body{overflow:hidden!important}

/* ---- Fly-in ---- */
.lso-type-flyin{position:fixed;bottom:20px;right:20px;z-index:2147482999;width:min(380px,calc(100vw - 40px))}
.lso-type-flyin.lso-pos-left{right:auto;left:20px}
.lso-type-flyin .lso-dialog{opacity:0;transition:opacity .3s}
.lso-type-flyin.lso-open .lso-dialog{opacity:1}
.lso-type-flyin .lso-card{max-width:none;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.lso-type-flyin .lso-header,.lso-type-flyin .lso-body{max-height:none}

/* ---- Close button ---- */
.lso .lso-close{position:absolute;top:-14px;right:-14px;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#22252b;font:700 28px/1 Arial,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer}
.lso .lso-close:hover{transform:scale(1.06)}
.lso .lso-close:focus-visible{outline:3px solid var(--lso-btn);outline-offset:2px}
.lso-type-flyin .lso-close{top:-12px;right:-8px;width:34px;height:34px;font-size:24px}
.lso-type-flyin.lso-pos-left .lso-close{right:auto;left:-8px}

/* ---- Device visibility (inline types; pop-ups are also skipped in JS) ---- */
@media (max-width:767px){.lso-hide-mobile{display:none!important}}
@media (min-width:768px){.lso-hide-desktop{display:none!important}}

/* ---- Animations (run once .lso-animate is added) ---- */
.lso-animate .lso-anim-fade{animation:lso-fade .6s ease both}
.lso-animate .lso-anim-slide_up{animation:lso-slide-up .6s cubic-bezier(.2,.8,.2,1) both}
.lso-animate .lso-anim-slide_down{animation:lso-slide-down .6s cubic-bezier(.2,.8,.2,1) both}
.lso-animate .lso-anim-zoom{animation:lso-zoom .5s cubic-bezier(.2,.8,.2,1) both}
.lso-animate .lso-anim-flip{animation:lso-flip .7s ease both;backface-visibility:visible}
.lso-animate .lso-anim-light_speed{animation:lso-light-speed .7s ease-out both}
.lso-animate .lso-anim-bounce{animation:lso-bounce .9s both}
.lso-animate .lso-image{animation-delay:.25s}
@keyframes lso-fade{from{opacity:0}to{opacity:1}}
@keyframes lso-slide-up{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes lso-slide-down{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes lso-zoom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes lso-flip{from{opacity:0;transform:perspective(800px) rotateX(-80deg)}60%{transform:perspective(800px) rotateX(12deg)}to{opacity:1;transform:perspective(800px) rotateX(0)}}
@keyframes lso-light-speed{from{opacity:0;transform:translateX(70%) skewX(-30deg)}60%{opacity:1;transform:skewX(20deg)}80%{transform:skewX(-5deg)}to{opacity:1;transform:none}}
@keyframes lso-bounce{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.06)}70%{transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lso *{animation:none!important;transition:none!important}}