/* Supplied full logo, trimmed in layout with its original proportions. */
header .brand.brand-stacked,.footer-grid .brand.brand-stacked{display:block;flex-shrink:0}
.brand-stacked-frame{display:block;position:relative;overflow:hidden;background:transparent}
header .brand-stacked-frame,.footer-grid .brand-stacked-frame{width:239.229338px;aspect-ratio:644.005377 / 156}
.brand-stacked-frame img{position:static;display:block;width:100%;height:auto;max-width:none;filter:none}
@media(max-width:600px){header .brand-stacked-frame,.footer-grid .brand-stacked-frame{width:172.245123px}}
/* Flat white lightning mark, centered with its transparent cutouts preserved. */
.flow-dm-frame{display:block;position:relative;overflow:hidden;width:96.413883px;aspect-ratio:342 / 220;flex:none;transform:translateX(-4%)}
.flow-dm-frame img,#ecosystem .ecosystem-hub .ecosystem-dm-frame img{position:static;display:block;width:100%;height:100%;max-width:none;object-fit:contain;left:auto;top:auto;filter:none}
#ecosystem .ecosystem-hub .ecosystem-dm-frame{width:44.702950px;aspect-ratio:342 / 220}
@media(max-width:700px){#ecosystem .ecosystem-hub .ecosystem-dm-frame{width:36.575143px}}

@media(max-width:900px){.flow-section .flow-dm-frame{width:79.244287px}}
@media(max-width:600px){.flow-section .flow-dm-frame{width:64.716168px}}

/* More prominent header branding, preserving the wordmark proportions. */
header .brand-stacked-frame{width:315.782727px}
@media(max-width:600px){header .brand-stacked-frame{width:227.363563px}}

/* Center the navigation independently of the wordmark. */
.shell>header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.shell>header nav{grid-column:2;justify-self:center;letter-spacing:-.3px}
@media(min-width:601px) and (max-width:1000px){
 .shell>header{grid-template-columns:1fr;row-gap:16px}
 .shell>header nav{grid-column:1;grid-row:2}
}
@media(max-width:600px){.shell>header{grid-template-columns:1fr}}

/* Restore the demo action on the right without shifting the centered navigation. */
.shell>header .header-right{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:1000px){.shell>header{grid-template-columns:minmax(0,1fr) auto}.shell>header .header-right{grid-column:2}.shell>header nav{grid-column:1 / -1}}

/* Match the demo action to the navigation and keep its animated arrow legible. */
.shell>header nav,.shell>header .white-button{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:400;letter-spacing:-.3px;line-height:20px;padding:16px 26px}
.shell>header .white-button{background:#091825c9;border-color:#ffffff1f;color:#e9f3f7;white-space:nowrap}
.shell>header .white-button .btn-arrow{margin-left:0;color:#8cd8ec}
.shell>header .white-button:hover,.shell>header .white-button:focus-visible{background:#0b2338;color:#43c9ec;border-color:#8cd8ec80;box-shadow:none}
.shell>header .white-button:hover .btn-arrow,.shell>header .white-button:focus-visible .btn-arrow{color:#8cd8ec}
@media(max-width:900px){.shell>header nav,.shell>header .white-button{padding:13px 18px}}


/* Give the wordmark more breathing room beside the navigation. */
@media(min-width:1001px){.shell>header nav{transform:translateX(24px)}}

/* Slight inset for the footer copyright. */
.footer-grid .footer-copyright{padding-left:12px}