/* Shared styling for the 4 legal pages (privacy, terms, cookies, aviso legal).
 *
 * Tokens are copied from public/home.html rather than imported, because the homepage keeps
 * its CSS inline (one request, no render-blocking link) and these pages are the only other
 * hand-written HTML on the site. If a token changes there, change it here too: the pair is
 * small enough that a shared file for 10 variables would cost more than it saves.
 *
 * Dark-only on purpose. The app has a light/dark picker (data-theme, see src/lib/theme.js)
 * but the marketing side is dark-only, and a legal page reached from the footer of a dark
 * page should not flash beige.
 */
:root{
  --bg:#16121A;
  --ink:#F4F1EC;
  --ink-soft:rgba(244,241,236,.64);
  --ink-faint:rgba(244,241,236,.42);
  --accent:#D08A66;
  --accent-strong:#E29E7C;

  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --glass-line:rgba(255,255,255,.13);
  --glass-blur:blur(20px) saturate(180%);
  --glass-lip:inset 0 1px 0 rgba(255,255,255,.16);

  --font:-apple-system,'SF Pro Text','Avenir Next',system-ui,sans-serif;
  --page:760px;          /* narrower than the homepage's 1120: this is a reading column */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 34% at 12% -10%, rgba(208,138,102,.16), transparent 62%),
    radial-gradient(48% 30% at 92% 2%, rgba(143,166,212,.11), transparent 60%);
}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}

/* ---------------- nav, a trimmed copy of the homepage header ---------------- */
header{position:sticky;top:0;z-index:50;background:rgba(22,18,26,.72);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-line)}
.nav{display:flex;align-items:center;gap:24px;height:70px;
  width:100%;max-width:var(--page);margin:0 auto;padding:0 26px}
.wm{font-size:21px;font-weight:600;letter-spacing:-.03em}
.wm span{color:var(--accent)}
.nav .back{margin-left:auto;font-size:14.5px;color:var(--ink-soft)}
.nav .back:hover{color:var(--ink)}

/* ---------------- the reading column ---------------- */
.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 26px}
.doc{padding:64px 0 96px}
.kicker{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent-strong);
  font-weight:600;margin:0 0 16px}
h1{font-size:clamp(34px,4.6vw,50px);line-height:1.04;letter-spacing:-.035em;margin:0;font-weight:600}
.updated{margin:20px 0 0;font-size:13.5px;color:var(--ink-faint)}
.lede{margin:26px 0 0;font-size:18px;line-height:1.6;color:var(--ink-soft)}

h2{font-size:24px;line-height:1.2;letter-spacing:-.025em;margin:56px 0 0;font-weight:600;
  scroll-margin-top:90px}
h3{font-size:17px;letter-spacing:-.015em;margin:34px 0 0;font-weight:600}
p{font-size:16.5px;line-height:1.72;color:var(--ink-soft);margin:18px 0 0}
p b,li b{color:var(--ink);font-weight:600}
ul,ol{margin:18px 0 0;padding-left:22px}
li{font-size:16.5px;line-height:1.72;color:var(--ink-soft);margin:10px 0 0}
a.link{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(226,158,124,.45)}
a.link:hover{text-decoration-color:var(--accent-strong)}
hr{border:0;border-top:1px solid var(--glass-line);margin:56px 0 0}

/* ---------------- table of contents ---------------- */
.toc{margin:44px 0 0;padding:24px 26px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-lip)}
.toc p{margin:0 0 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-faint);font-weight:600}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:7px 0 0;font-size:15.5px}
.toc a:hover{color:var(--ink)}

/* ---------------- the identity / summary card ---------------- */
.card{margin:34px 0 0;padding:26px;border-radius:20px;
  background:var(--glass-2);border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-lip)}
.card p:first-child{margin-top:0}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 22px;font-size:16px}
.card dt{color:var(--ink-faint);white-space:nowrap}
.card dd{margin:0;color:var(--ink)}

/* ---------------- tables ----------------
   Wide tables scroll inside their own box. A legal page that makes the whole body scroll
   sideways on a phone is the one page nobody will then read. */
.tw{margin:22px 0 0;overflow-x:auto;border-radius:16px;border:1px solid var(--glass-line);
  background:var(--glass)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07);
  line-height:1.55;vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);
  font-weight:600;white-space:nowrap}
td{color:var(--ink-soft)}
td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--glass-line);padding:30px 0 44px}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:13.5px;
  color:var(--ink-faint)}
.foot a:hover{color:var(--ink)}
.foot .right{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px}

@media (max-width:640px){
  .doc{padding:44px 0 72px}
  h2{margin-top:44px}
  .card dl{grid-template-columns:1fr;gap:4px}
  .card dt{margin-top:10px}
  .foot .right{margin-left:0;width:100%}
}