/* Shared layout for PracticeLien marketing subpages
   (privacy / terms / security). Tokens mirror index.html. */
:root {
  --bg-app: #F4F6F8;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F9FAFB;
  --bg-hover: #F3F4F6;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-soft: #DBEAFE;
  --accent-text-on-soft: #1E40AF;
  --success-bg: #DCFCE7;  --success-tx: #15803D;
  --ink: #0A1024;
  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 12px;  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px 0 rgba(16,24,40,0.06), 0 1px 2px -1px rgba(16,24,40,0.04);
  --shadow-md: 0 8px 20px -6px rgba(16,24,40,0.10), 0 2px 6px -2px rgba(16,24,40,0.06);
  --maxw: 760px;
  --ease: cubic-bezier(0.22, 0.72, 0.18, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: var(--bg-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1;
  padding: 9px 15px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease);
  white-space: nowrap; text-decoration: none;
}
.btn .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }

/* ---- Nav ---- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
nav .wrap-wide { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { display: flex; align-items: center; gap: 9px; font-size: 19px; letter-spacing: -0.02em; color: var(--text-primary); }
.logo:hover { text-decoration: none; }
.logo .mark { width: 25px; height: 25px; flex: none; transition: transform .25s var(--ease); }
.logo:hover .mark { transform: rotate(-4deg) scale(1.05); }
.logo b { font-weight: 700; }
.logo .lien { font-weight: 700; color: var(--accent); }

/* ---- Page header ---- */
.page-head {
  padding: 64px 0 36px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.kicker {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
h1 {
  font-size: clamp(28px, 4.4vw, 40px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15; color: var(--ink);
  margin-bottom: 10px;
}
.page-head .meta {
  font-size: 13px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ---- Article ---- */
article {
  padding: 56px 0 88px;
  font-size: 16px;
  color: var(--text-primary);
}
article h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); margin: 40px 0 14px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
article h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
article h3 {
  font-size: 16px; font-weight: 600; color: var(--ink);
  margin: 24px 0 8px;
}
article p { margin: 12px 0; color: var(--text-secondary); }
article p strong { color: var(--text-primary); font-weight: 600; }
article ul { margin: 12px 0 12px 22px; color: var(--text-secondary); }
article ul li { margin: 6px 0; }
article ul li strong { color: var(--text-primary); font-weight: 600; }

.note {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px 18px; margin: 18px 0;
  font-size: 14px; color: var(--text-secondary);
}
.note strong { color: var(--text-primary); }

.subprocessors {
  width: 100%; border-collapse: collapse;
  margin: 14px 0; font-size: 14px;
}
.subprocessors th, .subprocessors td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.subprocessors th {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-secondary);
  background: var(--bg-subtle);
}
.subprocessors td { color: var(--text-secondary); }
.subprocessors td:first-child { color: var(--text-primary); font-weight: 500; }
.subprocessors .tag {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--success-bg); color: var(--success-tx);
}

/* ---- Footer ---- */
footer { background: var(--ink); color: #9CA3AF; padding: 46px 0; font-size: 14px; }
footer .wrap-wide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
footer .brand { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; letter-spacing: -0.02em; font-size: 16px; }
footer .brand .mark { width: 22px; height: 22px; flex: none; }
footer .brand .lien { color: #93B4FF; }
footer .brand .co { color: #9CA3AF; font-weight: 400; letter-spacing: 0; font-size: 14px; margin-left: 2px; }
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
footer .links a { color: #9CA3AF; transition: color .15s var(--ease); }
footer .links a:hover { color: #fff; text-decoration: none; }

@media (max-width: 520px) {
  footer .wrap-wide { flex-direction: column; align-items: flex-start; }
  article h2 { font-size: 20px; }
}