:root { --site-header-height:77px; }
/* Page links stay separate from the demos inside each page. */
.site-header { position:sticky; top:0; z-index:20; background:var(--mu-white, #fff); font-family:Nunito,system-ui,sans-serif; line-height:1.3; border-bottom:1px solid #e0e8ed; }
.site-header .wrap.nav-wrap { margin-inline:auto; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:min(1600px,calc(100% - 112px)); min-height:76px; column-gap:30px; }
.site-header .wordmark { display:inline-flex; align-items:center; min-height:44px; border-radius:4px; justify-self:start; }
.site-header .wordmark .brand-logo { display:block; width:156px; height:auto; transform:translateY(-2px); }
.site-header #site-navigation { display:block; min-width:0; max-width:none; margin:0; padding:0; border:0; }
.site-header .nav-links { display:flex; justify-content:center; align-items:center; gap:4px; }
.site-header .nav-links > a { position:relative; display:flex; justify-content:center; align-items:center; min-height:42px; padding:10px 13px; border-radius:7px; color:#294552; font:800 14px/1.3 'Nunito',sans-serif; white-space:nowrap; transition:background .15s,color .15s; }
.site-header .nav-links > a:hover { background:#f3f6f8; color:var(--mu-accent, #11688f); }
.site-header .nav-links > a[aria-current] { background:#eaf5fc; color:var(--mu-accent, #086eab); }
.site-header .nav-links > a[aria-current]::after { content:''; position:absolute; bottom:4px; left:13px; right:13px; height:2px; border-radius:2px; background:#209cda; }
.site-header .nav-actions { display:flex; align-items:center; gap:24px; }
.site-header .login { display:inline-flex; align-items:center; justify-content:center; min-height:44px; color:#294552; font-size:14px; line-height:1.3; font-weight:800; white-space:nowrap; }
.site-header .login:hover { color:#087cbd; }
/* The header's Add-to-Shopify button, one size on every page. This used to be
   44px/14px here while the homepage's page-wide `.homepage-public .button-primary`
   (homepage.css) bled into the header and made it 52px/16px on Home only, so the
   button visibly shrank on every other tab. The shared rule now carries the Home
   values — size, shadow and hover — so the bleed produces identical output there
   and the other pages match it. margin-bottom offsets the hard 5px shadow. */
.site-header .button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 23px; margin-bottom:5px; gap:14px; border:1px solid #39bf47; border-radius:12px; background:#47cd53; color:#123e1c; box-shadow:0 5px 0 #239c33; font:900 16px/1.3 'Nunito',sans-serif; white-space:nowrap; transition:background .15s,box-shadow .15s,transform .15s; }
.site-header .button > span { font-size:19px; line-height:1; }
.site-header .button:hover { background:#5bd966; transform:translateY(-2px); box-shadow:0 7px 0 #239c33; }
.site-header .button:active { transform:translateY(3px); box-shadow:0 2px 0 #239c33; }
.site-header :is(a,button):focus-visible { outline:3px solid #169de5; outline-offset:4px; }
.site-header .nav-toggle,.site-header .nav-mobile-actions { display:none; }
@media(max-width:1150px) {
  .site-header .wrap.nav-wrap { width:calc(100% - 48px); column-gap:20px; }
  .site-header .nav-links > a { padding-inline:8px; font-size:13px; }
  .site-header .nav-actions { gap:18px; }
}
/* The page keeps its 56px gutter down to 1101px, so the header does too; the
   tighter links above still make it fit. */
@media(min-width:1101px) and (max-width:1150px) {
  .site-header .wrap.nav-wrap { width:min(1600px,calc(100% - 112px)); }
}
@media(max-width:1000px) {
  :root { --site-header-height:69px; }
  .site-header .wrap.nav-wrap { grid-template-columns:1fr auto; min-height:68px; column-gap:20px; }
  .site-header .wordmark .brand-logo { width:154px; }
  .site-header .nav-actions { display:none; }
  .site-header #site-navigation { grid-column:1/-1; padding:12px 0 20px; }
  .site-header .nav-links { display:grid; justify-content:stretch; gap:4px; }
  .site-header .nav-links > a { justify-content:flex-start; min-height:48px; padding:12px 16px; font-size:16px; border-radius:7px; }
  .site-header .nav-links > a[aria-current]::after { left:5px; right:auto; top:15px; bottom:15px; width:3px; height:auto; }
  .site-header .nav-mobile-actions { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:16px; padding:18px 16px 0; border-top:1px solid #e0e8ed; }
  .site-header .nav-mobile-actions .login { font-size:16px; }
  .site-header[data-nav-ready] .nav-toggle { box-shadow:none; transform:none; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:88px; min-height:44px; padding:10px 13px; border:1px solid #dbe5eb; border-radius:8px; background:#fff; color:#203d4b; font:800 14px/1.3 'Nunito',sans-serif; cursor:pointer; }
  .site-header .nav-toggle:hover,.site-header[data-nav-open] .nav-toggle { border-color:#92bfd7; background:#edf6fb; color:#096f9e; }
  .site-header .nav-toggle-icon { display:grid; align-content:center; gap:5px; width:16px; height:20px; }
  .site-header .nav-toggle-icon i { display:block; width:16px; height:2px; border-radius:2px; background:currentColor; transition:transform .15s; }
  .site-header[data-nav-open] .nav-toggle-icon i:first-child { transform:translateY(3.5px) rotate(45deg); }
  .site-header[data-nav-open] .nav-toggle-icon i:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .site-header[data-nav-ready] #site-navigation { display:none; position:absolute; top:100%; right:0; left:0; max-height:calc(100vh - var(--site-header-height) - 16px); max-height:calc(100dvh - var(--site-header-height) - 16px); overflow-y:auto; padding:16px 24px 24px; background:#fff; border-bottom:1px solid #dce6eb; box-shadow:0 18px 24px -16px #123a5350; }
  .site-header[data-nav-open] #site-navigation { display:block; }
  .site-header[data-nav-ready] #site-navigation > div { max-width:600px; margin-inline:auto; }
}
@media(max-width:650px) {
  .site-header .wrap.nav-wrap { width:calc(100% - 36px); }
  .site-header[data-nav-ready] #site-navigation { padding-inline:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header :is(.button,.nav-links > a,.nav-toggle-icon i) { transition:none; }
  .site-header .button:hover,.site-header .button:active { transform:none; }
}

.site-header a { text-decoration:none; }
.site-header, .site-header * { box-sizing:border-box; }
.site-header .nav-toggle:hover,.site-header .nav-toggle:active { box-shadow:none; transform:none; }
.site-header[data-nav-variant="partners"] .button { background:#087cbd; color:white; border-color:#0872ad; box-shadow:0 5px 0 #085983; }
.site-header[data-nav-variant="partners"] .button:hover { background:#086fa8; box-shadow:0 7px 0 #085983; }
.site-header[data-nav-variant="partners"] .button:active { box-shadow:0 2px 0 #085983; }
@media(max-width:400px){.site-header .nav-mobile-actions{flex-wrap:wrap;gap:12px}.site-header .nav-mobile-actions .button{white-space:normal;text-align:center}}
.skip-link{position:fixed;left:20px;top:-90px;z-index:99;background:#fff;color:#102d3b;padding:14px}
/* Focused, it sits below the header as a pill instead of over the logo. */
.skip-link:focus{top:88px;left:50%;transform:translateX(-50%);border-radius:10px;box-shadow:0 10px 30px #0f2c3b33}