.psg-overlay{
    --psg-dark:var(--global-palette3,#111B33); --psg-accent:var(--global-palette1,#2447F5); --psg-accent-hover:var(--global-palette10,#0A47A6);
    --psg-text:var(--global-palette3,#111B33); --psg-muted:var(--global-palette5,#5E7088); --psg-line:var(--global-palette7,#DDE7F1);
    --psg-error:#C63B3B; --psg-success:#1F8F5F; --psg-surface:var(--global-palette9,#FFFFFF); --psg-surface-soft:var(--global-palette8,#F4F8FC);
    position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
    padding:16px;     background:rgba(17,27,51,.62);
    font-family:var(--global-body-font-family,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
    font-size:clamp(15px,.25vw + 14px,17px); line-height:1.5;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .psg-overlay.is-open{display:flex}
  .psg-overlay *,.psg-overlay *::before,.psg-overlay *::after{box-sizing:border-box}

  .psg-modal{
    position:relative; display:flex; width:min(960px,100%); max-width:100%; max-height:90vh; max-height:90dvh;
    background:linear-gradient(160deg,#111B33 0%,#0A47A6 130%); border:0px solid var(--psg-line); border-radius:20px; overflow:hidden;
    box-shadow:0 28px 80px rgba(0,0,0,.32);
  }
  .psg-left{
    flex:0 0 44%; background:linear-gradient(160deg,#111B33 0%,#0A47A6 130%); color:#fff; padding:clamp(28px,4vw,52px) clamp(24px,3.8vw,44px);
    display:flex; flex-direction:column;
  }
  .psg-right{flex:1 1 56%; background:var(--psg-surface); padding:clamp(30px,4vw,52px) clamp(26px,4vw,48px); overflow-y:auto; color:var(--psg-text)}

  .psg-eyebrow{margin:0 0 18px; color:#8FB8F5; font-size:clamp(11px,.25vw + 10px,13px); font-weight:750; letter-spacing:.12em; line-height:1.4}
  .psg-headline{margin:0 0 16px; font-family:var(--global-heading-font-family,inherit); font-size:clamp(29px,3.2vw,32px); line-height:1.08; font-weight:800; letter-spacing:-.035em; color:#fff}
  .psg-lede{margin:0 0 28px; font-size:clamp(15px,.25vw + 14px,16px); line-height:1.65; color:#CAD0DB}
  .psg-benefits{list-style:none; margin:0; padding:0; display:grid; gap:14px}
  .psg-benefits li{display:flex; align-items:center; gap:12px; font-size:clamp(14px,.2vw + 13px,15px); font-weight:600; line-height:1.45; color:#fff}
  .psg-benefits svg{flex:none; width:18px; height:18px; stroke:#8FB8F5}
  .psg-upwork{margin-top:18px}
  /* v1.5.5 contrast fix: the badge was dark translucent on the dark
     navy panel, so the green/black Upwork wordmark (black "work" on
     navy) was barely legible, confirmed live 26 Oct 2026. The
     wordmark needs a light background, so the badge is a white pill
     again, with dark text. Also fixes the invalid 5-digit hex colour
     here (dropped by browsers) and the hover that set
     background:none. */
  .psg-upwork a{display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:8px 12px; border:1px solid #DDE7F1; border-radius:999px; background:#FFFFFF; color:#111B33; font-size:12px; font-weight:600; line-height:1.4; text-decoration:none; transition:border-color .15s ease,background-color .15s ease,color .15s ease}
  .psg-upwork a:hover{border-color:#2B7BEF; background:#F4F8FC; }
  .psg-upwork a:focus-visible{outline:3px solid #8FB8F5; outline-offset:2px}
  .psg-upwork img{display:block; flex:none; width:48px; height:24px; object-fit:contain}
  .psg-upwork-fallback{font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1; white-space:nowrap}
  .psg-up-green{color:#14A800}
  .psg-up-black{color:#111B33}
  .psg-services{margin:auto 0 0; padding-top:32px; font-size:clamp(12px,.15vw + 11px,12px); font-weight:600; line-height:1.5; letter-spacing:.04em; color:#A8B6D0}

  .psg-title{margin:0 0 8px; font-family:var(--global-heading-font-family,inherit); font-size:clamp(21px,2vw,28px); line-height:1.18; font-weight:700; letter-spacing:-.025em; color:var(--psg-text)}
  .psg-sub{margin:0 0 24px; font-size:clamp(14px,.25vw + 13px,16px); line-height:1.55; color:var(--psg-muted)}

  .psg-field{margin-bottom:18px}
  .psg-label{display:block; margin-bottom:7px; font-size:clamp(13px,.15vw + 12px,14px); font-weight:650; color:var(--psg-text)}
  .psg-req{color:var(--psg-error); margin-left:2px}
  .psg-input{
    display:block; width:100%; height:clamp(48px,4.5vw,54px); padding:0 15px; font:inherit; font-size:max(16px,1rem);
    color:var(--psg-text); background:var(--psg-surface); border:2px solid var(--psg-line); border-radius:12px;
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; appearance:none; -webkit-appearance:none;
  }
  .psg-input::placeholder{color:var(--global-palette6,#8C9AAD)}
  .psg-input:hover{border-color:var(--global-palette6,#8C9AAD)}
  .psg-input:focus-visible{outline:none; border-color:var(--psg-accent); box-shadow:0 0 0 3px rgba(36,71,245,.16)}
  select.psg-input{
    padding-right:40px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171717' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  select.psg-input:invalid{color:#8A8F93}
  select.psg-input option{color:var(--psg-text)}
  .psg-field.has-error .psg-input{border-color:var(--psg-error)}
  .psg-field.has-error .psg-input:focus-visible{box-shadow:0 0 0 3px rgba(198,59,59,.2)}
  .psg-error{display:none; margin:6px 0 0; font-size:13px; line-height:1.4; color:var(--psg-error)}
  .psg-field.has-error .psg-error{display:block}

  .psg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  .psg-btn{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; margin-top:10px;
    padding:12px 22px; border:1px solid transparent; border-radius:12px; cursor:pointer;
    background:var(--psg-accent); color:#fff; font:inherit; font-size:clamp(14px,.25vw + 11px,14px); font-weight:700; letter-spacing:.01em;
    box-shadow:0 8px 18px rgba(36,71,245,.24);
    transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .psg-btn:hover{background:var(--psg-accent-hover); transform:translateY(-2px); box-shadow:0 12px 24px rgba(36,71,245,.3)}
  .psg-btn:active{transform:translateY(0); box-shadow:0 4px 10px rgba(36,71,245,.22)}
  .psg-btn:focus-visible{outline:3px solid var(--psg-dark); outline-offset:3px}
  .psg-btn[disabled]{opacity:.7; cursor:progress; transform:none; box-shadow:none}
  .psg-privacy{margin:14px 0 0; font-size:clamp(12px,.15vw + 11px,13px); line-height:1.55; color:var(--psg-muted); text-align:center}

  .psg-alert{display:none; margin:0 0 16px; padding:12px 14px; border-radius:8px; font-size:14px; line-height:1.5;
    background:#FCEEEE; color:#8F2424; border:1px solid #EAB8B8}
  .psg-alert.is-visible{display:block}

  .psg-success{display:none; text-align:left; padding:24px 0}
  .psg-success.is-visible{display:block}
  .psg-success-icon{display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:50%; background:var(--psg-success)}
  .psg-success-icon svg{width:24px; height:24px; stroke:#fff}
  .psg-success p{margin:0 0 12px; font-size:15px; line-height:1.6; color:var(--psg-muted)}
  .psg-success .psg-title{margin-bottom:12px}
  .psg-done{
    display:inline-flex; align-items:center; justify-content:center; min-height:54px; margin-top:12px; padding:12px 24px;
    border:1px solid transparent; border-radius:12px; cursor:pointer;
    background:var(--psg-accent); color:#fff; font:inherit; font-size:15px; font-weight:700; letter-spacing:.01em;
    box-shadow:0 8px 18px rgba(36,71,245,.24);
    transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .psg-done:hover{background:var(--psg-accent-hover);transform:translateY(-2px);box-shadow:0 12px 24px rgba(36,71,245,.3)}
  .psg-done:active{transform:translateY(0);box-shadow:0 4px 10px rgba(36,71,245,.22)}
  .psg-done:focus-visible{outline:3px solid var(--psg-dark);outline-offset:3px}

  .psg-overlay .psg-close{
    position:absolute; top:12px; right:12px; z-index:5; display:grid; place-items:center;
    width:44px; height:44px; min-width:44px; min-height:44px; margin:0; padding:0;
    border:1px solid var(--psg-line); border-radius:10px; cursor:pointer;
    appearance:none; background:var(--psg-surface); color:var(--psg-dark);
    box-shadow:0 2px 8px rgba(17,27,51,.12); line-height:1;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
  }
  .psg-overlay .psg-close:hover{border-color:var(--psg-accent);background:var(--psg-surface-soft);color:var(--psg-accent)}
  .psg-overlay .psg-close:focus-visible{outline:3px solid var(--psg-accent);outline-offset:2px}
  .psg-overlay .psg-close svg{display:block;width:20px;height:20px}

  .psg-form-hidden{display:none}

  @media (max-width:599px){
    .psg-overlay{padding:10px; align-items:center}
    .psg-modal{flex-direction:column; width:100%; max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); border-radius:18px; overflow-y:auto; overscroll-behavior:contain}
    .psg-left{flex:none; padding:22px 22px 18px}
    .psg-eyebrow{margin-bottom:8px; padding-right:44px}
    .psg-headline{font-size:clamp(23px,6vw,29px); margin:0; padding-right:54px}
    /* v1.5.6 mobile trust: 1.5.5 hid the whole left trust panel on
       phones, so mobile visitors lost the Upwork proof and services.
       Keep the Upwork pill and services, hide only lede + benefits. */
    .psg-lede,.psg-benefits{display:none}
    .psg-upwork{margin-top:14px}
    .psg-services{display:block; padding-top:14px; font-size:11px}
    .psg-right{flex:none; overflow:visible; padding:22px}
    .psg-title{font-size:clamp(20px,5vw,24px)}
    .psg-sub{margin-bottom:18px; font-size:15px}
    .psg-field{margin-bottom:14px}
    .psg-input{height:50px; font-size:16px} /* 16px avoids iOS zoom-on-focus */
    .psg-btn{min-height:52px}
    /* v1.5.6: the modal is the scroll container on mobile, so an
       absolute close button scrolled away. Fixed keeps it visible. */
    .psg-overlay .psg-close{top:10px;right:10px;position:fixed;z-index:100000}
  }
  @media (prefers-reduced-motion:reduce){
    .psg-overlay *{transition:none!important}
  }

/* ---- Theme-proof field styling (beats Kadence/theme global input+select rules) ---- */
.psg-overlay .psg-field .psg-input,
.psg-overlay .psg-field select.psg-input{
  display:block!important; width:100%!important; max-width:100%!important; height:clamp(48px,4.5vw,54px)!important; min-height:48px;
  margin:0!important; padding:0 14px!important;   font-family:inherit!important; font-size:max(15px,1rem)!important; font-weight:400!important;
  line-height:1.35!important; color:var(--psg-text)!important; background-color:var(--psg-surface)!important;
  border:2px solid var(--psg-line)!important; border-radius:12px!important; box-shadow:none!important;
  color-scheme:light;
}
.psg-overlay .psg-field .psg-input:hover{border-color:var(--global-palette6,#8C9AAD)!important}
.psg-overlay .psg-field .psg-input:focus,
.psg-overlay .psg-field .psg-input:focus-visible{
  outline:none!important; border-color:var(--psg-accent)!important; box-shadow:0 0 0 3px rgba(36,71,245,.16)!important;
}
.psg-overlay .psg-field.has-error .psg-input{border-color:var(--psg-error)!important}
.psg-overlay .psg-field select.psg-input{
  -webkit-appearance:none!important; -moz-appearance:none!important; appearance:none!important;
  padding-right:42px!important; cursor:pointer; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230A1F3D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 15px center!important; background-size:12px 8px!important;
}
.psg-overlay .psg-field select.psg-input:invalid{color:#8A8F93!important}
.psg-overlay .psg-field select.psg-input option{
  color:var(--psg-text); background:var(--psg-surface); font-family:inherit; font-size:15px; padding:10px 14px;
}
.psg-overlay .psg-field select.psg-input option[disabled]{color:#8A8F93}
@media (min-width:600px){
  .psg-overlay .psg-field .psg-input,
  .psg-overlay .psg-field select.psg-input{font-size:clamp(16px,.2vw + 15px,17px)!important}
}
@media (max-width:599px){
  .psg-overlay .psg-field .psg-input,
  .psg-overlay .psg-field select.psg-input{height:50px!important;min-height:50px}
}
@media (max-height:700px) and (min-width:600px){
  .psg-modal{max-height:94dvh}
  .psg-left,.psg-right{padding-top:28px;padding-bottom:28px}
  .psg-field{margin-bottom:12px}
}

/* ---- v1.5.4 dark left panel, theme-proof (beats other CSS targeting .psg-left) ---- */
.psg-overlay .psg-modal .psg-left{background:linear-gradient(160deg,#111C35 0%,#0F2957 55%,#0D316C 100%)!important;color:#fff!important}
.psg-overlay .psg-modal .psg-left .psg-eyebrow{color:#8FB8F5!important}
.psg-overlay .psg-modal .psg-left .psg-headline{color:#fff!important}
.psg-overlay .psg-modal .psg-left .psg-lede{color:#CAD0DB!important}
.psg-overlay .psg-modal .psg-left .psg-benefits li{color:#fff!important;font-weight:600!important}
.psg-overlay .psg-modal .psg-left .psg-benefits svg{stroke:#8FB8F5!important}
.psg-overlay .psg-modal .psg-left .psg-upwork a{background:#FFFFFF!important;border-color:#DDE7F1!important;color:#111B33!important;border-radius:999px!important}
.psg-overlay .psg-modal .psg-left .psg-upwork a:hover{background:#F4F8FC!important;border-color:#2B7BEF!important}
.psg-overlay .psg-modal .psg-left .psg-services{color:#A8B6D0!important}
