/* One header for every marketing page (Q-7): the homepage, guides, hubs, compare, /for/, tools and trends.
   Markup: content/templates/header.html. Loaded last on content pages, so older generic `header` rules in
   guides.css and editorial.css never reach it (selectors start at `body header.site-head`).
   Same geometry as the homepage design: a 1320px row with 5% side padding, on a full-width cream band. */
body header.site-head{--sh-ink:#242323;--sh-cream:#f4efe9;--sh-blue:#86a9ed;--sh-font:'TikTok Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 position:relative;z-index:30;box-sizing:border-box;width:100%;max-width:none;min-height:0;margin:0;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:28px;
 padding:20px max(5%,calc((100% - 1320px)/2 + 66px));background:var(--sh-cream);border:0;font-family:var(--sh-font);color:var(--sh-ink)}
body header.site-head a{color:var(--sh-ink);text-decoration:none}
body header.site-head .site-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;margin:0;font:800 22px/1 var(--sh-font);letter-spacing:-.03em}
body header.site-head .site-logo img{width:36px;height:36px;display:block}
body header.site-head .site-nav{display:flex;align-items:center;gap:26px;margin-left:auto;padding:0;font-size:15px;font-weight:600;font-family:var(--sh-font)}
body header.site-head .site-nav a,body header.site-head .site-menu nav a{display:inline;padding:0;border:0;white-space:nowrap;font-weight:600}
body header.site-head .site-nav a:hover,body header.site-head .site-menu nav a:hover{text-decoration:underline;text-underline-offset:5px}
body header.site-head .site-cta{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:0;margin:0;padding:10px 18px;border-radius:999px;background:#fff;color:var(--sh-ink);border:2px solid var(--sh-ink);box-shadow:0 3px 0 var(--sh-ink);font:600 14px/1.2 var(--sh-font);white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
body header.site-head .site-cta:hover{background:var(--sh-blue);color:var(--sh-ink);transform:translateY(-1px);box-shadow:0 4px 0 var(--sh-ink)}
body header.site-head .site-menu{display:none;position:static;width:auto;margin:0;border:0;order:0}
body header.site-head .site-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:999px;border:2px solid var(--sh-ink);background:#fff;color:var(--sh-ink);cursor:pointer}
body header.site-head .site-menu summary::-webkit-details-marker{display:none}
body header.site-head .site-menu summary::after{content:none}
body header.site-head .site-menu summary svg{width:20px;height:20px;fill:none;stroke:var(--sh-ink);stroke-width:2.2;stroke-linecap:round}
body header.site-head .site-menu .menu-close,body header.site-head .site-menu[open] .menu-open{display:none}
body header.site-head .site-menu[open] .menu-close{display:inline}
body header.site-head .site-menu nav{position:absolute;top:calc(100% - 6px);left:16px;right:16px;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0;padding:14px 18px;background:#fff;border:2px solid var(--sh-ink);border-radius:22px;box-shadow:0 6px 0 rgba(36,35,35,.12);font-size:16px;font-weight:600}
body header.site-head .site-menu nav a{display:block;padding:10px 0}
@media(max-width:1060px){body header.site-head{gap:20px}body header.site-head .site-nav{gap:18px;font-size:14px}}
@media(max-width:960px){
 body header.site-head{gap:10px;padding:14px 16px}
 body header.site-head .site-nav{display:none}
 body header.site-head .site-cta{margin-left:auto;padding:9px 14px;font-size:14px}
 body header.site-head .site-menu{display:block}
}
@media(max-width:360px){body header.site-head .site-logo{font-size:19px;gap:8px}body header.site-head .site-logo img{width:28px;height:28px}body header.site-head .site-cta{padding:8px 12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){body header.site-head .site-cta{transition:none}body header.site-head .site-cta:hover{transform:none}}