/* ---------------------------------------------------------------------
   Site chrome, September 2026. Header, mobile menu and footer.

   Loaded on every page from doHeadIncludes(). Everything here is prefixed
   .sog2- so it cannot collide with page_template.css, sog.css or faq.css,
   and no bare element is styled. Fonts are the ones the site already
   self-hosts (Gotham) plus Open Sans, which page_template.css imports -
   nothing new is fetched.
   --------------------------------------------------------------------- */

:root{
  --sog-cyan:#29ABE2;
  --sog-cyan-dk:#1487C4;
  --sog-navy:#0E2438;
  --sog-ink:#12222F;
  --sog-ink-2:#4A5C6B;
  --sog-ink-3:#7A8B98;
  --sog-wash:#F1F5F8;
  --sog-rule:#D8E3EA;
  --sog-rule-2:#BFCFDA;
  --sog-disp:"Gotham","Open Sans",-apple-system,"Segoe UI",sans-serif;
  --sog-body:"Open Sans",-apple-system,"Segoe UI",sans-serif;
}

/* ---------- header ---------- */

.sog2-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--sog-rule);
  font-family:var(--sog-body);
}
.sog2-navwrap{
  max-width:1270px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:28px;
  height:66px;
}
.sog2-logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--sog-disp);
  font-weight:300;
  font-size:21px;
  letter-spacing:-.01em;
  color:var(--sog-ink);
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
}
.sog2-logo b{
  font-weight:700;
}
.sog2-logo svg{
  width:17px;
  height:14px;
  flex:0 0 17px;
}
.sog2-links{
  display:flex;
  gap:24px;
  font-size:14.5px;
}
.sog2-links a{
  color:var(--sog-ink-2);
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
}
.sog2-links a:hover{
  color:var(--sog-cyan-dk);
}
.sog2-links a.sog2-on{
  color:var(--sog-ink);
  border-bottom-color:var(--sog-cyan);
}
.sog2-spacer{
  flex:1;
}
.sog2-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}
.sog2-btn{
  display:inline-block;
  background:var(--sog-cyan-dk);
  color:#fff;
  font-family:var(--sog-disp);
  font-weight:700;
  font-size:14px;
  letter-spacing:.01em;
  padding:9px 18px;
  border-radius:4px;
  text-decoration:none;
  border:0;
  cursor:pointer;
}
.sog2-btn:hover{
  background:#0F73A8;
}
.sog2-cart{
  position:relative;
  display:flex;
  align-items:center;
  color:var(--sog-ink-2);
  text-decoration:none;
}
.sog2-cart svg{
  width:22px;
  height:22px;
}
.sog2-cart span{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--sog-cyan-dk);
  color:#fff;
  font-size:11px;
  line-height:17px;
  text-align:center;
  font-family:var(--sog-body);
}
.sog2-burger{
  display:none;
  background:none;
  border:0;
  padding:6px;
  cursor:pointer;
  color:var(--sog-ink);
}
.sog2-burger svg{
  width:24px;
  height:24px;
}
.sog2-mobile{
  border-top:1px solid var(--sog-rule);
  background:#fff;
}
.sog2-mobile a{
  display:block;
  padding:14px 24px;
  color:var(--sog-ink);
  text-decoration:none;
  border-bottom:1px solid var(--sog-rule);
  font-size:16px;
}
.sog2-mobile a:last-child{
  border-bottom:0;
}
[hidden]{
  display:none !important;
}

@media(max-width:900px){
  .sog2-links{
    display:none;
  }
  .sog2-burger{
    display:block;
  }
  .sog2-navwrap{
    padding:0 16px;
    gap:14px;
  }
}
@media(min-width:901px){
  .sog2-mobile{
    display:none;
  }
}
@media(max-width:420px){
  .sog2-logo{
    font-size:18px;
  }
  .sog2-btn{
    padding:9px 13px;
  }
  /* .sog2-actions is flex:0 0 auto, so at 390px the row came to 393px and the document
     picked up 3px of horizontal scroll on every page. Tightening the gap between the
     three controls on the right claws back 8px. The navwrap padding would have been the
     other candidate, but it is already 16px here against .sog-wrap's 24px, so reducing
     it further would widen the misalignment between the logo and the content beneath it. */
  .sog2-actions{
    gap:10px;
  }
}

/* Nothing in the header row shrinks -- the logo is 173px and the three controls 169px --
   so it had a hard floor of 385px and overflowed every viewport below that: 10px on a
   375px iPhone SE or 13 mini, 65px at 320px. Dropping the Buy Now button here frees
   101px (the button plus its gap) and takes the floor to 284px. It is not lost: the
   mobile menu carries its own Buy Now link, which only appears at these widths. */
@media(max-width:380px){
  .sog2-actions .sog2-btn{
    display:none;
  }
}
@media(min-width:381px){
  .sog2-mobile .sog2-mobilebuy{
    display:none;
  }
}
.sog2-mobilebuy{
  color:var(--sog-cyan-dk);
  font-weight:700;
}

/* ---------- footer ---------- */

.sog2-foot{
  background:var(--sog-navy);
  color:#9FB3C2;
  font-family:var(--sog-body);
  font-size:14.5px;
  padding:52px 0 0;
}
.sog2-footwrap{
  max-width:1270px;
  margin:0 auto;
  padding:0 24px;
}
.sog2-foottop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.12);
  flex-wrap:wrap;
}
.sog2-foottop img.sog2-footlogo{
  height:42px;
  width:auto;
}
.sog2-social{
  display:flex;
  gap:12px;
  align-items:center;
}
.sog2-social a{
  display:block;
  opacity:.85;
}
.sog2-social a:hover{
  opacity:1;
}
.sog2-social img{
  height:26px;
  width:auto;
}
.sog2-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  padding:34px 0 10px;
}
.sog2-cols h2{
  color:#fff;
  font-family:var(--sog-disp);
  font-size:14px;
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:.02em;
}
.sog2-cols ul{
  list-style:none;
  margin:0;
  padding:0;
}
.sog2-cols li{
  padding:5px 0;
}
.sog2-cols a{
  color:#9FB3C2;
  text-decoration:none;
}
.sog2-cols a:hover{
  color:#fff;
}
.sog2-below{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:24px;
  padding:18px 0 26px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:#6F8798;
}
.sog2-below a{
  color:#6F8798;
  text-decoration:none;
  margin-left:18px;
}
.sog2-below a:hover{
  color:#fff;
}
.sog2-below p{
  margin:0;
}

@media(max-width:760px){
  .sog2-cols{
    grid-template-columns:1fr 1fr;
  }
  .sog2-below{
    flex-direction:column;
    gap:8px;
  }
  .sog2-below a{
    margin:0 18px 0 0;
  }
}

/* ---------- small footer (message pages) ---------- */

.sog2-minifoot{
  background:var(--sog-navy);
  color:#9FB3C2;
  font-family:var(--sog-body);
  padding:26px 0;
  font-size:13.5px;
}
.sog2-minifoot ul{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  justify-content:center;
}
.sog2-minifoot a{
  color:#9FB3C2;
  text-decoration:none;
}
.sog2-minifoot a:hover{
  color:#fff;
}
.sog2-minifoot p{
  margin:0;
  text-align:center;
  color:#6F8798;
  font-size:12.5px;
}

/* The pages that are not the new home or shop keep their own layout; this
   only removes the gap the old absolutely-positioned header used to need. */
.sog2-body .page-container{
  padding-top:0;
}

/* The header is sticky, so anchor targets need to clear it when jumped to. */
#howitworks,
.sog-home [id]{
  scroll-margin-top:78px;
}