/* ============================================================
   THEWATCH shared marketing header.
   One copy of the header for every public page. site-header.js
   renders the markup into <header id="site-header"> and adds the
   .sh root class. Everything here is scoped under .sh and uses its
   own --sh-* tokens, so the header looks the same whatever tokens
   the host page defines (index.html's futuristic tokens or
   assets/styles.css's older ones).
   Theme convention (same as the rest of the site): bare :root is
   DARK, :root[data-theme="light"] is LIGHT, and the choice lives in
   localStorage under "proveit_theme".
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;450;500;600;700;800&family=Orbitron:wght@600;700;800;900&display=swap');

.sh{
  /* DARK palette (the toggle target) */
  --sh-ink:#f3f3f7; --sh-muted:#9b9baa; --sh-faint:#6a6a78;
  --sh-line:rgba(255,255,255,.09); --sh-line2:rgba(255,255,255,.05);
  --sh-glass2:rgba(255,255,255,.07);
  --sh-blue:#3b82f6; --sh-blue-ink:#5b9dff;
  --sh-glow-blue:rgba(59,130,246,.55);
  --sh-bg:rgba(8,8,11,.66);
  --sh-btn-grad:linear-gradient(180deg,#4d90ff,#1f5fd9);
  --sh-btn-shadow:0 0 0 1px rgba(91,157,255,.4), 0 10px 34px -8px var(--sh-glow-blue);
  --sh-btn-shadow-hover:0 0 0 1px rgba(120,170,255,.6), 0 14px 46px -8px var(--sh-glow-blue);
  --sh-glass-shadow:none; --sh-glass-hover-border:rgba(255,255,255,.24);
}
:root[data-theme="light"] .sh{
  /* LIGHT palette (the default a normal visitor sees) */
  --sh-ink:#141319; --sh-muted:#5c5b68; --sh-faint:#9796a4;
  --sh-line:rgba(20,19,30,.11); --sh-line2:rgba(20,19,30,.06);
  --sh-glass2:rgba(255,255,255,.92);
  --sh-blue:#2f6fed; --sh-blue-ink:#1f5fd9;
  --sh-glow-blue:rgba(47,111,237,.34);
  --sh-bg:rgba(244,245,248,.72);
  --sh-btn-grad:linear-gradient(180deg,#3b82f6,#1f5fd9);
  --sh-btn-shadow:0 10px 30px -8px var(--sh-glow-blue);
  --sh-btn-shadow-hover:0 16px 44px -8px var(--sh-glow-blue);
  --sh-glass-shadow:0 1px 2px rgba(20,19,30,.05), 0 26px 60px -34px rgba(20,19,30,.30);
  --sh-glass-hover-border:rgba(20,19,30,.24);
}

/* root + local resets so host page CSS cannot leak in */
.sh{position:sticky; top:0; z-index:100; display:block; border-bottom:1px solid var(--sh-line2); background:var(--sh-bg); -webkit-backdrop-filter:saturate(1.3) blur(16px); backdrop-filter:saturate(1.3) blur(16px);
  color:var(--sh-ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.6; letter-spacing:-.012em; -webkit-font-smoothing:antialiased; text-align:left;}
.sh *, .sh *::before, .sh *::after{box-sizing:border-box; margin:0; padding:0;}
.sh a{color:inherit; text-decoration:none;}
.sh ul{list-style:none;}
.sh img{max-width:100%; display:inline-block;}
.sh button{font:inherit; letter-spacing:inherit;}

.sh-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(18px,4vw,44px); max-width:1340px; margin:0 auto;}

/* brand lockup */
.sh-brand{display:flex; align-items:center; gap:14px;}
.sh-brand img.sh-mark{height:38px; width:auto; flex-shrink:0; display:block;}
.sh-parent{display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; padding-right:14px; border-right:1px solid var(--sh-line); margin-right:2px;}
.sh-parent .sh-top{font-family:'Anton',sans-serif; font-weight:400; font-size:14px; color:var(--sh-ink); white-space:nowrap;}
.sh-parent .sh-it{color:var(--sh-blue-ink);}
.sh-parent .sh-sub{font-family:'IBM Plex Mono',monospace; font-size:7.5px; letter-spacing:.22em; color:var(--sh-faint); text-transform:uppercase; white-space:nowrap; margin-top:2px;}
.sh-name{font-family:'Orbitron',sans-serif; font-weight:800; font-size:19px; letter-spacing:.02em; line-height:1; color:var(--sh-ink);}
.sh-name .sh-accent{color:var(--sh-blue-ink);}
.sh-tag{font-family:'Barlow Condensed',sans-serif; font-size:9.5px; line-height:1.6; color:var(--sh-faint); letter-spacing:.1em; text-transform:uppercase; margin-top:3px;}

/* primary links */
.sh-links{display:flex; align-items:center; gap:22px;}
.sh-links a{font-size:14px; font-weight:500; color:var(--sh-muted); padding-bottom:18px; position:relative; line-height:1; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; transition:color .15s;}
.sh-links a:hover{color:var(--sh-ink);}
.sh-links a.sh-active{color:var(--sh-ink);}
.sh-links a.sh-active::after{content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--sh-blue); border-radius:2px; box-shadow:0 0 10px var(--sh-glow-blue);}
.sh-links a.sh-menu-only{display:none;}

