/* ============================================================
   Semifly shared site stylesheet — single source of truth for
   header (nh), footer (foot), design tokens, reset, and global
   layout fixes. Linked by every page as /_semifly/site.css?v=...
   Edit HERE once → applies site-wide (no per-page re-push).
   ============================================================ */

/* --- design tokens --- */
:root{--blue:#2f6fed;--dark:#0b0e16;--ink:#15171c;--mut:#5a6473;--line:#e4e7ee;--soft:#f5f6f9;--orange:#FF7A30;--wrap:1280px}

/* --- minimal reset (font-family stays page/template level) --- */
*{box-sizing:border-box}
a{color:inherit}

/* --- header (nh) --- */
.nh{background:var(--dark);position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.08)}
.nh-in{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:30px;height:82px}
.nh-brand{flex:none;display:flex;align-items:center}
.nh-brand img{height:44px;width:auto;display:block}
.nh-nav{display:flex;gap:28px;flex:1;align-items:center}
.nh-nav a{color:#c8d0dd;text-decoration:none;font-size:.96rem;font-weight:500;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nh-nav a:hover{color:#fff;border-bottom-color:var(--orange)}
.nh-right{display:flex;align-items:center;gap:14px;flex:none}
.nh-mp{background:var(--orange);color:#fff;font-weight:700;padding:10px 20px;text-decoration:none;font-size:.92rem;display:inline-flex;align-items:center;gap:8px}
.nh-mp:hover{background:#ec6a1c}
.nh-contact{color:#c8d0dd;text-decoration:none;font-size:.92rem;font-weight:600;white-space:nowrap}
.nh-contact:hover{color:#fff}
@media(max-width:920px){.nh-nav,.nh-contact{display:none}}

/* --- kill legacy fixed-header top offset + cap legacy content grid to wrap width --- */
.layourWrapper{margin-top:0!important}
.Articlespage{margin-top:0!important}
.cds--grid:not(.cds--grid--full-width){max-width:var(--wrap)!important;margin-left:auto!important;margin-right:auto!important}

/* --- footer (foot) — compact --- */
.foot{background:#0b0e16;color:#aab4c4;padding:26px 28px 14px}
/* Footer left-edge alignment: the inner wrap's side padding is the single source
   of horizontal inset, so the footer lines up with the header (.nh-in) and body
   sections at every viewport width. Drop the side padding from the footer ELEMENT
   only — footer.foot never matches the reused <div class="foot"> review-card block.
   .in family (home/case-studies) insets 28px like .sec; .inwrap2 family
   (articles/product pages) insets 24px like their .hero/.layout. */
footer.foot{padding-left:0;padding-right:0}
.foot .in{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.foot .inwrap2{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
.foot img.fl{height:28px;width:auto;margin-bottom:7px}
.foot .tag{font-size:.77rem;color:#7e8aa0;max-width:230px;line-height:1.45}
.foot h5{color:#fff;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 5px}
.foot a{display:block;color:#aab4c4;text-decoration:none;font-size:.8rem;padding:1px 0;line-height:1.4}
.foot a:hover{color:#fff}
.fbot{padding-top:11px;font-size:.74rem;color:#7e8aa0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.fbot a{display:inline;color:#9fb0c8;padding:0 0 0 18px}