/* Shared styles for UniTalk public legal pages. No JS, mobile-first.
   Themed to match the app splash screen: deep indigo (#4F46E5) backdrop,
   white lowercase "unitalk." wordmark with a soft lavender dot, content on a
   clean white card for readability. */
:root {
  --indigo: #4F46E5;        /* splash background / brand */
  --indigo-deep: #4338CA;   /* hover / darker accents */
  --lavender: #A5B4FC;      /* the splash accent dot */
  --ink: #1E1B2E;           /* primary text */
  --body: #322f45;          /* long-form body text */
  --muted: #6b6786;
  --card: #ffffff;
  --line: #e8e6f3;
  --tint: #eef0ff;          /* light indigo wash for callouts/headers */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--indigo);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 40px 20px 64px; }

/* Large sideways "unitalk." wordmark running down the left margin (decorative).
   Ghosted lavender so it elevates the page without competing with the text.
   Hidden on narrower screens where there's no margin room. */
body::before {
  content: "unitalk.";
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font: 800 clamp(120px, 17vw, 230px)/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.05em;
  color: rgba(199, 210, 254, 0.16);   /* lavender-tinted, translucent */
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 1100px) { body::before { display: none; } }

/* Splash-style wordmark: white "unitalk" + lavender period, lowercase + tight. */
header.site { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 22px; }
header.site .logo {
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  color: #fff;
  letter-spacing: -1px;
  text-transform: lowercase;
}
header.site .logo::after { content: "."; color: var(--lavender); }

/* Nav sits on the indigo backdrop -> light links. */
nav.legal { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 2px 18px; font-size: 14px; }
nav.legal a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-weight: 500; }
nav.legal a:hover { color: #fff; text-decoration: underline; }

/* White reading card floating on the indigo background. */
main {
  background: var(--card);
  border-radius: 22px;
  padding: 36px 34px;
  box-shadow: 0 18px 50px rgba(31, 22, 90, 0.28), 0 2px 6px rgba(31, 22, 90, 0.12);
}
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.6px; color: var(--ink); }
h2 { font-size: 19px; margin: 32px 0 8px; color: var(--indigo-deep); letter-spacing: -0.2px; }
h3 { font-size: 16px; margin: 20px 0 6px; color: var(--ink); }
.dates { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
p, li { color: var(--body); }
a { color: var(--indigo); text-decoration-color: rgba(79, 70, 229, 0.35); text-underline-offset: 2px; }
a:hover { color: var(--indigo-deep); }
ul { padding-left: 20px; }
li { margin: 5px 0; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
th, td { text-align: left; padding: 9px 11px; border: 1px solid var(--line); vertical-align: top; }
th { background: var(--tint); color: var(--ink); }

/* Callout: light indigo wash with a bold left accent. */
.callout {
  background: var(--tint);
  border: 1px solid #dfe2ff;
  border-left: 4px solid var(--indigo);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 15px;
}
.muted { color: var(--muted); }
footer.site { color: rgba(255, 255, 255, 0.72); font-size: 13px; text-align: center; padding: 28px 0 0; }
/* Footer sits on the indigo backdrop -> links must be light, not the indigo body-link color. */
footer.site a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); }
footer.site a:hover { color: var(--lavender); }

@media (max-width: 480px) {
  .wrap { padding: 28px 14px 48px; }
  main { padding: 24px 18px; border-radius: 16px; }
  h1 { font-size: 25px; }
  header.site .logo { font-size: 24px; }
}