/*
  rewards.css — shared stylesheet for the /rewards pages on arms.systems.

  Served at:  https://arms.systems/rewards/rewards.css
  Source:     the live home page (https://arms.systems/, Last-Modified 25 Aug 2026).
              The :root variables, header, navigation, mobile menu, button and
              footer rules below are copied from that page's inline <style> so the
              new pages look identical. Rules that exist only for the home page's
              animated dashboard and story sections are NOT copied.

  Fonts:      the same system stack as the live page. "Inter" is named first but
              is never downloaded (the live page does not load it either), so no
              external font request is made.

  No external resources, no trackers, no JavaScript required.
*/

:root {
  --gold: #f5b800;
  --gold-light: #ffd43b;
  --gold-dark: #a87300;
  --black: #020202;
  --panel: #0a0c0e;
  --panel-light: #111417;
  --border: rgba(245, 184, 0, 0.38);
  --white: #f7f7f7;
  --muted: #a9abad;
  --danger: #ff4d35;
  --warning: #ffb000;
  --success: #72cf28;
  --radius: 14px;
  --max-width: 1480px;
  --reading-width: 860px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  background-color: #000;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #000;
  color-scheme: dark;
  overscroll-behavior-y: none;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--white);
  background:
    radial-gradient(circle at 38% 27%, rgba(245, 184, 0, 0.06), transparent 24%),
    linear-gradient(180deg, #030303 0%, #000 100%);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.5;
}

main {
  flex: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Visible keyboard focus everywhere (the live page has none). */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(calc(100% - 52px), var(--max-width));
  margin-inline: auto;
}

/* Skip link: hidden until focused. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 400;
  padding: 10px 16px;
  border-radius: 7px;
  color: #080600;
  background: var(--gold);
  font-weight: 750;
}

.skip-link:focus {
  top: 12px;
}

/* ===== Header (copied from the live page) ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(0, 0, 0, 0.91);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  width: 285px;
  max-width: 28vw;
  height: 64px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 12px rgba(245, 184, 0, 0.08));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 40px);
  font-size: 0.97rem;
}

.nav-links a {
  transition: color 160ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.button {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 1px solid var(--gold);
  border-radius: 7px;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
  background: rgba(245, 184, 0, 0.08);
  box-shadow: 0 12px 32px rgba(245, 184, 0, 0.12);
}

.button.primary {
  color: #080600;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.button.primary:hover {
  color: #080600;
  background: linear-gradient(135deg, #ffe06e, #ffc400);
}

.menu-button {
  width: 46px;
  height: 46px;
  display: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: white;
  background: #090909;
  cursor: pointer;
  font-size: 1.4rem;
}

.mobile-menu-backdrop,
.mobile-menu {
  display: none;
}

/* ===== Footer (copied from the live page, links added) ===== */
.footer {
  padding: 29px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #878787;
  font-size: 0.82rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.footer-links a:hover {
  color: var(--gold);
}

/* ===== Rewards / legal page content ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.6;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 89px,
      rgba(245, 184, 0, 0.022) 90px,
      transparent 91px
    );
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(245, 184, 0, 0.035);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 13px var(--gold);
}

.page-hero h1 {
  max-width: 900px;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.page-hero h1 span {
  color: var(--gold);
}

.page-hero .lede {
  max-width: 720px;
  margin-top: 16px;
  color: #c1c1c1;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.meta-line {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.85rem;
}

.draft-banner {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 176, 0, 0.6);
  border-radius: 10px;
  color: #ffe184;
  background: rgba(255, 176, 0, 0.08);
  font-size: 0.9rem;
  font-weight: 700;
}

.reading {
  width: min(calc(100% - 52px), var(--reading-width));
  margin-inline: auto;
  padding: 36px 0 64px;
}

.reading h2 {
  margin: 38px 0 10px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  scroll-margin-top: 110px;
}

.reading h2:first-child {
  margin-top: 0;
}

.reading h3 {
  margin: 24px 0 8px;
  color: var(--gold-light);
  font-size: 1.05rem;
}

.reading p,
.reading li {
  color: #cfd0d1;
  font-size: 1rem;
  line-height: 1.7;
}

.reading p + p {
  margin-top: 12px;
}

.reading ul,
.reading ol {
  margin: 10px 0 10px 1.3em;
}

.reading li + li {
  margin-top: 6px;
}

.reading a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reading strong {
  color: var(--white);
}

/* Bracketed items the owner/counsel must complete. */
.fill {
  padding: 0 4px;
  border-radius: 4px;
  color: #ffe184;
  background: rgba(255, 176, 0, 0.12);
  font-style: normal;
}

.toc {
  margin: 0 0 8px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #101112, #070808);
}

.toc strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.toc ol {
  margin: 0 0 0 1.2em;
  columns: 2 260px;
  column-gap: 32px;
}

.toc li {
  font-size: 0.92rem;
  line-height: 1.6;
}

.table-wrap {
  margin: 14px 0;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

caption {
  padding: 10px 14px;
  color: var(--muted);
  text-align: left;
  font-size: 0.85rem;
}

th,
td {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--gold-light);
  background: rgba(245, 184, 0, 0.05);
  font-weight: 750;
}

td {
  color: #cfd0d1;
}

.panel {
  margin: 18px 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 184, 0, 0.07), transparent 38%),
    linear-gradient(145deg, #101112, #070808);
}

