/* Rally Dashboard: the shared brand layer for every rallyd.com page (Brand Guidelines 2026).
   Tokens, Manrope, the header menu, buttons and the footer. Each page keeps its own layout CSS
   and reads these tokens. Replaces the old nav.css. */
:root {
  --navy: #071E24;        /* brand primary dark */
  --navy-2: #0B2A31;      /* raised surfaces on navy */
  --navy-3: #16404A;      /* lines on navy */
  --cream: #FCFBF5;       /* brand light */
  --gold: #EFA747;        /* brand accent: the R, actions, the route */
  --gold-press: #DC9536;
  --smoke: #D3D6E0;       /* lines on cream */
  --graphite: #5E6170;    /* secondary text on cream (Graphite, deepened for contrast) */
  --space: #A3A8B8;       /* secondary text on navy */
  --safe: #3DD68C;        /* "together" / encrypted status, used sparingly */
  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --chamfer: 14px;        /* the cut corner from the R's shoulder, on primary actions */
}

/* ---- Header menu ---- */
.rd-nav { margin-left: auto; display: flex; align-items: center; font-family: var(--font); }
.rd-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.rd-links { display: flex; align-items: center; gap: 26px; }
.rd-links a { color: inherit; opacity: .78; text-decoration: none; font-weight: 600; font-size: 15px; }
.rd-links a:hover, .rd-links a[aria-current="page"] { opacity: 1; }
.rd-links a.rd-cta { opacity: 1; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--gold); color: var(--navy); font-weight: 800; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.rd-links a.rd-cta:hover { background: var(--gold-press); }
@media (max-width: 900px) {
  .rd-toggle { display: inline-flex; }
  .rd-links { display: none; position: absolute; top: calc(100% + 8px); right: max(16px, env(safe-area-inset-right, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border-radius: 18px; background: var(--navy-2); color: var(--cream); border: 1px solid var(--navy-3); box-shadow: 0 24px 60px rgba(4, 22, 27, .55); z-index: 30; }
  .rd-nav[data-open] .rd-links { display: flex; }
  .rd-links a { padding: 14px 12px; border-radius: 10px; font-size: 17px; }
  .rd-links a.rd-cta { justify-content: center; height: 52px; margin-top: 6px; }
}
.rd-nav-host { position: relative; }

/* ---- Buttons ---- */
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 14px; font-family: var(--font); font-weight: 800; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; }
.rd-btn.gold { background: var(--gold); color: var(--navy); clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer)); }
.rd-btn.gold:hover { background: var(--gold-press); }
.rd-btn.navy { background: var(--navy); color: var(--cream); clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer)); }
.rd-btn.line { background: transparent; color: inherit; border-color: currentColor; }
.rd-btn.line:hover { background: rgba(127, 127, 127, .12); }
:where(a, button):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---- Footer ---- */
.rd-foot { background: var(--navy); color: var(--cream); font-family: var(--font); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.rd-foot-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: start; }
.rd-foot-brand { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rd-foot-brand p { margin: 0; color: var(--space); font-size: 15px; max-width: 38ch; }
.rd-foot nav { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 40px; }
.rd-foot nav a { color: var(--cream); opacity: .8; text-decoration: none; font-weight: 600; font-size: 15px; }
.rd-foot nav a:hover { opacity: 1; }
.rd-foot small { grid-column: 1 / -1; color: var(--space); font-size: 13px; border-top: 1px solid var(--navy-3); padding-top: 22px; }
@media (max-width: 640px) { .rd-foot-in { grid-template-columns: minmax(0, 1fr); } }

.rd-logo { display: block; flex: none; }