/* Shared site header: the one stylesheet behind every page's header.
   Markup comes from one generator, src/lib/site-header.ts: the raw home
   pages (src/home/*.html, via the html.siteHeader copy token) and the Astro
   pages (components/Header.astro, via layouts/Base.astro) both render it, so
   the two can no longer drift apart. Designed on the home page (home.css had
   these rules before they moved here); every rule is scoped to .site-head or
   an sh- class so it behaves the same next to home.css and next to the
   Tailwind-based global.css. The palette below repeats the home page values
   on purpose: the header must look identical where --bg and friends do not
   exist. No inline styles (CSP style-src 'self'). */
.site-head{
  --bg:#f4f5f7;--bg-2:#ffffff;--text:#0f1b2d;--text-2:#4d5566;--line:#dde1e7;--line-2:#e9ecf0;
  --accent:#2b4c9b;--accent-ink:#ffffff;--nile:#0f1b2d;
  --sans:"Inter Tight",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w:1120px;--gutter:clamp(20px,4vw,40px);
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
  color:var(--text);font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.55;letter-spacing:normal;text-align:left;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  .site-head{--bg:#0f1b2d;--bg-2:#16243a;--text:#eef1f5;--text-2:#b4bccb;--line:#2a3850;--line-2:#22304a;--accent:#9db4e6;--accent-ink:#0f1b2d}
}
:where(.site-head),:where(.site-head) *,:where(.site-head) *::before,:where(.site-head) *::after{box-sizing:border-box}
:where(.site-head) a{color:var(--accent);text-decoration:none}
:where(.site-head) a:hover{text-decoration:underline}
:where(.site-head) :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sh-wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}

/* Logo lockup (brand guide 2 and 3), geometry from the 48-unit grid of the
   wordmark file, scaled to a 34px mark: "restow" Inter Tight 700 at -0.03em,
   "backup" IBM Plex Mono 400 at about 70 % of the cap height (Silt light,
   #A7B0BD dark), both on one baseline that sits 14/48 of the mark above its
   bottom edge (the word box is as tall as the mark, so centring the two
   reproduces that). The same classes serve the home page footer, where the
   header's custom properties do not exist, so nothing here reads a variable
   without a fallback. */
