/* Plutara legal pages.
   One stylesheet, no build step, no external requests — a legal page that depends on a
   CDN is a legal page that can 404. */

:root {
  color-scheme: light dark;

  --ink:        #14161f;
  --ink-soft:   #4a4f61;
  --ink-faint:  #6b7186;
  --ground:     #fbfbfd;
  --surface:    #ffffff;
  --line:       #e4e5ec;
  --brand:      #5b3ff0;
  --warn-bg:    #fff8e6;
  --warn-line:  #f0d089;
  --warn-ink:   #6b4c07;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e9eaf2;
    --ink-soft:   #a8adc0;
    --ink-faint:  #838a9e;
    --ground:     #0b0d14;
    --surface:    #141824;
    --line:       #262b3a;
    --brand:      #9b85ff;
    --warn-bg:    #241f0e;
    --warn-line:  #5c4a17;
    --warn-ink:   #e8cf8d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 96px;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 44rem; margin: 0 auto; }

header {
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 24px;
}

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 {
  font-size: 1.0625rem;
  margin: 40px 0 10px;
  letter-spacing: -0.01em;
}
h2:first-of-type { margin-top: 32px; }

.updated { color: var(--ink-faint); font-size: 0.875rem; margin: 0; }

p { color: var(--ink-soft); margin: 0 0 14px; }
p.lead { color: var(--ink); font-size: 1.0625rem; }

a { color: var(--brand); }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 32px;
}
.callout h2 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 32px;
  font-size: 0.9375rem;
}
.notice strong { color: var(--warn-ink); display: block; margin-bottom: 4px; }
.notice p { color: var(--warn-ink); margin: 0; opacity: 0.92; }

nav.pages {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  font-size: 0.9375rem;
}

footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.875rem;
}
footer a { color: var(--ink-faint); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }