/* The ScrollShot site header.
   One file, linked by all four public pages, so the header cannot drift between
   them. It carries its own colours under an --h- prefix rather than reading each
   page's tokens, because the legal pages and the homepage use slightly different
   palettes and the header must look identical on all of them. */
:root{
  --h-bg:#f5f5f3; --h-surface:#fff; --h-ink:#0e0e0e; --h-ink2:#5f5f5c; --h-ink3:#9a958f;
  --h-rule:#e4e1dc; --h-accent:#e63d2e;
  --h-lift:0 12px 34px rgba(0,0,0,.08); --h-lift2:0 26px 70px rgba(0,0,0,.14);
}
@media (prefers-color-scheme:dark){
  :root{
    --h-bg:#0b0b0b; --h-surface:#151515; --h-ink:#f2f1ef; --h-ink2:#a3a09b; --h-ink3:#726e69;
    --h-rule:#262626; --h-accent:#ff5b4a;
    --h-lift:0 12px 34px rgba(0,0,0,.5); --h-lift2:0 26px 70px rgba(0,0,0,.6);
  }
}
.ss-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--h-bg) 86%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--h-rule);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ss-head .ss-bar{display:flex;align-items:center;justify-content:space-between;height:60px;
  width:100%;max-width:1140px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.ss-mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--h-ink);
  font-weight:650;letter-spacing:-.022em;font-size:17px;line-height:1}
.ss-mark img{width:26px;height:26px;border-radius:7px;display:block;flex:0 0 auto}
.ss-mark:hover{opacity:.82}

.ss-get,.ss-get-m{position:relative}
.ss-get>summary,.ss-get-m{display:inline-flex;align-items:center;height:36px;padding:0 15px;
  border-radius:10px;background:var(--h-ink);color:var(--h-bg);font-size:14.5px;font-weight:600;
  letter-spacing:-.012em;text-decoration:none;cursor:pointer;list-style:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.16);transition:opacity .16s,transform .16s}
.ss-get>summary::-webkit-details-marker{display:none}
.ss-get>summary::marker{content:""}
.ss-get>summary:hover,.ss-get-m:hover{opacity:.86}
.ss-get>summary:active,.ss-get-m:active{transform:translateY(1px)}
.ss-get>summary:focus-visible,.ss-get-m:focus-visible{outline:2px solid var(--h-accent);outline-offset:3px}

.ss-pop{position:absolute;top:calc(100% + 12px);right:0;width:214px;padding:18px 18px 15px;
  background:var(--h-surface);border:1px solid var(--h-rule);border-radius:18px;
  box-shadow:var(--h-lift2);text-align:center;z-index:50}
.ss-get[open] .ss-pop{animation:ss-pop .18s cubic-bezier(.22,1,.36,1) both}
@keyframes ss-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.ss-pop img.ss-pop-icon{width:54px;height:54px;border-radius:13px;margin:0 auto 10px;display:block;
  box-shadow:var(--h-lift)}
.ss-pop .ss-pop-title{margin:0 0 12px;font-size:15px;font-weight:650;letter-spacing:-.018em;color:var(--h-ink)}
.ss-pop img.ss-pop-qr{width:132px;height:132px;margin:0 auto;display:block;border-radius:6px;background:#fff}
.ss-pop .ss-pop-cap{margin:12px 0 0;font-size:13px;color:var(--h-ink2)}
.ss-pop .ss-pop-meta{margin:4px 0 0;font-size:11.5px;color:var(--h-ink3);letter-spacing:.02em}

/* A QR you would scan with the device already in your hand is a puzzle, not a
   shortcut, so phones get a plain CTA instead. */
.ss-get{display:none}
.ss-get-m{display:inline-flex}
@media(min-width:700px){.ss-get{display:block}.ss-get-m{display:none}}
@media (prefers-reduced-motion:reduce){
  .ss-get[open] .ss-pop{animation:none}
  .ss-get>summary,.ss-get-m{transition:none}
}