/* =========================================================================
   CACTUS CONTAINERS — Legal document layer
   privacy.html · terms.html · accessibility.html
   Loads AFTER styles.css + cinematic.css + catalog.css.
   Existing tokens only — no new brand colors.
   ========================================================================= */

/* =======================  DRAFT BANNER  =======================
   Deliberately loud. These documents have NOT been reviewed by an
   attorney and must not read as finished legal advice. */
.draft-banner{
  background:var(--amber);color:#2b2410;
  border-bottom:2px solid rgba(0,0,0,.18);
}
.draft-banner .container{
  display:flex;gap:14px;align-items:flex-start;
  padding-block:14px;
}
.draft-banner svg{
  width:22px;height:22px;flex-shrink:0;margin-top:2px;stroke:#2b2410;
}
.draft-banner b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;
}
.draft-banner p{
  margin-top:4px;font-size:14.5px;line-height:1.55;max-width:88ch;color:#3a3116;
}

/* =======================  DOCUMENT SHELL  ======================= */
.legal-wrap{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(30px,4vw,58px);align-items:start;
}

/* sticky contents rail */
.legal-toc{position:sticky;top:96px}
.legal-toc h2{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:600;color:var(--muted);
  margin-bottom:14px;
}
.legal-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.legal-toc a{
  display:block;padding:7px 11px;border-radius:var(--radius-sm);
  font-size:14.5px;line-height:1.4;color:var(--muted);
  border-left:2px solid var(--line);transition:all .2s;
}
.legal-toc a:hover{color:var(--sage-600);background:rgba(87,118,86,.07);border-left-color:var(--sage-700)}

/* the prose column itself */
.legal-doc{max-width:76ch;font-size:16.5px}
.legal-doc .doc-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  padding:16px 20px;margin-bottom:34px;
  background:var(--sand-2);border:1px solid var(--line);
  border-radius:var(--radius);font-size:14px;color:var(--muted);
}
.legal-doc .doc-meta b{
  display:block;font-family:var(--font-body);font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:3px;
}

.legal-doc section{scroll-margin-top:110px;margin-bottom:42px}
.legal-doc h2{
  font-size:clamp(21px,2.3vw,27px);letter-spacing:-.02em;
  padding-top:16px;border-top:1px solid var(--line);margin-bottom:16px;
}
.legal-doc h3{
  font-size:17.5px;margin-top:26px;margin-bottom:9px;color:var(--ink);
}
.legal-doc p{margin-bottom:15px;color:var(--text);line-height:1.72}
.legal-doc ul,.legal-doc ol{margin:0 0 18px;padding-left:22px;color:var(--text);line-height:1.72}
.legal-doc li{margin-bottom:9px}
.legal-doc li > ul{margin-top:9px;margin-bottom:4px}
.legal-doc a{color:var(--sage-600);text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{color:var(--sage-700)}
.legal-doc strong{font-weight:600;color:var(--ink)}

/* definition-style rows used for "what we collect" and "who we share with" */
.legal-doc dl{margin:0 0 20px}
.legal-doc dt{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  color:var(--ink);margin-top:18px;
}
.legal-doc dd{margin:5px 0 0;padding-left:0;color:var(--text);line-height:1.7}

/* =======================  PLACEHOLDER MARKER  =======================
   Every real decision Clay still has to make is rendered as one of these,
   so nothing can be mistaken for a settled commitment. */
.needs-input{
  display:inline;padding:2px 8px;border-radius:5px;
  background:#fdf0cf;color:#5c4a12;
  border:1px solid #e6c96a;
  font-family:var(--font-body);font-weight:600;font-size:.94em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* block-level version for whole paragraphs that are still open questions */
.needs-block{
  padding:16px 18px;margin:0 0 18px;border-radius:var(--radius-sm);
  background:#fdf6e3;border:1px solid #e6c96a;border-left:4px solid var(--amber);
  color:#4d3f10;font-size:15.5px;line-height:1.65;
}
.needs-block b{
  display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;margin-bottom:6px;color:#7a6414;
}

/* =======================  IN-PAGE DRAFT NOTE  ======================= */
.legal-callout{
  padding:22px 24px;margin-bottom:34px;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--line-2);
  border-left:4px solid var(--sage-700);box-shadow:var(--shadow-sm);
}
.legal-callout h2{
  border:none;padding:0;margin:0 0 8px;font-size:18px;
}
.legal-callout p{font-size:15.5px;color:var(--muted);margin-bottom:10px}
.legal-callout p:last-child{margin-bottom:0}

/* contact block at the foot of each document */
.legal-contact{
  padding:24px;border-radius:var(--radius);
  background:var(--ink);color:#c8ced2;
}
.legal-contact h3{color:#fff;margin:0 0 12px;font-size:18px}
.legal-contact p{color:#c8ced2;margin-bottom:8px}
.legal-contact a{color:var(--sage-400);text-decoration:none;font-weight:600}
.legal-contact a:hover{color:#fff;text-decoration:underline}

/* NOTE: the footer .f-legal link row is styled in styles.css, not here —
   all 11 site pages carry that row but only these three load legal.css. */

/* =======================  RESPONSIVE  ======================= */
@media(max-width:940px){
  .legal-wrap{grid-template-columns:1fr}
  .legal-toc{position:static;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .legal-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  .legal-toc a{border-left:none;border:1px solid var(--line);font-size:13.5px;padding:6px 11px}
}
@media(max-width:620px){
  .legal-doc{font-size:16px}
  .draft-banner .container{gap:11px}
}