/* SquidGrid shared chrome — header, footer, legal.
   ---------------------------------------------------------------------------
   Loaded by every public page so the three surfaces read as one product.

   Colours are written as explicit hex rather than var(--x) on purpose. Each
   page carries its own :root and they do not agree; a shared component that
   inherits three different palettes is not shared, it just looks shared until
   somebody edits one of them.

   Everything is namespaced sg- so it cannot collide with a page's own rules.
   That mattered once already: a chain connector took the revoke button's class
   and inherited 12px of its padding.
   --------------------------------------------------------------------------- */

.sgnav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:22px;
  padding:0 clamp(20px,5vw,84px);height:54px;background:rgba(7,4,13,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid #241839;
  font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif}
.sgnav a{color:#A093C4;text-decoration:none;transition:color .15s}
.sgnav a:hover,.sgnav a:focus-visible{color:#F4F0FC}
.sgnav a.on{color:#F4F0FC}
.sgnav .sgbrand{display:flex;align-items:center;color:#F4F0FC;
  font-weight:700;letter-spacing:.02em;margin-right:6px}
/* THE MARK IS 139x192. Forcing a square box on it squashed the squid flat.
   Height is set and width follows, so it keeps its own proportions wherever it
   is placed. */
.sgnav .sgbrand img{height:21px;width:auto;display:block;margin-right:9px}
/* Sampled from the logo itself: #E45400 is the dominant saturated colour in
   the mark, with green second. The purple this used to be appears nowhere in
   the artwork -- it was the dark body shading, not a brand colour. */
.sgnav .sgbrand i{color:#E45400;font-style:normal}
.sgnav .sgsp{margin-left:auto}
.sgnav .sgcta{color:#07040D;background:#2BFF9E;padding:6px 13px;border-radius:5px;
  font-weight:650}
.sgnav .sgcta:hover{color:#07040D;filter:brightness(1.08)}

.sgfoot{border-top:1px solid #241839;background:#07040D;color:#6B5F8C;
  padding:38px clamp(20px,5vw,84px) 46px;
  font:400 12.5px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif}
.sgfoot a{color:#A093C4;text-decoration:none}
.sgfoot a:hover,.sgfoot a:focus-visible{color:#F4F0FC;text-decoration:underline}
.sgfoot .sgcols{display:flex;flex-wrap:wrap;gap:34px 58px;margin-bottom:26px}
.sgfoot h4{margin:0 0 9px;color:#F4F0FC;font-size:11px;font-weight:650;
  letter-spacing:.09em;text-transform:uppercase}
.sgfoot ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.sgfoot .sgbrandcol{min-width:224px}
.sgfoot .sgbrandcol .m{color:#F4F0FC;font-weight:700;letter-spacing:.02em;
  font-size:13px;margin-bottom:7px}
.sgfoot .sgbrandcol .m i{color:#E45400;font-style:normal}
.sgfoot .sglegal{border-top:1px solid #1a1229;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.sgfoot .sglegal p{margin:0;max-width:74ch}
.sgfoot .sgmarks{color:#5a4f78}

@media (max-width:640px){
  /* Measured at 375px: brand + live counter + "Sign in" + the CTA button came
     to 387px of content in a 375px viewport, so the whole page scrolled
     sideways -- the single clearest signal to a phone user that a site was
     never opened on one. The live counter is the item that goes: it is the
     least load-bearing thing in the bar and the same number is stated in the
     hero directly below it. */
  .sgnav{gap:12px;height:50px;padding:0 16px}
  .sgnav .sghide,
  .sgnav .live{display:none}
  .sgnav .sgcta{padding:6px 11px}
  .sgfoot{padding:30px 16px 38px}
  .sgfoot .sgcols{gap:26px 34px}
  .sgprose{padding:38px 16px 56px}
}

/* Long-form pages: probe info, privacy, terms. One measure, one scale. */
body.sgdoc{margin:0;background:#07040D;color:#F4F0FC;
  font:400 15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
.sgprose{max-width:74ch;margin:0 auto;padding:54px clamp(20px,5vw,84px) 76px}
.sgprose h1{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 10px;letter-spacing:-.02em}
.sgprose .lede{color:#A093C4;font-size:17px;margin:0 0 14px}
.sgprose .upd{color:#6B5F8C;font-size:12.5px;margin:0 0 40px}
.sgprose h2{font-size:19px;margin:40px 0 12px;letter-spacing:-.01em}
.sgprose h3{font-size:15px;margin:24px 0 8px;color:#F4F0FC}
.sgprose p,.sgprose li{color:#CFC6E6}
.sgprose a{color:#2BFF9E}
.sgprose ul{padding-left:20px}
.sgprose code{font:13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:#120C22;border:1px solid #241839;border-radius:4px;padding:1px 6px;color:#F4F0FC}
.sgprose table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px}
.sgprose th,.sgprose td{text-align:left;padding:9px 12px;border-bottom:1px solid #241839;vertical-align:top}
.sgprose th{color:#A093C4;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.sgprose .box{border:1px solid #241839;background:#0B0716;border-radius:8px;padding:18px 20px;margin:22px 0}
.sgprose .box b{color:#2BFF9E}
.sgprose .caps{text-transform:none;background:#0B0716;border:1px solid #241839;
  border-radius:8px;padding:18px 20px;margin:22px 0;color:#CFC6E6}

/* View switch between the two authenticated views. */
.sgviews{display:flex;gap:2px;margin-left:8px;background:rgba(255,255,255,.05);
  border-radius:7px;padding:2px}
.sgviews a{color:#A093C4;text-decoration:none;padding:6px 12px;border-radius:5px;
  white-space:nowrap;font-weight:600}
.sgviews a:hover{color:#F4F0FC}
.sgviews a.on{background:rgba(255,255,255,.10);color:#F4F0FC}
@media (max-width:820px){ .sgviews{display:none} }