/* actions */
.sh-actions{display:flex; align-items:center; gap:12px;}
.sh-actions a.sh-login{font-size:14px; font-weight:500; line-height:1.6; color:var(--sh-muted); white-space:nowrap; transition:color .15s;}
.sh-actions a.sh-login:hover{color:var(--sh-ink);}
.sh-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:13px; line-height:1.6; padding:10px 18px; border-radius:12px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:transform .1s, box-shadow .25s, background .2s, border-color .2s;}
.sh-btn:active{transform:translateY(1px);}
.sh-btn-primary{background:var(--sh-btn-grad); color:#fff; box-shadow:var(--sh-btn-shadow);}
.sh a.sh-btn-primary{color:#fff;}
.sh-btn-primary:hover{box-shadow:var(--sh-btn-shadow-hover); transform:translateY(-1px);}
.sh-btn-glass{background:var(--sh-glass2); color:var(--sh-ink); border-color:var(--sh-line); box-shadow:var(--sh-glass-shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.sh-btn-glass:hover{border-color:var(--sh-glass-hover-border);}

.sh-theme{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--sh-line); background:var(--sh-glass2); color:var(--sh-muted); cursor:pointer; transition:color .15s, border-color .15s; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); flex-shrink:0;}
.sh-theme:hover{color:var(--sh-ink); border-color:var(--sh-blue);}
.sh-theme svg{display:block;}
.sh-theme .sh-i-sun{display:block;}
.sh-theme .sh-i-moon{display:none;}
:root[data-theme="light"] .sh-theme .sh-i-sun{display:none;}
:root[data-theme="light"] .sh-theme .sh-i-moon{display:block;}
.sh.sh-no-theme .sh-theme{display:none;}

.sh-burger{display:none; align-items:center; justify-content:center; background:var(--sh-glass2); border:1px solid var(--sh-line); color:var(--sh-ink); font-size:18px; cursor:pointer; line-height:1; width:40px; height:40px; border-radius:10px; flex-shrink:0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}

/* Full row (brand lockup + 7 links + Log in + 2 CTAs + toggle) needs
   about 1230px. As the screen narrows: the parent lockup goes first,
   then (981-1279px, common laptops and landscape tablets) the "Book a
   demo" button hides and link spacing tightens so the full nav stays
   visible, and only at 980px and below does the nav move behind the
   hamburger (same breakpoint the original home page header used). */
@media(max-width:1359px){ .sh-parent{display:none;} }
@media(min-width:981px) and (max-width:1279px){
  .sh-actions .sh-cta-demo{display:none;}
  .sh-inner{gap:12px; padding-left:20px; padding-right:20px;}
  .sh-brand{flex-shrink:0;} .sh-brand *{white-space:nowrap;}
  .sh-links{gap:14px;}
  .sh-links a{font-size:13px;}
  .sh-actions{gap:10px;}
}
@media(max-width:980px){
  .sh-inner{flex-wrap:wrap;}
  .sh-burger{display:flex;}
  .sh-actions .sh-cta-demo{display:none;}
  .sh-links{display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; order:4; margin-top:14px; border-top:1px solid var(--sh-line);}
  .sh.sh-open .sh-links{display:flex;}
  .sh-links a{padding:14px 4px; border-bottom:1px solid var(--sh-line2); color:var(--sh-muted);}
  .sh-links a.sh-active{color:var(--sh-blue-ink);}
  .sh-links a.sh-active::after{display:none;}
  .sh-links a.sh-menu-only{display:inline-flex; color:var(--sh-blue-ink); font-weight:600;}
}

@media (prefers-reduced-motion:reduce){
  .sh-btn:hover{transform:none;}
}