/* ═══════════════════════════════════════════════════════════════════════════
   Nolara — document pages (privacy, terms, account deletion)
   These are read, not browsed: the craft budget goes to measure, rhythm and
   contrast. Same type and palette family as the homepage and the app, so the
   legal pages feel like the same product keeping the same promises.
   Light and dark both supported — policies get read at 2am.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --accent:      #5B5BD6;
  --accent-deep: #3B3BA8;
  --ink:      #14141F;
  --ink-soft: #44445A;
  --ink-mute: #5E5E75;
  --ground:  #F8F8FC;
  --surface: #FFFFFF;
  --line:    #E4E4EE;
  --line-soft: #EFEFF6;
  --danger: #B42318;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:      #9A9AF2;
    --accent-deep: #B4B4F7;
    --ink:      #EFEFF8;
    --ink-soft: #B9B9D1;
    --ink-mute: #8C8CA8;
    --ground:  #0D0D1C;
    --surface: #14142A;
    --line:    #26263F;
    --line-soft: #1D1D33;
    --danger: #F08A80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 44px 24px 88px; }

nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
  flex-wrap: wrap;
}
nav .brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
nav .brand::before {
  content: 'N';
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}
nav a:not(.brand) {
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.2s;
}
nav a:not(.brand):hover { color: var(--accent-deep); }

h1 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  text-wrap: balance;
}
h2 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
  font-size: 1.42rem;
  font-weight: 580;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
h2:first-of-type { border-top: none; padding-top: 0; }
h3 { font-size: 1.02rem; margin: 26px 0 8px; }

p, li { color: var(--ink-soft); }
p { margin: 0 0 15px; }
ul, ol { padding-left: 22px; margin: 0 0 15px; }
li { margin-bottom: 7px; }

.updated { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 36px; }
.lede { font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 34px; }

a { color: var(--accent-deep); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

strong { color: var(--ink); font-weight: 640; }
em { color: var(--ink); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 22px 0;
}
.card p:last-child { margin-bottom: 0; }
.warn { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); border-left: 3px solid var(--danger); }
.warn strong { color: var(--danger); }

.table-scroll { overflow-x: auto; margin: 20px 0; border: 1px solid var(--line); border-radius: 14px; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; background: var(--surface); }
th, td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-size: 11px; font-weight: 660; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-mute);
  background: var(--ground);
}
td:first-child { font-weight: 620; color: var(--ink); }
tr:last-child td { border-bottom: none; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--line-soft);
  border-radius: 5px;
  padding: 1px 6px;
}

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-mute);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
footer a { color: var(--ink-mute); }
footer a:hover { color: var(--accent-deep); }

@media (max-width: 520px) {
  .wrap { padding: 30px 18px 64px; }
}