/* =========================================================
   IOSOFTS site — inline click-to-edit layer
   Loaded on every marketing page. Does nothing unless Edit
   Mode is switched on (via the floating pencil button, or
   ?edit=1 in the URL). Safe to leave included permanently.
   ========================================================= */
#io-edit-fab{position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;background:#0d2030;color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 34px rgba(13,32,48,.28);z-index:9998;transition:transform .15s ease,background .15s ease}
#io-edit-fab:hover{transform:translateY(-2px);background:#087fbd}
#io-edit-fab.is-on{background:#087fbd}
#io-edit-fab svg{width:20px;height:20px}

#io-edit-banner{position:fixed;top:0;left:0;right:0;z-index:9997;background:#0d2030;color:#eef4f7;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px;font:600 12.5px "DM Sans",sans-serif;flex-wrap:wrap;transform:translateY(-100%);transition:transform .2s ease}
#io-edit-banner.show{transform:translateY(0)}
#io-edit-banner b{color:#5fd4fb;font-weight:700}
#io-edit-banner button{font:700 11.5px "DM Sans",sans-serif;border-radius:7px;padding:6px 12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#eef4f7;cursor:pointer}
#io-edit-banner button:hover{background:rgba(255,255,255,.12)}
#io-edit-banner button.io-danger{border-color:rgba(255,120,120,.4);color:#ff9b9b}
body.io-edit-on.io-has-banner{margin-top:40px}
body.io-edit-on [data-io-comp]{scroll-margin-top:150px}
body.io-edit-on [data-io-id]{scroll-margin-top:150px}

.io-edit-hl{outline:2px dashed #087fbd !important;outline-offset:3px;cursor:text !important;border-radius:3px}
.io-edit-active{outline:2px solid #21865a !important;outline-offset:3px;background:rgba(33,134,90,.06) !important;border-radius:3px}
.io-edit-sec-hl{outline:1.5px dashed rgba(8,127,189,.55) !important;outline-offset:6px}

.io-sec-btn{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:8px;background:#0d2030;color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:40;box-shadow:0 8px 20px rgba(13,32,48,.25)}
.io-sec-btn svg{width:15px;height:15px}
.io-sec-btn:hover{background:#087fbd}

.io-edit-toolbar{position:absolute;z-index:9999;background:#0d2030;border-radius:11px;box-shadow:0 16px 40px rgba(13,32,48,.35);padding:8px;display:flex;align-items:center;gap:6px;font-family:"DM Sans",sans-serif}
.io-edit-toolbar button{width:28px;height:28px;border-radius:7px;border:0;background:transparent;color:#cfe3ee;display:flex;align-items:center;justify-content:center;cursor:pointer}
.io-edit-toolbar button:hover{background:rgba(255,255,255,.12)}
.io-edit-toolbar button.io-active{background:rgba(8,127,189,.35);color:#fff}
.io-edit-toolbar svg{width:15px;height:15px}
.io-edit-toolbar .io-sep{width:1px;height:20px;background:rgba(255,255,255,.15);margin:0 2px}
.io-swatch-row{display:flex;gap:5px;align-items:center;padding:0 2px}
.io-swatch{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);cursor:pointer;padding:0}
.io-swatch.io-active{border-color:#fff;box-shadow:0 0 0 2px #087fbd}
.io-color-native{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);padding:0;background:none;cursor:pointer;overflow:hidden}
.io-color-native input{opacity:0;width:0;height:0;position:absolute}
.io-size-val{color:#eef4f7;font:700 11px "IBM Plex Mono",monospace;min-width:28px;text-align:center}
.io-edit-toolbar button.io-save{color:#5fe0a3}
.io-edit-toolbar button.io-cancel{color:#ff9b9b}

.io-sec-popover{position:absolute;z-index:9999;background:#0d2030;border-radius:11px;box-shadow:0 16px 40px rgba(13,32,48,.35);padding:10px;display:flex;flex-direction:column;gap:8px;font-family:"DM Sans",sans-serif}
.io-sec-popover .io-swatch-row{padding:0}
.io-sec-popover .io-label{color:#9db2c2;font:600 10px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em}

@media (max-width:640px){
  #io-edit-fab{right:14px;bottom:14px;width:44px;height:44px}
  #io-edit-banner{font-size:11px;padding:8px 10px}
}