/* Protected original Steadfast Global lockup and architecture branding.
   Original rules retained in their original order. See BRAND-PRESERVATION.md. */
/* ============================================================
   v14 CANONICAL BRAND LOCKUP
   One proportional logo + tagline system across every page.
   Main wordmark: Anton | Steadfast #0a0a37 | Global #1891db
   Tagline: Inter SemiBold | #0a0a37
   ============================================================ */
:root{
  --brand-steady:#0a0a37;
  --brand-global:#1891db;
  --brand-tagline:#0a0a37;
}
.wordmark,
.footer-wordmark.wordmark,
.not-found .wordmark{
  --brand-size:36px;
  width:250px!important;
  min-width:250px!important;
  max-width:250px!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:4px!important;
  line-height:1!important;
}
.wordmark-main,
.footer-wordmark .wordmark-main,
.not-found .wordmark-main{
  display:block!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif!important;
  font-size:var(--brand-size)!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:.92!important;
  letter-spacing:0!important;
  color:var(--brand-steady)!important;
  white-space:nowrap!important;
  transform:none!important;
  opacity:1!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.wordmark-main span,
.footer-wordmark .wordmark-main span,
.not-found .wordmark-main span{
  color:var(--brand-steady)!important;
  font:inherit!important;
}
.wordmark-main b,
.footer-wordmark .wordmark-main b,
.not-found .wordmark-main b{
  color:var(--brand-global)!important;
  font:inherit!important;
  font-weight:400!important;
}
.wordmark-tag,
.footer-wordmark .wordmark-tag,
.not-found .wordmark-tag{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  font-family:'Inter',Arial,sans-serif!important;
  font-size:calc(var(--brand-size) * .205)!important;
  font-style:normal!important;
  font-weight:600!important;
  line-height:1.15!important;
  letter-spacing:-.01em!important;
  color:var(--brand-tagline)!important;
  white-space:nowrap!important;
  transform:none!important;
  opacity:1!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.footer-wordmark.wordmark{--brand-size:36px}
.footer-brand .wordmark{margin-bottom:13px}

@media(max-width:1100px){
  .wordmark,.footer-wordmark.wordmark,.not-found .wordmark{
    --brand-size:33px;
    width:230px!important;
    min-width:230px!important;
    max-width:230px!important;
  }
}
@media(max-width:860px){
  .wordmark,.footer-wordmark.wordmark,.not-found .wordmark{
    --brand-size:30px;
    width:205px!important;
    min-width:205px!important;
    max-width:205px!important;
  }
  .site-header .wordmark-tag{display:none!important}
  .footer .wordmark-tag{display:block!important}
}
@media(max-width:560px){
  .wordmark,.footer-wordmark.wordmark,.not-found .wordmark{
    --brand-size:28px;
    width:192px!important;
    min-width:192px!important;
    max-width:192px!important;
  }
  .footer .wordmark-tag{font-size:calc(var(--brand-size) * .205)!important}
}


/* ============================================================
   v14 — CANONICAL BRAND LOCKUP SYSTEM
   One identical wordmark/tagline ratio everywhere on the website.
   Wordmark: Anton.  Steadfast #0a0a37. Global #1891db.
   Tagline: Inter 600, #0a0a37 on light surfaces; white only on dark surfaces.
   ============================================================ */
:root{
  --sg-navy:#0a0a37;
  --sg-blue:#1891db;
  --sg-brand-size:36px;
  --sg-tag-ratio:.2025;
  --sg-lockup-gap:3px;
}
.wordmark.brand-lockup,
.footer-wordmark.brand-lockup,
.brand-lockup{
  --brand-size:var(--sg-brand-size);
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  gap:var(--sg-lockup-gap)!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  vertical-align:top!important;
}
.brand-lockup .wordmark-main,
.wordmark.brand-lockup .wordmark-main,
.footer-wordmark.brand-lockup .wordmark-main{
  display:block!important;
  width:max-content!important;
  margin:0!important;
  padding:0!important;
  font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif!important;
  font-size:var(--brand-size)!important;
  font-weight:400!important;
  font-style:normal!important;
  line-height:.90!important;
  letter-spacing:0!important;
  color:var(--sg-navy)!important;
  white-space:nowrap!important;
  transform:none!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.brand-lockup .wordmark-main span{color:var(--sg-navy)!important;font:inherit!important}
.brand-lockup .wordmark-main b{color:var(--sg-blue)!important;font:inherit!important;font-weight:400!important}
.brand-lockup .wordmark-tag,
.wordmark.brand-lockup .wordmark-tag,
.footer-wordmark.brand-lockup .wordmark-tag{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  font-family:'Inter',Arial,sans-serif!important;
  font-size:calc(var(--brand-size) * var(--sg-tag-ratio))!important;
  font-weight:600!important;
  font-style:normal!important;
  line-height:1.08!important;
  letter-spacing:-.012em!important;
  color:var(--sg-navy)!important;
  white-space:nowrap!important;
  transform:none!important;
  opacity:1!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.site-header .brand-lockup{--brand-size:36px!important}
.footer .brand-lockup{--brand-size:36px!important}
.not-found .brand-lockup{--brand-size:40px!important}

/* Architecture diagrams are legacy raster artwork. The canonical HTML lockup
   masks their embedded raster logo so the visible brand is identical to the site. */
.architecture-art{position:relative!important;display:block!important;overflow:hidden!important;container-type:inline-size;background:#f5fbff}
.arch-brand-mask{position:absolute!important;left:0!important;z-index:4!important;pointer-events:none!important;display:flex!important;align-items:flex-start!important}
.arch-brand-mask.top{top:0!important;width:32%!important;height:10.5%!important;padding:2.0% 0 0 2.7%!important;background:linear-gradient(90deg,#f5fbff 0%,#f5fbff 83%,rgba(245,251,255,.96) 92%,rgba(245,251,255,0) 100%)}
.arch-brand-mask.bottom{bottom:0!important;width:26%!important;height:8.0%!important;padding:1.0% 0 0 2.4%!important;background:linear-gradient(90deg,rgba(5,26,62,.99) 0%,rgba(5,26,62,.99) 82%,rgba(5,26,62,.92) 92%,rgba(5,26,62,0) 100%)}
.arch-brand-mask .brand-lockup{--brand-size:clamp(15px,3.0cqw,36px)!important;gap:2px!important}
.arch-brand-mask.bottom .brand-lockup .wordmark-main,
.arch-brand-mask.bottom .brand-lockup .wordmark-main span{color:#fff!important}
.arch-brand-mask.bottom .brand-lockup .wordmark-main b{color:#1891db!important}
.arch-brand-mask.bottom .brand-lockup .wordmark-tag{color:#fff!important;opacity:.92!important}
.arch-brand-mask.top .brand-lockup .wordmark-tag{color:#0a0a37!important}
.architecture-figure img{position:relative;z-index:1}

@media(max-width:1100px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:33px!important}
}
@media(max-width:860px){
  .site-header .brand-lockup{--brand-size:30px!important}
  .site-header .brand-lockup .wordmark-tag{display:none!important}
  .footer .brand-lockup{--brand-size:30px!important}
  .footer .brand-lockup .wordmark-tag{display:block!important}
}
@media(max-width:560px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:28px!important}
  .arch-brand-mask.top{width:36%!important;height:11.5%!important}
  .arch-brand-mask.bottom{width:31%!important;height:9%!important}
}

/* v14 architecture brand-mask theme refinement */
.arch-brand-mask.bottom.light{background:linear-gradient(90deg,rgba(248,252,255,.995) 0%,rgba(248,252,255,.995) 82%,rgba(248,252,255,.92) 92%,rgba(248,252,255,0) 100%)!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main,.arch-brand-mask.bottom.light .brand-lockup .wordmark-main span{color:#0a0a37!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main b{color:#1891db!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-tag{color:#0a0a37!important;opacity:1!important}
.arch-brand-mask.bottom.dark{background:linear-gradient(90deg,rgba(4,24,58,.995) 0%,rgba(4,24,58,.995) 82%,rgba(4,24,58,.92) 92%,rgba(4,24,58,0) 100%)!important}


/* ============================================================
   v19 — FINAL CANONICAL STEADFAST GLOBAL BRAND LOCKUP
   One exact lockup everywhere: header, footer, 404, architecture art.
   ============================================================ */
:root{
  --sg-brand-size-desktop:36px;
  --sg-brand-size-tablet:33px;
  --sg-brand-size-mobile:30px;
  --sg-tag-ratio:.205;
  --sg-navy:#0a0a37;
  --sg-blue:#1891db;
}

.brand-lockup,
.wordmark.brand-lockup,
.footer-wordmark.brand-lockup,
.not-found .brand-lockup{
  --brand-size:var(--sg-brand-size-desktop)!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:3px!important;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.brand-lockup .wordmark-main,
.wordmark.brand-lockup .wordmark-main,
.footer-wordmark.brand-lockup .wordmark-main,
.not-found .brand-lockup .wordmark-main{
  display:block!important;
  width:max-content!important;
  margin:0!important;
  padding:0!important;
  font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif!important;
  font-size:var(--brand-size)!important;
  font-weight:400!important;
  line-height:.90!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  transform:none!important;
  color:var(--sg-navy)!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.brand-lockup .wordmark-main span{font:inherit!important;color:var(--sg-navy)!important}
.brand-lockup .wordmark-main b{font:inherit!important;font-weight:400!important;color:var(--sg-blue)!important}
.brand-lockup .wordmark-tag,
.wordmark.brand-lockup .wordmark-tag,
.footer-wordmark.brand-lockup .wordmark-tag,
.not-found .brand-lockup .wordmark-tag{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  font-family:'Inter',Arial,sans-serif!important;
  font-size:calc(var(--brand-size) * var(--sg-tag-ratio))!important;
  font-weight:600!important;
  font-style:normal!important;
  line-height:1.08!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
  transform:none!important;
  color:#203a5b!important;
  opacity:1!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}

/* Header and footer intentionally use the identical desktop lockup. */
.site-header .brand-lockup,
.footer .brand-lockup{--brand-size:var(--sg-brand-size-desktop)!important}
.footer-wordmark .wordmark-main,.footer-wordmark .wordmark-tag{font-size:revert-layer}

/* Architecture artwork: fully cover the generated/raster brand before adding the canonical HTML lockup. */
.architecture-art{position:relative!important;display:block!important;overflow:hidden!important;container-type:inline-size;background:#f7fbfe!important}
.arch-brand-mask{position:absolute!important;left:0!important;z-index:8!important;pointer-events:none!important;display:flex!important;align-items:flex-start!important;box-sizing:border-box!important}
.arch-brand-mask.top{
  top:0!important;
  width:36%!important;
  height:12.5%!important;
  padding:2.1% 0 0 2.7%!important;
  background:#f7fbfe!important;
}
.arch-brand-mask.bottom{
  bottom:0!important;
  width:31%!important;
  height:9.2%!important;
  padding:1.15% 0 0 2.5%!important;
}
.arch-brand-mask .brand-lockup{--brand-size:var(--sg-brand-size-desktop)!important;gap:3px!important}
.arch-brand-mask.top .brand-lockup .wordmark-main,
.arch-brand-mask.top .brand-lockup .wordmark-main span{color:var(--sg-navy)!important}
.arch-brand-mask.top .brand-lockup .wordmark-main b{color:var(--sg-blue)!important}
.arch-brand-mask.top .brand-lockup .wordmark-tag{color:#203a5b!important}
.arch-brand-mask.bottom.dark{background:#04183a!important}
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-main,
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-main span{color:#fff!important}
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-main b{color:var(--sg-blue)!important}
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-tag{color:#fff!important}
.arch-brand-mask.bottom.light{background:#f7fbfe!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main,
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main span{color:var(--sg-navy)!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main b{color:var(--sg-blue)!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-tag{color:#203a5b!important}

/* Remove legacy generated micro-tagline at the upper-right of architecture images. */
.arch-clean-mask.top-right{
  position:absolute!important;
  z-index:7!important;
  right:0!important;
  top:0!important;
  width:26%!important;
  height:10.5%!important;
  background:#f7fbfe!important;
  pointer-events:none!important;
}

@media(max-width:1100px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:var(--sg-brand-size-tablet)!important}
  .arch-brand-mask .brand-lockup{--brand-size:var(--sg-brand-size-tablet)!important}
}
@media(max-width:860px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:var(--sg-brand-size-mobile)!important}
  .site-header .brand-lockup .wordmark-tag{display:none!important}
  .footer .brand-lockup .wordmark-tag{display:block!important}
  .arch-brand-mask .brand-lockup{--brand-size:var(--sg-brand-size-mobile)!important}
}
@media(max-width:560px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:28px!important}
  .arch-brand-mask .brand-lockup{--brand-size:28px!important}
  .arch-brand-mask.top{width:42%!important;height:13.5%!important}
  .arch-brand-mask.bottom{width:38%!important;height:10%!important}
  .arch-clean-mask.top-right{width:30%!important;height:11.5%!important}
}


/* ============================================================
   v19 — CANONICAL LOGO + TAGLINE PROPORTION
   Tagline is intentionally larger and optically fitted from the
   first "t" in Steadfast to the "a" in Global.
   Exact horizontal fit is completed by site.js after Anton/Inter load.
   ============================================================ */
:root{
  --sg-v19-brand-desktop:36px;
  --sg-v19-brand-tablet:33px;
  --sg-v19-brand-mobile:29px;
  --sg-v19-tag-size-ratio:.255;
  --sg-v19-navy:#0a0a37;
  --sg-v19-blue:#1891db;
}
.brand-lockup,
.wordmark.brand-lockup,
.footer-wordmark.brand-lockup,
.not-found .brand-lockup{
  --brand-size:var(--sg-v19-brand-desktop)!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:4px!important;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.brand-lockup .wordmark-main,
.wordmark.brand-lockup .wordmark-main,
.footer-wordmark.brand-lockup .wordmark-main,
.not-found .brand-lockup .wordmark-main{
  display:block!important;
  width:max-content!important;
  margin:0!important;
  padding:0!important;
  font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif!important;
  font-size:var(--brand-size)!important;
  font-weight:400!important;
  line-height:.90!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  transform:none!important;
  color:var(--sg-v19-navy)!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.brand-lockup .wordmark-main span{font:inherit!important;color:var(--sg-v19-navy)!important}
.brand-lockup .wordmark-main b{font:inherit!important;font-weight:400!important;color:var(--sg-v19-blue)!important}
.brand-lockup .wordmark-tag,
.wordmark.brand-lockup .wordmark-tag,
.footer-wordmark.brand-lockup .wordmark-tag,
.not-found .brand-lockup .wordmark-tag{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  font-family:'Inter',Arial,sans-serif!important;
  font-size:calc(var(--brand-size) * var(--sg-v19-tag-size-ratio))!important;
  font-weight:600!important;
  font-style:normal!important;
  line-height:1.12!important;
  letter-spacing:-.018em!important;
  white-space:nowrap!important;
  transform-origin:left center!important;
  color:var(--sg-v19-navy)!important;
  opacity:1!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}
.site-header .brand-lockup,
.footer .brand-lockup{--brand-size:var(--sg-v19-brand-desktop)!important}
/* Keep the complete lockup visible at every breakpoint. */
.site-header .brand-lockup .wordmark-tag,
.footer .brand-lockup .wordmark-tag{display:block!important}
/* Architecture masks inherit the identical typography/proportion. */
.arch-brand-mask .brand-lockup{--brand-size:var(--sg-v19-brand-desktop)!important;gap:4px!important}
.arch-brand-mask.top .brand-lockup .wordmark-main,
.arch-brand-mask.top .brand-lockup .wordmark-main span{color:var(--sg-v19-navy)!important}
.arch-brand-mask.top .brand-lockup .wordmark-main b{color:var(--sg-v19-blue)!important}
.arch-brand-mask.top .brand-lockup .wordmark-tag{color:var(--sg-v19-navy)!important}
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-main,
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-main span{color:#fff!important}
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-main b{color:var(--sg-v19-blue)!important}
.arch-brand-mask.bottom.dark .brand-lockup .wordmark-tag{color:#fff!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main,
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main span{color:var(--sg-v19-navy)!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-main b{color:var(--sg-v19-blue)!important}
.arch-brand-mask.bottom.light .brand-lockup .wordmark-tag{color:var(--sg-v19-navy)!important}
@media(max-width:1100px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:var(--sg-v19-brand-tablet)!important}
  .arch-brand-mask .brand-lockup{--brand-size:var(--sg-v19-brand-tablet)!important}
}
@media(max-width:860px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:var(--sg-v19-brand-mobile)!important}
  .site-header .brand-lockup .wordmark-tag,.footer .brand-lockup .wordmark-tag{display:block!important}
  .arch-brand-mask .brand-lockup{--brand-size:var(--sg-v19-brand-mobile)!important}
}
@media(max-width:560px){
  .site-header .brand-lockup,.footer .brand-lockup{--brand-size:27px!important}
  .arch-brand-mask .brand-lockup{--brand-size:27px!important}
  .brand-lockup .wordmark-tag{font-size:calc(var(--brand-size) * .25)!important}
}


/* ============================================================
   v19 — ARCHITECTURE BRAND SYNC
   Architecture graphics no longer carry a second live wordmark
   inside the raster artwork. A single canonical HTML lockup sits
   above each diagram, while the legacy baked-in marks are covered.
   This prevents duplicate logos, mismatched scale, and title clipping.
   ============================================================ */

.architecture-figure{
  overflow:hidden!important;
  background:#fff!important;
}
.architecture-brandbar{
  min-height:76px;
  padding:14px 22px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:linear-gradient(90deg,#ffffff 0%,#f8fcff 60%,#eef8fe 100%);
  border-bottom:1px solid #d7e8f3;
}
.architecture-brandbar .architecture-brand-lockup{
  --brand-size:36px!important;
  flex:0 0 auto;
}
.architecture-brandbar-label{
  font-family:'Inter',Arial,sans-serif;
  font-size:9px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.15em;
  color:#587894;
  text-align:right;
  white-space:nowrap;
}
.architecture-art,
.viewer-art{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  container-type:inline-size;
  background:#f7fbfe!important;
}
.architecture-art img,
.viewer-art img{
  width:100%;
  height:auto;
  display:block;
}

/* The legacy top-left generated logo is hidden with a clean neutral patch. */
.architecture-art::before,
.viewer-art::before{
  content:'';
  position:absolute;
  z-index:7;
  left:0;
  top:0;
  background:#f7fbfe;
  pointer-events:none;
}

/* The legacy bottom-left generated logo/footer mark is hidden only where present. */
.architecture-art::after,
.viewer-art::after{
  content:'';
  position:absolute;
  z-index:7;
  left:0;
  bottom:0;
  pointer-events:none;
  display:none;
}

/* Legacy micro-slogans in the top-right are also suppressed. */
.arch-clean-mask.top-right{
  position:absolute!important;
  z-index:7!important;
  right:0!important;
  top:0!important;
  background:#f7fbfe!important;
  pointer-events:none!important;
}

/* Image-specific cleanup regions — sized to avoid covering technical titles. */
[data-arch="fabric-copilot-decision"]::before{width:29%;height:10.2%}
[data-arch="fabric-copilot-decision"] .arch-clean-mask.top-right{width:25%;height:8.5%}

[data-arch="fabric-end-to-end"]::before{width:27.5%;height:9.5%}
[data-arch="fabric-end-to-end"] .arch-clean-mask.top-right{width:22%;height:9.5%}
[data-arch="fabric-end-to-end"]::after{
  display:block;width:28%;height:7.5%;background:#04183a;
}

[data-arch="fabric-medallion"]::before{width:25.5%;height:7.8%}
[data-arch="fabric-medallion"] .arch-clean-mask.top-right{width:23%;height:7.8%}
[data-arch="fabric-medallion"]::after{
  display:block;width:27%;height:6.8%;background:#fff;
}

[data-arch="medallion-explained"]::before{width:27%;height:6.5%}
[data-arch="medallion-explained"] .arch-clean-mask.top-right{width:23%;height:6.5%}
[data-arch="medallion-explained"]::after{
  display:block;width:25%;height:5.1%;background:#fff;
}

[data-arch="semantic-data-layer"]::before{width:28%;height:6.0%}
[data-arch="semantic-data-layer"] .arch-clean-mask.top-right{width:22%;height:6.0%}
[data-arch="semantic-data-layer"]::after{
  display:block;width:25%;height:5.0%;background:#04183a;
}

[data-arch="traditional-vs-fabric"]::before{width:31%;height:8.3%}
[data-arch="traditional-vs-fabric"] .arch-clean-mask.top-right{width:27%;height:8.3%}

/* Disable the obsolete V14/V15/v19 overlay brand blocks if any cached markup survives. */
.arch-brand-mask{display:none!important}

/* Viewer treatment */
.visual-viewer .architecture-brandbar{
  border:1px solid #d3e6f2;
  border-bottom:0;
  border-radius:22px 22px 0 0;
}
.visual-viewer .viewer-art{
  border-radius:0 0 22px 22px!important;
}

@media(max-width:860px){
  .architecture-brandbar{
    min-height:68px;
    padding:12px 16px 10px;
  }
  .architecture-brandbar .architecture-brand-lockup{--brand-size:30px!important}
  .architecture-brandbar-label{font-size:8px;letter-spacing:.11em}
}
@media(max-width:640px){
  .architecture-brandbar{
    display:block;
  }
  .architecture-brandbar-label{
    display:block;
    margin-top:8px;
    text-align:left;
    white-space:normal;
  }
  .architecture-brandbar .architecture-brand-lockup{--brand-size:28px!important}
}


/* ============================================================
   v19 — CLEAN ARCHITECTURE BRANDING
   The technical PNGs are physically cropped to remove generated
   brand/footer bands. One live HTML brand lockup is used above
   every architecture visual; diagram titles are also live HTML.
   ============================================================ */

.architecture-art::before,
.architecture-art::after,
.viewer-art::before,
.viewer-art::after,
.arch-clean-mask,
.arch-brand-mask{
  display:none!important;
  content:none!important;
}

.architecture-figure{
  background:#fff!important;
  overflow:hidden!important;
}

.architecture-brandbar{
  min-height:78px!important;
  padding:14px 22px 12px!important;
  background:linear-gradient(90deg,#fff 0%,#fbfdff 62%,#eef8fe 100%)!important;
  border-bottom:1px solid #d7e8f3!important;
}
.architecture-brandbar .architecture-brand-lockup{
  --brand-size:var(--sg-v19-brand-desktop)!important;
}
.architecture-art-head{
  padding:20px 24px 17px;
  text-align:center;
  background:#f8fcff;
  border-bottom:1px solid #dcebf5;
}
.architecture-art-head h3{
  margin:0;
  font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(27px,3.1vw,42px);
  line-height:1.04;
  font-weight:400;
  color:#0a0a37;
  letter-spacing:0;
}
.architecture-art-head p{
  margin:6px auto 0;
  max-width:850px;
  font-family:'Inter',Arial,sans-serif;
  font-size:12.5px;
  line-height:1.45;
  font-weight:500;
  color:#466882;
}
.architecture-art,
.viewer-frame .architecture-art{
  background:#fff!important;
  overflow:hidden!important;
}
.architecture-art img,
.viewer-frame .architecture-art img{
  width:100%!important;
  height:auto!important;
  display:block!important;
}

/* The architecture bar uses exactly the same brand component as the site header/footer. */
.architecture-brandbar .brand-lockup .wordmark-main{
  color:var(--sg-v19-navy)!important;
}
.architecture-brandbar .brand-lockup .wordmark-main span{
  color:var(--sg-v19-navy)!important;
}
.architecture-brandbar .brand-lockup .wordmark-main b{
  color:var(--sg-v19-blue)!important;
}
.architecture-brandbar .brand-lockup .wordmark-tag{
  color:var(--sg-v19-navy)!important;
}

@media(max-width:860px){
  .architecture-brandbar .architecture-brand-lockup{
    --brand-size:var(--sg-v19-brand-tablet)!important;
  }
  .architecture-art-head{padding:17px 18px 15px}
  .architecture-art-head h3{font-size:30px}
  .architecture-art-head p{font-size:11.5px}
}
@media(max-width:560px){
  .architecture-brandbar .architecture-brand-lockup{
    --brand-size:27px!important;
  }
  .architecture-art-head h3{font-size:26px}
  .architecture-art-head p{font-size:11px}
}