/* quotasq 5.21.2 — homepage hero: the governed loop (approved October 20, 2026 on the "quotasq hero mockup" design canvas).
   Brand: Risk Charcoal field, Interactive Charcoal cards, cool greys, SQ Green only on "sq", Third-Bar Lime on one word,
   dark-surface mark as a 6% watermark. The stage is drawn at 560 × 464 and scales with its width (cqw). */
.governed-loop{
  --gl-field:#2D3035;--gl-card:#30343A;--gl-card-on:#3A3F46;--gl-line:#4A5058;--gl-line-on:#8A929A;--gl-chip-line:#5A616A;
  --gl-text:#FFFFFF;--gl-soft:#C9CED3;--gl-muted:#B9C0C7;--gl-sq:#659016;--gl-lime:#A6DF21;
  --gl-orb:#A9BBA2; /* approved orb colour; brand-grey alternative: #9AA2AA */
  container:gl/inline-size;
  position:relative;box-sizing:border-box;width:min(640px,100%);margin-inline:auto;
  display:flex;flex-direction:column;gap:20px;padding:32px 40px;
  background:var(--gl-field);color:var(--gl-text);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(37,40,44,.45);
  font-family:inherit;text-align:left;
}
.governed-loop *,.governed-loop *::before,.governed-loop *::after{box-sizing:border-box}
.governed-loop b{font-weight:inherit;color:var(--gl-sq)}
.gl-watermark{position:absolute;right:24px;bottom:24px;width:320px;height:320px;opacity:.06;pointer-events:none;z-index:0}
.gl-head,.gl-stage,.gl-foot{position:relative;z-index:1}
.gl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.gl-logo{width:112px;height:36px;display:block}
.gl-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gl-muted)}
.gl-eyebrow b{font-size:13px;letter-spacing:0;text-transform:none}

/* stage — 560 × 464 design units; 1 unit = 100cqw / 560 */
.gl-stage{container:glstage/inline-size;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:560/464}
.gl-ring{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.gl-ring-outer{fill:none;stroke:var(--gl-line);stroke-width:1}
.gl-ring-dots{fill:none;stroke:#6B737C;stroke-width:1.5;stroke-dasharray:2 9}
.gl-ring-inner{fill:none;stroke:#3C4148;stroke-width:1}
.gl-node{display:none;fill:#6B737C;transition:fill .3s ease}
.gl-node.is-active{fill:#DDE1E5}
.gl-orb{fill:var(--gl-orb)}
.gl-orb-halo{fill:var(--gl-orb);opacity:.18}

.gl-center{position:absolute;left:30.357%;top:31.681%;width:39.286%;height:36.638%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.429cqw;
  transition:opacity .18s ease}
.gl-center.is-swapping{opacity:0}
.gl-step{font-size:1.964cqw;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gl-muted)}
.gl-product{font-size:2.857cqw;font-weight:600;letter-spacing:-.01em}
.gl-headline{font-size:3.929cqw;font-weight:500;letter-spacing:-.025em;line-height:1.12}
.gl-body{font-size:2.143cqw;line-height:1.45;color:var(--gl-muted);max-width:35.714cqw}

.gl-cards{list-style:none;margin:0;padding:0}
.gl-card{position:absolute;width:28.571%;margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:1.071cqw;
  height:calc(7.857cqw + 2px);padding:0 2.143cqw;
  background:var(--gl-card);border:1px solid var(--gl-line);border-radius:1.786cqw;
  transition:background .3s ease,border-color .3s ease}
.gl-card.is-active{background:var(--gl-card-on);border-color:var(--gl-line-on)}
.gl-c1{left:4.286%;bottom:70.69%}
.gl-c2{left:67.143%;bottom:70.69%}
.gl-c3{left:67.143%;top:70.69%}
.gl-c4{left:4.286%;top:70.69%}
.gl-name{font-size:2.679cqw;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.gl-icon{width:2.5cqw;height:2.5cqw;flex:none;fill:none;stroke:#DDE1E5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.gl-foot{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--gl-line);padding-top:20px}
.gl-tagline{margin:0;font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--gl-text)}
.gl-tagline span{color:var(--gl-lime)}
.gl-deploy{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gl-deploy-label{font-size:12px;color:var(--gl-muted);margin-right:4px}
.gl-chip{font-size:12px;padding:5px 10px;border:1px solid var(--gl-chip-line);border-radius:4px;color:#E6E9EC}

/* phones and narrow columns: ring with markers, the story under it, the four platforms as a grid */
@media (max-width:560px){.governed-loop{padding:24px 20px;border-radius:16px}}
@container gl (max-width:519px){
  .gl-watermark{width:200px;height:200px;right:16px;bottom:16px}
  .gl-stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px}
  .gl-ring{position:static;height:auto;aspect-ratio:560/464;max-width:340px;margin-inline:auto}
  .gl-node{display:inline}
  .gl-center{position:static;width:100%;height:auto;gap:8px;padding-inline:4px}
  .gl-step{font-size:11px}.gl-product{font-size:16px}.gl-headline{font-size:22px}.gl-body{font-size:13px;max-width:320px}
  .gl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gl-card{position:static;width:auto;height:44px;padding:0 12px;border-radius:10px;gap:8px}
  .gl-name{font-size:15px}.gl-icon{width:16px;height:16px}
  .gl-c3{order:4}.gl-c4{order:3} /* clockwise in the grid: before → decision / after ← signature */
  .gl-tagline{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.gl-center,.gl-card,.gl-node{transition:none}}