/* Shared by terms.html and privacy.html.

   index.html is deliberately one self-contained file - see README.md - because it is the
   marketing entry point and its audience is on a metered Nigerian data plan. These two are
   not that: they are rarely visited, they are read rather than skimmed, and duplicating the
   stylesheet into both would leave two copies to drift apart. One cached request is the
   better trade here. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #F3F4F7;
  --surface: #FFFFFF;
  --ink: #0B1220;
  --muted: #586173;
  --border: #E4E7EC;
  --link: #5B2CE6;
  --ring: #5B2CE6;
  /* The artwork's navy tile carries its own edge on a light surface, so there is nothing to
     draw here. See `.lockup .mark` for why this is a token rather than a dark-only rule. */
  --mark-edge: transparent;
  --notice-bg: #FFF7E6;
  --notice-border: #E0A800;
  --notice-ink: #6B4E00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0D13;
    --surface: #141926;
    --ink: #F2F4F8;
    --muted: #9BA5B4;
    --border: #252D3B;
    --link: #8B6BFF;
    --ring: #A88BFF;
    /* On a dark surface the tile is #031738 against roughly #0a0d13 - about 1.1:1, which is no
       edge at all. A hairline gives the tile back its shape without touching the file. */
    --mark-edge: rgba(255, 255, 255, 0.22);
    --notice-bg: #2A2210;
    --notice-border: #A88300;
    --notice-ink: #F0DFA8;
  }
}

:root[data-theme="dark"] {
  --bg: #0A0D13;
  --surface: #141926;
  --ink: #F2F4F8;
  --muted: #9BA5B4;
  --border: #252D3B;
  --link: #8B6BFF;
  --ring: #A88BFF;
  /* See the note in the media-query block above. */
  --mark-edge: rgba(255, 255, 255, 0.22);
  --notice-bg: #2A2210;
  --notice-border: #A88300;
  --notice-ink: #F0DFA8;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.wrap { width: min(760px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

/* The artwork alone. It sets `GenEx Pay` inside the tile, so a wordmark beside it would say
   the name twice; the anchor's `aria-label` carries it for a screen reader. */
.lockup { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.lockup .mark { display: block; border-radius: 21%; box-shadow: 0 0 0 1px var(--mark-edge); }

main { padding: 40px 0 72px; }

h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: clamp(20px, 2.6vw, 24px); line-height: 1.3; margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 18px; margin: 26px 0 6px; }
p, li { color: var(--ink); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
a { color: var(--link); }
a:focus-visible, .lockup:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

.updated { color: var(--muted); font-size: 15px; margin: 0 0 24px; }

/* The draft banner. This is not decoration: neither document has been through counsel,
   and a legal page that does not say so reads as though it has. */
.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-left-width: 4px;
  color: var(--notice-ink);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 32px;
  font-size: 15.5px;
}
.notice strong { display: block; margin-bottom: 4px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 20px 0;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 24px 0;
  color: var(--muted);
  font-size: 15px;
}
.site-footer a { margin-right: 16px; }

/* Blocks written in by legal.js. `.legal-marker` keeps a clause's own number visible, because
   the API preserves the marker an operator typed and renumbering it here would silently
   change what a clause is called. */
.legal-list { list-style: none; padding-left: 0; }
.legal-list li { display: flex; gap: 8px; margin: 8px 0; }
.legal-list li::before { content: "•"; color: var(--muted); flex: none; }
.legal-marker { font-weight: 600; flex: none; }
.legal-list li:has(.legal-marker)::before { content: none; }
.muted { color: var(--muted); }