/* The legal pages: Terms, Privacy, SMS Terms, the agreements and the pages
   between them. The palette, the type and the corner are /s/site.css, the
   front page's own (Facundo, 2026-10-07: "Agreement page is not looking like
   our page … we should update all of them, all terms privacy etc like all the
   legals"). What is here is long-form reading: a measure a line can be read
   across, sections divided by a hairline, and nothing filled. */
.doc{width:min(680px,100% - 32px);margin-inline:auto;
  padding:calc(112px + env(safe-area-inset-top,0px)) 0 72px}
.doc h1{font:500 clamp(2.4rem,6vw,3.6rem)/1 var(--font);letter-spacing:-.04em;color:var(--solid);
  margin:0 0 16px;text-wrap:balance}
.doc .when{font:600 .75rem/1.3 var(--font);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 40px}
.doc .lede{font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.45;color:var(--muted);margin:0 0 32px;
  max-width:36em;text-wrap:pretty}
.doc h2{font:500 clamp(1.3rem,2.6vw,1.6rem)/1.2 var(--font);letter-spacing:-.02em;color:var(--solid);
  margin:48px 0 14px;padding-top:28px;border-top:1px solid var(--hair);text-wrap:balance}
.doc h3{font:600 1rem/1.35 var(--font);color:var(--solid);margin:28px 0 8px}
.doc p,.doc li{font-size:1rem;line-height:1.65;color:var(--text);max-width:62ch;text-wrap:pretty}
.doc p{margin:0 0 14px}
.doc strong{color:var(--solid);font-weight:600}
.doc em{font-style:italic}
.doc a{color:var(--solid);text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:3px}
.doc a:hover{text-decoration-color:var(--solid)}
.doc ul,.doc ol{margin:0 0 16px;padding-left:1.25em}
.doc li{margin:0 0 8px}
.doc li::marker{color:var(--muted)}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.95rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;
  border-bottom:1px solid var(--hair)}
.doc th{font:600 .72rem/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.doc td{color:var(--text)}
/* A numbered clause: its number in the margin's colour, its words in the
   body's. The agreements are read clause by clause and cited the same way. */
.doc .clause{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:0 4px;margin:0 0 14px}
.doc .clause>b{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.doc .clause>p{margin:0}
/* The one action a legal page can carry: accepting an agreement. */
.doc .cta{margin:8px 0 0}
.doc .note{margin-top:20px;font-size:.88rem;line-height:1.55;color:var(--muted)}
/* Signing: the site's fields, one column, the signature in a hand. */
.doc form.sign{display:grid;gap:16px;max-width:560px;margin:8px 0 0}
.doc form.sign .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.doc form.sign label{display:grid;gap:7px;font-size:.92rem;font-weight:500;color:var(--solid)}
.doc form.sign input:not([type=checkbox]){font:inherit;font-size:1rem;color:var(--solid);background:var(--paper);
  border:1px solid var(--hair);border-radius:14px;padding:14px 16px;width:100%;box-sizing:border-box}
.doc form.sign input:focus{outline:none;border-color:var(--solid)}
.doc form.sign .tick{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--text);line-height:1.5}
.doc form.sign .tick input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--solid)}
.doc form.sign .go{justify-self:start}
.doc .warn{color:var(--solid);font-weight:600;border-left:2px solid var(--solid);padding-left:12px}
.doc .good{color:var(--solid);font-weight:600}
/* A defined list: Parties, the signature page. Label, then what it is. */
.doc dl.terms-list{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);
  gap:10px 24px;margin:4px 0 16px}
.doc dl.terms-list dt{color:var(--muted);font-weight:500}
.doc dl.terms-list dd{margin:0;color:var(--solid);overflow-wrap:anywhere}
/* Initials: two to four letters, written large, the way they are on paper. */
.doc form.sign label.initials input{max-width:150px;text-transform:uppercase;letter-spacing:.2em;
  font-weight:600;font-size:1.2rem}
/* The signature: the name in a hand, and what it is signed with. */
.doc .sig-name{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:2.2rem;line-height:1.2;color:var(--solid);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--rule);max-width:none}

/* What every legal page ends with: who it is from. */
.legal-foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);
  font-size:.9rem;color:var(--muted)}
.legal-foot a{color:var(--muted)}
.legal-foot p{margin:0;font-size:.9rem;color:var(--muted)}
/* Inside the dashboard (/d/agreement): its corner and title, the legal type. */
.doc.in-dash{width:auto;max-width:720px;margin:0;padding:0}
.doc.in-dash h2{text-transform:none;letter-spacing:-.02em}
@media print{
  .top{display:none}
  .doc{padding-top:0;width:auto}
  .doc h2{break-after:avoid}
}
/* The corner stays put while a long page scrolls under it, so it carries the
   page's ground; on the front page there is nothing long beneath it. */
header.top{background:color-mix(in srgb,var(--bg) 94%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}