/* ============================================================
   Kuberiss — long-form legal documents (privacy, terms).
   Mobile-first. Loaded AFTER site.css, which supplies the tokens,
   the header and the footer.

   Note: the design system's base.css zeroes the margins on h1–h4 and
   p, so every bit of prose rhythm below is authored explicitly.
   ============================================================ */

.legal{padding-top:32px;padding-bottom:8px}

/* ---------- document head ---------- */
.legal__head{display:flex;flex-direction:column;gap:8px;padding-bottom:24px;border-bottom:1px solid var(--hairline)}
.legal__title{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(32px,9vw,52px);line-height:1.06;letter-spacing:-.03em;margin:6px 0 0;
}
.legal__updated{font-size:12px;letter-spacing:.02em;color:var(--ink-3)}
.legal__intro{font-size:17px;line-height:1.68;color:var(--ink-2);margin:20px 0 0;max-width:68ch}

/* ---------- table of contents ----------
   A checkbox disclosure, same pattern as the header nav — deliberately
   not <details>, whose closed content Chrome hides in a way the desktop
   media query below could not override. */
.toc-check{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.toc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;margin-top:20px;padding:0 16px;
  border:1px solid var(--hairline);border-radius:14px;background:#FFFFFF;
  font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;
}
.toc-btn::after{
  content:'';width:8px;height:8px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.toc-check:checked ~ .toc-btn::after{transform:translateY(2px) rotate(225deg)}
.toc-check:focus-visible ~ .toc-btn{box-shadow:0 0 0 3px rgba(1,50,32,.22)}
.legal__toc{display:none;margin-top:12px}
.toc-check:checked ~ .legal__toc{display:block}
.legal__toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.legal__toc-list a{display:block;padding:9px 0;font-size:14px;line-height:1.4;color:var(--ink-2)}

/* ---------- prose ---------- */
.legal__body{max-width:68ch;font-size:16px;line-height:1.7;color:var(--ink-2);padding-top:8px}
.legal__body section[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}
.legal__body h2{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);margin:36px 0 12px;
}
.legal__body section:first-child h2{margin-top:28px}
.legal__body p{margin:0 0 14px}
.legal__body ul,.legal__body ol{margin:0 0 16px;padding-left:20px}
.legal__body li{margin:0 0 8px}
.legal__body li::marker{color:var(--ink-3)}
.legal__body strong{color:var(--ink);font-weight:600}
.legal__body a{
  color:var(--green);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(1,50,32,.32);
}
.legal__body a:hover{text-decoration-color:var(--green)}
/* bold lead-ins that introduce a list — a labelled paragraph, not a
   heading, so they stay out of the document outline and the TOC */
.legal__label{margin:20px 0 8px;color:var(--ink);font-weight:600}
.legal__address{font-style:normal;line-height:1.7;color:var(--ink-2)}

.legal__related{
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
  margin-top:40px;padding-top:20px;border-top:1px solid var(--hairline);
  font-size:14px;color:var(--ink-3);max-width:68ch;
}

/* ============================================================
   >= 768px
   ============================================================ */
@media (min-width:768px){
  .legal{padding-top:48px}
  .legal__body{font-size:17px}
  .legal__body h2{font-size:24px;margin:44px 0 14px}
}

/* ============================================================
   >= 1000px — the contents become a sticky rail and the toggle goes
   ============================================================ */
@media (min-width:1000px){
  .legal{
    display:grid;grid-template-columns:minmax(0,1fr) 232px;
    column-gap:64px;align-items:start;
    grid-template-areas:
      "head head"
      "body toc"
      "rel  toc";
  }
  .legal__head{grid-area:head}
  .legal__body{grid-area:body}
  .legal__related{grid-area:rel}
  .legal__toc{
    grid-area:toc;display:block;margin-top:36px;
    position:sticky;top:calc(var(--hdr-h) + 24px);
  }
  .toc-check,.toc-btn{display:none}
  .legal__toc-list a{padding:6px 0;font-size:13px;color:var(--ink-3)}
  .legal__toc-list a:hover{color:var(--green)}
}