/* Shared by privacy.html, terms.html, cookies.html and cdr.html.
   One copy, because four inline copies of the same rules is exactly how the
   landing page's claims drifted apart from the app's in the first place.

   Light only, deliberately: index.html declares color-scheme:light and these
   pages are read from its footer. A legal page that flips theme mid-journey
   reads as a different site. */

:root{
  --paper:        oklch(98% 0.004 95);
  --paper-raised: oklch(96% 0.005 95);
  --ink:          oklch(20% 0.015 260);
  --muted:        oklch(45% 0.012 260);
  --line:         oklch(90% 0.005 95);
  --accent:       oklch(48% 0.09 250);
  --warn:         oklch(60% 0.19 28);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:720px;margin:0 auto;padding:48px 22px 96px}

a{color:var(--accent)}
a:hover{text-decoration:none}

.back{
  display:inline-block;font-size:13px;font-weight:600;
  text-decoration:none;margin-bottom:36px;
}
.back:hover{text-decoration:underline}

h1{font-size:31px;font-weight:800;letter-spacing:-.022em;margin:0 0 8px;line-height:1.18}
.sub{color:var(--muted);font-size:14px;margin:0 0 8px}
.dates{color:var(--muted);font-size:12.5px;margin:0 0 34px}

h2{
  font-size:19px;font-weight:700;letter-spacing:-.012em;
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line);
  scroll-margin-top:18px;
}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:15.5px;font-weight:700;margin:26px 0 8px}

p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 7px}
strong{font-weight:700}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--paper-raised);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;
}

/* Wide tables scroll inside their own box rather than pushing the page
   sideways — same rule the app's screens follow. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:13.5px}
th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line)}
th{font-weight:700;background:var(--paper-raised);white-space:nowrap}
td strong{font-weight:600}

.note,.warn,.pending{
  border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;background:#fff;margin:0 0 20px;
}
.note p:last-child,.warn p:last-child,.pending p:last-child{margin-bottom:0}
.warn{border-color:color-mix(in oklch,var(--warn) 40%,var(--line));background:color-mix(in oklch,var(--warn) 5%,#fff)}
.pending{border-style:dashed;background:var(--paper-raised)}

.tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;margin-bottom:14px;
}
.tag.is-warn{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 45%,var(--line))}

.toc{
  background:var(--paper-raised);border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;margin:0 0 34px;
}
.toc ol{margin:0;padding-left:20px;font-size:13.5px}
.toc li{margin:0 0 4px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

footer{
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
footer .fl{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
footer .fl a{text-decoration:none}
footer .fl a:hover{text-decoration:underline}

@media (max-width:520px){
  .wrap{padding:34px 18px 72px}
  h1{font-size:26px}
  h2{font-size:17.5px}
  body{font-size:14.5px}
}