/* Shared style for the text pages (Support, Privacy, Terms): the landing
   page's brand tokens and "Dusk" gradient, sized for long-form reading. */
:root {
  color-scheme: light;
  --purple: #6944BE;
  --ink: #17142A;
  --muted: #5E5A72;
  --line: #E2DEEE;
  --soft-white: #F8F6FD;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--soft-white); }
body {
  margin: 0; min-height: 100vh; font: 16px/1.6 var(--font); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Same three soft patches as the landing hero, anchored to the top so long
     pages fade into the soft-white base instead of stretching the gradient. */
  background:
    radial-gradient(1100px 900px at 20% 0, #E9DEFC 0%, rgba(233,222,252,0) 65%),
    radial-gradient(1000px 1100px at 100% 700px, #D9CBF8 0%, rgba(217,203,248,0) 62%),
    radial-gradient(1300px 1100px at 0% 1500px, #E4D9FA 0%, rgba(228,217,250,0) 65%),
    var(--soft-white);
  background-repeat: no-repeat;
}
a { color: var(--purple); text-decoration: underline; text-decoration-color: rgba(105,68,190,.35);
    text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--purple); }
a:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header and footer, matching the landing page. */
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
       gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.nav img { display: block; width: 34px; height: 34px; }
.nav ul, footer ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav ul { gap: 28px; font-size: 15px; font-weight: 500; }
.nav a, footer a { color: var(--muted); text-decoration: none; }
.nav a:hover, footer a:hover, .nav a[aria-current="page"], footer a[aria-current="page"] { color: var(--purple); }

/* The document itself. */
.doc { max-width: 720px; margin: 0 auto; padding: 24px 24px 72px; }
.doc h1 { margin: 0 0 6px; font-size: clamp(34px, 6vw, 48px); font-weight: 700;
          letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); }
.doc .meta { margin: 0 0 28px; font-size: 14px; color: var(--muted); }
.doc h2 { margin: 40px 0 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.doc h3 { margin: 26px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.doc p, .doc li { color: var(--muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 20px; }
.doc li { margin: 4px 0; }
.doc li::marker { color: var(--purple); }
.callout { margin: 16px 0; padding: 16px 18px; border-radius: 16px;
           background: rgba(255,255,255,0.72); border: 1px solid var(--line);
           box-shadow: 0 12px 30px rgba(74,44,153,0.08); }
.callout p { margin: 6px 0; }

/* Tables (the privacy policy's data table), on the same white card. */
.table-wrap { margin: 12px 0; overflow-x: auto; border-radius: 16px; border: 1px solid var(--line);
              background: rgba(255,255,255,0.72); box-shadow: 0 12px 30px rgba(74,44,153,0.08); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.doc tr:last-child td { border-bottom: none; }
.doc th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); }
.doc td { color: var(--muted); }

footer { border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
               gap: 16px; padding-top: 24px; padding-bottom: 24px; font-size: 14px; color: var(--muted); }
footer ul { gap: 24px; }