/* Shared form design. Field names, endpoints and success handlers remain intact. */
:root{--form-paper:#fffbed;--form-ink:#131313;--form-pink:#fd3583;--form-lime:#c6f135}
#unleash-overlay{background:rgba(19,19,19,.78)!important;backdrop-filter:blur(6px)!important;padding:28px!important}
#unleash-box{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);width:100%;max-width:920px!important;background:var(--form-paper)!important;color:var(--form-ink);border:4px solid #131313!important;box-shadow:10px 10px 0 var(--form-pink)!important;transform:none!important;animation:none!important;overflow:auto;max-height:calc(100dvh - 56px);isolation:isolate}
.form-brand{grid-column:1;grid-row:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:32px;min-height:530px;padding:40px 24px;background:#edb5b5;border-right:4px solid #131313;overflow:hidden}
.form-brand::before{content:"";position:absolute;width:350px;height:350px;background:var(--form-pink);border-radius:50%;left:-100px;top:90px;opacity:.35;z-index:-1}
.form-wordmark{font-family:'Bricolage Grotesque',sans-serif;font-size:38px;font-weight:900;font-style:italic;letter-spacing:-3px;transform:rotate(-5deg)}
.form-brand img{width:100%;max-width:none;transform:rotate(-9deg);filter:drop-shadow(0 20px 0 #13131318)}
.form-progress{display:flex;align-items:center;width:100%;gap:9px}
.form-progress span{display:grid;place-items:center;flex:0 0 42px;height:42px;background:var(--form-paper);border:3px solid #131313;font-weight:900;box-shadow:3px 3px #131313}
.form-progress i{height:3px;background:#131313;flex:1}
#unleash-box[data-step="1"] .form-progress span:first-child,#unleash-box[data-step="2"] .form-progress span:nth-of-type(2),#unleash-box[data-step="3"] .form-progress span:last-child{background:var(--form-lime);transform:rotate(-6deg)}
#unleash-box>[id^="unleash-step"]{grid-column:2;grid-row:1;min-width:0}
#unleash-box #unleash-close-btn{position:sticky!important;grid-column:2;grid-row:1;justify-self:end;align-self:start;float:none;top:12px!important;right:auto!important;margin:12px!important;width:40px;height:40px;background:var(--form-paper);color:#131313;border:3px solid #131313;box-shadow:3px 3px #131313;z-index:5}
#unleash-step-1>div:first-child,#unleash-step-2>div:first-child{background:var(--form-paper)!important;padding:38px 62px 22px 30px;border-bottom:3px solid #131313}
#unleash-box h2{font-family:'Bricolage Grotesque',sans-serif;color:#131313!important;font-size:clamp(26px,3vw,38px);letter-spacing:-1px;line-height:1.03;filter:none!important;text-shadow:none}
#unleash-box p,#unleash-box label,#unleash-box .text-on-surface-variant{color:#131313}
#unleash-step-1>div:nth-child(2),#unleash-box #unleash-form{padding:26px 30px 32px;gap:22px}
#unleash-box #unleash-level-display{border:3px solid #131313;border-radius:50% 46% 45% 50%;padding:25px 18px;box-shadow:5px 5px #131313!important;min-height:132px;display:flex;flex-direction:column;justify-content:center;transform:rotate(-2deg)}
#unleash-level-label{font-size:16px}
#unleash-box #unleash-slider{height:12px;background:#edb5b5;border:3px solid #131313}
#unleash-box #unleash-slider::-webkit-slider-thumb{width:32px;height:32px;border-radius:50%;background:var(--form-lime)}
#unleash-box #unleash-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--form-lime)}
.form-back{margin:18px 30px 0;padding:4px 0;font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:4px}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form){color:var(--form-ink);background:var(--form-paper)}
:is(#factory-form,#herd-form,#roas-form,#vat-form){padding:clamp(20px,3vw,36px);border:4px solid var(--form-ink);box-shadow:8px 8px var(--form-pink);transform:none}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) label{color:var(--form-ink)!important;font-weight:800;font-size:12px;letter-spacing:.07em}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) :is(input:not([type=range]):not([type=checkbox]),select,textarea){display:block;width:100%;min-height:50px;background:#fff!important;color:var(--form-ink)!important;border:3px solid var(--form-ink)!important;border-radius:14px;padding:12px 14px;font-family:inherit;font-size:16px;font-weight:600;box-shadow:3px 3px #131313!important;outline:none;transition:box-shadow .15s}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) :is(input,textarea)::placeholder{color:#69645e;opacity:1}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) :is(input,select,textarea):focus-visible{outline:3px solid var(--form-pink)!important;outline-offset:3px;box-shadow:5px 5px #131313!important}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) input[type=checkbox]{accent-color:var(--form-pink);width:20px;height:20px;flex-shrink:0}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) button[type=submit],#unleash-next-btn,#unleash-done-btn{background:var(--form-lime)!important;color:var(--form-ink)!important;border:3px solid var(--form-ink)!important;box-shadow:5px 5px var(--form-ink)!important;min-height:54px;padding:14px 16px;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:900;line-height:1.2;transition:transform .15s,box-shadow .15s}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) button[type=submit]:disabled{opacity:.6;cursor:wait;transform:none}
#unleash-form-error{color:#8b153b!important;background:#ffe0eb;border:2px solid #8b153b}
#unleash-step-3{align-self:center;padding:60px 30px!important}
@media(max-width:640px){
 #unleash-overlay{padding:16px!important}
 #unleash-box{display:block;max-height:calc(100dvh - 32px)!important;box-shadow:6px 6px var(--form-pink)!important}
 .form-brand{min-height:0;height:90px;padding:18px 20px;border-right:0;border-bottom:3px solid #131313;flex-direction:row;gap:20px;justify-content:flex-start}
 .form-wordmark{font-size:26px;letter-spacing:-2px}
 .form-brand img{position:absolute;left:135px;top:0;width:130px;opacity:.8}
 .form-progress{display:none}
 #unleash-box #unleash-close-btn{position:absolute!important;top:14px!important;right:14px!important;margin:0!important}
 #unleash-step-1>div:first-child,#unleash-step-2>div:first-child{padding:24px 20px 18px}
 #unleash-box h2{font-size:30px}
 #unleash-step-1>div:nth-child(2),#unleash-box #unleash-form{padding:22px 20px 28px;gap:18px}
 .form-back{margin:16px 20px 0}
 #unleash-box #unleash-level-display{min-height:116px;padding:18px}
}
:is(#factory-form,#herd-form,#roas-form,#vat-form) .text-on-surface-variant{color:#514b45!important}
:is(#factory-form,#herd-form,#roas-form,#vat-form) label span{color:#8b153b!important}
:is(#factory-form,#herd-form,#roas-form,#vat-form) label[for$="rodo"]{letter-spacing:0;line-height:1.5;font-weight:600}

/* The same rounded frame language on forms and modal controls. */
#unleash-box{border-radius:30px!important}
.form-brand{border-radius:25px 0 0 25px}
.form-progress span{border-radius:50%}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form){border-radius:24px}
:is(#unleash-form,#factory-form,#herd-form,#roas-form,#vat-form) button[type=submit],#unleash-next-btn,#unleash-done-btn{border-radius:22px}
[id$="-overlay"] button,#faq-modal button{border-radius:18px}
#unleash-box #unleash-close-btn{border-radius:50%}
:is(#modal-box,#casestudies-box,#sales-growth-box,#ads-box,#breach-mind-box,#alphax-box,#savage-box,#voodoo-box){border-radius:26px}
:is(#modal-box,#casestudies-box,#sales-growth-box,#ads-box,#breach-mind-box,#alphax-box,#savage-box,#voodoo-box)>div{border-radius:22px}
@media(max-width:640px){#unleash-box{border-radius:24px!important}.form-brand{border-radius:20px 20px 0 0}}

/* Round the border owner, then clip the question/answer backgrounds to it. */
#faq-modal>div{border-radius:30px}
#faq-modal .faq-item{border-radius:20px;overflow:hidden;background:var(--form-ink)}
#faq-modal .faq-question,#faq-modal .faq-answer{border-radius:0!important}
#faq-modal .faq-question{gap:16px}
#faq-modal .faq-icon{flex-shrink:0}
#modal-box>div:first-of-type{border-radius:20px 20px 0 0}
#modal-box>#modal-content{border-radius:0 0 20px 20px}
@media(max-width:640px){
 #faq-modal>div{padding:26px 16px;border-radius:24px;transform:none}
 #faq-modal .faq-question,#faq-modal .faq-answer{padding:18px 16px}
}
/* Detail cards use the same border radius as their surrounding modal. */
:is(#casestudies-box,#sales-growth-box,#ads-box,#breach-mind-box,#alphax-box,#savage-box,#voodoo-box) section{border-radius:22px}
:is(#casestudies-box,#sales-growth-box,#ads-box,#breach-mind-box,#alphax-box,#savage-box,#voodoo-box) li{border-radius:12px}
