/* Shared styles for the static pages (security, privacy, terms, DPA, blog).
   Restyled 2026-09-30 to match the landing redesign: violet/mint palette,
   Geist + Figtree, the "cova" wordmark, dark by default with a light toggle.
   The theme choice is shared with the landing via localStorage "cova-theme". */

/* ─── Tokens: dark (default) ──────────────────────────────────────── */
:root {
  --bg:            #0e0b24;
  --surface:       #1a163f;
  --card:          #1a163f;
  --well:          #241f52;
  --line:          #2d2863;
  --line-soft:     #241f52;
  --line-strong:   #3c3578;

  --text:          #efedff;
  --text-sec:      #c9c5ea;
  --text-muted:    #b8b4dd;
  --text-dim:      #8783b3;
  --text-fade:     #8783b3;

  --accent:        #a393ff;
  --accent-hover:  #c2b7ff;
  --accent-bg:     #2a2370;
  --violet:        #6d55ff;
  --mint:          #2fd6a3;

  --grad-ai:       linear-gradient(100deg, #2ed6f0, #4c82ff 45%, #b58cff 85%);

  --shadow-1:      0 1px 0 rgba(0, 0, 0, .2), 0 18px 40px -22px rgba(0, 0, 0, .7);
  --shadow-2:      0 2px 0 rgba(0, 0, 0, .2), 0 40px 80px -36px rgba(0, 0, 0, .85);

  --font-display:  "Geist", "Figtree", system-ui, sans-serif;
  --font-sans:     "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-brand:    "Gabarito", "Figtree", system-ui, sans-serif;
  color-scheme: dark;
}

/* ─── Tokens: light (chosen with the nav toggle) ──────────────────── */
:root[data-theme="light"] {
  --bg:            #f5f4fc;
  --surface:       #ffffff;
  --card:          #ffffff;
  --well:          #f5f4fc;
  --line:          #e7e4f6;
  --line-soft:     #eeebf9;
  --line-strong:   #d9d5ef;

  --text:          #17133b;
  --text-sec:      #3e3a63;
  --text-muted:    #4e4a74;
  --text-dim:      #8a87ab;
  --text-fade:     #8a87ab;

  --accent:        #5b3ff5;
  --accent-hover:  #4a2fe0;
  --accent-bg:     #ece8ff;

  --shadow-1:      0 1px 0 rgba(23, 19, 59, .04), 0 18px 40px -22px rgba(43, 28, 143, .28);
  --shadow-2:      0 2px 0 rgba(23, 19, 59, .04), 0 40px 80px -36px rgba(43, 28, 143, .45);
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-sec);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

/* ─── Site nav (matches the landing) ──────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-nav__in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wm {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.045em;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
}
.wm:hover { text-decoration: none; color: var(--text); }
.wm svg { width: .8em; height: .8em; margin: 0 .02em 0 .04em; transform: translateY(.1em); }
.site-nav__links { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.site-nav__links a:not(.btn-nav) { color: var(--text-muted); }
.site-nav__links a:not(.btn-nav):hover,
.site-nav__links a[aria-current="page"] { color: var(--text); text-decoration: none; }
.btn-nav {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 11px;
  background: var(--violet);
  color: #fff !important;
  font-weight: 700;
  font-size: 14.5px;
}
.btn-nav:hover { background: #5b3ff5; text-decoration: none; }
.theme-t {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.theme-t:hover { color: var(--text); }
.theme-t svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-t .sun { display: block; }
.theme-t .moon { display: none; }
:root[data-theme="light"] .theme-t .sun { display: none; }
:root[data-theme="light"] .theme-t .moon { display: block; }
@media (max-width: 760px) { .site-nav__links .hide-m { display: none; } .site-nav__links { gap: 14px; } }

/* ─── Layout ──────────────────────────────────────────────────────── */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px clamp(16px, 4vw, 32px) 96px;
}
.page--wide { max-width: 800px; }
.page--narrow { max-width: 720px; }

/* old in-page brand row is replaced by the site nav; keep the back link as a breadcrumb */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 22px;
}
.back-link:hover { color: var(--text); text-decoration: none; }

/* ─── Typography ──────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.effective-date,
.post-meta {
  font-size: 13px;
  color: var(--text-fade);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-soft);
}

h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 48px 0 14px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
  margin: 30px 0 10px;
  letter-spacing: -0.01em;
}

p { margin-bottom: 16px; color: var(--text-sec); }
ul, ol { margin: 0 0 18px 22px; }
li { margin-bottom: 8px; color: var(--text-sec); }
li::marker { color: var(--accent); }
strong { color: var(--text); font-weight: 650; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Inline code ─────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--well);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--text);
}

/* ─── Tables ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 18px 0; }
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--well);
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--text-sec);
}
tr:last-child td { border-bottom: none; }

/* ─── Card / callout ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 20px 0;
  box-shadow: var(--shadow-1);
}

.callout {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px 18px 22px;
  margin: 24px 0;
  font-size: 15.5px;
  color: var(--text-sec);
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad-ai);
}

/* ─── Stat block (data callouts in blog posts) ────────────────────── */
.stat-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 18px 0;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: var(--shadow-1);
}
.stat-block .number {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-ai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-width: 2.6em;
}
.stat-block .label {
  font-size: 15px;
  color: var(--text-sec);
  line-height: 1.55;
}

/* ─── End-of-post CTA box ─────────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, #7b62ff, transparent 65%), radial-gradient(40% 60% at 100% 100%, rgba(53, 215, 168, .33), transparent 60%), #5b3ff5;
  border-radius: 24px;
  padding: 40px 28px;
  margin: 56px 0 20px;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(43, 28, 143, .8);
}
.cta p {
  margin-bottom: 20px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: var(--mint);
  color: #0e0b24;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  transition: transform 180ms ease, filter 180ms ease;
}
.cta .btn:hover { transform: translateY(-1px); filter: brightness(1.05); text-decoration: none; color: #0e0b24; }

/* ─── Blog index ──────────────────────────────────────────────────── */
.subtitle {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 44px;
  max-width: 34em;
}
.post-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 26px 22px;
  text-decoration: none;
  transition: border-color 220ms ease, transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.post-card:hover {
  border-color: var(--violet);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.post-card h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  padding: 0;
  border: none;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.post-card p {
  font-size: 15px;
  color: var(--text-sec);
  line-height: 1.6;
  margin-bottom: 14px;
}
.post-card .post-meta-row {
  font-size: 12px;
  color: var(--text-fade);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.post-card .post-meta-row .sep { color: var(--line-strong); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-muted);
  font-weight: 600;
  font-family: var(--font-sans);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }

/* ─── Related-posts pointer ───────────────────────────────────────── */
.related {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

/* ─── Footer (matches the landing) ────────────────────────────────── */
.page-footer { display: none; }
.site-footer {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px clamp(16px, 4vw, 32px) 48px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-footer .wm { font-size: 22px; }
.site-footer__tag { display: block; margin-top: 8px; font-size: 14px; color: var(--text-dim); font-weight: 500; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14.5px; font-weight: 600; }
.site-footer nav a { color: var(--text-muted); }
.site-footer nav a:hover { color: var(--text); text-decoration: none; }

/* ─── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding-top: 40px; padding-bottom: 72px; }
  h2 { font-size: 21px; margin-top: 40px; }
  h3 { font-size: 17px; }
  .stat-block { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; }
  .stat-block .number { font-size: 36px; }
  .cta { padding: 30px 20px; margin: 40px 0 16px; }
  .cta p { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }