/* Protein Grade — legal pages.
   Tokens mirror app/lib/theme/app_theme.dart so the hosted documents read as
   part of the product. The app's bundled family (Google Sans Flex) is not
   shipped here, so the stack falls back to the platform UI font. */

:root {
  --black: #000000;
  --accent: #dfff73;
  --white: #ffffff;
  --muted: #8f8f8f;
  --surface: #141414;
  --hairline: #262626;
}

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

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

body {
  margin: 0;
  padding: 0 20px 96px;
  background: var(--black);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

header {
  padding: 56px 0 8px;
  border-bottom: 1px solid var(--hairline);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 12px 0 8px;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h2 {
  margin: 44px 0 12px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 600;
}

p,
li {
  color: #e6e6e6;
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin: 8px 0;
}

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

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

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card--warn {
  border-color: var(--accent);
}

.toc {
  list-style: none;
  padding: 0;
}

.toc li {
  margin: 14px 0;
}

.toc a {
  font-size: 19px;
}

.toc span {
  display: block;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}

.table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 22px;
}

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}

th {
  color: var(--white);
  font-weight: 600;
}

td {
  color: #e6e6e6;
}

tr:last-child th,
tr:last-child td {
  border-bottom: 0;
}

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 28px;
  }
}