/* Offacto Forms */
:where(:root){
  --navy:#0E1250;--navy-2:#1A2268;--navy-3:#252E80;
  --brand:#4355A2;--brand-dark:#31478A;--brand-mid:#6186C1;--brand-light:#A1B6DF;
  --purple:#9D8DF1;--purple-deep:#7B6BE6;--purple-soft:#CEC6FB;
  --bg:#C9D7F2;--panel:#D8E2F7;--card:#E7EDFB;--white:#fff;
  --ink:#0E1250;--muted:#48537F;--on-dark:#C8CEF0;--on-dark-2:#A1A9DD;
  --ok:#14794A;--ok-bg:#E3F6EC;--err:#A12828;--err-bg:#FDE8E8;
  --f-display:"Urbanist","Segoe UI",system-ui,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-xl:32px;--r-lg:24px;--r-md:18px;--r-sm:12px;
  --wrap:1220px;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
:where(:root){--violet:#6B59DC;--violet-2:#5A48C8}
[hidden]{display:none!important}
.btn{display:inline-flex;align-items:center;gap:12px;padding:6px 22px 6px 6px;border-radius:999px;background:var(--purple);color:var(--navy);font-family:var(--f-display);font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:background .25s,transform .25s var(--ease),box-shadow .25s;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);z-index:-1}
.btn:hover::after{transform:translateX(120%)}
.btn i{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease)}
.btn i svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(123,107,230,.7)}
.btn:hover i{transform:rotate(-45deg)}
.btn.sm{font-size:14px;padding-right:16px}.btn.sm i{width:30px;height:30px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.btn.ghost i{background:var(--navy);color:#fff}
.btn.dk{background:var(--navy);color:#fff}.btn.dk i{color:var(--navy)}
.of-form{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.of-form h3{grid-column:1/-1;font-size:24px}
.of-form .full{grid-column:1/-1}
.of-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.of-form label .req{color:var(--purple-deep)}
.of-form input,.of-form select,.of-form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1.5px solid transparent;border-radius:var(--r-sm);padding:13px 14px;width:100%;transition:border-color .2s,background .2s}
.of-form input:focus,.of-form select:focus,.of-form textarea:focus{outline:none;border-color:var(--purple-deep);background:#fff}
.of-form [aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
.of-form textarea{min-height:130px;resize:vertical}
.of-form .consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13.5px}
.of-form .consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--purple-deep);padding:0}
.of-form .hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.of-form .msg{grid-column:1/-1;border-radius:var(--r-sm);padding:12px 14px;font-weight:600;font-size:15px}
.of-form .msg.ok{background:var(--ok-bg);color:var(--ok)}.of-form .msg.err{background:var(--err-bg);color:var(--err)}
.of-form .fine{grid-column:1/-1;font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.of-form .fine svg{width:14px;height:14px;flex:none}
.of-form button[disabled]{opacity:.6;pointer-events:none}
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,10,50,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
.modal .box{position:relative;width:min(580px,100%);max-height:calc(100dvh - 40px);overflow:auto;border-radius:var(--r-xl);animation:pop .4s var(--ease)}
@keyframes pop{from{transform:translateY(24px) scale(.97);opacity:.4}}
.modal .of-form{grid-template-columns:1fr 1fr}
.modal .close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--card);cursor:pointer;display:grid;place-items:center;z-index:2}
.modal .close svg{width:16px;height:16px}
.of-form,.modal .of-form{grid-template-columns:1fr}
.of-form label:not(.consent){display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:10px;row-gap:7px;font-size:14px;color:var(--ink)}
.of-form label:not(.consent)>input,.of-form label:not(.consent)>select,.of-form label:not(.consent)>textarea{grid-column:1/-1}
.of-form .req,.of-form .opt{font-size:11.5px;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:2px 9px;justify-self:end}
.of-form .req{color:var(--violet-2);background:#EEEBFD}
.of-form .opt{color:var(--muted);background:var(--card)}
.of-form .consent{font-size:13.5px;color:var(--muted);align-items:center}
.of-form select{appearance:none;-webkit-appearance:none;font-weight:400;padding-right:44px;cursor:pointer;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%230E1250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.of-form select:focus{background-color:#fff}
.of-form .of-intro{color:var(--muted);font-size:15px;margin-top:-6px}
@media (max-width:600px){.of-form,.modal .of-form{grid-template-columns:1fr}}
