/* Shared styles for the text pages (privacy, terms, help).
   Tokens mirror index.html (which mirrors packages/design-system/src/tokens.ts).
   Kept separate so the three text pages share one stylesheet; index.html stays
   self-contained. Fonts are the same self-hosted woff2 as the landing (EU-only,
   no Google CDN); paths are relative to this file (assets/). */

@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root, [data-theme="light"] {
  --bg:#e7e1d2; --surface:#f1ecde; --surface-2:#f8f4e9; --well:#ddd5c3;
  --line:rgba(58,52,42,.13); --line2:rgba(58,52,42,.22);
  --ink:#3a342a; --ink-soft:#766c58; --ink-mute:#9d9176;
  --accent:#5a8868; --accent-soft:#d4e3d8; --accent-on:#ffffff;
  --shadow-card:0 1px 2px rgba(58,52,42,.07), 0 4px 12px rgba(58,52,42,.12);
  --r-md:18px; --r-lg:22px; --r-pill:999px;
  --serif:"Instrument Serif", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg:#181b15; --surface:#1f231c; --surface-2:#272c23; --well:#131610;
  --line:rgba(233,231,223,.10); --line2:rgba(233,231,223,.18);
  --ink:#e9e7df; --ink-soft:#a6a99d; --ink-mute:#71756a;
  --accent:#84c79b; --accent-soft:rgba(132,199,155,.15); --accent-on:#0f1c12;
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans); font-size:16px; line-height:1.65;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap { width:100%; max-width:760px; margin:0 auto; padding:0 24px; }

/* Nav */
.legal-nav {
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.legal-nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-name { font-family:var(--serif); font-weight:400; font-size:23px; }
.mark { display:block; flex:0 0 auto; color:var(--accent); }
.theme-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.theme-btn:hover { color:var(--ink); }

/* Prose */
.prose { padding:clamp(40px,7vw,72px) 0 40px; }
.prose h1 {
  font-family:var(--serif); font-weight:400; line-height:1.03; letter-spacing:-.01em;
  font-size:clamp(36px,6vw,56px); margin-bottom:8px; text-wrap:balance;
}
.prose h2 {
  font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(24px,3.2vw,32px); margin:44px 0 12px;
}
.prose h3 { font-size:18px; font-weight:600; margin:28px 0 8px; }
.prose p, .prose li { color:var(--ink-soft); font-weight:500; }
.prose p { margin:0 0 16px; }
.prose strong { color:var(--ink); font-weight:600; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.prose ul, .prose ol { margin:0 0 16px; padding-left:22px; }
.prose li { margin:0 0 6px; }
.prose blockquote {
  margin:0 0 18px; padding:14px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink);
}
.prose blockquote p:last-child { margin:0; }
.prose code {
  font-family:var(--mono); font-size:.88em;
  background:var(--well); border:1px solid var(--line); border-radius:6px; padding:1px 5px;
}
.prose hr { border:none; border-top:1px solid var(--line2); margin:32px 0; }
.prose table {
  width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14.5px;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.prose th, .prose td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-mute); background:var(--surface); }
.prose td { color:var(--ink-soft); }
.prose tr:last-child td { border-bottom:none; }
.prose .effective { color:var(--ink-mute); font-size:14px; font-weight:500; }

/* Footer */
.legal-footer { border-top:1px solid var(--line2); padding:32px 0 48px; margin-top:48px; }
.legal-footer a { color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:14.5px; }
.legal-footer a:hover { color:var(--ink); }
.legal-footer .sep { color:var(--ink-mute); margin:0 8px; }
.legal-compare { margin-top:12px; line-height:2; }
.legal-fine { margin-top:14px; font-size:13px; color:var(--ink-mute); }

@media (max-width:520px) { .wrap { padding:0 20px; } }

/* ── Tool widgets ────────────────────────────────────────────────────────────
   Shared by /tools/document-expiry and the converter inside /move-from-cozi.
   Everything is scoped under .tool so the plain text pages are untouched. */
.tool {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:clamp(18px,3vw,26px); margin:0 0 28px;
}
.tool h2 { margin-top:0; }
.tool-note { color:var(--ink-mute); font-size:13.5px; font-weight:500; margin:0 0 18px; }
.tool fieldset { border:none; }
.tool legend {
  font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-mute); font-weight:600; margin-bottom:10px;
}
.tool label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.tool input, .tool select {
  width:100%; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line2); border-radius:10px;
  padding:9px 11px; -webkit-appearance:none; appearance:none;
}
.tool input:focus, .tool select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.tool select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239d9176' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px;
}
.tool .row { display:grid; grid-template-columns:1.1fr 1fr .9fr .9fr auto; gap:10px; align-items:end; margin-bottom:10px; }
.tool .kill {
  background:none; border:1px solid var(--line2); border-radius:10px; color:var(--ink-mute);
  width:38px; height:38px; cursor:pointer; font-size:18px; line-height:1;
}
.tool .kill:hover { color:var(--ink); border-color:var(--ink-mute); }
.tool .trip { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.tool .btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tool .btn {
  font-family:var(--sans); font-size:14.5px; font-weight:600; border-radius:var(--r-pill);
  padding:11px 20px; cursor:pointer; border:1px solid transparent;
}
.tool .btn-primary { background:var(--accent); color:var(--accent-on); }
.tool .btn-ghost { background:transparent; color:var(--ink-soft); border-color:var(--line2); }
.tool .btn-ghost:hover { color:var(--ink); }
.tool .btn[disabled] { opacity:.45; cursor:not-allowed; }
.tool .pill {
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap;
}
.tool .pill-ok   { background:var(--accent-soft); color:var(--accent); }
.tool .pill-soon { background:rgba(203,145,44,.16); color:#a5722a; }
.tool .pill-bad  { background:rgba(190,72,60,.14); color:#b04a3d; }
[data-theme="dark"] .tool .pill-soon { color:#e0b061; }
[data-theme="dark"] .tool .pill-bad  { color:#e78a7c; }
.tool .out:empty { display:none; }
.tool .out { margin-top:22px; }
.tool .out-line { color:var(--ink-mute); font-size:13.5px; margin-top:-8px; }
.rule-src { font-size:13px; }
/* Drop zone — the .ics converter */
.tool .drop {
  border:1.5px dashed var(--line2); border-radius:var(--r-md); padding:26px 18px;
  text-align:center; color:var(--ink-soft); cursor:pointer; background:var(--surface-2);
}
.tool .drop:hover, .tool .drop.over { border-color:var(--accent); color:var(--ink); }
.tool .drop strong { display:block; color:var(--ink); margin-bottom:4px; }
.tool .drop small { color:var(--ink-mute); }
.tool .filecard {
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px;
  margin-top:14px; background:var(--surface-2);
}
.tool .filecard h4 { font-size:15px; font-weight:600; margin:0 0 8px; color:var(--ink); }
.tool .facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px 16px; margin:0 0 10px; }
.tool .fact { font-size:13px; color:var(--ink-mute); }
.tool .fact b { display:block; font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:640px) {
  .tool .row { grid-template-columns:1fr 1fr; }
  .tool .kill { grid-column:2; justify-self:end; }
  .tool .trip { grid-template-columns:1fr; }
}