/* Shared full-width header + footer for the static pages (guides/chrome.py writes the markup). Matches the homepage footer. */
.sh{position:sticky;top:0;z-index:50;width:100%;background:rgba(0,0,0,.62);-webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.sh-in{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:28px}
.sh-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none}
.sh-brand img{width:28px;height:28px;display:block}
.sh-brand b{font-family:Poppins,"Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.04em}
.sh-nav{display:flex;align-items:center;gap:4px;margin-right:auto}
.sh-nav a{color:rgba(255,255,255,.66);text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:999px;transition:color .15s,background .15s}
.sh-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.sh-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.sh-cta{flex:none;display:inline-flex;align-items:center;border-radius:999px;padding:10px 18px;background:#fff;color:#000;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.sh-cta:hover{filter:brightness(.92)}
.sh a:focus-visible,.sf a:focus-visible{outline:2px solid #fff;outline-offset:3px}

.sf{position:relative;width:100%;margin-top:72px;background:#000;border-top:1px solid rgba(255,255,255,.06);padding:56px 24px 40px;font-family:Poppins,"Helvetica Neue",Arial,sans-serif}
.sf-in{max-width:1120px;margin:0 auto}
.sf-grid{display:grid;grid-template-columns:5fr 4fr 3fr 2fr;gap:32px;align-items:start}
.sf-brand p{margin:16px 0 0;max-width:340px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.45)}
.sf-login{display:inline-block;margin-top:12px;font-size:12px;color:rgba(255,255,255,.35);text-decoration:none}
.sf-login:hover{color:rgba(255,255,255,.7)}
.sf-h{margin:0 0 16px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.sf ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sf li{margin:0}
.sf ul a{color:rgba(255,255,255,.65);text-decoration:none;font-size:14px}
.sf ul a:hover{color:#fff}
.sf-bar{margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sf-bar p{margin:0;font-size:12px;color:rgba(255,255,255,.3)}
.sf-bar .sf-tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.25)}

@media (max-width:860px){.sh-nav a:not([href="/guides/"]):not([href="/case/"]){display:none}.sf-grid{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}}
@media (max-width:480px){.sh-in{padding:10px 16px;gap:12px}.sh-brand b{font-size:19px}.sh-cta{padding:9px 14px;font-size:13px}.sf{padding:44px 16px 32px}.sf-grid{grid-template-columns:1fr}.sf-bar{flex-direction:column;align-items:flex-start}}
@media (max-width:480px){.sh-nav a[href="/guides/"]{display:none}}
.sh-nav a{white-space:nowrap}@media (max-width:400px){.sh-in{gap:8px}.sh-brand{gap:7px}.sh-brand img{width:24px;height:24px}.sh-brand b{font-size:17px}.sh-nav{min-width:0;overflow:hidden}.sh-nav a{padding:8px 6px;font-size:13px}.sh-cta{padding:8px 12px}}
@media (max-width:370px){.sh-brand b{display:none}}