/* Legal-doc styling shared by /privacy/ and /end-user-license-agreement/.
   Assumes ../css/styles.css (design tokens + fonts) is loaded first. */

:root{
  --bg:var(--aqua-450);
  --bg-2:var(--aqua-400);
  --line:color-mix(in oklch,var(--brown-200) 18%,transparent);
  --ink:var(--brown-150);
  --muted:var(--aqua-250);
  --muted-2:var(--aqua-300);
  --gold:var(--brown-250);
  --gold-soft:var(--brown-150);
  --serif:var(--font-serif);
  --sans:var(--font-sans);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-soft);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--brown-250) 40%,transparent);text-underline-offset:3px;transition:color .15s}
a:hover{color:var(--gold)}

/* HEADER (mirrors landing) */
header.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklch,var(--aqua-500) 78%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-0.01em}
.brand:hover{color:var(--ink)}
.brand-mark{height:30px;width:auto;display:block;flex:0 0 auto}
.brand-name{font-weight:500;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14.5px;color:var(--muted);text-decoration:none;transition:.15s}
.nav-links a:hover{color:var(--ink)}
@media(max-width:640px){.nav-links a:not(.home){display:none}}

/* MAIN COLUMN */
main.doc{max-width:720px;margin:0 auto;padding:64px 24px 96px}
main.doc h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px,4.8vw,46px);
  line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin-bottom:14px;
}
main.doc .updated{
  color:var(--muted-2);
  font-size:14px;
  font-style:italic;
  margin-bottom:36px;
  display:block;
}
main.doc .updated em{font-style:normal}

/* Body paragraphs */
main.doc p{margin:0 0 18px;color:var(--ink);text-wrap:pretty}
main.doc p strong{color:var(--gold-soft);font-weight:600}

/* Blockquotes (used for the little author notes) */
main.doc blockquote{
  border-left:2px solid var(--gold);
  padding:4px 0 4px 20px;
  margin:26px 0;
  color:var(--muted);
  font-family:var(--serif);
  font-size:17px;
  font-style:italic;
  line-height:1.6;
}
main.doc blockquote em{font-style:normal}
main.doc blockquote p{margin:0;color:inherit}

/* "More simply put:" italic gloss — recognized post-hoc via a wrapper class */
main.doc p.gloss{
  background:color-mix(in oklch,var(--brown-250) 4%,transparent);
  border-left:2px solid color-mix(in oklch,var(--brown-250) 50%,transparent);
  padding:14px 18px;
  margin:16px 0 22px;
  font-style:italic;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.65;
  border-radius:0 4px 4px 0;
}
main.doc p.gloss em{font-style:italic}
main.doc p.gloss strong{color:inherit}

/* Ordered lists — the doc's whole structure. Style the top level as sections. */
main.doc > ol{
  list-style:none;
  padding:0;
  counter-reset:sec;
  margin:0;
}
main.doc > ol > li{
  counter-increment:sec;
  margin:44px 0 0;
  padding-top:36px;
  border-top:1px solid var(--line);
  position:relative;
}
main.doc > ol > li:first-child{border-top:none;padding-top:0;margin-top:24px}
/* Section heading: the first <strong> in the first <p> of a top-level <li>.
   Made a block so body text following it (TOS-style inline headers) reflows
   below at normal size. Privacy-style headers, whose <strong> is the entire
   <p>, render the same way. */
main.doc > ol > li > p:first-child > strong:first-child,
main.doc > ol > li > strong:first-child{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(22px,2.6vw,28px);
  color:var(--ink);
  line-height:1.22;
  letter-spacing:-0.01em;
  margin:0 0 18px;
  text-transform:none;
}
main.doc > ol > li > p:first-child > strong:first-child::before,
main.doc > ol > li > strong:first-child::before{
  content:counter(sec) ". ";
  color:var(--gold);
  font-weight:600;
  margin-right:4px;
}

/* Second-level (subsections) */
main.doc > ol > li > ol{
  counter-reset:sub;
  list-style:none;
  padding:0;
  margin:0;
}
main.doc > ol > li > ol > li{
  counter-increment:sub;
  margin:22px 0 0;
  padding-left:0;
}
main.doc > ol > li > ol > li > p:first-child > strong:first-child,
main.doc > ol > li > ol > li > strong:first-child{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:16.5px;
  color:var(--gold-soft);
  margin:0 0 8px;
}
main.doc > ol > li > ol > li > p:first-child > strong:first-child::before,
main.doc > ol > li > ol > li > strong:first-child::before{
  content:counter(sec) "." counter(sub) "  ";
  color:var(--gold);
  font-weight:600;
  margin-right:2px;
}

/* Sub-items with no bold run-in heading. The counter above hangs off the
   <strong>, so an item that is plain prose (common in the ToS and the privacy
   policy) silently lost its number. Put it on the <li> instead for those. */
main.doc > ol > li > ol > li:not(:has(> strong:first-child)):not(:has(> p:first-child > strong:first-child))::before{
  content:counter(sec) "." counter(sub) "  ";
  color:var(--gold);
  font-weight:600;
  margin-right:2px;
}

/* Third-level — the "We Process the Following… / Purpose / Consequences" items */
main.doc > ol > li > ol > li > ol{
  list-style:none;
  padding:0;
  margin:8px 0 0 0;
  counter-reset:subsub;
}
main.doc > ol > li > ol > li > ol > li{
  counter-increment:subsub;
  margin:6px 0;
  padding-left:46px;
  position:relative;
  color:var(--ink);
  font-size:15.5px;
}
main.doc > ol > li > ol > li > ol > li::before{
  content:counter(sec) "." counter(sub) "." counter(subsub);
  position:absolute;
  left:0;top:0;
  width:38px;
  color:var(--muted-2);
  font-size:12.5px;
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  padding-top:3px;
}

/* Sub-lists that don't get the numbered treatment (nested inside 3rd level, or unordered) */
main.doc ul{padding-left:22px;margin:6px 0 10px;color:var(--ink)}
main.doc ul li{margin:4px 0}

/* Table of Contents: styled as compact nav card at top */
main.doc .toc{
  background:color-mix(in oklch,var(--aqua-400) 55%,transparent);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 26px;
  margin:0 0 40px;
  font-size:15px;
}
main.doc .toc-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
main.doc .toc ol{
  list-style:none;padding:0;margin:0;counter-reset:toc;
  display:grid;grid-template-columns:1fr;gap:2px;
}
@media(min-width:640px){main.doc .toc ol{grid-template-columns:1fr 1fr;gap:4px 24px}}
main.doc .toc ol li{counter-increment:toc;line-height:1.5}
main.doc .toc ol li::before{
  content:counter(toc) ". ";
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  margin-right:4px;
  font-size:13.5px;
}
main.doc .toc a{color:var(--muted);text-decoration:none;transition:color .12s}
main.doc .toc a:hover{color:var(--gold-soft)}

/* FOOTER */
footer.legal-foot{
  border-top:1px solid var(--line);
  margin-top:56px;
  padding:32px 24px 48px;
  text-align:center;
  color:var(--muted-2);
  font-size:14px;
}
footer.legal-foot a{color:var(--muted);text-decoration:none;margin:0 12px}
footer.legal-foot a:hover{color:var(--gold-soft)}