/* ============================================================
   JPMate — legal pages (Privacy Policy, Terms of Use)
   Shares the landing brand tokens; clean long-form prose.
   ============================================================ */
:root{
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bg:#f3f1ec; --ink:#19202c; --ink2:#525a66; --muted:#8b919b;
  --jp:#176d8a; --mate:#e3624a; --primary:#6366f1; --green:#1f9e6e;
  --line:#e6e2d8; --card:#fff;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
::selection{ background:#d7e6ec; }
.wrap{ max-width:820px; margin:0 auto; padding:0 32px; }

/* nav (matches landing) */
.nav{ position:sticky; top:0; z-index:50; transition:background .25s, box-shadow .25s, border-color .25s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(243,241,236,.86); backdrop-filter:blur(12px); border-color:var(--line); }
.nav .bar{ display:flex; align-items:center; justify-content:space-between; height:72px; max-width:1180px; margin:0 auto; padding:0 32px; }
.nav .logo{ font-size:22px; font-weight:800; letter-spacing:-.4px; text-decoration:none; }
.nav .logo .jp{ color:var(--jp); } .nav .logo .mate{ color:var(--mate); }
.btn-cta{ background:var(--primary); color:#fff; font-size:14px; font-weight:700; padding:11px 20px; border-radius:11px; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .2s; }
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(99,102,241,.32); }

/* header */
.legal-head{ padding:48px 0 8px; }
.legal-head .eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mate); }
.legal-head h1{ font-size:44px; font-weight:800; letter-spacing:-1.2px; margin:14px 0 0; text-wrap:balance; }
.legal-head h1 .serif{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--jp); }
.legal-head .updated{ font-size:14px; color:var(--muted); margin-top:14px; text-wrap:pretty; }

/* legal-review callout */
.callout{
  background:#fdf3e0; border:1px solid #f0d9a8; border-radius:14px;
  padding:16px 18px; margin:24px 0 8px; font-size:14px; color:#7a5a16; line-height:1.55;
}
.callout b{ color:#5e4410; }

/* table of contents */
.toc{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:32px 0; }
.toc h2{ font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; columns:2; column-gap:36px; }
.toc li{ counter-increment:toc; font-size:14.5px; margin:0 0 9px; break-inside:avoid; }
.toc li a{ color:var(--ink2); text-decoration:none; transition:color .15s; }
.toc li a::before{ content:counter(toc) ". "; color:var(--muted); font-variant-numeric:tabular-nums; }
.toc li a:hover{ color:var(--jp); }
@media(max-width:640px){ .toc ol{ columns:1; } }

/* prose */
.prose{ padding:8px 0 40px; }
.prose section{ scroll-margin-top:90px; padding-top:34px; }
.prose h2{ font-size:23px; font-weight:800; letter-spacing:-.3px; margin:0 0 14px; }
.prose h2 .num{ color:var(--muted); font-weight:700; margin-right:10px; font-variant-numeric:tabular-nums; }
.prose h3{ font-size:16.5px; font-weight:700; margin:22px 0 8px; color:var(--ink); }
.prose p{ font-size:16px; color:var(--ink2); margin:0 0 14px; text-wrap:pretty; }
.prose ul{ margin:0 0 16px; padding-left:22px; }
.prose li{ font-size:16px; color:var(--ink2); margin:0 0 8px; }
.prose a{ color:var(--jp); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose .lead{ font-size:18px; color:var(--ink2); }
.prose .ph{ background:#efeafb; color:#4f46c4; border-radius:5px; padding:1px 6px; font-weight:600; font-size:14.5px; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:18px 0; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14.5px; }
.prose th, .prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink2); vertical-align:top; }
.prose th{ color:var(--ink); font-weight:700; }

.toplink{ display:inline-block; margin-top:6px; font-size:13.5px; color:var(--muted); text-decoration:none; }
.toplink:hover{ color:var(--jp); }

/* footer (matches landing) */
.foot{ border-top:1px solid var(--line); padding:40px 0; margin-top:20px; }
.foot .bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; max-width:1180px; margin:0 auto; padding:0 32px; }
.foot .logo{ font-size:18px; font-weight:800; text-decoration:none; } .foot .logo .jp{color:var(--jp)} .foot .logo .mate{color:var(--mate)}
.foot .fl{ display:flex; gap:24px; flex-wrap:wrap; } .foot .fl a{ font-size:14px; color:var(--ink2); text-decoration:none; } .foot .fl a:hover{ color:var(--ink); }
.foot .cp{ font-size:13px; color:var(--muted); }

@media(max-width:640px){ .legal-head h1{ font-size:34px; } }

/* ---- small-screen polish (shared by legal + contact pages) ---- */
@media(max-width:560px){
  .wrap{ padding:0 20px; }
  .nav .bar{ height:64px; padding-left:20px; padding-right:20px; }
  .foot .bar{ padding-left:20px; padding-right:20px; }
  .btn-cta{ padding:10px 15px; font-size:13.5px; }
  .legal-head{ padding:34px 0 8px; }
  .legal-head h1{ font-size:30px; }
  .prose section{ padding-top:28px; }
}
@media(max-width:360px){
  .btn-cta{ padding:9px 12px; }
}