/* public/brand.css — the shared look for the public pages that are not the
   homepage: Support, the Trust Center, and the consent and retention
   documents.

   The homepage (public/index.html) is the north star; its tokens, type and
   control treatments are reproduced here so the secondary pages read as the
   same product. The homepage itself does not use this file and is unchanged.

   Two grounds:
     .ee-dark   warm dark, for Support and the Trust Center
     .ee-paper  warm paper, for documents meant to be read at length
*/

:root {
  --bg-dark: #0d0b08;
  --bg-warm: #faf8f4;
  --text-dark: #1c1814;
  --text-warm: #f5f0e8;
  --text-ghost: rgba(245, 240, 232, 0.62);
  --text-muted: #8c7d6e;
  --amber: #c9a84c;
  /* --text-muted is 3.75:1 on the warm ground, under AA at small sizes. */
  --ink-muted: #766a60;
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Lato', system-ui, sans-serif;
  --pad-h: clamp(20px, 6vw, 88px);
  --rule: rgba(245, 240, 232, 0.14);
  --rule-paper: rgba(28, 24, 20, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.ee-dark { background: var(--bg-dark); color: var(--text-warm); }
body.ee-paper { background: var(--bg-warm); color: var(--text-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

/* An eyebrow: the small tracked label the homepage uses above a heading. */
.ee-eyebrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 14px;
}
.ee-paper .ee-eyebrow { color: #9a7f2e; }

/* ── Header ──────────────────────────────────────────────────────────── */
.ee-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px var(--pad-h);
  border-bottom: 1px solid var(--rule);
}
.ee-paper .ee-nav { border-bottom-color: var(--rule-paper); }

.ee-wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.32rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-decoration: none;
  display: block;
}
.ee-wordmark span {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

.ee-nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.ee-nav-links a {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-warm); text-decoration: none; opacity: 0.62;
  transition: opacity 0.3s ease; white-space: nowrap;
}
.ee-paper .ee-nav-links a { color: var(--text-dark); opacity: 0.72; }
.ee-nav-links a:hover { opacity: 1; }

/* The one filled control, exactly the homepage's. */
.ee-cta {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 300; font-size: 0.64rem;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  color: var(--bg-dark); background: var(--amber); border: 1px solid var(--amber);
  padding: 10px 20px; white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.ee-cta:hover { background: #b8943c; border-color: #b8943c; }

/* The outline control: same language, no fill. */
.ee-btn {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 300; font-size: 0.64rem;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  color: var(--text-warm); background: transparent;
  border: 1px solid var(--rule); padding: 10px 20px;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.ee-btn:hover { border-color: var(--amber); color: var(--amber); }
.ee-paper .ee-btn { color: var(--text-dark); border-color: var(--rule-paper); }

/* ── Page body ───────────────────────────────────────────────────────── */
.ee-page { padding: clamp(48px, 8vh, 88px) var(--pad-h) 0; }

/* A readable measure, for anything meant to be read at length. */
.ee-measure { max-width: 720px; margin: 0 auto; }
.ee-doc { max-width: 680px; margin: 0 auto; font-size: 1rem; line-height: 1.8; }
.ee-doc h2 { margin-top: 2.2em; }
.ee-doc h3 { margin-top: 1.8em; font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0.02em; }
.ee-doc ul, .ee-doc ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.ee-doc li { margin-bottom: 0.5em; }

/* Dates a reader looks for first: effective, last reviewed, version. */
.ee-docmeta {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: 18px; margin-bottom: 32px;
  border-bottom: 1px solid var(--rule-paper);
}
.ee-dark .ee-docmeta { color: var(--text-muted); border-bottom-color: var(--rule); }

/* A thin rule, used instead of a box wherever a separation will do. */
.ee-rule { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; }
.ee-paper .ee-rule { border-top-color: var(--rule-paper); }

/* A restrained surface: a hairline, no shadow, no rounding. */
.ee-panel { border: 1px solid var(--rule); padding: clamp(20px, 4vw, 32px); }
.ee-paper .ee-panel { border-color: var(--rule-paper); background: rgba(255, 255, 255, 0.5); }

a { color: inherit; }
.ee-dark .ee-link, .ee-dark .ee-doc a { color: var(--amber); }
.ee-paper .ee-link, .ee-paper .ee-doc a { color: #8a6d16; }
.ee-link, .ee-doc a { text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.ee-footer {
  margin-top: clamp(64px, 12vh, 120px);
  padding: 40px var(--pad-h);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center; justify-content: space-between;
}
.ee-paper .ee-footer { border-top-color: var(--rule-paper); }
.ee-footer-links { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.ee-footer a, .ee-footer p {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; margin: 0;
}
.ee-paper .ee-footer a, .ee-paper .ee-footer p { color: var(--ink-muted); }
.ee-footer a:hover { color: var(--amber); }

@media (max-width: 640px) {
  .ee-nav { padding: 16px var(--pad-h); }
  .ee-nav-links { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}