.panel h2,
.panel h3 {
  margin-top: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: linear-gradient(145deg, #101112, #070808);
}

.card .step {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.card h3 {
  margin: 0 0 6px;
  color: var(--white);
  font-size: 1.05rem;
}

.card p {
  font-size: 0.92rem;
}

/* Store badges: replace the placeholder text with the official badge artwork,
   self-hosted (Apple Marketing Resources; Google Play badge generator). */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.store-badge {
  min-width: 190px;
  min-height: 56px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  color: var(--white);
  background: #050505;
  line-height: 1.2;
}

.store-badge small {
  color: var(--muted);
  font-size: 0.72rem;
}

.store-badge strong {
  font-size: 1.1rem;
}

.store-badge:hover {
  border-color: var(--gold);
}

.store-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.link-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  list-style: none;
}

.reading .link-list {
  margin-left: 0;
}

.link-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--white);
  background: #0b0c0d;
  text-decoration: none;
  font-weight: 700;
}

.link-list a span {
  color: var(--gold);
}

.link-list a:hover {
  border-color: var(--gold);
}

/* ===== Responsive (header rules copied from the live page) ===== */
@media (max-width: 1190px) {
  .nav-links {
    display: none;
  }

  .menu-button {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 302;
    text-decoration: none;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);
    pointer-events: none;
    transition:
      opacity 180ms ease,
      visibility 180ms ease;
  }

  .mobile-menu:target + .mobile-menu-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    width: min(86vw, 360px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-left: 1px solid rgba(245, 184, 0, 0.28);
    background:
      radial-gradient(circle at 100% 0%, rgba(245, 184, 0, 0.09), transparent 34%),
      #070809;
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.62);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 230ms cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 230ms ease;
  }

  .mobile-menu:target {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--gold);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mobile-menu-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 184, 0, 0.34);
    border-radius: 10px;
    color: white;
    background: #0b0d0f;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
  }

  .mobile-menu-links {
    display: grid;
    margin-top: 18px;
  }

  .mobile-menu-links a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ededed;
    font-size: 1.02rem;
    font-weight: 800;
  }

  .mobile-menu-links a span {
    color: var(--gold);
  }

  .mobile-menu-actions {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
  }

  .mobile-menu-actions .button {
    width: 100%;
    min-height: 52px;
    margin: 0;
  }

  .nav-actions .request-button {
    display: none;
  }
}

@media (max-width: 820px) {
  /* As on the live page: the login button moves into the mobile menu. */
  .nav-actions .login-button {
    display: none;
  }

  .container {
    width: min(calc(100% - 28px), var(--max-width));
  }

  .logo {
    min-width: 150px;
    height: 48px;
    display: flex;
    align-items: center;
  }

  .logo img {
    display: block;
    width: 170px;
    max-width: 48vw;
    height: 46px;
    object-fit: contain;
    object-position: left center;
  }

  .nav {
    min-height: 70px;
  }

  .menu-button {
    width: 48px;
    height: 48px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .reading {
    width: min(calc(100% - 28px), var(--max-width));
  }

  .page-hero {
    padding-top: 36px;
  }

  th,
  td {
    padding: 9px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .mobile-menu,
  .mobile-menu-backdrop {
    transition: none;
  }

  .button:hover {
    transform: none;
  }
}