/* SOVAIQ gateway journey: isolated styles; deliberately no existing page selectors. */
.sq-gd{--gd-fontscale:1;position:relative;display:block;min-width:0;width:100%;max-width:100%;background:var(--gd-bg,#061326);border:1px solid #52779e80;color:var(--gd-text,#ECF5FF);font-family:var(--gd-font,Arial,sans-serif);font-size:calc(12px * var(--gd-fontscale));line-height:1.45;contain:layout paint;overflow:hidden;isolation:isolate}
.sq-gd *{box-sizing:border-box}
.sq-gd-top{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #6da6e333;color:#a8c9f1;font:10px ui-monospace,Consolas,monospace;letter-spacing:.07em}
.sq-gd-dot{width:8px;height:8px;background:#52e9ca;border-radius:50%;box-shadow:0 0 14px #52e9ca}
.sq-gd-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(125px,27%,188px);gap:9px;padding:12px 12px 5px;align-items:stretch;min-width:0}
.sq-gd-graphic{position:relative;min-width:0;height:var(--gd-height,380px);background:radial-gradient(ellipse at 50% 48%,#13355a66,transparent 66%),linear-gradient(120deg,#071428aa,#06132766);overflow:hidden;border:1px solid #5d8ac43a;isolation:isolate}
.sq-gd-graphic::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 33.2%,#97c3ff14 33.3%,transparent 33.4%,transparent 66.4%,#97c3ff14 66.5%,transparent 66.6%)}
.sq-gd-lines{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.sq-gd-grid{z-index:2;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.87fr) minmax(0,1fr);gap:clamp(6px,1.4vw,20px);align-items:center;min-height:100%;padding:12px clamp(7px,1.8vw,24px);pointer-events:none}
.sq-gd-card{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;min-height:160px;padding:clamp(10px,1.35vw,17px);border:1px solid #7894b17a;background:#061225ed;box-shadow:0 12px 35px #0004;overflow-wrap:anywhere;position:relative;max-width:100%}
.sq-gd-kicker{font:9px/1.35 ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#90bce6}
.sq-gd-card strong{font-size:calc(clamp(13px,1.3vw,19px) * var(--gd-fontscale));line-height:1.16;color:var(--gd-text);font-weight:720;letter-spacing:-.045em}
.sq-gd-card small{font-size:calc(10px * var(--gd-fontscale));line-height:1.45;color:#b0c7e1}
.sq-gd-source{width:min(100%,var(--gd-width-source,100%));justify-self:start}
.sq-gd-core{width:min(100%,var(--gd-width-core,100%));justify-self:center;align-items:center;text-align:center;background:#0c2856f2;border-color:var(--gd-accent,#79B9FF);box-shadow:0 0 35px #0b65c444}
.sq-gd-core strong{font-size:calc(clamp(17px,1.7vw,25px) * var(--gd-fontscale))}
.sq-gd-target{width:min(100%,var(--gd-width-target,100%));justify-self:end}
.sq-gd-shield{width:36px;height:40px;color:var(--gd-accent,#79B9FF);margin:3px auto}
.sq-gd-values{display:grid;gap:4px;margin-top:5px}
.sq-gd-values span{display:block;min-width:0;padding:6px 5px;border-left:2px solid #f87f9c;background:#812c4e3c;color:#ffd0da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:calc(8px * var(--gd-fontscale))/1.35 ui-monospace,Consolas,monospace}
.sq-gd-masked span{border-color:#55e4c0;background:#064d4c68;color:#b4ffdd}
.sq-gd-steps{display:flex;flex-direction:column;gap:7px;min-width:0}
.sq-gd-steps-label{color:#95c3f7;font:9px/1.4 ui-monospace,Consolas,monospace;margin:3px 0 5px}
.sq-gd-step{display:flex;align-items:center;min-width:0;text-align:left;gap:9px;min-height:43px;padding:9px;border:1px solid #4c7198b5;background:#0c233b;color:#c9dbf3;border-radius:2px;font-size:calc(10px * var(--gd-fontscale));line-height:1.3;cursor:pointer;transition:background .15s,border-color .15s}
.sq-gd-step b{flex:none;color:#8fbef4;font:10px ui-monospace,Consolas,monospace}
.sq-gd-step:hover,.sq-gd-step:focus-visible{border-color:#a7d4ff;background:#164069}
.sq-gd-step.is-active{background:#103d70;border-color:var(--gd-accent);color:#fff}
.sq-gd-step.is-complete{border-color:#3fbba4;color:#ccfff3}
.sq-gd-step.is-complete b{color:#7bf0d2}
.sq-gd-step span{overflow-wrap:anywhere}
.sq-gd-action{padding:8px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sq-gd-send{background:#0A6ED1;color:#fff;border:1px solid #65aaff;padding:10px 15px;font:700 12px Arial,sans-serif;cursor:pointer;min-height:38px;border-radius:3px}
.sq-gd-send:hover{background:#247fdf}
.sq-gd-send:focus-visible,.sq-gd-step:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sq-gd-send:disabled{opacity:.58;cursor:wait}
.sq-gd-hint{color:#9db3c7;font:9px/1.45 ui-monospace,Consolas,monospace}
.sq-gd-report{display:grid;gap:0;margin:2px 12px 11px;border-top:1px solid #47769b70;background:#06132290}
.sq-gd-report-row{display:grid;grid-template-columns:minmax(82px,110px) minmax(0,1fr);gap:7px;min-height:30px;padding:6px 7px;align-items:center;border-bottom:1px solid #4c73923a;font-size:calc(10px * var(--gd-fontscale));overflow-wrap:anywhere}
.sq-gd-report b{font-size:10px;color:#7fb7ff;font-weight:700}
.sq-gd-report span{color:#cbddf5;white-space:normal}
.sq-gd-active-summary span{color:#8fe3d5}
/* Five functional design variants. All share the same accessible state machine. */
.sq-gd-particles .sq-gd-core{border-radius:42%;box-shadow:0 0 44px #007be055}
.sq-gd-particles .sq-gd-graphic{background:radial-gradient(ellipse at center,#0e4e8061,transparent 65%),#061326}
.sq-gd-wave .sq-gd-graphic{background:radial-gradient(ellipse at 50% 50%,#261c6e65,transparent 68%),#051326}
.sq-gd-wave .sq-gd-core{background:#142658f0;border-color:#a09dff}
.sq-gd-stages .sq-gd-core{border:2px solid #80c8ff;background:#0b2f57f4}
.sq-gd-stages .sq-gd-card{border-left:3px solid #62baff}
.sq-gd-audit .sq-gd-core{border-radius:10px;background:#07374a;border-color:#60dfce}
.sq-gd-audit .sq-gd-graphic{background:radial-gradient(ellipse at center,#075c6869,transparent 75%),#061326}
.sq-gd-compact{width:100%;max-width:100%;align-self:center;margin:0;--gd-height:310px}
.sq-gd-compact .sq-gd-body{grid-template-columns:1fr;gap:4px;padding:8px}
.sq-gd-compact .sq-gd-graphic{height:var(--gd-height,310px)}
.sq-gd-compact .sq-gd-grid{gap:5px;padding:7px}
.sq-gd-compact .sq-gd-card{min-height:122px;padding:7px 6px;gap:4px}
.sq-gd-compact .sq-gd-kicker{font-size:7px;letter-spacing:0}
.sq-gd-compact .sq-gd-card strong{font-size:calc(11px * var(--gd-fontscale))}
.sq-gd-compact .sq-gd-core strong{font-size:calc(15px * var(--gd-fontscale))}
.sq-gd-compact .sq-gd-card small{font-size:calc(8px * var(--gd-fontscale))}
.sq-gd-compact .sq-gd-shield{width:26px;height:27px;margin:1px auto}
.sq-gd-compact .sq-gd-values{gap:3px;margin-top:2px}
.sq-gd-compact .sq-gd-values span{padding:4px 3px;font-size:calc(7px * var(--gd-fontscale))}
.sq-gd-compact .sq-gd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.sq-gd-compact .sq-gd-steps-label{grid-column:1/-1;margin:3px 0;font-size:8px}
.sq-gd-compact .sq-gd-step{min-height:34px;font-size:9px;justify-content:center;gap:3px;padding:5px 3px;flex-wrap:wrap;text-align:center}
.sq-gd-compact .sq-gd-step b{font-size:8px}
.sq-gd-compact .sq-gd-action{padding:6px 8px}
.sq-gd-compact .sq-gd-send{font-size:10px;padding:8px 10px;min-height:34px}
.sq-gd-compact .sq-gd-hint{font-size:8px}
.sq-gd-compact .sq-gd-report{margin:2px 8px 8px}
.sq-gd-compact .sq-gd-report-row{grid-template-columns:72px minmax(0,1fr);font-size:9px;padding:5px}
/* At narrower breakpoints keep all information readable; do not move or resize other site sections. */
@media(max-width:950px){.sq-gd-body{grid-template-columns:1fr}.sq-gd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.sq-gd-steps-label{grid-column:1/-1}.sq-gd-step{min-height:38px}.sq-gd-compact .sq-gd-grid{padding:10px}}
@media(max-width:600px){.sq-gd .sq-gd-graphic{height:auto!important;min-height:510px}.sq-gd .sq-gd-lines{display:none}.sq-gd .sq-gd-grid{display:flex;flex-direction:column;justify-content:center;gap:13px;min-height:510px;padding:13px}.sq-gd .sq-gd-card{width:min(100%,360px)!important;min-height:105px;padding:12px}.sq-gd .sq-gd-core{min-height:118px}.sq-gd .sq-gd-card strong{font-size:16px}.sq-gd .sq-gd-card small{font-size:11px}.sq-gd .sq-gd-values{display:flex;flex-wrap:wrap}.sq-gd .sq-gd-values span{font-size:8px}.sq-gd .sq-gd-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sq-gd .sq-gd-step{font-size:10px;padding:8px}.sq-gd .sq-gd-report-row{grid-template-columns:1fr;gap:2px}.sq-gd .sq-gd-hint{font-size:9px}}
@media(prefers-reduced-motion:reduce){.sq-gd-step{transition:none}.sq-gd-dot{box-shadow:none}}
/* Mobile progress feedback when the large decorative canvas is intentionally disabled. */
.sq-gd[data-phase="0"] .sq-gd-source,.sq-gd[data-phase="1"] .sq-gd-core,.sq-gd[data-phase="2"] .sq-gd-target,.sq-gd[data-phase="3"] .sq-gd-core,.sq-gd[data-phase="done"] .sq-gd-source{border-color:#74dbed;box-shadow:0 0 0 1px #74dbed66,0 0 27px #2088e833}
/* Interactive route editor v4: deliberately scoped to the gateway demo. */
.sq-gd-top{height:auto;min-height:44px;gap:10px}
.sq-gd-heading{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:2px;padding:6px 0}
.sq-gd-heading strong{color:var(--gd-text);font:700 calc(var(--gd-size-header,10px) * var(--gd-fontscale)) /1.3 ui-monospace,Consolas,monospace;letter-spacing:.055em;overflow-wrap:anywhere}
.sq-gd-heading span{color:#9dbfe5;font-size:calc(9px * var(--gd-fontscale));line-height:1.35;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
.sq-gd-top .sq-gd-dot{flex:none}
.sq-gd-source{max-width:none;min-height:calc(160px * var(--gd-h-source,1));transform:translate3d(var(--gd-x-source,0px),var(--gd-y-source,0px),0)}
.sq-gd-core{max-width:none;min-height:calc(160px * var(--gd-h-core,1));transform:translate3d(var(--gd-x-core,0px),var(--gd-y-core,0px),0)}
.sq-gd-target{max-width:none;min-height:calc(160px * var(--gd-h-target,1));transform:translate3d(var(--gd-x-target,0px),var(--gd-y-target,0px),0)}
.sq-gd-card strong{font-size:calc(var(--gd-size-title,16px) * var(--gd-fontscale))}
.sq-gd-card small{font-size:calc(var(--gd-size-body,10px) * var(--gd-fontscale))}
.sq-gd-kicker{font-size:calc(var(--gd-size-kicker,9px) * var(--gd-fontscale))}
.sq-gd-values span{font-size:calc(var(--gd-size-values,8px) * var(--gd-fontscale))}
.sq-gd-step{font-size:calc(var(--gd-size-step,10px) * var(--gd-fontscale))}
.sq-gd-packets{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.sq-gd-packet{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;opacity:0;will-change:transform,opacity;transform:translate3d(-30px,-30px,0);background:#ff6075;border:1px solid #ffb5bb;box-shadow:0 0 0 4px #ff60752c,0 0 16px 3px #fa2b5f9c}
.sq-gd-packet-two{width:8px;height:8px;box-shadow:0 0 0 3px #ff60752a,0 0 12px 2px #fa2b5f80}
.sq-gd-packets.is-protected .sq-gd-packet{background:#63dbdc;border-color:#b8fff5;box-shadow:0 0 0 4px #42e0d02e,0 0 15px 3px #25f6e08c}
.sq-gd-packets.is-return .sq-gd-packet{background:#9cbdff;border-color:#edf8ff;box-shadow:0 0 0 4px #6ab0ff2e,0 0 18px 3px #8cb7ffaf}
.sq-gd-packets.is-demask .sq-gd-packet{background:#77edac;border-color:#e8fff0;box-shadow:0 0 0 4px #70f7ad2d,0 0 15px #7affe0}
.sq-gd-queue{position:absolute;left:0;top:0;display:flex;align-items:center;gap:2px;padding:4px;border:1px dashed #ff9eab;transform:translate3d(-1000px,-1000px,0);background:#39142cda;opacity:0;transition:opacity .15s}
.sq-gd-queue span{width:5px;height:5px;background:#ff657f;border-radius:50%;box-shadow:0 0 6px #ff6e8f}
.sq-gd-queue small{position:absolute;top:-16px;left:0;font:8px monospace;color:#ffb2c6}
.sq-gd[data-phase="queue"] .sq-gd-queue,.sq-gd[data-phase="verify"] .sq-gd-queue{opacity:1}
.sq-gd-demask{display:flex;align-items:center;gap:8px;padding:8px 7px;border:1px solid #405e7e9c;min-height:47px;color:#a9c4df;background:#071a2b;transition:border-color .2s,background .2s}
.sq-gd-demask-icon{font-size:19px;line-height:1;color:#9dbcf0}
.sq-gd-demask b,.sq-gd-demask small{display:block;font-size:calc(10px * var(--gd-fontscale));line-height:1.35}
.sq-gd-demask small{font-size:calc(9px * var(--gd-fontscale));color:#8faac5;max-width:28ch}
.sq-gd[data-phase="demask"] .sq-gd-demask,.sq-gd[data-phase="audit"] .sq-gd-demask,.sq-gd[data-phase="done"] .sq-gd-demask{border-color:#6befb5;background:#0e3b38;color:#d9ffeb}
.sq-gd[data-phase="done"] .sq-gd-return{color:#93f7c6}
.sq-gd-report-row.sq-gd-reply-row{border-color:#48a8a65c}
.sq-gd-compact .sq-gd-card strong{font-size:calc(min(var(--gd-size-title,16px),15px) * var(--gd-fontscale))}
.sq-gd-compact .sq-gd-card small{font-size:calc(min(var(--gd-size-body,10px),9px) * var(--gd-fontscale))}
.sq-gd-compact .sq-gd-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.sq-gd-compact .sq-gd-demask{grid-column:1/-1;min-height:37px;padding:5px 6px}
.sq-gd-compact .sq-gd-demask small{max-width:none}
@media(max-width:950px){.sq-gd-steps .sq-gd-demask{grid-column:1/-1;min-height:40px}}
@media(max-width:600px){.sq-gd .sq-gd-card{transform:none!important;min-height:100px!important}.sq-gd .sq-gd-heading span{font-size:8px}.sq-gd .sq-gd-queue{display:none}.sq-gd .sq-gd-packets{z-index:5}.sq-gd .sq-gd-steps .sq-gd-demask{grid-column:1/-1}.sq-gd .sq-gd-card strong{font-size:clamp(12px,4vw,18px)}.sq-gd .sq-gd-card small{font-size:clamp(9px,3vw,12px)}}
@media(prefers-reduced-motion:reduce){.sq-gd-queue,.sq-gd-demask{transition:none}.sq-gd-packet{will-change:auto}}
/* Percent sizing above 100% must not be clamped back to 100%. */
.sq-gd-source{width:var(--gd-width-source,100%)}
.sq-gd-core{width:var(--gd-width-core,100%)}
.sq-gd-target{width:var(--gd-width-target,100%)}

/* Gateway V5 - one moving packet, permanent illustrated request quote. */
.sq-gd .sq-gd-packet-two{display:none!important}
.sq-gd-quote{position:absolute;z-index:6;left:50%;bottom:11px;transform:translateX(-50%);width:min(90%,560px);padding:7px 12px;background:#071426ef;border:1px solid #659bc75f;border-radius:4px;text-align:center;pointer-events:none;box-shadow:0 8px 28px #0008}
.sq-gd-quote-status{display:block;color:#82baf5;font:700 8px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.07em}
.sq-gd-quote-text{display:block;margin-top:3px;color:#f2f7ff;font:500 clamp(9px,1vw,12px)/1.45 var(--gd-font,Arial,sans-serif);overflow-wrap:anywhere}
.sq-gd-quote[data-status="masked"],.sq-gd-quote[data-status="answer"]{border-color:#55d8c58c;background:#052c33ef}
.sq-gd-quote[data-status="restored"]{border-color:#7eebb28c;background:#0b3029ef}
.sq-gd-quote[data-status="restored"] .sq-gd-quote-status{color:#9bffd5}
.sq-gd-queue{min-width:55px;justify-content:center;padding:5px;min-height:20px}
.sq-gd-queue small{position:static!important;font:8px/1.2 monospace;color:#ffc4d0}
.sq-gd-compact .sq-gd-quote{width:94%;padding:5px 7px;bottom:7px}
.sq-gd-compact .sq-gd-quote-text{font-size:9px}
body.is-preview .sq-gd .sq-gd-card{pointer-events:auto;cursor:grab;touch-action:none;user-select:none}
body.is-preview .sq-gd .sq-gd-card.is-dragging{cursor:grabbing;outline:1px dashed #96d9ff;outline-offset:2px;z-index:9}
body.is-preview .sq-gd-quote{pointer-events:auto;cursor:pointer}
@media (min-width:1024px){body:not(.is-preview) .sq-gd [data-sq-visible-desktop="0"]{display:none!important}}
@media (min-width:600px) and (max-width:1023px){body:not(.is-preview) .sq-gd [data-sq-visible-tablet="0"]{display:none!important}}
@media (max-width:599px){
 body:not(.is-preview) .sq-gd [data-sq-visible-mobile="0"]{display:none!important}
 .sq-gd .sq-gd-graphic{height:auto!important;min-height:480px}
 .sq-gd .sq-gd-grid{min-height:475px}
 .sq-gd .sq-gd-quote{position:relative;left:auto;bottom:auto;transform:none;margin:-3px auto 12px;width:94%;padding:8px}
 .sq-gd .sq-gd-card{transform:translate3d(clamp(-18px,var(--gd-x-source,0px),18px),clamp(-28px,var(--gd-y-source,0px),28px),0)!important}
 .sq-gd .sq-gd-core{transform:translate3d(clamp(-18px,var(--gd-x-core,0px),18px),clamp(-28px,var(--gd-y-core,0px),28px),0)!important}
 .sq-gd .sq-gd-target{transform:translate3d(clamp(-18px,var(--gd-x-target,0px),18px),clamp(-28px,var(--gd-y-target,0px),28px),0)!important}
}
/* The preview device selector must reflect real per-device visibility even in a narrow desktop editor. */
body.is-preview[data-editor-device="desktop"] .sq-gd [data-sq-visible-desktop="0"],
body.is-preview[data-editor-device="tablet"] .sq-gd [data-sq-visible-tablet="0"],
body.is-preview[data-editor-device="mobile"] .sq-gd [data-sq-visible-mobile="0"]{display:none!important}


/* Single demo CTA in header, aligned to the right of its editable title and subtitle. */
.sq-gd .sq-gd-top{min-height:58px;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:7px 12px}
.sq-gd .sq-gd-heading{flex:1 1 auto;min-width:0}
.sq-gd .sq-gd-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 auto}
.sq-gd .sq-gd-top .sq-gd-send{font:700 11px/1.15 var(--gd-font,Arial,sans-serif);padding:8px 12px;min-height:34px;white-space:nowrap}
@media(max-width:580px){.sq-gd .sq-gd-top{flex-wrap:wrap;gap:7px}.sq-gd .sq-gd-top-actions{margin-left:auto}.sq-gd .sq-gd-top .sq-gd-send{min-height:38px}}

/* Variant 3 — SOVAIQ simulation cockpit. Isolated from all legacy section/card rules. */
.sq-gd-cockpit-mode .sq-gd-body{display:block;padding:10px 12px 5px}
.sq-gd-cockpit-mode .sq-gd-graphic{width:100%;height:var(--gd-height,380px)}
.sq-gd-cockpit{position:relative;margin:5px 12px 12px;padding:12px;border:1px solid #476c91a0;background:linear-gradient(115deg,#07182bcc,#07152aee);min-width:0}
.sq-gd-cockpit-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a4c5e8;font:10px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.035em;margin-bottom:12px}
.sq-gd-cockpit-tag{color:#8be9dd;font-weight:700;letter-spacing:.08em}
.sq-gd-cockpit-mode .sq-gd-steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;min-width:0;overflow:visible}
.sq-gd-cockpit-mode .sq-gd-step{position:relative;min-width:0;min-height:62px;border:1px solid #456987;background:#10273e;color:#c0d1e5;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;padding:10px 9px;text-align:left;opacity:.73;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,opacity .2s ease}
.sq-gd-cockpit-mode .sq-gd-step b{font:10px/1 ui-monospace,Consolas,monospace;color:#8bbbec}
.sq-gd-cockpit-mode .sq-gd-step span{font:600 calc(12px * var(--gd-fontscale,1))/1.25 var(--gd-font,Arial,sans-serif);color:#d9e7f7}
.sq-gd-cockpit-mode .sq-gd-step i{position:absolute;top:10px;right:9px;border:1px solid #57738e;width:8px;height:8px;border-radius:50%;opacity:.6}
.sq-gd-cockpit-mode .sq-gd-step.is-active{background:#06574c;border-color:#72f7cb;box-shadow:inset 0 0 21px #3feca31a,0 0 0 1px #64eebd66,0 0 20px #00df9166;opacity:1}
.sq-gd-cockpit-mode .sq-gd-step.is-active span,.sq-gd-cockpit-mode .sq-gd-step.is-active b{color:#eafff6}
.sq-gd-cockpit-mode .sq-gd-step.is-active i{border-color:#92ffd9;background:#42edbb;box-shadow:0 0 12px #45eab4}
.sq-gd-cockpit-mode .sq-gd-step.is-complete{border-color:#3e9f91;background:#0c302f;opacity:.84}
.sq-gd-cockpit-mode .sq-gd-step.is-complete i{background:#61dbb5;border-color:#61dbb5;opacity:1}
.sq-gd-message-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.sq-gd-message{min-width:0;border:1px solid #436b93;padding:12px 12px 10px;background:linear-gradient(130deg,#102740,#06182c);color:#d9eaf9}
.sq-gd-message-name{display:flex;align-items:center;gap:8px;font-size:12px;color:#e7f3ff}
.sq-gd-message-name span{font-size:19px;color:#7dc9ff}
.sq-gd-message>small{display:block;color:#99b6d1;margin-top:3px;font-size:10px}
.sq-gd-message p{background:#0c1e34;padding:10px;margin:12px 0 0;min-height:67px;line-height:1.45;font-size:calc(11px * var(--gd-fontscale,1));overflow-wrap:anywhere;white-space:normal;border-left:2px solid #7799c0}
.sq-gd-message-original p{background:#311e3588;border-left-color:#ee88b0;color:#ffe4ef}
.sq-gd-message-masked p{background:#063a3f88;border-left-color:#53d9b8;color:#b0fff0}
.sq-gd-message-restored p{background:#06403d88;border-left-color:#72e9c6;color:#cefff2}
.sq-gd-cockpit-mode .sq-gd-cockpit-data{display:none!important}
.sq-gd-cockpit-mode .sq-gd-report{display:none!important}
.sq-gd-compact .sq-gd-cockpit{padding:8px;margin:5px 8px 9px}
.sq-gd-compact .sq-gd-cockpit-heading{margin-bottom:6px;font-size:8px}
.sq-gd-compact .sq-gd-steps{grid-template-columns:repeat(7,minmax(58px,1fr));gap:3px}
.sq-gd-compact .sq-gd-step{min-height:39px;padding:5px 4px;gap:3px;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between}
.sq-gd-compact .sq-gd-step span{font-size:9px;line-height:1.1}
.sq-gd-compact .sq-gd-step i{display:none}
.sq-gd-compact .sq-gd-step b{font-size:8px}
.sq-gd-compact .sq-gd-message-grid{gap:4px;margin-top:7px}
.sq-gd-compact .sq-gd-message{padding:6px 5px}
.sq-gd-compact .sq-gd-message-name{font-size:9px;gap:3px}
.sq-gd-compact .sq-gd-message-name span{font-size:12px}
.sq-gd-compact .sq-gd-message>small{font-size:8px}
.sq-gd-compact .sq-gd-message p{padding:6px 4px;font-size:8px;min-height:48px;margin-top:5px;line-height:1.3;max-height:60px;overflow:hidden}
@media(max-width:1050px){.sq-gd-cockpit-mode .sq-gd-steps{grid-template-columns:repeat(7,minmax(78px,1fr));overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}}
@media(max-width:700px){.sq-gd-cockpit-mode .sq-gd-steps{grid-template-columns:repeat(7,minmax(84px,1fr));gap:4px}.sq-gd-cockpit-mode .sq-gd-graphic{min-height:510px}.sq-gd-message-grid{grid-template-columns:1fr;gap:6px}.sq-gd-message{padding:8px}.sq-gd-message p{min-height:0;font-size:10px;margin-top:6px}.sq-gd-cockpit-current{display:block}.sq-gd-cockpit-current b{display:block;margin-bottom:4px}.sq-gd-compact .sq-gd-message-grid{grid-template-columns:1fr}.sq-gd-compact .sq-gd-message p{max-height:none;min-height:0}}
@media(prefers-reduced-motion:reduce){.sq-gd-cockpit-mode .sq-gd-step{transition:none;box-shadow:none!important}.sq-gd-cockpit-mode .sq-gd-step.is-active{outline:2px solid #8effdc}}

.sq-gd-step{cursor:pointer}
.sq-gd-step[aria-pressed="true"]{outline:1px solid #80eed9;outline-offset:-1px}

/* 2026-11-05 cockpit readability & full visibility. Individual controls remain
   isolated to the SOVAIQ demo, no page-wide typography changes. */
.sq-gd.sq-gd-cockpit-mode{
  container-type:inline-size;
  width:min(100%,var(--gd-panel-width,100%));max-width:100%;margin-inline:auto;
  /* Allow full panel height; the old contained paint area clipped editor previews. */
  contain:layout;overflow:visible;
}
.sq-gd-cockpit-mode .sq-gd-cockpit{min-width:0;width:auto;overflow:visible}
.sq-gd-cockpit-mode .sq-gd-steps{
  grid-template-columns:repeat(7,minmax(0,1fr));
  overflow:visible;gap:clamp(4px,.6cqw,9px);
}
.sq-gd-cockpit-mode .sq-gd-step,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-step{
  align-items:center;justify-content:center;text-align:center;gap:6px;
  min-width:0;min-height:var(--gd-cockpit-step-height,66px);padding:9px 4px;
}
.sq-gd-cockpit-mode .sq-gd-step b,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-step b{font:700 10px/1.2 ui-monospace,Consolas,monospace}
.sq-gd-cockpit-mode .sq-gd-step span,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-step span{
  font-family:var(--gd-font,Arial,sans-serif);font-weight:650;
  font-size:calc(var(--gd-size-step,11px) * var(--gd-fontscale,1));
  line-height:1.2;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none;
  white-space:normal;width:100%;
}
.sq-gd-cockpit-mode .sq-gd-step i{display:none}
.sq-gd-cockpit-mode .sq-gd-message-grid,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,.9cqw,12px);margin-top:12px}
.sq-gd-cockpit-mode .sq-gd-message,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message{padding:clamp(8px,1cqw,14px);overflow:visible}
.sq-gd-cockpit-mode .sq-gd-message-name,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-name{font-size:var(--gd-message-title-size,13px);gap:5px;flex-wrap:wrap}
.sq-gd-cockpit-mode .sq-gd-message-name b{font-size:inherit;font-weight:700;overflow-wrap:anywhere}
.sq-gd-cockpit-mode .sq-gd-message>small,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message>small{font-size:calc(var(--gd-message-title-size,13px) * .85)}
.sq-gd-cockpit-mode .sq-gd-message p,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message p{
  font-size:var(--gd-message-body-size,12px);line-height:1.46;padding:10px 8px;
  min-height:76px;max-height:none;overflow-wrap:anywhere;overflow:visible;
}
/* Always six cockpit steps in ONE horizontal row, also in a narrow editor.
   The labels may wrap within their box, but the boxes never move to row two. */
.sq-gd-cockpit-mode .sq-gd-steps,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-steps{
 display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
 gap:clamp(2px,.55cqw,7px);overflow:visible;min-width:0;
}
.sq-gd-cockpit-mode .sq-gd-step,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-step{
 min-width:0;width:100%;height:100%;min-height:var(--gd-cockpit-step-height,66px);
 padding:clamp(4px,.7cqw,9px) clamp(2px,.35cqw,6px);
 align-items:center;justify-content:center;text-align:center;gap:5px;
}
.sq-gd-cockpit-mode .sq-gd-step span,
.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-step span{
 font-family:var(--gd-font,Arial,sans-serif);
 font-size:clamp(9px,1.5cqw,calc(var(--gd-size-step,10px) * var(--gd-fontscale,1)));
 font-weight:650;line-height:1.2;overflow-wrap:anywhere;hyphens:auto;
 text-align:center;
}
@container (max-width:490px){
 .sq-gd-cockpit-mode .sq-gd-message-grid,
 .sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid{grid-template-columns:1fr;gap:7px}
 .sq-gd-cockpit-mode .sq-gd-message p{min-height:0}
}
@media(max-width:700px){
 .sq-gd-cockpit-mode .sq-gd-message p{font-size:var(--gd-message-body-size,12px)}
}
body.is-preview .sq-gd-cockpit{cursor:pointer}
body.is-preview .sq-gd-cockpit:hover{outline:1px dashed #69dcd7;outline-offset:2px}

/* Single source of truth for the six process labels and the three result cards.
   The former container clamp pinned labels to 9px in narrow panels, making
   the inspector slider look ineffective despite the stored 13px value. */
.sq-gd.sq-gd-cockpit-mode .sq-gd-steps .sq-gd-step > span{
 font-size:calc(var(--gd-size-step,10px) * var(--gd-fontscale,1));
 font-family:var(--gd-font,Arial,sans-serif);
 line-height:1.2;font-weight:650;text-align:center;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message .sq-gd-message-name,
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message .sq-gd-message-name b{
 font-size:calc(var(--gd-message-title-size,13px) * var(--gd-fontscale,1));
 font-family:var(--gd-font,Arial,sans-serif);line-height:1.3;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message > small{
 font-size:calc(var(--gd-message-title-size,13px) * var(--gd-fontscale,1) * .85);
 font-family:var(--gd-font,Arial,sans-serif);line-height:1.4;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message > p{
 font-size:calc(var(--gd-message-body-size,12px) * var(--gd-fontscale,1));
 font-family:var(--gd-font,Arial,sans-serif);font-weight:400;line-height:1.45;
}

/* Verified live sliders: exact heading/body sizes are controlled from the demo
   element, with no viewport clamp or competing compact-mode font rule. */
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message .sq-gd-message-name,
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message .sq-gd-message-name b,
.sq-gd.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid .sq-gd-message .sq-gd-message-name,
.sq-gd.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid .sq-gd-message .sq-gd-message-name b{
  font-size:var(--gd-message-title-size,13px)!important;
  line-height:1.3!important;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message > small,
.sq-gd.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid .sq-gd-message > small{
  font-size:var(--gd-message-title-size,13px)!important;
  line-height:1.35!important;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message > p,
.sq-gd.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid .sq-gd-message > p{
  font-size:var(--gd-message-body-size,12px)!important;
}

/* Exact inspector pixel values, independent of font scale. */
.sq-gd.sq-gd-cockpit-mode .sq-gd-steps .sq-gd-step span,
.sq-gd.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-steps .sq-gd-step span{
 font-size:var(--gd-size-step,11px)!important;
}


/* Unified three-column simulation messages. Captions, header rows and
   tinted message surfaces share the same layout track across all cards. */
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid{
 align-items:stretch;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid > .sq-gd-message{
 display:grid!important;
 grid-template-rows:minmax(25px,auto) minmax(47px,auto) minmax(72px,1fr);
 align-content:stretch;
 gap:0;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid .sq-gd-message-name{
 align-self:start;align-items:center;min-height:25px;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid > .sq-gd-message > small{
 display:block;align-self:start;margin:10px 0 10px!important;
 font-size:var(--gd-message-title-size,13px)!important;
 line-height:1.4!important;white-space:normal;hyphens:none;overflow-wrap:anywhere;
}
.sq-gd.sq-gd-cockpit-mode .sq-gd-message-grid > .sq-gd-message > p{
 margin:0!important;align-self:stretch;min-height:72px!important;
 font-size:var(--gd-message-body-size,12px)!important;line-height:1.45!important;
}
/* True geometric zoom for the entire gateway animation, not a text-only
   font multiplier. It enlarges panels, canvas, text, glyphs and controls
   together and participates in document layout. Legacy 100% is unchanged. */
.sq-gd.sq-gd-cockpit-mode{
 zoom:var(--gd-zoom,1);
 width:calc(var(--gd-panel-width,100%) * var(--gd-zoom,1));
 max-width:none;
}
body .site-section.section-hero .sq-gd.sq-gd-cockpit-mode{
 max-height:none!important;overflow:visible!important;
}

/* When scaling above 114%, the hero visual takes its own full-width row.
   This prevents the enlarged UI from being clipped at the right screen edge
   or overlapping the heading. At 100%, original two-column layout remains. */
body .site-section.section-hero.sq-hero-demo-expanded .hero-inner{
 grid-template-columns:minmax(0,1fr)!important;
 align-items:start!important;
}
body .site-section.section-hero.sq-hero-demo-expanded .hero-inner > .sq-gd.sq-gd-cockpit-mode{
 width:100%!important;
 max-width:none!important;
 justify-self:center!important;
 margin:25px auto 0!important;
}
/* Previously the public 900px-height desktop breakpoint hid the three message
   cards entirely, while the admin preview kept them. Keep both in parity. */
body .section-hero .sq-gd.sq-gd-cockpit-mode.sq-gd-compact .sq-gd-message-grid{
 display:grid!important;
}