/* ---- ThriveSerene Legal (shared styles) ---- */
:root{
  --page-bg: #f6f8fc;      /* middle tone */
  --side-dark: #e9edf5;     /* darker gutters */
  --ink: #0f172a;
  --muted: #475569;
  --stroke: rgba(15,23,42,.08);
  --card-bg: #ffffff;
  --shadow: 0 24px 60px rgba(2,6,23,.12);
  --radius: 14px;

  /* buttons */
  --accent-1: #2563eb;
  --accent-2: #7c3aed;
}

/* Page canvas with darker sides, lighter middle (polished vignette) */
html, body { height: 100%; }
body{
  margin:0;
  color:var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background:
    radial-gradient(1200px 60% at 50% 40%, var(--page-bg) 0%, var(--page-bg) 45%, transparent 46%),
    linear-gradient(90deg, var(--side-dark) 0%, var(--page-bg) 18%, var(--page-bg) 82%, var(--side-dark) 100%);
}

/* Top bar */
.nav{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  max-width:1100px;
  margin: 18px auto 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
}
.nav-left,.nav-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.btn, .pill{
  appearance:none; border:1px solid var(--stroke);
  border-radius: 9999px; padding: 9px 14px; background:#fff;
  color:var(--ink); text-decoration:none; font-weight:600;
  transition: box-shadow .12s ease, transform .06s ease, border-color .12s;
  box-shadow: 0 6px 16px rgba(2,6,23,.08);
}
.btn:hover{ box-shadow: 0 10px 22px rgba(2,6,23,.12); border-color: rgba(15,23,42,.16); }
.btn:active{ transform: translateY(1px); }

/* Accent button */
.btn-accent{
  color:#fff; border:0;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}

/* Main container (card) */
main{
  max-width: 980px;
  margin: 18px auto 28px;
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.5vw, 40px);
}

/* Landing headings */
h1{ margin:0 0 .5rem 0; font-size: clamp(22px, 2.6vw, 30px); }
.lead{ color:var(--muted); margin:.25rem 0 1.25rem; }

/* Button grid (landing) */
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(180px,1fr));
  margin-top: 12px;
}
@media (max-width: 780px){
  .grid{ grid-template-columns: 1fr; }
}

/* Document typography */
article h2{ margin-top: 2rem; font-size: clamp(18px, 2.1vw, 24px); }
article h3{ margin-top: 1.2rem; font-size: clamp(16px, 1.8vw, 20px); }
article p, article li{ color: var(--ink); }
small.muted{ color: var(--muted); }

/* Footer link area */
.footer-links{
  max-width: 980px; margin: 0 auto 32px; text-align:center;
  color: var(--muted);
}
.footer-links a{ color: var(--ink); text-decoration: underline; }

/* Utilities */
.spacer{ height: 16px; }