/* Shared by every page: the desktop app's HiveTTY theme (dark only), the header, buttons, type and the footer. */
:root {
  color-scheme: dark;
  --bg: #191613; --panel: #1f1b18; --panel-2: #1c1915; --hover: #292520; --active: #342f28;
  --border: #39332d; --border-soft: #2d2824; --ink: #f0eeec; --muted: #b0aba5; --subtle: #9c9792;
  --brand: #ffb348; --green: #74b79c; --red: #ff8d85; --chip: #2c2822; --term: #14110e;
  --brand-fill: #fea91e; --brand-fill-hover: #f19f05; --on-brand: #110f0d;
  --creep: #6a4404; --depth: #0f0d0b;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, Menlo, "SF Mono", monospace;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--panel-2); }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* site chrome */
.site-head .wrap { display: flex; align-items: center; gap: 24px; padding-block: 18px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.logo img { width: 28px; height: 28px; }
.logo .pro { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--on-brand); background: var(--brand-fill); padding: 3px 6px; border-radius: 999px; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: 14px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 14.5px/1 var(--sans); padding: 12px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--muted) 38%, var(--border)); color: var(--ink); white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-fill-hover); }
.btn.sm { padding: 7px 14px; font-size: 13px; }
.fine { font-size: 13px; color: var(--subtle); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.g { background: var(--green); } .dot.a { background: var(--brand-fill); }
.nav a[aria-current="page"] { color: var(--ink); }
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1; letter-spacing: -.04em; font-weight: 700; }
h1 em { font-style: normal; color: var(--brand); }
.lede { font-size: 18px; color: var(--muted); max-width: 42ch; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.site-foot { border-top: 1px solid var(--border); margin-top: 96px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding-block: 28px; font-size: 13.5px; color: var(--subtle); }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot .legal { display: flex; gap: 20px; margin-left: auto; }
@media (max-width: 900px) {
  .nav a.hide-sm { display: none; }
  .site-foot .legal { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}