/* Dreamify legal pages — self-contained, no external fonts or scripts. */
:root {
  --ink: #1b1740;
  --indigo: #2e3a86;
  --cream: #fdf3e8;
  --gold: #ffd68c;
  --body: #2b2b3a;
  --muted: #6a6880;
  --line: rgba(27, 23, 64, 0.12);
  --card: #ffffff;
  --bg: #f6f3ef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body: #e8e4f2;
    --muted: #a29fb8;
    --line: rgba(253, 243, 232, 0.16);
    --card: #1a1636;
    --bg: #100d26;
    --ink: #fdf3e8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
}

header.hero {
  background: linear-gradient(160deg, #2e3a86 0%, #4b3f8f 58%, #8a5f86 100%);
  color: var(--cream);
  padding: 44px 22px 38px;
}

.wrap { max-width: 760px; margin: 0 auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.brand .balloon {
  display: inline-block;
  width: 26px;
  height: 32px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(90deg, #f7e2c0 0%, #f0b46a 38%, #e2643c 55%, #f0b46a 72%, #f7e2c0 100%);
}

header.hero p { margin: 10px 0 0; opacity: 0.85; font-size: 15px; }

nav.tabs {
  border-bottom: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 2;
}

nav.tabs .wrap { display: flex; gap: 4px; flex-wrap: wrap; }

nav.tabs a {
  padding: 13px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  border-bottom: 2px solid transparent;
}

nav.tabs a:hover { color: var(--body); }
nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }

main { padding: 30px 22px 70px; }

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; color: var(--ink); }
h2 { font-size: 19px; margin: 34px 0 8px; color: var(--ink); }
h3 { font-size: 16px; margin: 22px 0 6px; color: var(--ink); }

.updated { color: var(--muted); font-size: 14px; margin: 0 0 26px; }

ul { padding-left: 22px; }
li { margin: 6px 0; }

a { color: #6c5ce7; }
@media (prefers-color-scheme: dark) { a { color: var(--gold); } }

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 600; }

.callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0;
}

footer {
  border-top: 1px solid var(--line);
  padding: 26px 22px 60px;
  color: var(--muted);
  font-size: 14px;
}

.lang { margin-top: 8px; font-size: 14px; }
.lang a { margin-right: 10px; }