/* DRAFT — not reviewed by counsel. Shared stylesheet for /legal/*.html.
   Tokens, fonts and the header/footer are the site's own (index.html, docs/index.html) so the legal
   pages read as one system with the rest of smarterdata.ai. No scripts anywhere on these pages. */
:root {
    --ink: #0b0b0e; --panel: #0e1310; --panel2: #0c100e; --line: rgba(239,233,221,.12);
    --cream: #efe9dd; --stone: #a29a8c; --faint: rgba(239,233,221,.68);
    --pulse: #63e6a4; --pulse-soft: #8ff0c0; --pulse-dim: rgba(99,230,164,.14);
    --brass: #d6a63e; --tide: #7d9fb3; --rust: #d67c5c;
    --ease: cubic-bezier(.16, 1, .3, 1);
  }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.2rem; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background:
    radial-gradient(70rem 42rem at 85% -12%, rgba(99,230,164,.07), transparent 58%),
    radial-gradient(60rem 40rem at 5% 108%, rgba(99,230,164,.05), transparent 58%),
    var(--ink);
  color: var(--cream); min-height: 100svh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
}
header, main, footer { position: relative; z-index: 1; }
a { color: var(--pulse); text-decoration: none; }
a:hover, a:focus-visible { color: var(--pulse-soft); }

/* ── header: identical to the docs page ── */
header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem clamp(1rem, 4vw, 3rem);
  background: rgba(11,11,14,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(239,233,221,.07);
}
.word { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--cream); text-decoration: none; white-space: nowrap; }
.word .slash { color: var(--pulse); }
.word small { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-left: .6rem; font-weight: 500; }
/* never wider than the screen: links never wrap inside themselves, the nav may drop to its own row on the smallest
   phones, and the duplicate Console link (the CTA opens the same page) leaves below 480px */
header { flex-wrap: wrap; row-gap: .5rem; }
nav { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
nav a {
  font-family: "Space Grotesk", sans-serif; font-size: .84rem; font-weight: 600;
  color: var(--stone); text-decoration: none; padding: .48rem .8rem; white-space: nowrap;
  border: 1px solid transparent; border-radius: .6rem; transition: color .25s, border-color .25s;
}
nav a:hover, nav a:focus-visible { color: var(--cream); }
nav a.cta { color: var(--ink); background: var(--pulse); border-color: var(--pulse); }
nav a.cta:hover { background: var(--pulse-soft); border-color: var(--pulse-soft); color: var(--ink); }

/* ── article ── */
main { max-width: 50rem; margin: 0 auto; padding: clamp(1.6rem, 5vh, 3.2rem) 1rem 4rem; }
/* residual round 2026-10-24: nothing on a legal page renders below 11px — the kicker (10.24px), the header tag and the
   CONTENTS heading (9.6px), the section numbers (9.92px) and the document pills (10.88px) were the smallest text on the site */
.kicker {
  font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--pulse);
  display: inline-flex; align-items: center; gap: .55rem;
}
.kicker .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pulse); animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
h1 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.06; letter-spacing: -.02em;
  margin: .8rem 0 .9rem; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--pulse); }
.lede { font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.7; color: var(--faint); }
.lede b, p b, li b { color: var(--cream); font-weight: 500; }
.meta { margin-top: .9rem; font-family: "JetBrains Mono", monospace; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); line-height: 1.9; }

/* the three documents, switchable */
.docs-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.docs-nav a {
  font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--faint);
  border: 1px solid var(--line); border-radius: 99px; padding: .32rem .75rem; transition: color .25s, border-color .25s;
}
.docs-nav a:hover { color: var(--cream); border-color: rgba(239,233,221,.4); }
.docs-nav a[aria-current="page"] { color: var(--pulse); border-color: rgba(99,230,164,.45); background: var(--pulse-dim); }

/* visible draft banner — remove together with the DRAFT comment once counsel has signed off */
.note { border-left: 2px solid var(--brass); background: rgba(214,166,62,.06); border-radius: 0 .6rem .6rem 0; padding: .75rem .95rem; margin-top: 1.4rem; font-size: .86rem; line-height: 1.65; color: var(--faint); }
.note b { color: var(--cream); font-weight: 500; }
.note.green { border-left-color: var(--pulse); background: rgba(99,230,164,.06); }

section { margin-top: clamp(2.2rem, 6vh, 3.4rem); scroll-margin-top: 5.2rem; }
.h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.16; letter-spacing: -.015em; margin: .4rem 0 .7rem; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--pulse); }
.h2 .n { font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 500; letter-spacing: .2em; color: var(--stone); display: block; margin-bottom: .35rem; }
h3.h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
p { font-size: .93rem; line-height: 1.72; color: var(--faint); }
p + p { margin-top: .7rem; }
ul.list, ol.list { margin: .7rem 0 0 1.15rem; font-size: .92rem; line-height: 1.7; color: var(--faint); }
ul.list li + li, ol.list li + li { margin-top: .35rem; }
code { font-family: "JetBrains Mono", monospace; font-size: .82em; color: var(--pulse-soft); background: rgba(99,230,164,.08); padding: .1em .38em; border-radius: .3em; overflow-wrap: anywhere; }

/* a placeholder that Ivan has to fill — loud on purpose, nothing with one of these may go live. It inherits the surrounding
   size: at .86em inside .meta it was 9px, the smallest text on the site and the easiest to miss on a phone */
.todo { font-family: "JetBrains Mono", monospace; color: var(--brass); background: rgba(214,166,62,.12); border: 1px dashed rgba(214,166,62,.55); border-radius: .35em; padding: .05em .4em; }

/* in-page contents */
.toc { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel2); padding: .9rem 1.1rem; }
.toc h3 { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin-bottom: .5rem; }
.toc ol { margin: 0 0 0 1.1rem; columns: 2; column-gap: 1.6rem; font-size: .84rem; line-height: 1.75; }
.toc a { color: var(--faint); }
.toc a:hover { color: var(--cream); }

/* ── footer: the site's footer plus the legal links ── */
footer {
  display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: 1.4rem; margin-top: 1rem;
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(239,233,221,.66); /* ≈7:1 on the ink (was 3.95:1 at 10px) */
}
footer .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pulse); animation: blink 2.6s ease-in-out infinite; }
footer .legal { display: inline-flex; gap: .7rem; align-items: center; margin-left: .9rem; }
footer .legal a { font: inherit; letter-spacing: inherit; color: inherit; padding: 0; border: 0; border-radius: 0; text-decoration: none; transition: color .25s; }
footer .legal a:hover, footer .legal a:focus-visible { color: var(--cream); }

@media (max-width: 700px) {
  nav a.ghost-hide { display: none; }
  .toc ol { columns: 1; }
}
@media (max-width: 480px) {
  header { position: static; }
  nav a.phone-hide { display: none; }
  nav a { padding: .45rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kicker .dot, footer .dot { animation: none !important; }
  html { scroll-behavior: auto; }
}