/* ============================================================
   Shared styling for privacy.html and terms.html.

   Deliberately separate from css/styles.css: these pages must keep
   working and stay readable even if the app's design system moves
   under them, and a hosted legal page should not depend on the
   whole app stylesheet loading. Same tokens, same type, own file.
   ============================================================ */
:root{
  --bg:            #f7fdfd;
  --surface:       #ffffff;
  --ink:           #0d2b30;
  --ink-2:         #35555a;
  --muted:         #6b8b90;
  --line:          #e2eef0;
  --aqua:          #00c2cb;
  --aqua-deep:     #049aa4;
  --accent-ink:    #04808a;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:          #0a1416;
    --surface:     #111e21;
    --ink:         #e8f6f7;
    --ink-2:       #a9c5c9;
    --muted:       #7d9ba0;
    --line:        #1e3238;
    --accent-ink:  #45d6db;
  }
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:680px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 28px) 22px calc(env(safe-area-inset-bottom,0px) + 64px);
}

/* the same mark as the app header: four white squares on the aqua gradient */
.brand{ display:flex; align-items:center; gap:9px; margin-bottom:34px; text-decoration:none; }
.brand-mark{
  width:22px; height:22px; border-radius:4.9px;
  background:linear-gradient(140deg,#45d6db,#049aa4);
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:1px; padding:5.3px;
}
.brand-mark i{ background:#fff; border-radius:27%; }
.brand-name{ font-weight:680; letter-spacing:-.035em; font-size:19px; color:var(--accent-ink); }

h1{ font-size:30px; line-height:1.2; letter-spacing:-.02em; margin:0 0 6px; }
.updated{ color:var(--muted); font-size:14px; margin:0 0 34px; }

h2{
  font-size:19px; letter-spacing:-.01em; margin:38px 0 10px;
  padding-top:22px; border-top:1px solid var(--line);
}
h2:first-of-type{ border-top:0; padding-top:0; }
h3{ font-size:15.5px; margin:22px 0 6px; color:var(--ink); }

p, li{ color:var(--ink-2); }
ul{ padding-left:20px; margin:10px 0; }
li{ margin:6px 0; }
strong{ color:var(--ink); font-weight:650; }
a{ color:var(--accent-ink); }

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; margin:18px 0;
}
.card p:first-child{ margin-top:0; }
.card p:last-child{ margin-bottom:0; }

table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:15px; }
th, td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ color:var(--ink); font-weight:650; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
td{ color:var(--ink-2); }

.foot{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px;
}
.foot a{ margin-right:14px; }

/* wide content must scroll inside itself, never the page */
.scroll-x{ overflow-x:auto; }