/* The demo-request dialog (partials/demo-modal.html, behaviour in
   marketing-enhancements.js): one look on every page that has it. The form
   rules are scoped to the dialog so a page's own form styles cannot restyle it. */
.ec-modal-overlay{position:fixed;inset:0;z-index:var(--ec-z-modal,9500);display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,0);pointer-events:none;transition:background 0.25s ease;}
.ec-modal-overlay.ec-open{background:rgba(0,0,0,0.72);pointer-events:all;backdrop-filter:blur(5px);}
.ec-modal-box{background:#181C27;border:1px solid #2A3045;border-radius:20px;width:100%;max-width:620px;max-height:90vh;overflow-y:auto;padding:44px;position:relative;transform:translateY(28px);opacity:0;transition:transform 0.28s ease,opacity 0.28s ease;box-shadow:0 32px 80px rgba(0,0,0,0.55);}
.ec-modal-overlay.ec-open .ec-modal-box{transform:translateY(0);opacity:1;}
.ec-modal-close{position:absolute;top:18px;right:18px;background:#1E2334;border:1px solid #2A3045;border-radius:8px;width:34px;height:34px;cursor:pointer;color:#9CA1B2;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;line-height:1;padding:0;}
.ec-modal-close:hover{border-color:#F59E0B;color:#F59E0B;}
.ec-modal-kicker{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#F59E0B;margin-bottom:10px;}
.ec-modal-title{font-family:"Barlow Condensed",sans-serif;font-size:34px;font-weight:900;text-transform:uppercase;line-height:1;margin-bottom:6px;background:linear-gradient(90deg,#F59E0B,#EF4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ec-modal-sub{font-size:14px;color:#C8C4BE;margin-bottom:28px;line-height:1.6;}
body.light-mode .ec-modal-box{background:#FFFFFF;border-color:#DDD9D0}
body.light-mode .ec-modal-close{background:#F8F7F4;border-color:#DDD9D0;color:#524E49}
body.light-mode .ec-modal-sub{color:#524E49}
.ec-modal-box .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ec-modal-box .form-group{display:flex;flex-direction:column;gap:8px}
.ec-modal-box .form-group.full{grid-column:1/-1}
.ec-modal-box .form-label{font-size:13px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--mut)}
.ec-modal-box :is(.form-input,.form-textarea){background:var(--s1);border:1px solid var(--bdr);border-radius:10px;padding:13px 16px;color:var(--txt);font-family:'Barlow',sans-serif;font-size:14px;transition:border-color 0.2s;width:100%;-webkit-appearance:none}
.ec-modal-box :is(.form-input,.form-textarea):focus{border-color:var(--amber)}
.ec-modal-box .form-textarea{resize:vertical;min-height:100px}
.ec-modal-box .form-submit{width:100%;padding:16px;border:none;border-radius:10px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;margin-top:8px;box-shadow:0 0 40px rgba(245,158,11,0.25);transition:opacity 0.2s,box-shadow 0.2s}
.ec-modal-box .form-submit:hover{opacity:0.9;box-shadow:0 4px 40px rgba(245,158,11,0.4)}
.ec-modal-box .role-check-item{padding:11px 14px;background:var(--s1)}
@media(max-width:768px){
  .ec-modal-box .form-grid{grid-template-columns:1fr}
  .ec-modal-box :is(.form-input,.form-textarea){font-size:16px}
  .ec-modal-box .role-check-item{padding:10px 12px}
}
/* EC-4650 (N-384): mark the demo form's required fields. A pseudo-element, not a
   span: each page's fill() sets the label with textContent, which would wipe a
   span, and the "<label> is required." error reads textContent too. */
form[action$="/demo-request"] .form-label:has(+ [required])::after{content:" *";color:var(--accent-text,var(--amber))}