/* Site header and footer only, for pages that cannot load all of site.css (the demo). Variables are prefixed so they never collide with the app stylesheet. Keep in step with site.css. */
:root{--st-navy:#245B90;--st-navy2:#1B4A74;--st-teal:#245B90;--st-ink:#101F30;--st-muted:#4B5A68;--st-line:#E0E2DF;--st-panel:#fff;--st-foot:#101F30}
:root[data-theme=dark]{--st-navy:#2A659C;--st-navy2:#245B90;--st-teal:#8FBDE8;--st-ink:#E9ECEA;--st-muted:#AEBBC8;--st-line:#2B435C;--st-panel:#172B41;--st-foot:#0A1522}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--st-navy:#2A659C;--st-navy2:#245B90;--st-teal:#8FBDE8;--st-ink:#E9ECEA;--st-muted:#AEBBC8;--st-line:#2B435C;--st-panel:#172B41;--st-foot:#0A1522}}
:root[data-theme=dark] header.site .wm-light{display:none}:root[data-theme=dark] header.site .wm-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) header.site .wm-light{display:none}:root:not([data-theme=light]) header.site .wm-dark{display:block}}
header.site .wm-dark{display:none}
header.site,footer.site{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.6;box-sizing:border-box}
header.site *,footer.site *{box-sizing:border-box}
header.site .wrap,footer.site .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
header.site{background:var(--st-panel);border-bottom:3px solid var(--st-navy);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;line-height:0;text-decoration:none}.brand-word{height:36px;width:auto;max-width:none;display:block}
.hdr-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
header.site nav{display:flex;gap:22px;align-items:center}header.site nav a{color:var(--st-ink);text-decoration:none;font-size:15px}header.site nav a:hover{color:var(--st-teal)}
.navbtn{background:var(--st-navy);color:#fff !important;padding:8px 14px;border-radius:8px}.navbtn:hover{background:var(--st-navy2)}
.theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--st-line);border-radius:50%;background:var(--st-panel);color:var(--st-muted);cursor:pointer;flex:0 0 auto}.theme:hover{color:var(--st-ink);border-color:var(--st-muted)}.theme svg{display:block}
.menu{display:none;border:1px solid var(--st-line);background:var(--st-panel);color:var(--st-ink);padding:6px 12px;border-radius:8px;font-size:14px;font-family:inherit}
footer.site{background:var(--st-foot);color:#C9CDD6;padding:48px 0 32px;font-size:14px;margin-top:24px}
footer.site .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:28px}footer.site h4{color:#fff;font-size:14px;margin:0 0 10px;line-height:1.2}
footer.site p{margin:0 0 1em}footer.site a{color:#C9CDD6;text-decoration:none;display:block;margin-bottom:6px}footer.site a:hover{color:#fff}footer.site p a{display:inline}
.flogo-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;line-height:0}.flogo-row .brand-word{height:30px!important}footer.site .legal{border-top:1px solid rgba(255,255,255,.15);padding-top:14px;margin:0 0 6px;font-size:13px;color:#9AA0AD}
@media (max-width:860px){.brand-word{height:30px}footer.site .fcols{grid-template-columns:1fr}
.menu{display:block}.hdr-right{gap:10px}header.site nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--st-panel);border-bottom:1px solid var(--st-line);flex-direction:column;padding:16px 24px;gap:14px;align-items:flex-start}header.site nav.open{display:flex}}
/* Header as rebuilt in the site remaster (site.js): nav, two calls to action, menu and theme. Keep in step with site.css. */
header.site{border-bottom:1px solid var(--st-line);position:sticky;top:0;z-index:30}
header.site:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--st-navy)}
header.site .wrap{max-width:1160px}
header.site .hdr-right{flex:1 1 auto;justify-content:flex-end}
header.site nav{gap:4px;margin-right:auto;margin-left:28px}
header.site nav a{font-weight:500;padding:8px 12px;border-radius:8px}
header.site nav a[aria-current=page]{color:var(--st-teal);font-weight:600}
header.site .nav-m{display:none !important}
header.site .hdr-cta{display:flex;gap:8px;align-items:center}
header.site .hdr-cta a{text-decoration:none;font-size:14px;font-weight:650;line-height:1.2;padding:9px 14px;border-radius:9px}
header.site .hdr-cta .ghost{background:var(--st-panel);color:var(--st-ink);border:1px solid var(--st-line)}
header.site .hdr-cta .ghost:hover{border-color:var(--st-muted)}
@media (max-width:1020px){header.site .hdr-cta .ghost{display:none}}
@media (max-width:860px){header.site nav{margin:0;top:68px;padding:12px 16px 16px;gap:2px;align-items:stretch}header.site nav a{padding:12px}header.site .hdr-cta .navbtn{display:none}header.site nav .nav-m{display:block !important}header.site nav .nav-m.strong{background:var(--st-navy);color:#fff;text-align:center;margin-top:8px;font-weight:650}}
/* Header lockup: Forte by ServeTech (same as site.css) */
header.site .brand{gap:8px}
header.site .brand-word.brand-forte{height:26px!important}
header.site .brand-word.brand-st{height:17px!important;opacity:.85}
header.site .brand-by{font-size:13px;line-height:1;color:var(--st-muted,#4B5A68);font-weight:500;margin-left:6px}
:root[data-theme=dark] header.site .brand-by{color:#AEBBC8}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) header.site .brand-by{color:#AEBBC8}}
@media (max-width:560px){header.site .brand-word.brand-forte{height:22px!important}header.site .brand-word.brand-st{height:14px!important}header.site .brand-by{font-size:12px;margin-left:4px}header.site .brand{gap:6px}}
header.site nav a,header.site .hdr-cta a{white-space:nowrap}
header.site .hdr-cta .navbtn,header.site nav .nav-m.strong{background:#177A63;color:#fff !important}
header.site .hdr-cta .navbtn:hover{background:#11634F}
@media (min-width:861px) and (max-width:1320px){header.site nav{margin-left:12px;gap:0}header.site nav a{padding:8px 8px;font-size:14px}}
@media (min-width:861px) and (max-width:1240px){header.site .hdr-cta .ghost{display:none}}

/* Marketplace switch for pages that load only chrome.css (the demo). Keep in step with assets/site.css. */
[data-mkt]{display:none!important}