/* RigX shared base: tokens, type, the nav capsule, the wordmark, buttons, focus rings and the footer.
   Loaded by the landing page and the legal pages, so every page looks like the same site. */
:root { --bg: #0f0f0f; --ink: rgba(255,255,255,0.92); --soft: rgba(255,255,255,0.7); --muted: rgba(255,255,255,0.55);
  --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.16); --accent: #df5a4b; --f: "Outfit", system-ui, sans-serif; }
* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
html, body { margin: 0; background: var(--bg); color: var(--soft); font: 400 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; }
/* nav: a compact pill, centred, that hugs the mark and the call to action. Always there at the top of the page; it
   slips away while you scroll down and comes back as soon as you scroll up (landing.js adds .away). It is centred with
   auto margins and moves by its top edge, never by transform, which browsers redraw badly under a blurred backdrop. */
.nav { --nav-top: 12px; position: fixed; z-index: 10; top: var(--nav-top); left: 0; right: 0; width: fit-content; margin: 0 auto; height: 64px; padding: 0 8px 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(22,22,23,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transition: top .28s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility 0s; }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 100%; max-width: none; padding: 0; }
.nav .btn-cta { border-radius: 999px; }
/* the mark's box is centred, but its weight isn't: the X's tail hangs below "Rig". Nudge it so "Rig" sits on the centre line */
.nav .logo { transform: translateY(7%); }
.nav.away { top: calc(-1 * var(--nav-top) - 64px); opacity: 0; visibility: hidden; transition: top .28s cubic-bezier(.4,0,.6,1), opacity .2s .08s, visibility 0s .28s; }
@media (prefers-reduced-motion: reduce) { .nav, .nav.away { transition: none; } }
/* anchors land below the nav, never under it */
[id], h2, h3 { scroll-margin-top: 96px; }
/* the wordmark, traced from the owner's design: "Rig" in Outfit Black, the outlined X stepping behind it. Its lines
   hold a set weight at every size (so the X never thins to a hairline), with clean cuts where they pass behind. */
.logo { display: block; line-height: 0; --x-ve: non-scaling-stroke; --x-w: 2.6px; }
.logo svg { display: block; height: 48px; width: auto; }
.logo.lg { --x-w: 3.4px; }
.logo.lg svg { height: 76px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--ink); color: #0f0f0f; font: 500 14px var(--f); cursor: pointer; white-space: nowrap; }
.btn:hover { background: #fff; }
/* the call to action: the only filled red thing on the page */
.btn-cta { height: 46px; padding: 0 20px 0 22px; gap: 10px; border-radius: 10px; background: var(--accent); color: #120806; font-weight: 600; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 24px -6px rgba(0,0,0,0.7); transition: transform .15s, box-shadow .2s, background .2s; }
.btn-cta:hover { background: #e86a5c; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 14px 28px -8px rgba(0,0,0,0.75); }
.btn-cta svg { width: 17px; height: 17px; transition: transform .2s; }
.btn-cta:hover svg { transform: translateX(3px); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 36px 32px 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); background: var(--bg); }
footer nav { margin-left: auto; display: flex; gap: 20px; }
footer nav a:hover, footer nav a[aria-current] { color: var(--ink); }
footer nav a { padding: 12px 0; }   /* a full-size tap target on phones */
/* phones: the links drop under the wordmark instead of pushing the page wider than the screen */
@media (max-width: 560px) { footer { flex-wrap: wrap; padding: 28px 20px 32px; } footer nav { margin-left: 0; width: 100%; gap: 18px; } }

@media (max-width: 760px) {
  /* phones: a compact 44px pill */
  .nav { --nav-top: 8px; height: 44px; padding: 0 4px 0 14px; } .nav .wrap { gap: 14px; } .nav .logo svg { height: 32px; } .nav .btn-cta { height: 34px; padding: 0 12px; gap: 6px; font-size: 13px; } .nav .btn-cta svg { width: 14px; height: 14px; }
  [id], h2, h3 { scroll-margin-top: 68px; }
  /* the compact pill's mark and button stay small to look at but get 44px-tall tap areas */
  .nav .logo, .nav .btn-cta { position: relative; } .nav .logo::after, .nav .btn-cta::after { content: ""; position: absolute; inset: -6px -2px; }
  .wrap { padding: 0 20px; }
}

/* legal pages: one readable column under the nav */
.legal { max-width: 720px; padding-top: 136px; padding-bottom: 96px; }
.legal .label { margin: 0; font: 400 14px var(--f); color: var(--muted); }
.legal h1 { margin: 12px 0 28px; color: var(--ink); font-weight: 400; font-size: clamp(36px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.035em; }
.legal h2 { margin: 48px 0 12px; color: var(--ink); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
.legal h3 { margin: 28px 0 8px; color: var(--ink); font-weight: 500; font-size: 17px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.legal a:hover { text-decoration-color: var(--ink); }