/* =====================================================================
   Patshi — shared styles for legal/policy pages (privacy, terms, cookies)
   Reuses the brand tokens; kept separate from styles.css to stay lean.
   ===================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-variable.woff2') format('woff2');
}
:root {
  --grad-a: #1E3A8A; --grad-b: #22D3EE; --grad-c: #4636B5;
  --bg: #F8FAFC; --bg-soft: #EEF6FF; --text: #0F172A; --text-muted: #475569;
  --border: rgba(15,23,42,.12); --card: #fff;
  --grad: linear-gradient(135deg, var(--grad-a), var(--grad-c) 55%, var(--grad-b));
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0B1220; --bg-soft:#0e1729; --text:#EAF1FB; --text-muted:#9fb0c9;
          --border:rgba(150,175,220,.22); --card:#111a2e; }
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--grad-a); color:#fff; padding:10px 16px; }
.skip-link:focus { left:0; }

.legal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,40px); border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}
.legal-header img { height:28px; display:block; }
.legal-header a { color:var(--grad-a); text-decoration:none; font-weight:600; font-size:14px; }
@media (prefers-color-scheme: dark) { .legal-header a { color:var(--grad-b); } }

main.legal { max-width: 820px; margin: 0 auto; padding: clamp(24px,5vw,56px) clamp(16px,4vw,32px) 80px; }

.template-banner {
  background:#FEF3C7; color:#7c5e10; border:1px solid #f5d67e;
  border-radius:12px; padding:14px 18px; margin-bottom:28px; font-size:14px;
}
@media (prefers-color-scheme: dark) { .template-banner { background:#3a2f10; color:#f5d67e; border-color:#6b571a; } }

.legal h1 { font-size: clamp(28px,5vw,40px); font-weight:800; letter-spacing:-.02em; margin:0 0 6px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.legal .meta { color:var(--text-muted); font-size:14px; margin:0 0 28px; }
.legal h2 { font-size:20px; margin:32px 0 8px; letter-spacing:-.01em; }
.legal h3 { font-size:16px; margin:20px 0 6px; }
.legal p, .legal li { color:var(--text); font-size:15.5px; }
.legal a { color:var(--grad-a); }
@media (prefers-color-scheme: dark) { .legal a { color:var(--grad-b); } }
.legal ul { padding-left: 22px; }
.legal table { width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; }
.legal th, .legal td { border:1px solid var(--border); padding:9px 11px; text-align:left; vertical-align:top; }
.legal th { background:var(--bg-soft); }

/* placeholders that a human must replace — visually loud */
.ph {
  background:#ffe1ec; color:#b3175c; font-weight:700; padding:1px 6px; border-radius:6px;
  font-family: ui-monospace, Menlo, monospace; font-size: .92em; border:1px dashed #e78bb0;
}
@media (prefers-color-scheme: dark) { .ph { background:#3a1122; color:#ff9dc4; border-color:#7a2a4a; } }

.legal-footer { border-top:1px solid var(--border); padding:24px clamp(16px,4vw,32px);
  text-align:center; color:var(--text-muted); font-size:13px; }
.legal-footer nav a { color:var(--text-muted); text-decoration:none; margin:0 6px; }
.legal-footer nav a:hover { color:var(--grad-a); }

:focus-visible { outline: 3px solid var(--grad-b); outline-offset: 2px; border-radius: 4px; }