/* =============================================================================
   Shared styling for the three legal pages.

   The one place the site uses an external stylesheet. Everything else here is
   a single self-contained file, and that rule earns its keep — but three
   near-identical documents would mean three copies of the same CSS, and the
   first brand change would leave one of them stale. One file, three thin
   documents of pure content.

   Deliberately plain. A privacy policy that looks like a marketing page reads
   as though it is selling you something.
   ============================================================================= */

:root{
  --p600:#2563eb;--p700:#1d4ed8;--p50:#eff6ff;
  --w500:#f59e0b;--w50:#fffbeb;--w700:#b45309;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g400:#9ca3af;--g500:#6b7280;
  --g600:#4b5563;--g700:#374151;--g900:#111827;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--g700);background:#fff;line-height:1.7;font-size:1rem}

.wrap{max-width:46rem;margin:0 auto;padding:0 1.2rem}

header{border-bottom:1px solid var(--g200);background:#fff;position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;gap:1rem;height:4rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.12rem;
  color:var(--g900);text-decoration:none}
.brand .wm{line-height:1}
.brand .ic{color:var(--p600)}
header .back{margin-left:auto;font-size:.9rem;font-weight:600;color:var(--p700);text-decoration:none}
header .back:hover{text-decoration:underline}

main{padding:3rem 0 4rem}
h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--g900);
  line-height:1.15}
.updated{margin-top:.7rem;font-size:.86rem;color:var(--g500)}

/* The plain-language summary. Not a substitute for the document — a way in. */
.tldr{background:var(--p50);border:1px solid #bfdbfe;border-radius:.9rem;
  padding:1.1rem 1.25rem;margin:1.8rem 0 2.4rem}
.tldr h2{font-size:.78rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  color:var(--p700);margin-bottom:.6rem}
.tldr ul{list-style:none;display:grid;gap:.45rem}
.tldr li{display:flex;gap:.55rem;font-size:.93rem;color:var(--g700)}
.tldr li::before{content:"";flex:0 0 auto;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--p600);margin-top:.62rem}

h2{font-size:1.18rem;font-weight:750;color:var(--g900);margin:2.4rem 0 .7rem;
  letter-spacing:-.01em;scroll-margin-top:5rem}
h3{font-size:1rem;font-weight:700;color:var(--g900);margin:1.5rem 0 .4rem}
p{margin-bottom:.9rem}
ul,ol{margin:0 0 1rem 1.3rem}
li{margin-bottom:.35rem}
a{color:var(--p700)}
strong{color:var(--g900);font-weight:650}

/* The clause that matters most on the site gets to look like it matters. */
.callout{border-left:4px solid var(--w500);background:var(--w50);border-radius:0 .7rem .7rem 0;
  padding:1rem 1.15rem;margin:1.4rem 0}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--w700)}

table{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;font-size:.9rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--g200);vertical-align:top}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--g500);font-weight:700}
td:first-child{font-weight:600;color:var(--g900);white-space:nowrap}
@media(max-width:560px){
  td:first-child{white-space:normal}
  table{font-size:.85rem}
  th,td{padding:.5rem .4rem}
}

/* Anything the owner still has to fill in. Impossible to miss, and the test
   suite counts them so a placeholder cannot quietly become permanent. */
.todo{background:#fef08a;color:#713f12;font-weight:650;padding:.05em .35em;border-radius:.25em}

.toc{background:var(--g50);border:1px solid var(--g200);border-radius:.8rem;padding:1rem 1.2rem;
  margin:2rem 0}
.toc h2{font-size:.78rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  color:var(--g500);margin:0 0 .5rem}
.toc ol{margin:0 0 0 1.2rem;font-size:.92rem}
.toc li{margin-bottom:.2rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

footer{border-top:1px solid var(--g200);background:var(--g50);padding:2rem 0 2.5rem;
  font-size:.86rem;color:var(--g500)}
footer .flinks{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-bottom:.9rem}
footer a{color:var(--g600);text-decoration:none}
footer a:hover{color:var(--p700);text-decoration:underline}
footer .built{display:flex;align-items:center;gap:.35rem}
footer .built svg{color:#ef4444}

/* --------------------------------------------------------------- the form
   Only /contact uses these. Kept here rather than inline so the contact page
   stays what it should be — a form and nothing else. */
.fld{margin-bottom:1.1rem}
.fld label{display:block;font-size:.86rem;font-weight:650;color:var(--g900);margin-bottom:.3rem}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:.95rem;color:var(--g900);
  background:#fff;border:1px solid var(--g200);border-radius:.6rem;padding:.65rem .8rem;
  transition:border-color .12s,box-shadow .12s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--p600);
  box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.fld textarea{resize:vertical;min-height:7rem;line-height:1.6}
.fld .hint{font-size:.8rem;color:var(--g500);margin-top:.3rem}

.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:650;
  font-size:.95rem;color:#fff;background:linear-gradient(to right,#2563eb,#9333ea);border:0;
  border-radius:.65rem;padding:.7rem 1.5rem;cursor:pointer;transition:transform .12s,opacity .12s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}

.cstate{margin:.8rem 0 0;font-size:.9rem;min-height:1.3em}
.cstate.good{color:#047857;font-weight:600}
.cstate.bad{color:#b91c1c;font-weight:600}

.alt{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--g200)}
.alt h2{margin-top:0}
.alt p{font-size:.93rem}