/* ============================================================================
   Legal documents — /terms, /privacy, /cookies, /refund-policy.
   One stylesheet, four pages. Built on atlas-tokens.css so the type, colour
   and spacing match the rest of the site; nothing here is page-specific.

   The layout is a two-column reading view: a sticky contents rail on the left
   and the document on the right. Below 1100 the rail collapses to a plain
   list above the text, so the document is never squeezed.
   ========================================================================= */

/* The navbar sits OUTSIDE .afxl, so what shows behind its glass fill is the
   body's own background. Left white, the nav read as a white strip across the
   top of a dark page. The colour belongs on the body, not just the main. */
body.legal-page {
  margin: 0;
  background: var(--af-shell-bottom, #0F0F0F);
  color: var(--af-white);
}

.afxl {
  background: var(--af-shell-bottom, #0F0F0F);
  color: var(--af-white);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  padding: 0 0 96px;
}

/* ---- header ------------------------------------------------------------ */
.afxl-head { max-width: var(--shell, 1512px); margin: 0 auto; padding: 72px 40px 40px; }
.afxl-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px;
  padding: 6px 14px; border-radius: 57px; background: var(--w-06, rgba(255,255,255,.06));
  border: 1px solid var(--w-08, rgba(255,255,255,.08));
  font-size: 13px; font-weight: var(--w-medium, 500); letter-spacing: -.26px;
  color: var(--af-mint, #A4E4DE);
}
.afxl-h1 {
  margin: 0 0 14px; font-family: var(--font-display), var(--font-sans);
  font-size: 56px; line-height: 60px; letter-spacing: -1.68px; font-weight: var(--w-medium, 500);
}
.afxl-lede { margin: 0; max-width: 76ch; font-size: 17px; line-height: 28px; color: var(--w-60, rgba(255,255,255,.6)); }
.afxl-meta {
  margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 13.5px; color: var(--w-60, rgba(255,255,255,.6));
}
.afxl-meta b { color: var(--af-white); font-weight: var(--w-medium, 500); }

/* ---- body -------------------------------------------------------------- */
.afxl-wrap {
  max-width: var(--shell, 1512px); margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: minmax(0, 268px) minmax(0, 1fr); gap: 48px; align-items: start;
}
@media (max-width: 1100px) { .afxl-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.afxl-toc { position: sticky; top: 96px; }
@media (max-width: 1100px) { .afxl-toc { position: static; } }
.afxl-toc h2 {
  margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--w-60, rgba(255,255,255,.6)); font-weight: var(--w-semi, 600);
}
.afxl-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.afxl-toc a {
  display: block; padding: 7px 12px; border-radius: 10px; text-decoration: none;
  font-size: 14px; line-height: 20px; color: var(--w-60, rgba(255,255,255,.6));
  border-left: 2px solid transparent;
}
.afxl-toc a:hover { color: var(--af-white); background: var(--w-04, rgba(255,255,255,.04)); }

.afxl-doc { max-width: 82ch; }
.afxl-sec { padding: 34px 0 0; border-top: 1px solid var(--w-08, rgba(255,255,255,.08)); margin-top: 34px; }
.afxl-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.afxl-sec > h2 {
  margin: 0 0 18px; font-size: 26px; line-height: 32px; letter-spacing: -.6px;
  font-weight: var(--w-medium, 500); scroll-margin-top: 92px;
}
.afxl-sec > h2 .n { color: var(--af-lime, #E1FFA0); margin-right: 12px; font-variant-numeric: tabular-nums; }
.afxl-sec h3 {
  margin: 26px 0 10px; font-size: 17px; line-height: 24px; letter-spacing: -.34px;
  font-weight: var(--w-medium, 500); color: var(--af-white);
}
.afxl-sec h3 .n { color: var(--w-60, rgba(255,255,255,.6)); margin-right: 9px; font-variant-numeric: tabular-nums; }
.afxl-sec p, .afxl-sec li {
  font-size: 15.5px; line-height: 26px; color: rgba(255,255,255,.78);
}
.afxl-sec p { margin: 0 0 12px; }
.afxl-sec ul { margin: 0 0 14px; padding-left: 20px; }
.afxl-sec li { margin: 0 0 6px; }
.afxl-sec strong { color: var(--af-white); font-weight: var(--w-medium, 500); }
.afxl-sec a { color: var(--af-mint, #A4E4DE); }

/* a fact table — account sizes, fees, payout cycles */
.afxl-table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 15px; }
.afxl-table th, .afxl-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--w-08, rgba(255,255,255,.08));
}
.afxl-table th { color: var(--w-60, rgba(255,255,255,.6)); font-weight: var(--w-medium, 500); font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em; }
.afxl-table td { color: rgba(255,255,255,.82); }
.afxl-table td:last-child, .afxl-table th:last-child { text-align: right; }

/* a callout for the things people get wrong */
.afxl-note {
  margin: 16px 0; padding: 16px 18px; border-radius: 14px;
  background: var(--w-04, rgba(255,255,255,.04));
  border: 1px solid var(--w-08, rgba(255,255,255,.08));
}
.afxl-note p:last-child { margin-bottom: 0; }
.afxl-note--warn { border-color: rgba(240,149,149,.28); background: rgba(240,149,149,.06); }

.afxl-updated {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--w-08, rgba(255,255,255,.08));
  font-size: 13.5px; color: var(--w-60, rgba(255,255,255,.6));
}

@media (max-width: 760px) {
  .afxl-head { padding: 48px 20px 28px; }
  .afxl-wrap { padding: 0 20px; }
  .afxl-h1 { font-size: 38px; line-height: 42px; letter-spacing: -1.14px; }
  .afxl-sec > h2 { font-size: 22px; line-height: 28px; }
}