@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  --bgDeep: #0A0610;
  --screen: #130C1A;
  --surface: #1E1228;
  --surfaceAlt: #261634;
  --border: #3A2A45;
  --ink: #F5EEF9;
  --inkSoft: #B9A8C6;
  --inkFaint: #7C6B8A;
  --estrogen: #E040A0;
  --balance: #EF9F27;
  --vitality: #3DD68C;
  --gradient: linear-gradient(to right, #E040A0, #B44BC8, #6C4BD6);
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background-color: var(--bgDeep);
  color: var(--inkSoft);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  background-color: var(--screen);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.page-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient);
}

.brand {
  display: flex;
  align-items: baseline;
  text-decoration: none;
}

/* "AI" is a descriptor on the brand's baseline, not a second word in it —
   same lockup as the app header. */
.brand-ai {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--inkSoft);
  margin-left: 6px;
}

.brand-mark {
  height: 32px;
  width: auto;
  margin-right: 12px;
  /* 16px (half the mark) minus 7.2px (half Fraunces' 0.72em cap height at
     1.25rem) below the baseline the img aligns its bottom edge to, so the ring
     sits on the cap band rather than on the flex line, which includes the Q's
     descender and read as the wordmark sitting high. */
  align-self: baseline;
  position: relative;
  top: 8.8px;
}

.brand-name {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.home-link {
  color: var(--inkSoft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.home-link:hover {
  color: var(--ink);
}

.doc {
  flex: 1;
  width: 100%;
  max-width: 68ch;
  margin: 0 auto;
  padding: 32px 16px;
}

.doc h1 {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px 0;
}

.doc h2 {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 48px 0 24px 0;
}

.meta {
  font-size: 0.875rem;
  color: var(--inkFaint);
  margin-top: 0;
  margin-bottom: 40px;
}

.lead {
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: 32px;
}

.doc p {
  margin-top: 0;
  margin-bottom: 24px;
}

.doc ul, .doc ol {
  margin-top: 0;
  margin-bottom: 24px;
  padding-left: 24px;
}

.doc li {
  margin-bottom: 8px;
}

.doc strong {
  font-weight: 600;
  color: var(--ink);
}

.doc a {
  color: var(--estrogen);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.doc a:hover {
  text-decoration-thickness: 2px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 40px 0;
  background-color: var(--surface);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 600px;
}

th, td {
  padding: 16px;
}

th {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

td {
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child td {
  border-bottom: none;
}

.page-foot {
  padding: 48px 16px 32px 16px;
  text-align: center;
}

.rule {
  height: 2px;
  width: 64px;
  background: var(--gradient);
  margin: 0 auto 32px auto;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.foot-links a {
  color: var(--inkSoft);
  text-decoration: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-note {
  color: var(--inkFaint);
  font-size: 0.75rem;
  margin: 0;
}

@media (min-width: 480px) {
  .page-head {
    padding: 24px 32px;
  }
  .doc {
    padding: 48px 32px;
  }
  .page-foot {
    padding: 64px 32px 32px 32px;
  }
}