/* KYDOS legal/support pages — single shared stylesheet.
   Structure/formatting direction extracted from delete-account.html
   (the approved reference), gold corrected to the LOCKED brand value
   (#C9A84C, matches src/constants/Colors.js) rather than propagating
   delete-account's original off-brand #E7B23A.

   Every page that links this file (template.html -> privacy.html/
   terms.html, delete-account.html, support.html, index.html) renders
   from this ONE source — change it here, every page inherits it. Do
   not re-embed a <style> block in any of those files; that's exactly
   the drift this file exists to prevent.

   /sms is the sole intentional exception (Twilio-verified content;
   left on its own embedded style — see web/build.js comment). */

:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #07090C;
  color: #E7ECF1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 48px 22px 90px; }

.brand { color: #C9A84C; font-weight: 700; letter-spacing: 3px; font-size: 14px; }

h1 { font-size: 28px; margin: 6px 0 4px; color: #F4F6F8; }
.sub { color: #9AA4AF; margin: 0 0 32px; }

h2 {
  font-size: 17px; font-weight: 700; margin: 36px 0 8px; color: #F4F6F8;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid #19212A; padding-bottom: 8px;
}
h3 { font-size: 15px; font-weight: 600; margin: 24px 0 6px; color: #F4F6F8; }

p { color: #C2CAD2; margin: 0 0 12px; }
ul, ol { margin: 8px 0 16px 22px; color: #C2CAD2; }
li { margin-bottom: 6px; }
strong { color: #F4F6F8; }
a { color: #C9A84C; }
hr { border: none; border-top: 1px solid #19212A; margin: 28px 0; }
blockquote { border-left: 3px solid #C9A84C; padding-left: 1rem; color: #9AA4AF; margin: 1rem 0; }
code { background: #131A22; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }

/* Tables — bare <table>/<th>/<td> so marked.js-generated tables (Data
   Sharing, EU legal-basis) inherit this automatically with no markup
   changes needed. No fixed first-column width here (delete-account's
   original 46% assumed a 2-column table; several legal-doc tables have
   3 columns, so column widths are left to the browser instead). */
table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
th {
  text-align: left; font-size: 11px; letter-spacing: 2px; font-weight: 700;
  color: #7C8893; padding: 0 12px 10px 0; border-bottom: 1px solid #19212A;
}
td { padding: 10px 12px 10px 0; vertical-align: top; color: #C2CAD2; border-bottom: 1px solid #0F1620; }
td:first-child { color: #F4F6F8; font-weight: 500; }

.foot {
  color: #55606B; font-size: 13px; margin-top: 48px;
  border-top: 1px solid #19212A; padding-top: 18px;
}

/* ── delete-account.html components ─────────────────────────── */
.notice {
  background: #10161D; border-left: 3px solid #C9A84C; padding: 14px 16px;
  border-radius: 0 8px 8px 0; margin: 0 0 28px;
}
.notice p { margin: 0; font-size: 14px; color: #9AA4AF; }
.notice strong { color: #E7ECF1; }

.steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: steps; }
.steps li { counter-increment: steps; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.steps li::before {
  content: counter(steps); min-width: 28px; height: 28px; border-radius: 50%;
  background: #C9A84C; color: #07090C; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.steps li span { color: #C2CAD2; padding-top: 4px; }
.steps li .path { color: #F4F6F8; font-weight: 600; }

.alt-card {
  background: #131A22; border: 1px solid #222B35; border-radius: 12px;
  padding: 18px 20px; margin: 0 0 24px;
}
.alt-card p { margin: 0; }
.alt-card .label { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #7C8893; margin-bottom: 6px; }

.tag-del { background: #0E2218; color: #3DDC7A; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 4px; display: inline-block; }
.tag-anon { background: #1C1A0E; color: #C9A84C; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 4px; display: inline-block; }
.tag-third { background: #111827; color: #9AA4AF; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 4px; display: inline-block; }

/* ── support.html components ────────────────────────────────── */
.contact-card { background: #131A22; border: 1px solid #222B35; border-radius: 14px; padding: 18px 20px; margin: 0 0 30px; }
.contact-card p { margin: 4px 0; color: #C2CAD2; }

.toc { background: #10161D; border: 1px solid #1B232C; border-radius: 12px; padding: 16px 20px; margin: 0 0 36px; }
.toc h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: 2px; color: #7C8893; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.toc a { color: #C9A84C; text-decoration: none; font-size: 14px; }
.toc a:hover { text-decoration: underline; }

.q { font-size: 16px; font-weight: 600; color: #F4F6F8; margin: 22px 0 4px; }
.a { color: #C2CAD2; margin: 0 0 6px; }
.a ul { margin: 6px 0; padding-left: 20px; }
.a li { color: #C2CAD2; margin: 3px 0; }
.path { color: #9AA4AF; font-weight: 600; }

/* ── Guardian SOS consent-screen mockup (support.html) ──────── */
/* NOTE: sms.html has an identical mockup but is frozen on its own
   embedded style (see /sms exception above) — not linked to this file. */
.mock { text-align: center; margin: 14px 0 6px; }
.mock svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.cap { color: #6B7782; font-size: 13px; text-align: center; margin: 6px 0 0; }