/* ==========================================================================
   FILE: css/page.css
   Shared shell for the standalone placeholder pages (privacy, terms,
   about, contact, docs, blog, security). Tokens only — no raw colours.
========================================================================== */

.page{
  min-height:70vh;
  padding-block:calc(var(--s8) + 40px) var(--s7);
}

.page-inner{ max-width:760px; }

.page-title{
  font-size:var(--t-title);
  line-height:1.12;
  margin:var(--s1) 0 var(--s2);
}

.page-lead{
  font-size:var(--t-lead);
  line-height:1.6;
  color:var(--text-2);
  margin:0 0 var(--s5);
}

.page-soon{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--grad-card);
  padding:var(--s4);
}

.page-soon p{
  margin:0 0 var(--s2);
  color:var(--text-2);
  font-size:var(--t-body);
  line-height:1.65;
}
.page-soon p:last-child{ margin-bottom:0; }
.page-soon b{ color:var(--text); }

.page-soon-cta a{
  color:var(--violet-soft);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-soon-cta a:hover{ color:var(--text); }

/* The placeholder pages use a stripped-back footer. */
.footer-links{ display:inline-flex; gap:var(--s2); }
.footer-links a{ color:var(--text-3); }
.footer-links a:hover{ color:var(--text); }

@media (max-width:640px){
  .page{ padding-block:calc(var(--s7) + 24px) var(--s6); }
  .page-soon{ padding:var(--s3); }
}


/* ── Legal documents ──────────────────────────────────────────────────
   Long-form terms and policies. Deliberately plain: numbered sections,
   generous line height, and a measure narrow enough to read a clause
   without losing your place. */
.legal{ margin-top:var(--s5); }

.legal-meta{
  margin:0 0 var(--s5);
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r3);
  background:var(--surface);
  font-size:.92rem;
  color:var(--text-2);
}
.legal-meta b{ color:var(--text); }

.legal h2{
  margin:var(--s5) 0 var(--s2);
  font-size:1.12rem;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--text);
}

.legal p{
  margin:0 0 var(--s3);
  font-size:1rem;
  line-height:1.72;
  color:var(--text-2);
}

.legal ul{
  margin:0 0 var(--s3);
  padding-left:1.25em;
}
.legal li{
  margin:6px 0;
  font-size:1rem;
  line-height:1.65;
  color:var(--text-2);
}

.legal a{ color:var(--brand); }
.legal a:hover{ color:var(--text); }

.legal-address{
  margin:0 0 var(--s3);
  font-style:normal;
  font-size:1rem;
  line-height:1.72;
  color:var(--text-2);
}

.legal hr{
  margin:var(--s5) 0;
  border:0;
  border-top:1px solid var(--line);
}