/* Origin header: one wordmark + one nav on ø.co, Plugs and Docs.
   Ø ORIGIN | Section        Origin  Plugs  Docs   [Connect]   (☰ on phones) */
.oh {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: calc(58px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: rgba(0, 1, 4, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(243, 236, 224, .08);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.oh--bare { position: absolute; left: 0; right: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.oh--bare .oh__brand, .oh--bare .oh__sec { visibility: hidden; }

.oh__brand { flex: none; display: flex; align-items: center; gap: 10px; color: #f3ece0; text-decoration: none; }
.oh__brand:hover { color: #f3ece0; }
.oh__mark { font: 300 22px/1 "Jost", ui-sans-serif, system-ui, sans-serif; color: #e8c47e; }
.oh__word { font: 400 13px/1 "Jost", ui-sans-serif, system-ui, sans-serif; letter-spacing: .34em; }
.oh__sec { flex: none; padding-left: 12px; border-left: 1px solid rgba(243, 236, 224, .16); font: 400 14px/1 "Jost", ui-sans-serif, system-ui, sans-serif; color: #8a857b; }

.oh__nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.oh__nav a { padding: 8px 13px; border-radius: 999px; color: #bcb5a9; font-size: 14px; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.oh__nav a:hover { color: #f3ece0; background: rgba(255, 255, 255, .05); }
.oh__nav a[aria-current="page"] { color: #fbe3ae; background: rgba(232, 196, 126, .12); }

/* Connect: the shared tinted capsule */
.oh__connect {
  flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 13.5px/1 "Inter", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.005em;
  color: #fbe3ae; background: rgba(232, 196, 126, .15);
  transition: background-color .15s ease, opacity .12s ease; -webkit-tap-highlight-color: transparent;
}
.oh__connect:hover { background: rgba(232, 196, 126, .24); }
.oh__connect:active { opacity: .72; }
.oh__connect.is-on { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 500; }
.oh__connect.is-on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #9fd8a8; vertical-align: 1px; }
.oh__connect[hidden] { display: inline-flex; visibility: visible; } /* always present; label updates when the SDK loads */

.oh__menu {
  display: none; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  place-items: center; color: #fbe3ae; background: rgba(255, 255, 255, .08); transition: background-color .15s ease;
}
.oh__menu:hover { background: rgba(255, 255, 255, .13); }
.oh__menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.oh__sheet {
  position: absolute; top: calc(100% + 8px); right: 12px; min-width: 220px; padding: 8px;
  border-radius: 16px; background: rgba(12, 15, 24, .97); border: 1px solid rgba(243, 236, 224, .08);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  display: flex; flex-direction: column;
}
.oh__sheet[hidden] { display: none; }
.oh__sheet a, .oh__sheet button {
  display: block; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 400 15px/1.2 "Inter", ui-sans-serif, system-ui, sans-serif; color: #f3ece0; text-decoration: none;
}
.oh__sheet a:hover, .oh__sheet button:hover { background: rgba(255, 255, 255, .05); }
.oh__sheet a[aria-current="page"] { color: #fbe3ae; }
.oh__sheet hr { width: 100%; height: 1px; margin: 6px 0; border: 0; background: rgba(243, 236, 224, .08); }

@media (max-width: 760px) {
  .oh__nav { display: none; }
  .oh__connect { margin-left: auto; }
  .oh__menu { display: grid; }
}
@media (max-width: 380px) {
  .oh__word { letter-spacing: .26em; }
  .oh__sec { padding-left: 10px; }
}