/* ============================================================
   Grands Pas — legal / plain-content pages (privacy, 404)
   Layered on top of home.css: reuses its tokens, type scale and
   footer so these pages can never drift from the brand.
   Long-form reading, so the measure is narrow and the type larger
   than the marketing page.
   ============================================================ */

.legal-page{background:var(--cream)}

/* --- header ------------------------------------------------- */
.legal-nav{
  background:var(--ink-2);color:var(--wt);
  padding:16px 0;position:sticky;top:0;z-index:100;
}
.legal-nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.legal-nav .brand{display:flex;align-items:center;gap:12px;color:var(--wt)}
.legal-nav .brand img{height:44px;width:44px;border-radius:13px;object-fit:cover}
.legal-nav .brand b{font-family:var(--disp);font-size:1.05rem;display:block;line-height:1.1}
.legal-nav .brand small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.legal-back{color:var(--wt-soft);font-size:.9rem;font-weight:600;white-space:nowrap}
.legal-back:hover{color:var(--yellow)}

/* --- body --------------------------------------------------- */
.legal-wrap{padding:clamp(44px,7vw,90px) 0 clamp(60px,8vw,110px)}
.legal-body{max-width:720px}          /* ~70 characters — comfortable for long reading */

.legal-body .tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--purple);margin-bottom:14px;
}
.legal-body h1{font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1.05;margin-bottom:20px}
.legal-lede{font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.7;color:var(--tx-soft);margin-bottom:14px}
.legal-updated{font-size:.85rem;color:var(--tx-faint);margin-bottom:44px;font-style:italic}

.legal-body h2{
  font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:800;
  letter-spacing:-.01em;margin:46px 0 14px;padding-top:22px;
  border-top:2px solid var(--line);color:var(--ink);
}
.legal-body h3{
  font-family:var(--disp);font-size:1.04rem;font-weight:700;
  margin:26px 0 8px;color:var(--purple-deep);
}
.legal-body p{font-size:1rem;line-height:1.75;color:var(--tx);margin-bottom:14px}
.legal-body ul{margin:0 0 16px 0;padding-left:22px}
.legal-body li{font-size:1rem;line-height:1.75;margin-bottom:8px}
.legal-body a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:var(--purple-deep)}
.legal-body b{font-weight:700}

.legal-contact{
  margin-top:52px;padding:26px 28px;background:#fff;
  border:2px solid var(--ink);border-radius:20px;box-shadow:-8px 8px 0 var(--yellow);
}
.legal-contact b{font-family:var(--disp);font-size:1.08rem;display:block;margin-bottom:6px}
.legal-contact p{margin:0}

/* --- 404 ---------------------------------------------------- */
.nf-wrap{min-height:70vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.nf-code{
  font-family:var(--disp);font-weight:800;font-size:clamp(5rem,18vw,11rem);
  line-height:.9;color:var(--yellow);letter-spacing:-.04em;
  -webkit-text-stroke:3px var(--ink);
}
.nf-wrap h1{font-size:clamp(1.7rem,4.6vw,2.6rem);margin:18px 0 14px}
.nf-wrap p{font-size:1.04rem;color:var(--tx-soft);max-width:44ch;margin:0 auto 30px;line-height:1.7}
.nf-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

@media(max-width:620px){
  .legal-nav .brand small{display:none}
  .legal-body h2{margin-top:36px}
}