.sh-brand{display:inline-flex;align-items:center;color:var(--text,#0f1b2d);text-decoration:none!important}
.sh-brand .rs-mark{display:block;width:34px;height:34px;flex:none}
.sh-word{display:block;height:34px;margin-left:7px;line-height:34px;white-space:nowrap}
.rs-mark .rs-hold{stroke:#0f1b2d}
.rs-mark .rs-bar{fill:#2b4c9b}
.sh-w1{font-family:"Inter Tight",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:21px;letter-spacing:-0.03em;line-height:1;color:#0f1b2d}
.sh-w2{font-family:var(--mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:15px;font-weight:400;letter-spacing:0;line-height:1;color:#6b7486;margin-left:17.5px}
@media (prefers-color-scheme:dark){
  .rs-mark .rs-hold{stroke:#f4f5f7}
  .rs-mark .rs-bar{fill:#9db4e6}
  .sh-w1{color:#f4f5f7}
  .sh-w2{color:#a7b0bd}
}

.sh-nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:500}
.sh-nav a{color:var(--text)}
.sh-nav a:hover{color:var(--accent);text-decoration:none}
.sh-nav-demo{display:none}
@media (max-width:1100px){.sh-nav{gap:16px;font-size:14.5px}}

.sh-right{display:flex;align-items:center;gap:14px}
.sh-lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px}
.sh-lang a{padding:5px 7px;border-radius:5px;color:var(--text-2)}
.sh-lang a[aria-current]{background:var(--nile);color:#fff}
@media (prefers-color-scheme:dark){.site-head .sh-lang a[aria-current]{background:#fff;color:var(--nile)}}

.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;border-radius:8px;font-family:var(--sans);font-weight:600;font-size:14px;line-height:1;border:1px solid transparent;cursor:pointer;text-decoration:none!important}
.sh-btn-primary{background:var(--accent);color:var(--accent-ink)}
.sh-btn-primary:hover{filter:brightness(1.08)}
.sh-btn-secondary{background:var(--bg-2);color:var(--text);border-color:var(--line)}
.sh-btn-secondary:hover{border-color:var(--text-2)}
.sh-menu-btn{display:none;font:inherit;background:none;border:1px solid var(--line);border-radius:7px;width:38px;height:38px;padding:0;cursor:pointer;color:var(--text);align-items:center;justify-content:center}
.sh-menu-btn svg{display:inline;width:20px;height:20px}

/* Compare dropdown (hover, keyboard via :focus-within) */
.sh-dd{position:relative;display:flex;align-items:center}
.sh-dd-top{display:inline-flex;align-items:center;gap:6px}
.sh-caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.sh-dd-menu{position:absolute;top:100%;left:-14px;min-width:250px;margin-top:10px;display:flex;flex-direction:column;padding:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,27,45,.14);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:60}
.sh-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sh-dd-menu a{padding:9px 12px;border-radius:8px;font-size:14.5px;white-space:nowrap}
.sh-dd-menu a:hover,.sh-dd-menu a:focus-visible{background:var(--bg);color:var(--accent);text-decoration:none}
.sh-dd-menu a:last-child{margin-top:4px;border-top:1px solid var(--line-2);border-radius:0 0 8px 8px;font-weight:600}
.sh-dd:hover .sh-dd-menu,.sh-dd:focus-within .sh-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
.sh-dd:hover .sh-caret,.sh-dd:focus-within .sh-caret{transform:translateY(1px) rotate(225deg)}
@media (prefers-reduced-motion:reduce){.sh-dd-menu,.sh-caret{transition:none}}

/* Compare mega panel (tiles) */
.sh-dd-panel{width:min(780px,calc(100vw - 32px));left:50%;padding:18px 18px 12px;transform:translate(-50%,-6px)}
.sh-dd:hover .sh-dd-panel,.sh-dd:focus-within .sh-dd-panel{transform:translate(-50%,0)}
.sh-dd-panel .sh-dd-title{margin:0 4px 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.sh-dd-panel .sh-dd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sh-dd-panel a.sh-dd-tile{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line-2);border-radius:12px;white-space:normal;margin:0;font-size:14px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.sh-dd-panel a.sh-dd-tile:last-child{border-top:1px solid var(--line-2);border-radius:12px;margin:0;font-weight:inherit}
.sh-dd-panel a.sh-dd-tile:hover,.sh-dd-panel a.sh-dd-tile:focus-visible{border-color:var(--accent);background:var(--bg);transform:translateY(-1px);color:inherit}
.sh-dd-mono{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:700;font-size:15px}
.sh-dd-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sh-dd-name{font-weight:600;color:var(--text)}
.sh-dd-desc{font-size:12.5px;line-height:1.35;color:var(--text-2)}
.sh-dd-kind{margin-top:5px;align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--text-2)}
.sh-dd-panel .sh-dd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:12px;padding:10px 4px 0;border-top:1px solid var(--line-2)}
.sh-dd-panel .sh-dd-foot a{padding:4px 0;font-weight:600;color:var(--accent);border:0;margin:0;background:none}
.sh-dd-panel .sh-dd-foot a:hover{background:none;text-decoration:underline}
.sh-dd-panel a.sh-dd-cta{align-items:center;background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2))}
.sh-dd-panel a.sh-dd-cta .sh-dd-mono{background:var(--accent);color:var(--accent-ink)}
.sh-dd-panel a.sh-dd-cta .sh-dd-name{color:var(--accent)}
@media (max-width:1100px){.sh-dd-panel .sh-dd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phones and small tablets: the links move into a menu panel under the bar */
@media (max-width:860px){
  .sh-nav{display:none;position:absolute;left:0;right:0;top:64px;max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px);overflow-y:auto;background:var(--bg-2);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 14px}
  .sh-nav a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .sh-nav a:last-child{border:0}
  .sh-nav.open{display:flex}
  .sh-nav.open .sh-nav-demo{display:block}
  .sh-menu-btn{display:inline-flex}
  .sh-demo{display:none}
  .sh-buy{padding:7px 11px;font-size:13px}
  .sh-dd{display:block}
  .sh-dd-top{padding:12px 0;width:100%;border-bottom:1px solid var(--line-2)}
  .sh-caret{display:none}
  .sh-dd-menu{position:static;opacity:1;visibility:visible;transform:none;margin:0 0 6px;padding:4px 0 4px 12px;border:0;box-shadow:none;background:transparent;min-width:0}
  .sh-dd-menu a{padding:8px 0;border-radius:0}
  .sh-dd-menu a:last-child{border-top:0;margin-top:0}
  .sh-dd-panel{width:auto;transform:none!important;padding:4px 0 8px}
  .sh-dd-panel .sh-dd-title{display:none}
  .sh-dd-panel .sh-dd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sh-dd-panel a.sh-dd-tile{padding:8px;gap:8px}
  .sh-dd-panel .sh-dd-desc{display:none}
  .sh-dd-mono{width:26px;height:26px;font-size:13px}
}
@media (max-width:480px){
  .sh-right{gap:8px}
  .sh-lang a{padding:4px 5px}
  .sh-w2{display:none}
}