/* Super Tech Hero site header, shared by c.supertechhero.com pages.
   Usage: <link rel="stylesheet" href="/assets/site-header.css"> in <head>,
   plus Bebas Neue from Google Fonts, then the header markup right after <body>. */
.sth-bar { --sth-slate: #48546a; --sth-gold: #f5c800; --sth-ink: #2a2218;
  position: sticky; top: 0; z-index: 50; background: var(--sth-slate); color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 18px rgba(16,24,40,.08); }
.sth-bar .sth-inner { max-width: 1080px; margin: 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sth-bar .sth-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; flex: 1 1 auto; }
.sth-bar .sth-brand img { width: 38px; height: 38px; border-radius: 50%; display: block; flex: none; }
.sth-bar .sth-brand span { font-family: "Bebas Neue", "Inter", system-ui, sans-serif; font-size: 25px; letter-spacing: .06em; line-height: 1; padding-top: 3px; white-space: nowrap; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sth-bar .sth-links { display: flex; align-items: center; gap: 18px; flex: none; }
.sth-bar .sth-link { color: rgba(255,255,255,.86); text-decoration: none; font-size: 14px; font-weight: 500; }
.sth-bar .sth-link:hover, .sth-bar .sth-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; outline: none; }
.sth-bar .sth-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--sth-gold); color: var(--sth-ink); text-decoration: none;
  font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; white-space: nowrap; transition: transform .15s ease; }
.sth-bar .sth-btn:hover, .sth-bar .sth-btn:focus-visible { transform: translateY(-1px); outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 360px) { .sth-bar .sth-brand span { display: none; } }
@media (max-width: 560px) {
  .sth-bar .sth-inner { height: 56px; }
  .sth-bar .sth-link { display: none; }
  .sth-bar .sth-brand span { font-size: 22px; }
  .sth-bar .sth-btn { padding: 8px 13px; font-size: 13px; }
}

/* Shared footer (variation of the Jumpstart footer) */
.sth-foot { background: #48546a; color: rgba(255,255,255,.8); text-align: center; padding: 26px 20px 30px; font-size: 14px; line-height: 1.6; margin-top: 48px; }
.sth-foot p { margin: 0 auto; max-width: 720px; text-wrap: pretty; }
.sth-foot a { color: #f5c800; text-decoration: none; }
.sth-foot a:hover, .sth-foot a:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }

/* "What else?" menu (opt-in: add the .sth-where markup + /assets/site-nav.js) */
.sth-bar .sth-inner { position: relative; }
.sth-where { position: relative; flex: none; }
.sth-where-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.35);
  font: 500 14px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sth-where-btn:hover, .sth-where-btn[aria-expanded="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.sth-where-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sth-where-btn svg { width: 16px; height: 16px; flex: none; }
.sth-where-btn kbd { font: 500 11px/1 inherit; font-family: inherit; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 3px 5px; }
.sth-where-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: #fff; color: var(--sth-ink);
  border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.sth-where.open .sth-where-panel { opacity: 1; transform: none; pointer-events: auto; }
.sth-where-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 9px;
  color: var(--sth-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.sth-where-panel a small { font-size: 12px; font-weight: 500; color: #7a7f8a; white-space: nowrap; }
.sth-where-panel a:hover, .sth-where-panel a:focus-visible { background: #f4f1e8; outline: none; }
.sth-where-panel a:hover small, .sth-where-panel a:focus-visible small { color: #48546a; }
.sth-where-panel a[aria-current="page"] small { color: #9a7b00; }
.sth-where-panel hr { border: 0; border-top: 1px solid #ece8dc; margin: 4px 8px; }
@media (hover: none) { .sth-where-btn kbd { display: none; } }
@media (max-width: 560px) {
  .sth-where { position: static; }
  .sth-where-btn { height: 34px; padding: 0 11px; font-size: 13px; }
  .sth-where-btn kbd { display: none; }
  .sth-where-panel { left: 12px; right: 12px; width: auto; top: calc(100% + 8px); }
  .sth-where-panel a { padding: 14px 14px; font-size: 16px; }
}
@media (max-width: 440px) {
  .sth-bar .sth-brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sth-where-panel { transition: none; } }