/* ==========================================================================
   Stratgik — Visual & Motion Layer (sg-ui.css)
   Loads AFTER sg.css. Adds the vocabulary the V2 system was missing:
   banners, figures, charts, stat tiles, flows, matrices, marquees and motion.
   Every selector is prefixed .sgu- so nothing here can collide with sg.css.
   ========================================================================== */

/* ---------- 0. TOKENS (layer-local) ---------- */
.sg{
  --sgu-mesh-a:rgba(221,73,66,.30);
  --sgu-mesh-b:rgba(23,89,108,.55);
  --sgu-mesh-c:rgba(14,143,111,.18);
  --sgu-grid:rgba(255,255,255,.055);
  --sgu-dur:.62s;
}

/* ==========================================================================
   1. MOTION PRIMITIVES
   ========================================================================== */
.sg .sgu-r{
  opacity:0;
  transform:translate3d(0,var(--sgu-y,22px),0) scale(var(--sgu-s,1));
  transition:
    opacity var(--sgu-dur) var(--sg-ease-out) calc(var(--i,0) * 70ms),
    transform var(--sgu-dur) var(--sg-ease-out) calc(var(--i,0) * 70ms);
  will-change:opacity,transform;
}
.sg .sgu-r.sgu-in{opacity:1;transform:none}
.sg .sgu-r--left{--sgu-y:0;transform:translate3d(-26px,0,0)}
.sg .sgu-r--right{--sgu-y:0;transform:translate3d(26px,0,0)}
.sg .sgu-r--zoom{--sgu-y:14px;--sgu-s:.965}
.sg .sgu-r--fade{--sgu-y:0}

.sg .sgu-mask{position:relative;overflow:hidden}
.sg .sgu-mask::after{
  content:"";position:absolute;inset:0;background:var(--sgu-mask-bg,var(--sg-surface));
  transform:translateX(0);transition:transform .82s var(--sg-ease-out) calc(var(--i,0) * 80ms);
}
.sg .sgu-mask.sgu-in::after{transform:translateX(101%)}

.sg .sgu-draw [data-draw]{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.35s var(--sg-ease-out) calc(var(--i,0) * 110ms);
}
.sg .sgu-draw.sgu-in [data-draw]{stroke-dashoffset:0}

