/* ============================================================
   Kondaro — legal pages (/privacy, /terms)

   Long-form prose, no hero and no motion. These two pages are the only
   consumers, and they are linked from the footer of every marketing page,
   so the styling lives here rather than inline on each page: a wording or
   spacing change to one legal page should not silently diverge from the
   other.

   NOTE ON THE NAV. Both pages open on a WHITE background and author the
   nav as `class="nav scrolled"`, deliberately never loading site.js — see
   the comment at the foot of each page. Nothing here may depend on JS.
   ============================================================ */

.legal-wrap{max-width:760px;margin:0 auto;padding:0 32px}

/* The page head sits directly under the fixed nav, so it carries the
   subhero's top padding without the subhero's dark background. Same
   treatment /demo uses. */
.legal-head{padding:150px 0 0}
.legal-head h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.06;letter-spacing:-.03em;font-weight:800;color:var(--slate-900);margin:0 0 10px}
.legal-updated{margin:0;font-size:var(--text-sm);color:var(--slate-500)}

.legal-body{padding:34px 0 90px}
.legal-lede{font-size:var(--text-lg);line-height:1.6;color:var(--slate-700);margin:0 0 28px}

.legal-body h2{font-size:var(--text-xl);font-weight:700;letter-spacing:-.015em;color:var(--slate-900);margin:38px 0 12px}
.legal-body p{font-size:var(--text-base);line-height:1.7;color:var(--slate-600);margin:0 0 16px}
.legal-body ul{margin:0 0 16px;padding-left:22px}
.legal-body li{font-size:var(--text-base);line-height:1.7;color:var(--slate-600);margin-bottom:9px}
.legal-body a{color:var(--kon-green);font-weight:600;text-decoration:none}
.legal-body a:hover{text-decoration:underline}
.legal-contact{margin-bottom:0}

@media(max-width:560px){
  .legal-head{padding:118px 0 0}
  .legal-wrap{padding:0 20px}
  .legal-body{padding:26px 0 70px}
}