/*
 * The look of the legal pages.
 *
 * Same palette, fonts and brand mark as the landing page, and then it
 * deliberately parts company with it: the landing page is a gradient
 * you look AT, and these are three thousand words somebody has to read.
 * White text on a moving gradient is unreadable at that length, so the
 * brand keeps the header and the text sits on a plain sheet underneath.
 *
 * Its own file rather than inlined twice, because two copies of a
 * stylesheet is two chances for the pages to stop matching.
 */

:root {
  --night: #0e2a52;
  --indigo: #31418b;
  --violet: #6b5ca8;
  --lilac: #a98bc9;
  --blush: #d9a9d6;
  --white: #fff;
  --ink: #1a1a2e;
  --body: #2c3145;
  --dim: #5f6478;
  --line: #e2e4ee;
  --sheet: #fbfbfe;
}

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--body);
  line-height: 1.65;
  background: var(--sheet);
  -webkit-font-smoothing: antialiased;
}

/* — the brand band, lifted from the landing page — */

.top {
  background:
    radial-gradient(120% 140% at 85% 130%, rgba(217, 169, 214, .55), transparent 60%),
    linear-gradient(150deg, var(--night) 0%, #1b3468 20%, var(--indigo) 48%, var(--violet) 100%);
  padding: 26px 0 30px;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }

.brand { display: flex; align-items: center; gap: 12px; justify-content: center; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  box-shadow: 0 4px 22px rgba(20, 31, 75, .45), 0 0 26px rgba(217, 169, 214, .3);
}
/* The ring is the picture's own border - see index.html for why. */
.brand-mark .inner {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--white);
}
.brand-word { position: relative; transform: translateY(3px); color: var(--white); }
.brand-word .script { font-family: 'Sacramento', cursive; font-size: 1.9rem; line-height: 42px; display: block; }
.brand-word .ni {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; position: absolute; top: 2px; right: -.1em;
}

.doc-title {
  text-align: center; margin-top: 22px;
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 1.55rem; color: var(--white); letter-spacing: -.01em;
}
.updated {
  text-align: center; margin-top: 6px;
  font-size: .8rem; color: rgba(255, 255, 255, .72);
}

/* — the readable part — */

main { padding: 42px 0 70px; }
main p, main ul, main ol, main table { margin-bottom: 16px; }

h2 {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 1.12rem; color: var(--ink);
  margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
h3 {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: .98rem; color: var(--ink); margin: 22px 0 8px;
}

main ul, main ol { padding-left: 22px; }
main li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--indigo); }

.lede {
  font-size: 1.05rem; color: var(--ink);
  border-left: 3px solid var(--lilac); padding-left: 16px; margin-bottom: 30px;
}

table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--ink); font-size: .82rem; }
/* A table of anything is wider than a phone. It scrolls in its own box
   rather than making the whole page slide sideways. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }

.callout {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 8px; padding: 15px 18px; margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }

footer {
  border-top: 1px solid var(--line); padding: 26px 0 60px;
  font-size: .87rem; color: var(--dim); text-align: center;
}
footer a { margin: 0 9px; }

@media (max-width: 520px) {
  .doc-title { font-size: 1.3rem; }
  main { padding: 30px 0 50px; }
}