/* Shared chrome for static subpages (/careers/, /privacy/).
   Header and footer mirror the landing's TopNav/Footer in site/app.jsx 1:1 —
   same container, logo size, links and CTA — so switching pages never shifts
   the layout. Keep the two in sync when either changes. */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Reserve the scrollbar lane on every page: short and long pages then have the same
   content width, so the header never shifts sideways when navigating between them. */
html { scrollbar-gutter: stable; }
/* Solid root background: overscroll/rubber-band areas and any canvas outside the page match it. */
html { background: var(--ink-950); }
/* Optional page glow as a fixed, non-repeating layer (a repeating body gradient shows tile seams). */
body.glow::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 60% at 80% 110%, rgba(16,173,255,0.14), transparent 60%) no-repeat;
}
body {
  background: var(--ink-950);
  color: var(--text-body);
  font-family: var(--font-brand);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: rgba(16,173,255,0.3); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; width: 100%; }

/* ---- Header (= TopNav) ---- */
.rh-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,11,20,0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.rh-nav .bar { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }
.rh-nav .logo { display: flex; align-items: center; }
.rh-nav .logo img { height: 26px; display: block; }
.rh-nav .links { display: flex; align-items: center; gap: 30px; }
.rh-nav .links a { font-size: 15px; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color .2s; }
.rh-nav .links a:hover, .rh-nav .links a[aria-current="page"] { color: var(--blue-300); }
.rh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-brand); font-weight: 600; white-space: nowrap; text-decoration: none;
  line-height: normal; /* = <button> on the landing; body's 1.65 would make it taller */
  border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent);
  box-shadow: var(--glow-sm); border: 1px solid transparent; transition: background .2s;
}
.rh-btn:hover { background: var(--accent-hover); }
.rh-btn.sm { padding: 8px 18px; font-size: 14px; }
.rh-btn.lg { padding: 16px 40px; font-size: 17px; }

/* Mobile menu — <details> keeps it JS-free */
.rh-burger { display: none; position: relative; }
.rh-burger summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; color: var(--text-strong);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-default);
}
.rh-burger summary::-webkit-details-marker { display: none; }
.rh-burger summary svg { width: 22px; height: 22px; }
.rh-burger .ico-close { display: none; }
.rh-burger[open] .ico-open { display: none; }
.rh-burger[open] .ico-close { display: block; }
.rh-burger .panel {
  position: fixed; left: 0; right: 0; top: 67px;
  background: rgba(5,11,20,0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle); box-shadow: 0 24px 50px rgba(0,0,0,0.5);
}
.rh-burger .panel .wrap { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; padding-bottom: 20px; }
.rh-burger .panel a.item {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 17px; font-weight: 600; color: var(--text-strong); text-decoration: none;
  padding: 15px 16px; border-radius: 14px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.02);
}
.rh-burger .panel a.item svg { width: 18px; height: 18px; color: var(--blue-400); }
.rh-burger .panel .rh-btn { width: 100%; margin-top: 10px; }

/* ---- Content ---- */
/* Title row: page title on the left, an explicit way back to the landing on the right. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.page-head .titles { max-width: 720px; }
.rh-back {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; line-height: normal;
  padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-blue);
  font-size: 14px; font-weight: 600; color: var(--text-strong); text-decoration: none; transition: background .2s, border-color .2s;
}
.rh-back svg { width: 16px; height: 16px; color: var(--blue-400); }
.rh-back:hover { background: rgba(16,173,255,0.08); border-color: var(--blue-400); }
/* The landing's first screen is a full-height hero, so its footer is never in view on load.
   Subpages match that: the content area fills the viewport and the footer starts below the fold. */
main { flex: 1; min-height: calc(100vh - 67px); min-height: calc(100svh - 67px); padding: 72px 0 96px; }
main.center { display: flex; align-items: center; }
.content { max-width: 720px; }  /* reading measure, left-aligned with the logo like the landing */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-500); margin-bottom: 16px; }
h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 22px; line-height: 1.1; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 700; color: var(--text-strong); margin: 36px 0 12px; letter-spacing: -0.01em; }
p, li { font-size: 16px; color: var(--text-body); margin: 0 0 12px; }
ul { padding-left: 22px; margin: 0 0 12px; }
li { margin-bottom: 6px; }
.content a:not(.rh-btn) { color: var(--blue-500); }

/* Footer: see css/footer.css (shared with the landing) */

@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .rh-nav .links, .rh-nav .cta-desktop { display: none; }
  .rh-burger { display: block; }
  main { padding: 48px 0 72px; }
  .page-head { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
}