@keyframes sgu-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes sgu-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-22px,0) scale(1.06)}}
@keyframes sgu-pulse{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes sgu-scan{0%{transform:translateY(-100%)}100%{transform:translateY(400%)}}
@keyframes sgu-spin{to{transform:rotate(360deg)}}
@keyframes sgu-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sgu-dash{to{stroke-dashoffset:-1000}}

/* ==========================================================================
   2. BANNERS & AMBIENT ART
   ========================================================================== */
.sg .sgu-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sg .sgu-mesh__grid{
  position:absolute;inset:-10%;
  background-image:linear-gradient(var(--sgu-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--sgu-grid) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(120% 90% at 72% 18%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 72% 18%,#000 0%,transparent 72%);
}
.sg .sgu-mesh__orb{
  position:absolute;border-radius:50%;filter:blur(64px);opacity:.7;
  animation:sgu-drift 17s ease-in-out infinite;
}
.sg .sgu-mesh__orb--a{width:520px;height:520px;right:-90px;top:-160px;background:var(--sgu-mesh-a)}
.sg .sgu-mesh__orb--b{width:460px;height:460px;left:-140px;bottom:-200px;background:var(--sgu-mesh-b);animation-delay:-6s}
.sg .sgu-mesh__orb--c{width:300px;height:300px;right:28%;bottom:-140px;background:var(--sgu-mesh-c);animation-delay:-11s}

.sg .sgu-heroart{
  position:absolute;right:0;top:0;bottom:0;width:44%;z-index:1;pointer-events:none;
  display:grid;place-items:center;overflow:hidden;opacity:.9;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
}
.sg .sgu-heroart svg{width:min(520px,86%);height:auto;overflow:visible}
.sg .sgu-heroart .ha-ring{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.sg .sgu-heroart .ha-ring--spin{transform-origin:center;animation:sgu-spin 46s linear infinite}
.sg .sgu-heroart .ha-ring--spin-r{transform-origin:center;animation:sgu-spin 68s linear infinite reverse}
.sg .sgu-heroart .ha-arc{fill:none;stroke:rgba(221,73,66,.62);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:8 14;animation:sgu-dash 22s linear infinite}
.sg .sgu-heroart .ha-node{fill:rgba(255,255,255,.9)}
.sg .sgu-heroart .ha-node--accent{fill:#DD4942}
.sg .sgu-heroart .ha-halo{fill:rgba(255,255,255,.06);animation:sgu-pulse 5s ease-in-out infinite}
.sg .sgu-heroart .ha-float{animation:sgu-float 9s ease-in-out infinite}
@media(max-width:1100px){.sg .sgu-heroart{display:none}}

.sg .sgu-banner{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--sg-ink) 0%,var(--sg-ink-deep) 62%,#0C2F3C 100%);
  color:var(--sg-text-inv-2);
  padding-block:var(--sg-11);
}
.sg .sgu-banner>*{position:relative;z-index:2}
.sg .sgu-banner :where(h2,h3){color:#fff}
.sg .sgu-banner__scan{
  position:absolute;left:0;right:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.045),transparent);
  animation:sgu-scan 9s linear infinite;
}
.sg .sgu-banner--accent{background:linear-gradient(135deg,#8F2620 0%,#0A3949 68%)}
.sg .sgu-rule{height:2px;border:0;background:linear-gradient(90deg,transparent,var(--sg-accent),transparent);opacity:.5;margin:0}

/* ==========================================================================
   3. FIGURES — light-surface diagram frame
   ========================================================================== */
.sg .sgu-fig{
  border:1px solid var(--sg-border);border-radius:var(--sg-r-lg);
  background:linear-gradient(168deg,#fff 0%,var(--sg-surface-2) 100%);
  box-shadow:var(--sg-sh-2);overflow:hidden;
}
.sg .sgu-fig__head{
  padding:var(--sg-5) var(--sg-6);border-bottom:1px solid var(--sg-border);
  display:flex;align-items:baseline;gap:var(--sg-4);flex-wrap:wrap;
  background:rgba(255,255,255,.6);
}
.sg .sgu-fig__t{font-family:var(--sg-font-display);font-weight:640;font-size:1rem;color:var(--sg-ink);margin:0;letter-spacing:-.015em}
.sg .sgu-fig__s{font-size:var(--sg-fs-xs);color:var(--sg-text-3);margin:0}
.sg .sgu-fig__body{padding:var(--sg-7)}
.sg .sgu-fig__note{
  padding:var(--sg-4) var(--sg-6);border-top:1px solid var(--sg-border);
  font-size:var(--sg-fs-xs);color:var(--sg-text-3);background:rgba(255,255,255,.5);
}
.sg .sgu-fig--dark{
  background:linear-gradient(168deg,var(--sg-ink) 0%,var(--sg-ink-deep) 100%);
  border-color:rgba(255,255,255,.12);
}
.sg .sgu-fig--dark .sgu-fig__head,.sg .sgu-fig--dark .sgu-fig__note{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);
}
.sg .sgu-fig--dark .sgu-fig__t{color:#fff}
.sg .sgu-fig--dark .sgu-fig__s,.sg .sgu-fig--dark .sgu-fig__note{color:#B9D0D9}
.sg .sgu-fig svg{display:block;width:100%;height:auto}
.sg .sgu-fig text{font-family:var(--sg-font)}

/* ==========================================================================
   4. DATA DISPLAY
   ========================================================================== */
.sg .sgu-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sg-5)}
.sg .sgu-stat{
  padding:var(--sg-6);border:1px solid var(--sg-border);border-radius:var(--sg-r);
  background:var(--sg-surface);position:relative;overflow:hidden;
}
.sg .sgu-stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sg-accent);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--sg-ease-out) calc(var(--i,0)*90ms);
}
.sg .sgu-stat.sgu-in::before,.sg .sgu-in .sgu-stat::before{transform:scaleY(1)}
.sg .sgu-stat__n{
  font-family:var(--sg-font-display);font-size:clamp(1.9rem,1.3rem + 1.9vw,2.7rem);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--sg-ink);
  font-variant-numeric:tabular-nums;
}
.sg .sgu-stat__l{font-size:var(--sg-fs-xs);color:var(--sg-text-3);margin-top:var(--sg-3);line-height:1.45}
.sg .sgu-banner .sgu-stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sg .sgu-banner .sgu-stat__n{color:#fff}
.sg .sgu-banner .sgu-stat__l{color:#B9D0D9}

.sg .sgu-bars{display:flex;flex-direction:column;gap:var(--sg-5)}
.sg .sgu-bar__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sg-4);margin-bottom:7px}
.sg .sgu-bar__k{font-size:var(--sg-fs-sm);font-weight:600;color:var(--sg-text)}
.sg .sgu-bar__v{font-size:var(--sg-fs-xs);color:var(--sg-text-3);font-variant-numeric:tabular-nums}
.sg .sgu-bar__track{height:11px;border-radius:var(--sg-r-pill);background:var(--sg-surface-3);overflow:hidden}
.sg .sgu-bar__fill{
  height:100%;border-radius:inherit;width:0;
  background:linear-gradient(90deg,var(--sg-ink-3),var(--sg-ink));
  transition:width 1.05s var(--sg-ease-out) calc(var(--i,0) * 110ms);
}
.sg .sgu-in .sgu-bar__fill,.sg .sgu-bar.sgu-in .sgu-bar__fill{width:var(--w,50%)}
.sg .sgu-bar--accent .sgu-bar__fill{background:linear-gradient(90deg,var(--sg-accent-bright),var(--sg-accent-700))}
.sg .sgu-bar--good .sgu-bar__fill{background:linear-gradient(90deg,#2FBF95,var(--sg-good))}
.sg .sgu-bar--warn .sgu-bar__fill{background:linear-gradient(90deg,#E0A22B,var(--sg-warn))}
.sg .sgu-banner .sgu-bar__track{background:rgba(255,255,255,.10)}
.sg .sgu-banner .sgu-bar__k{color:#fff}
.sg .sgu-banner .sgu-bar__v{color:#B9D0D9}

.sg .sgu-ring{display:grid;place-items:center;position:relative}
.sg .sgu-ring svg{transform:rotate(-90deg);width:100%;height:auto;max-width:190px}
.sg .sgu-ring__bg{fill:none;stroke:var(--sg-surface-3);stroke-width:12}
.sg .sgu-ring__fg{
  fill:none;stroke:var(--sg-accent);stroke-width:12;stroke-linecap:round;
  stroke-dasharray:var(--c,339);stroke-dashoffset:var(--c,339);
  transition:stroke-dashoffset 1.3s var(--sg-ease-out);
}
.sg .sgu-in .sgu-ring__fg{stroke-dashoffset:calc(var(--c,339) - (var(--c,339) * var(--p,.5)))}
.sg .sgu-ring__mid{position:absolute;text-align:center}
.sg .sgu-ring__mid b{display:block;font-family:var(--sg-font-display);font-size:1.7rem;letter-spacing:-.02em;color:var(--sg-ink)}
.sg .sgu-ring__mid span{font-size:var(--sg-fs-xs);color:var(--sg-text-3)}

.sg .sgu-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sg-6);align-items:stretch}
.sg .sgu-vs__pill{
  align-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--sg-ink);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.04em;
}
@media(max-width:760px){.sg .sgu-vs{grid-template-columns:1fr}.sg .sgu-vs__pill{justify-self:center}}

/* ==========================================================================
   5. FLOWS, STEPS & MATRICES
   ========================================================================== */
.sg .sgu-steps{position:relative;display:grid;gap:var(--sg-6);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sg .sgu-steps::before{
  content:"";position:absolute;left:34px;right:34px;top:23px;height:2px;
  background:linear-gradient(90deg,var(--sg-accent-line),var(--sg-border-strong));
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--sg-ease-out);
}
.sg .sgu-steps.sgu-in::before{transform:scaleX(1)}
@media(max-width:820px){.sg .sgu-steps::before{display:none}}
.sg .sgu-step{position:relative}
.sg .sgu-step__n{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--sg-surface);border:2px solid var(--sg-accent);color:var(--sg-accent);
  font-family:var(--sg-font-display);font-weight:700;font-size:.95rem;
  position:relative;z-index:2;margin-bottom:var(--sg-5);
  transition:background .3s var(--sg-ease),color .3s var(--sg-ease),transform .3s var(--sg-ease);
}
.sg .sgu-step:hover .sgu-step__n{background:var(--sg-accent);color:#fff;transform:scale(1.06)}
.sg .sgu-step__t{font-family:var(--sg-font-display);font-weight:640;font-size:1.06rem;color:var(--sg-ink);margin:0 0 var(--sg-3)}
.sg .sgu-step__d{font-size:var(--sg-fs-sm);color:var(--sg-text-2);margin:0}
.sg .sgu-banner .sgu-step__n{background:rgba(255,255,255,.08);border-color:rgba(221,73,66,.8);color:#FFB3AD}
.sg .sgu-banner .sgu-step__t{color:#fff}
.sg .sgu-banner .sgu-step__d{color:#B9D0D9}

.sg .sgu-matrix{display:grid;gap:var(--sg-5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sg .sgu-opt{
  position:relative;padding:var(--sg-6);border:1px solid var(--sg-border);
  border-radius:var(--sg-r);background:var(--sg-surface);overflow:hidden;
  transition:transform .32s var(--sg-ease),box-shadow .32s var(--sg-ease),border-color .32s var(--sg-ease);
}
.sg .sgu-opt:hover{transform:translateY(-4px);box-shadow:var(--sg-sh-3);border-color:var(--sg-accent-line)}
.sg .sgu-opt__tag{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--sg-fs-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--o,var(--sg-accent));margin-bottom:var(--sg-4);
}
.sg .sgu-opt__tag i{width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
.sg .sgu-opt__t{font-family:var(--sg-font-display);font-size:1.14rem;font-weight:650;color:var(--sg-ink);margin:0 0 var(--sg-3)}
.sg .sgu-opt__d{font-size:var(--sg-fs-sm);color:var(--sg-text-2);margin:0 0 var(--sg-4)}
.sg .sgu-opt__when{
  font-size:var(--sg-fs-xs);color:var(--sg-text-3);padding-top:var(--sg-4);
  border-top:1px dashed var(--sg-border);
}
.sg .sgu-opt__when b{color:var(--sg-ink);font-weight:640}
.sg .sgu-opt--buy{--o:#16657F}
.sg .sgu-opt--configure{--o:#2F7FA3}
.sg .sgu-opt--integrate{--o:#1E7F9B}
.sg .sgu-opt--automate{--o:#0E8F6F}
.sg .sgu-opt--build{--o:#C63A33}
.sg .sgu-opt--retire{--o:#B07203}
.sg .sgu-opt--buy::before,.sg .sgu-opt--configure::before,.sg .sgu-opt--integrate::before,
.sg .sgu-opt--automate::before,.sg .sgu-opt--build::before,.sg .sgu-opt--retire::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--o);
}

/* ==========================================================================
   6. MARQUEE / TICKER
   ========================================================================== */
.sg .sgu-marquee{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sg .sgu-marquee__track{display:flex;width:max-content;animation:sgu-ticker 42s linear infinite}
.sg .sgu-marquee:hover .sgu-marquee__track{animation-play-state:paused}
.sg .sgu-marquee__item{
  display:inline-flex;align-items:center;gap:10px;padding:0 var(--sg-7);
  font-size:var(--sg-fs-sm);color:var(--sg-text-2);white-space:nowrap;
}
.sg .sgu-marquee__item i{width:6px;height:6px;border-radius:50%;background:var(--sg-accent);flex:none}

/* ==========================================================================
   7. READING PROGRESS
   ========================================================================== */
.sg .sgu-progress{
  position:fixed;left:0;top:0;height:3px;z-index:80;pointer-events:none;
  background:linear-gradient(90deg,var(--sg-accent-bright),var(--sg-accent-700));
  width:0;transition:width .08s linear;
}

/* ==========================================================================
   8. SHARED FIXES (audit 12 Sep 2026)
   ========================================================================== */
/* S5 — uneven split columns were vertically centred, leaving large voids. */
.sg .sg-split{align-items:start}
.sg .sg-split--center{align-items:center}

/* S3 — .sg-dgm text{fill:…} beat every presentation attribute, so a diagram
   that stated its own colours rendered invisible. Only unstyled text inherits. */
.sg .sg-dgm text:not([fill]){fill:#EAF4F7}

/* S2 — single-column heroes reserved half the container for nothing.
   The art sits behind the text column and fades out before it reaches the
   copy, so the text keeps the container's normal left edge. */
.sg .sg-hero .sg-hero__inner{position:relative;z-index:2}
.sg .sg-hero.sgu-has-art .sg-hero__inner>*{max-width:min(100%,640px)}
.sg .sg-hero.sgu-has-art .sg-hero__inner>h1{max-width:min(100%,15ch)}

/* ==========================================================================
   9. UTILITIES
   ========================================================================== */
.sg .sgu-relative{position:relative}
.sg .sgu-center{text-align:center}
.sg .sgu-maxw-65{max-width:65ch}
.sg .sgu-grid-2{display:grid;gap:var(--sg-7);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sg .sgu-sticky{position:sticky;top:calc(var(--sg-header-h-stuck) + var(--sg-5))}

/* ==========================================================================
   10. REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .sg .sgu-r,.sg .sgu-mask::after,.sg .sgu-draw [data-draw],
  .sg .sgu-bar__fill,.sg .sgu-ring__fg,.sg .sgu-steps::before,.sg .sgu-stat::before{
    transition:none !important;
  }
  .sg .sgu-r{opacity:1;transform:none}
  .sg .sgu-mask::after{display:none}
  .sg .sgu-draw [data-draw]{stroke-dashoffset:0}
  .sg .sgu-bar__fill{width:var(--w,50%)}
  .sg .sgu-steps::before,.sg .sgu-stat::before{transform:none}
  .sg .sgu-mesh__orb,.sg .sgu-banner__scan,.sg .sgu-marquee__track,
  .sg .sgu-heroart .ha-ring--spin,.sg .sgu-heroart .ha-ring--spin-r,
  .sg .sgu-heroart .ha-arc,.sg .sgu-heroart .ha-float,.sg .sgu-heroart .ha-halo{
    animation:none !important;
  }
}
@media print{
  .sg .sgu-mesh,.sg .sgu-heroart,.sg .sgu-progress,.sg .sgu-marquee{display:none !important}
  .sg .sgu-r{opacity:1 !important;transform:none !important}
}

/* ==========================================================================
   11. SPEC LISTS, CHIPS, TIMELINE  (added with the TDF redesign)
   ========================================================================== */

/* Spec list — a definition list that reads as a datasheet, not as prose. */
.sg .sgu-spec{display:grid;gap:0;margin:0}
.sg .sgu-spec__row{
  display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:var(--sg-5);
  padding:var(--sg-4) 0;border-top:1px solid var(--sg-border);align-items:baseline;
}
.sg .sgu-spec__row:first-child{border-top:0;padding-top:0}
.sg .sgu-spec__k{
  font-size:var(--sg-fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sg-ink);margin:0;
}
.sg .sgu-spec__v{font-size:var(--sg-fs-sm);color:var(--sg-text-2);margin:0;line-height:1.55}
@media(max-width:560px){.sg .sgu-spec__row{grid-template-columns:1fr;gap:var(--sg-2)}}

/* Chip row */
.sg .sgu-chips{display:flex;flex-wrap:wrap;gap:var(--sg-2)}
.sg .sgu-chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--sg-r-pill);
  border:1px solid var(--sg-border);background:var(--sg-surface);
  font-size:var(--sg-fs-xs);font-weight:600;color:var(--sg-text-2);
}
.sg .sgu-chip i{width:7px;height:7px;border-radius:50%;background:var(--sg-accent);flex:none}
.sg .sgu-banner .sgu-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#D3E4EA}

/* Big step number used at the head of a stage card */
.sg .sgu-nbadge{
  display:inline-grid;place-items:center;width:58px;height:58px;border-radius:var(--sg-r);
  background:linear-gradient(150deg,var(--sg-ink),var(--sg-ink-deep));color:#fff;
  font-family:var(--sg-font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em;
  box-shadow:var(--sg-sh-2);flex:none;
}
.sg .sgu-nbadge--accent{background:linear-gradient(150deg,var(--sg-accent-bright),var(--sg-accent-700))}

/* Stage card: number + heading on one line, content below */
.sg .sgu-stage__head{display:flex;align-items:flex-start;gap:var(--sg-5)}
.sg .sgu-stage__q{
  font-family:var(--sg-font-display);font-weight:640;color:var(--sg-accent);
  font-size:1.02rem;margin:var(--sg-3) 0 0;letter-spacing:-.01em;
}

/* Before / after timeline */
.sg .sgu-tl{position:relative;padding-left:34px}
.sg .sgu-tl::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--sg-accent),var(--sg-border-strong));
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--sg-ease-out);
}
.sg .sgu-tl.sgu-in::before{transform:scaleY(1)}
.sg .sgu-tl__item{position:relative;padding-bottom:var(--sg-7)}
.sg .sgu-tl__item:last-child{padding-bottom:0}
.sg .sgu-tl__item::before{
  content:"";position:absolute;left:-28px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--sg-surface);border:2px solid var(--sg-accent);
}
.sg .sgu-tl__k{
  font-size:var(--sg-fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--sg-accent);margin:0 0 var(--sg-2);
}
.sg .sgu-tl__v{margin:0;color:var(--sg-text-2);font-size:var(--sg-fs-sm);line-height:1.6}
.sg .sgu-banner .sgu-tl__item::before{background:var(--sg-ink);border-color:#FF8F87}
.sg .sgu-banner .sgu-tl__k{color:#FFAFA8}
.sg .sgu-banner .sgu-tl__v{color:#C2D8E0}

/* Negative list — the things a method refuses to do */
.sg .sgu-nots{display:grid;gap:var(--sg-4);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.sg .sgu-not{
  display:flex;gap:var(--sg-4);align-items:flex-start;padding:var(--sg-5);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--sg-r);
  background:rgba(255,255,255,.035);
  transition:background .3s var(--sg-ease),border-color .3s var(--sg-ease);
}
.sg .sgu-not:hover{background:rgba(221,73,66,.10);border-color:rgba(221,73,66,.42)}
.sg .sgu-not__x{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(221,73,66,.20);border:1px solid rgba(221,73,66,.55);position:relative;margin-top:2px;
}
.sg .sgu-not__x::before,.sg .sgu-not__x::after{
  content:"";position:absolute;width:11px;height:2px;border-radius:1px;background:#FF9C95;
}
.sg .sgu-not__x::before{transform:rotate(45deg)}
.sg .sgu-not__x::after{transform:rotate(-45deg)}
.sg .sgu-not p{margin:0;font-size:var(--sg-fs-sm);color:#C2D8E0;line-height:1.58}
.sg .sgu-not p b{color:#fff;font-weight:640}

/* Callout — a bordered aside that carries the one sentence that matters */
.sg .sgu-callout{
  border-left:3px solid var(--sg-accent);padding:var(--sg-5) var(--sg-6);
  background:var(--sg-accent-soft);border-radius:0 var(--sg-r-sm) var(--sg-r-sm) 0;
}
.sg .sgu-callout p{margin:0;color:var(--sg-text);font-size:var(--sg-fs-sm);line-height:1.6}

/* ==========================================================================
   12. STAGE LAYOUT + ANSWER BLOCK  (TDF pass 2)
   ========================================================================== */

/* A stage card: narrative on the left, evidence on the right. The narrative
   sticks while the longer evidence column scrolls, so neither side leaves a
   void — which is what the centred .sg-split used to produce. */
.sg .sgu-stage{
  display:grid;gap:var(--sg-9);align-items:start;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
}
.sg .sgu-stage__left{position:sticky;top:calc(var(--sg-header-h-stuck) + var(--sg-6))}
.sg .sgu-stage--wide{grid-template-columns:minmax(0,1fr);gap:var(--sg-8)}
.sg .sgu-stage--wide .sgu-stage__left{position:static}
.sg .sgu-stage--wide .sgu-stage__head{max-width:none}
@media(max-width:900px){
  .sg .sgu-stage{grid-template-columns:minmax(0,1fr);gap:var(--sg-7)}
  .sg .sgu-stage__left{position:static}
}

/* On the wide stages the narrative reads across, so cap its measure. */
.sg .sgu-stage--wide .sgu-stage__left>p,
.sg .sgu-stage--wide .sgu-stage__left>.sgu-callout{max-width:78ch}

/* Two-up evidence on the wide economics stage */
.sg .sgu-evidence{display:grid;gap:var(--sg-7);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media(max-width:900px){.sg .sgu-evidence{grid-template-columns:minmax(0,1fr)}}

/* The GEO answer block reserved a whole column for a two-word eyebrow. */
.sg .sg-answer{grid-template-columns:minmax(0,1fr) !important;gap:var(--sg-4) !important}
.sg .sg-answer__a{max-width:78ch}

/* ==========================================================================
   13. CONTRAST REPAIR — from the 12 Sep automated sweep of all 79 URLs
   ========================================================================== */

/* --- A. .sg-steps was written for .sg-process-band (a dark band) and its
   colours were hardcoded for that ground. The capability template renders it
   on a white section, so every step TITLE was white on white — contrast 1.00,
   completely invisible — on all 79 pages, and the body text sat at 1.94.
   Light is now the default; the dark treatment is scoped to dark grounds. --- */
.sg .sg-steps h3{color:var(--sg-text)}
.sg .sg-steps p{color:var(--sg-text-2)}
.sg .sg-steps__n{color:var(--sg-accent)}
.sg .sg-steps__i::before{background:var(--sg-border)}

.sg .sg-dark .sg-steps h3,
.sg .sg-process-band .sg-steps h3,
.sg .sgu-banner .sg-steps h3,
.sg .sg-hero .sg-steps h3,
.sg .sg-cta-band .sg-steps h3{color:#fff}

.sg .sg-dark .sg-steps p,
.sg .sg-process-band .sg-steps p,
.sg .sgu-banner .sg-steps p,
.sg .sg-hero .sg-steps p,
.sg .sg-cta-band .sg-steps p{color:#9FC0C7}

.sg .sg-dark .sg-steps__n,
.sg .sg-process-band .sg-steps__n,
.sg .sgu-banner .sg-steps__n,
.sg .sg-hero .sg-steps__n,
.sg .sg-cta-band .sg-steps__n{color:#FFB4AE}

.sg .sg-dark .sg-steps__i::before,
.sg .sg-process-band .sg-steps__i::before,
.sg .sgu-banner .sg-steps__i::before,
.sg .sg-hero .sg-steps__i::before,
.sg .sg-cta-band .sg-steps__i::before{background:rgba(255,255,255,.16)}

/* --- B. `.sg-footer a` (0,2,0) outranked `.sg-btn` (0,1,0), so the footer CTA
   rendered pale blue on coral — 3.85, under the 4.5 it needs. --- */
.sg .sg-footer a.sg-btn{color:var(--btn-fg)}
.sg .sg-footer a.sg-btn:hover{color:#fff}

/* --- C. Option tag colours were between 4.00 and 4.48 on white. --- */
.sg .sgu-opt--configure{--o:#1F6684}
.sg .sgu-opt--integrate{--o:#176478}
.sg .sgu-opt--automate{--o:#0B7458}
.sg .sgu-opt--retire{--o:#8A5A02}

/* --- D. Bar fill is a <span>; without display:block its width was inert and
   every chart rendered as an empty track. --- */
.sg .sgu-bar__fill{display:block}

/* --- E. Six options read as three columns, not a ragged four-then-two. --- */
@media(min-width:1000px){
  .sg .sgu-stage--wide .sgu-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:700px) and (max-width:999px){
  .sg .sgu-stage--wide .sgu-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sg .sgu-opt{display:flex;flex-direction:column}
.sg .sgu-opt__when{margin-top:auto}

/* ==========================================================================
   14. SCORECARD, STAGE RAIL, NOLIST GLYPH  (capability template)
   ========================================================================== */

/* .sg-nolist__x is an empty <span>; its CSS only styled a child <svg> that the
   markup never emits, so the cross never rendered. Draw it in CSS instead. */
.sg .sg-nolist__x{position:relative}
.sg .sg-nolist__x::before,.sg .sg-nolist__x::after{
  content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;border-radius:1px;
  background:#FF9C95;margin:-1px 0 0 -5.5px;
}
.sg .sg-nolist__x::before{transform:rotate(45deg)}
.sg .sg-nolist__x::after{transform:rotate(-45deg)}
.sg .sg-nolist__x svg{display:none}

/* --- Signals scorecard: tick what is true, watch the verdict change --- */
.sg .sgu-score{
  border:1px solid var(--sg-border);border-radius:var(--sg-r-lg);background:var(--sg-surface);
  box-shadow:var(--sg-sh-2);overflow:hidden;
}
.sg .sgu-score__list{display:grid;margin:0;padding:0;list-style:none}
.sg .sgu-score__item{margin:0;border-top:1px solid var(--sg-border)}
.sg .sgu-score__item:first-child{border-top:0}
.sg .sgu-score__lab{
  display:flex;gap:var(--sg-5);align-items:flex-start;padding:var(--sg-5) var(--sg-6);
  cursor:pointer;transition:background .22s var(--sg-ease);
}
.sg .sgu-score__lab:hover{background:var(--sg-surface-2)}
.sg .sgu-score__lab input{position:absolute;opacity:0;width:0;height:0}
.sg .sgu-score__box{
  flex:none;width:24px;height:24px;border-radius:7px;margin-top:2px;
  border:2px solid var(--sg-border-strong);background:var(--sg-surface);
  display:grid;place-items:center;position:relative;
  transition:background .2s var(--sg-ease),border-color .2s var(--sg-ease);
}
.sg .sgu-score__box::after{
  content:"";width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;margin-top:-2px;
  transition:opacity .18s var(--sg-ease),transform .18s var(--sg-ease-out);
}
.sg .sgu-score__lab input:checked ~ .sgu-score__box{background:var(--sg-accent);border-color:var(--sg-accent)}
.sg .sgu-score__lab input:checked ~ .sgu-score__box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.sg .sgu-score__lab input:focus-visible ~ .sgu-score__box{outline:2px solid var(--sg-accent);outline-offset:3px}
.sg .sgu-score__t{font-family:var(--sg-font-display);font-weight:640;color:var(--sg-ink);margin:0 0 4px;font-size:1.02rem}
.sg .sgu-score__d{font-size:var(--sg-fs-sm);color:var(--sg-text-2);margin:0;line-height:1.55}

.sg .sgu-score__out{
  padding:var(--sg-6);border-top:1px solid var(--sg-border);
  background:linear-gradient(160deg,var(--sg-ink),var(--sg-ink-deep));color:#fff;
}
.sg .sgu-score__meter{height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:var(--sg-5)}
.sg .sgu-score__fill{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#FF8F87,var(--sg-accent-bright));transition:width .5s var(--sg-ease-out)}
.sg .sgu-score__n{font-family:var(--sg-font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:#fff}
.sg .sgu-score__v{margin:0;font-size:var(--sg-fs-sm);color:#C2D8E0;line-height:1.6}

/* --- Stage rail: where this capability sits in the four-stage model --- */
.sg .sgu-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sg-4)}
@media(max-width:760px){.sg .sgu-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sg .sgu-rail__i{
  display:block;padding:var(--sg-6);border-radius:var(--sg-r);text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  transition:background .28s var(--sg-ease),border-color .28s var(--sg-ease),transform .28s var(--sg-ease);
}
.sg .sgu-rail__i:hover{background:rgba(255,255,255,.09);transform:translateY(-3px)}
.sg .sgu-rail__n{font-family:var(--sg-font-mono);font-size:.72rem;letter-spacing:.16em;color:#9FC0C7;display:block;margin-bottom:10px}
.sg .sgu-rail__t{font-family:var(--sg-font-display);font-size:1.1rem;font-weight:650;color:#fff;margin:0 0 6px;letter-spacing:-.015em}
.sg .sgu-rail__d{font-size:var(--sg-fs-xs);color:#A9C4CE;margin:0;line-height:1.55}
.sg .sgu-rail__i.is-here{background:rgba(221,73,66,.18);border-color:rgba(221,73,66,.62)}
.sg .sgu-rail__i.is-here .sgu-rail__n{color:#FFAFA8}

/* Sticky aside used by the scorecard section */
@media(min-width:960px){
  .sg .sgu-aside{position:sticky;top:calc(var(--sg-header-h-stuck) + var(--sg-6))}
}

/* ==========================================================================
   15. BANNER TEXT COLOUR + STEP COLUMN COUNTS
   ========================================================================== */

/* .sg-lead is dark-on-light by default; inside a dark banner it was grey on
   navy/maroon. Everything that sits on a banner now states its own colour. */
.sg .sgu-banner p,
.sg .sgu-banner .sg-lead{color:#C2D8E0}
.sg .sgu-banner .sg-muted,
.sg .sgu-banner .sg-sm{color:#A9C4CE}
.sg .sgu-banner .sg-eyebrow{color:#FFAFA8}
.sg .sgu-banner--accent p,
.sg .sgu-banner--accent .sg-lead{color:#F3DBD9}
.sg .sgu-banner--accent .sg-eyebrow{color:#FFC9C4}
.sg .sgu-banner a:not(.sg-btn){color:#FFC9C4}
.sg .sgu-banner a:not(.sg-btn):hover{color:#FFD9D5}
.sg .sgu-banner .sgu-step__d,
.sg .sgu-banner .sgu-rail__d{color:#A9C4CE}

/* Six steps should read as two rows of three, not five-plus-an-orphan. */
@media(min-width:920px){
  .sg .sgu-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sg .sgu-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sg .sgu-steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* The threading line only makes sense across a single row. */
.sg .sgu-steps--3::before,
.sg .sgu-steps--4::before{left:34px;right:34px}
.sg .sgu-steps--3.sgu-steps--wrap::before{display:none}

/* ==========================================================================
   16. TOOL PAGES — bring the four bespoke calculators onto the design system

   /tools/build-vs-buy, /tools/app-cost-estimator, /tools/website-audit and
   /tools/tech-stack-advisor each ship their own inline <style> block using a
   private .stg-* system and two webfonts the site never loads. They rendered
   as a visibly different website on the four pages that matter most
   commercially. Every rule here is prefixed .sg so it outranks the inline
   block (0,2,x beats 0,1,x) without touching the tools' markup or logic.
   ========================================================================== */

.sg .stg-wrap{
  font-family:var(--sg-font);
  color:var(--sg-text);
  line-height:1.65;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}
.sg .stg-wrap h1,.sg .stg-wrap h2,.sg .stg-wrap h3,.sg .stg-wrap h4{
  font-family:var(--sg-font-display);letter-spacing:-.022em;font-weight:680;color:var(--sg-text);
}
.sg .stg-container{max-width:var(--sg-container-narrow);padding-inline:var(--sg-gutter)}

/* ---- Hero ---- */
.sg .stg-hero{
  position:relative;overflow:hidden;isolation:isolate;text-align:left;
  background:linear-gradient(165deg,var(--sg-ink) 0%,var(--sg-ink-deep) 100%);
  padding:var(--sg-12) 0 var(--sg-11);
}
.sg .stg-hero .stg-container{position:relative;z-index:2}
.sg .stg-hero h1{
  font-size:var(--sg-fs-h1);line-height:1.14;font-weight:700;letter-spacing:-.028em;
  color:#fff;margin:0 0 var(--sg-5);max-width:18ch;
}
.sg .stg-hero p{
  font-size:var(--sg-fs-lead);line-height:1.55;color:var(--sg-text-inv-2);
  opacity:1;margin:0;max-width:58ch;
}
.sg .stg-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:var(--sg-text-inv-2);font-size:var(--sg-fs-xs);font-weight:600;
  padding:7px 15px;border-radius:var(--sg-r-pill);margin-bottom:var(--sg-5);
}

/* ---- App shell ---- */
.sg .stg-app{gap:var(--sg-6);margin-top:calc(var(--sg-9) * -1)}

/* ---- Cards, fields ---- */
.sg .stg-card{
  background:var(--sg-surface);border:1px solid var(--sg-border);
  border-radius:var(--sg-r-lg);box-shadow:var(--sg-sh-3);padding:var(--sg-7);
}
.sg .stg-card h2,.sg .stg-card-h{
  font-family:var(--sg-font-display);font-size:1.06rem;font-weight:650;
  letter-spacing:-.015em;margin:0 0 4px;
}
.sg .stg-card .stg-sub{color:var(--sg-text-3);font-size:var(--sg-fs-xs);margin:0 0 var(--sg-6)}
.sg .stg-fld>label{font-size:var(--sg-fs-xs);font-weight:650;color:var(--sg-text);margin-bottom:8px}
.sg .stg-fld input[type=number],
.sg .stg-fld input[type=text],
.sg .stg-fld input[type=email],
.sg .stg-fld select,
.sg .stg-modal-card input{
  width:100%;border:1px solid var(--sg-border);border-radius:var(--sg-r-sm);
  padding:12px 13px;font-size:var(--sg-fs-sm);font-family:inherit;color:var(--sg-text);
  background:var(--sg-surface);
  transition:border-color .16s var(--sg-ease),box-shadow .16s var(--sg-ease);
}
.sg .stg-fld input:focus,.sg .stg-modal-card input:focus,.sg .stg-fld select:focus{
  outline:none;border-color:var(--sg-accent);box-shadow:0 0 0 3px rgba(198,58,51,.15);
}
.sg .stg-seg label{
  border:1px solid var(--sg-border);border-radius:var(--sg-r-sm);background:var(--sg-surface);
  font-size:var(--sg-fs-xs);font-weight:600;color:var(--sg-text-2);padding:11px 9px;
  transition:border-color .18s var(--sg-ease),background .18s var(--sg-ease),color .18s var(--sg-ease);
}
.sg .stg-seg label:hover{border-color:var(--sg-border-strong);background:var(--sg-surface-2)}
.sg .stg-seg label:has(input:checked){
  border-color:var(--sg-accent);background:var(--sg-accent-soft);
  color:var(--sg-accent-700);font-weight:700;box-shadow:0 0 0 1px var(--sg-accent) inset;
}

/* ---- Result panel ---- */
.sg .stg-res{
  background:linear-gradient(168deg,var(--sg-ink) 0%,var(--sg-ink-deep) 100%);
  border-color:rgba(255,255,255,.12);color:#fff;
}
.sg .stg-res h2,.sg .stg-res .stg-card-h{color:#fff}
.sg .stg-res .stg-sub{color:#A9C4CE}
.sg .stg-rec{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--sg-r);text-align:left}
.sg .stg-rec .lab{font-size:.7rem;letter-spacing:.14em;color:#9FC0C7;font-weight:700}
.sg .stg-rec .val{font-family:var(--sg-font-display);font-size:2.1rem;font-weight:700;letter-spacing:-.03em}
.sg .stg-rec .why{color:#C2D8E0;font-size:var(--sg-fs-xs);line-height:1.55}
.sg .stg-metric .k{color:#9FC0C7;font-size:var(--sg-fs-xs)}
.sg .stg-metric .v{font-family:var(--sg-font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sg .stg-toggle button.on{background:#fff;color:var(--sg-ink);font-weight:700}
.sg .stg-fine{color:#9FC0C7;font-size:var(--sg-fs-xs)}

/* ---- Buttons ---- */
.sg .stg-cta,.sg .stg-band a{
  background:var(--sg-accent);color:#fff;border:1px solid var(--sg-accent);
  font-family:var(--sg-font);font-weight:620;font-size:.98rem;
  border-radius:var(--sg-r-sm);padding:15px 22px;box-shadow:var(--sg-sh-1);
  transition:background .16s var(--sg-ease),transform .16s var(--sg-ease),box-shadow .16s var(--sg-ease);
}
.sg .stg-cta:hover,.sg .stg-band a:hover{
  background:var(--sg-accent-600);border-color:var(--sg-accent-600);
  transform:translateY(-1px);box-shadow:var(--sg-sh-2);color:#fff;
}

/* ---- Explanatory prose below the tool ---- */
.sg .stg-explain{padding:var(--sg-12) 0}
.sg .stg-explain .stg-container{max-width:var(--sg-container-narrow)}
.sg .stg-explain h2{font-size:var(--sg-fs-h2);margin:var(--sg-10) 0 var(--sg-5);letter-spacing:-.024em}
.sg .stg-explain h3{font-size:var(--sg-fs-h3);margin:var(--sg-8) 0 var(--sg-4);letter-spacing:-.016em}
.sg .stg-explain p{color:var(--sg-text-2);font-size:var(--sg-fs-body);line-height:1.7;margin:0 0 var(--sg-5);max-width:72ch}
.sg .stg-explain ul,.sg .stg-explain ol{color:var(--sg-text-2);max-width:72ch}
.sg .stg-lead{font-size:var(--sg-fs-lead);color:var(--sg-text-2);line-height:1.55}

/* ---- Closing band ---- */
.sg .stg-band{
  background:linear-gradient(165deg,var(--sg-ink) 0%,var(--sg-ink-deep) 100%);
  border-radius:var(--sg-r-xl);padding:var(--sg-11) var(--sg-8);text-align:left;
  position:relative;overflow:hidden;
}
.sg .stg-band h2{color:#fff;font-size:var(--sg-fs-h2);margin:0 0 var(--sg-4)}
.sg .stg-band p{color:var(--sg-text-inv-2);max-width:58ch;margin:0 0 var(--sg-7)}

/* ---- Chips, tiles, rings, meters ---- */
.sg .stg-chip,.sg .stg-pill-count{
  border-radius:var(--sg-r-pill);border:1px solid var(--sg-border);
  background:var(--sg-surface);color:var(--sg-text-2);font-size:var(--sg-fs-xs);font-weight:600;
}
.sg .stg-tile,.sg .stg-searchcard,.sg .stg-feat,.sg .stg-driver{
  border:1px solid var(--sg-border);border-radius:var(--sg-r);background:var(--sg-surface);
}
.sg .stg-num{font-family:var(--sg-font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sg .stg-eyebrow{
  font-size:var(--sg-fs-eyebrow);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sg-accent);
}

/* ---- Modal ---- */
.sg .stg-modal-card{border-radius:var(--sg-r-lg);box-shadow:var(--sg-sh-4);padding:var(--sg-8)}
.sg .stg-modal-card h3{font-family:var(--sg-font-display);font-size:1.32rem;letter-spacing:-.02em}
.sg .stg-modal-card p.m{color:var(--sg-text-3);font-size:var(--sg-fs-xs)}

@media(max-width:700px){
  .sg .stg-hero{padding:var(--sg-11) 0 var(--sg-10)}
  .sg .stg-band{padding:var(--sg-9) var(--sg-6);border-radius:var(--sg-r-lg)}
}