@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("/fonts/Nunito-Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("/fonts/Nunito-Bold.ttf") format("truetype"); }

:root {
  --text: #292941;
  --text-secondary: #696c86;
  --accent: #575bd0;
  --canvas: #eef2fa;
  --card: #ffffff;
  --line: #dce0ee;
  --header: #f6f7fd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e6e7f2;
    --text-secondary: #a3a6c0;
    --accent: #9a9cf0;
    --canvas: #14141f;
    --card: #1d1d2b;
    --line: #33344a;
    --header: #252536;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 16px/1.6 "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main {
  max-width: 760px;
  margin: 32px auto;
  padding: 40px 48px 48px;
  background: var(--card);
  border-radius: 24px;
}
header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
header img { width: 48px; height: 48px; }
header span { font-weight: 700; font-size: 18px; }
h1 { font-size: 32px; line-height: 1.2; margin: 24px 0 4px; }
h2 { font-size: 21px; line-height: 1.3; margin: 40px 0 8px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
a { color: var(--accent); }
.effective { color: var(--text-secondary); margin-bottom: 28px; }
.table { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--header); font-weight: 700; }
td:first-child { font-weight: 700; white-space: nowrap; }
footer { margin-top: 40px; color: var(--text-secondary); font-size: 14px; }

@media (max-width: 640px) {
  main { margin: 0; padding: 28px 16px 36px; border-radius: 0; }
  h1 { font-size: 28px; }
  /* On a phone, each row stacks: its first cell as a heading, the others under their column's label. */
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  td { padding: 2px 0; border: 0; }
  td:first-child { white-space: normal; margin-bottom: 4px; }
  td[data-label]::before { content: attr(data-label); display: block; color: var(--text-secondary); font-size: 13px; }
}

.notice { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--line); color: var(--text-secondary); font-size: 15px; }