
/* ============================================================
   COWCARD — legal.css
   Styles for terms.html and privacy.html.
   ============================================================ */

/* ---------- legal page layout ---------- */

.legal{ padding-top:calc(68px + clamp(2.5rem,5vw,4rem)); padding-bottom:clamp(4rem,8vw,7rem); }
.legal-back{ font-size:.85rem; color:var(--gray-dim); }
.legal-back i{ width:14px; }
.legal-back:hover{ color:var(--light); }
.legal h1{ font-size:clamp(2rem,4.6vw,3.1rem); margin:1.6rem 0 0; }
@media (max-width:640px){ .legal-back{ min-height:44px; } .legal h1{ margin-top:.6rem; } }
.legal-meta{ margin-top:1rem; font-size:.82rem; color:var(--gray-dim); letter-spacing:.02em; }
.legal-grid{
  display:grid; grid-template-columns:210px minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.5rem,5vw,4rem); align-items:start;
}
@media (max-width:900px){ .legal-grid{ grid-template-columns:1fr; } }

/* ---------- table of contents ---------- */

.toc{
  position:sticky; top:92px; max-height:calc(100vh - 130px); overflow:auto; scrollbar-width:none;
  padding:.95rem 1.1rem 1.1rem;
  border:2.5px solid var(--ink) !important;
  border-left:2px solid var(--pink-d);
  border-radius:0 10px 10px 0;
  box-shadow:var(--sh) !important;
  background:var(--white) !important;
  color:var(--ink) !important;
}
@supports (height:100dvh){ .toc{ max-height:calc(100dvh - 130px); } }
.toc::-webkit-scrollbar{ display:none; }
.toc ol{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.toc a{ font-size:.8rem; line-height:1.35; color:var(--gray-dim); display:block; }
.toc a:hover{ color:var(--pink) !important; }
@media (max-width:900px){
  .toc{ position:static; max-height:none; padding:.95rem 1.1rem 1.2rem; }
  .toc ol{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem; }
}
@media (max-width:640px){
  .toc ol{ gap:0 1.2rem; }
  .toc a{ display:flex; align-items:center; min-height:44px; padding:.3rem 0; font-size:.82rem; }
}

/* ---------- document body ---------- */

.doc{ max-width:78ch; min-width:0; }
.doc h2{
  font-size:clamp(1.2rem,2.2vw,1.5rem); margin:3rem 0 1.1rem;
  padding-top:1.6rem; border-top:1px solid var(--ink-line);
}
.doc > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.doc h3{ font-size:1rem; font-weight:600; margin:2rem 0 .7rem; }
.doc p{ color:var(--gray); font-size:.95rem; line-height:1.75; margin-bottom:1.05rem; }
.doc ul{ margin:0 0 1.3rem; padding-left:1.2rem; color:var(--gray); font-size:.95rem; line-height:1.7; }
.doc li{ margin-bottom:.55rem; }
.doc li::marker{ color:var(--pink); }
.doc a{ color:var(--pink); text-decoration:underline; text-underline-offset:3px; }
.doc a:hover{ color:var(--light); }
