/* CaF — shared styles for legal pages (privacy.html, terms.html).
 * Palette + type system mirror the landing (index.html) — keep them in
 * sync if either side is retouched. CaF revamp shipped 2026-06-08;
 * source of truth is docs/caf-assets/CaF_Colours.txt + CaF_Typography.txt.
 */

:root {
  /* CaF core palette (verbatim from CaF_Colours.txt) */
  --brown:  #3B2115;
  --beige:  #E8DFD0;
  --ivory:  #F5F2EE;

  /* Tint scale — brown @ alpha */
  --t60: rgba(59,33,21,0.6);
  --t40: rgba(59,33,21,0.42);
  --t30: rgba(59,33,21,0.32);
  --t20: rgba(59,33,21,0.2);
  --hair: rgba(59,33,21,0.1);

  /* Legacy aliases re-pointed so existing selectors keep working
     without a sweep. New rules should prefer the direct CaF names. */
  --paper:    var(--ivory);
  --foam:     var(--beige);
  --bone:     var(--t20);
  --mist:     var(--t40);
  --stone:    var(--t60);
  --graphite: var(--brown);
  --ink:      var(--brown);
  --espresso: var(--brown);

  /* CaF type stack (CaF_Typography.txt)
   *   Display/Wordmark : Syne ExtraBold 800
   *   Headings         : DM Sans Medium 500
   *   Body             : DM Sans Light 300 / 14px / 1.7 leading
   *   Caption          : DM Sans Regular 400 / 11px / +0.3 tracking
   *   Label/Metadata   : Syne Mono Regular 400 / 9–11px / +2–3 tracking / uppercase
   */
  --display: 'Syne', system-ui, -apple-system, sans-serif;
  --sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:    'Syne Mono', ui-monospace, monospace;
  /* Legacy `--serif` re-pointed at DM Sans so any remaining
     `var(--serif)` selectors render in CaF Medium rather than reaching
     for a missing Playfair. New rules should drop --serif entirely. */
  --serif:   var(--sans);

  --max-readable: 680px;
  --max-page:     1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
::selection { background: var(--brown); color: var(--ivory); }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--beige);
  color: var(--brown);
  font-family: var(--sans);
  font-weight: 300; /* CaF body = DM Sans Light 300 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* paper grain — CaF brown tints (was blue-purple ink + warm-brown pair). */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(59,33,21,0.05) 1px, transparent 1.3px),
    radial-gradient(rgba(59,33,21,0.035) 1px, transparent 1.3px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 35%, transparent 60%, rgba(59,33,21,0.06) 100%);
}

.page {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ── Top rule (matches landing .topline) ───────────────────────── */
.topline {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 48px 0;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t40); white-space: nowrap;
}
.topline a.dotmark { text-decoration: none; }
.topline .dotmark {
  display: inline-flex; align-items: baseline; gap: 5px;
  /* CaF wordmark — Syne 800 ExtraBold with the brand-book -3 tracking
     scaled down proportionally for the small topline mark. */
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.07em;
  color: var(--brown);
  text-transform: none;
}
.topline .dotmark i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--brown);
  transform: translateY(-1px);
}
.topline .crumb {
  display: inline-flex; align-items: center; gap: 14px;
}
.topline .crumb a {
  color: var(--t40); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color 0.18s, border-color 0.18s;
}
.topline .crumb a:hover { color: var(--t60); border-color: var(--t20); }
.topline .crumb a[aria-current="page"] { color: var(--brown); }
.topline .crumb .sep { color: var(--t20); }

/* ── Document body ─────────────────────────────────────────────── */
.doc {
  flex: 1;
  max-width: var(--max-readable);
  width: 100%;
  margin: 0 auto;
  padding: 56px 48px 96px;
}

.doc__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t40);
  margin-bottom: 18px;
}

.doc__title {
  /* CaF H1 — DM Sans Medium 500 with brand-book -0.2px tracking,
     scaled up to a marketing-display size. The pre-revamp Playfair
     italic editorial vibe is retired. */
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 0 0 14px;
  text-wrap: balance;
}

.doc__updated {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t40);
  margin: 0 0 32px;
}

.doc__intro {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.55;
  color: var(--t60);
  margin: 0 0 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--t20);
  text-wrap: pretty;
}

.doc h2 {
  font-family: var(--sans);
  font-weight: 500; /* CaF H1 weight */
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--brown);
  margin: 44px 0 14px;
}

.doc h2:first-of-type {
  margin-top: 0;
}

.doc p {
  font-family: var(--sans);
  font-weight: 300; /* CaF body */
  font-size: 16px;
  line-height: 1.7; /* CaF body leading */
  color: var(--t60);
  margin: 0 0 14px;
  text-wrap: pretty;
}

.doc p:last-child { margin-bottom: 0; }

.doc ul {
  list-style: none;
  margin: 6px 0 18px;
  padding: 0;
}

.doc li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--t60);
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}

.doc li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brown);
  opacity: 0.75;
}

.doc li.plain { padding-left: 0; }
.doc li.plain::before { display: none; }

.doc strong {
  font-weight: 500; /* DM Sans Medium for emphasis (CaF doesn't lean on Bold for body) */
  color: var(--brown);
}

.doc em { font-style: italic; }

.doc a {
  color: var(--brown);
  text-decoration: underline;
  text-decoration-color: var(--t20);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s;
}
.doc a:hover { text-decoration-color: var(--brown); }

.doc code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--ivory);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--brown);
}

/* Group label inside a list (e.g. "Account:" before bullets) */
.doc__group-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t40);
  margin: 22px 0 10px;
}

/* ── Footer (mirrors landing .foot) ────────────────────────────── */
.foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  max-width: var(--max-page); width: 100%; margin: 0 auto;
  padding: 18px 48px 30px;
  border-top: 1px solid var(--t20);
}
.foot .left {
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.foot .left .wm {
  /* Small CaF wordmark in the footer — Syne 800 ExtraBold. */
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.07em;
  color: var(--brown);
  text-decoration: none;
}
.foot .left .wm i {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brown); margin-left: 3px; transform: translateY(-2px);
}
.foot .left .cr {
  font-family: var(--mono); font-size: 10.5px; color: var(--t40);
  letter-spacing: 0.08em; margin-left: 8px;
}
.foot nav { display: flex; align-items: center; gap: 22px; flex-shrink: 0; white-space: nowrap; }
.foot nav a {
  font-family: var(--sans); font-weight: 400; font-size: 12.5px; color: var(--t60);
  text-decoration: none; letter-spacing: -0.005em;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color 0.18s, border-color 0.18s;
}
.foot nav a:hover { color: var(--brown); border-color: var(--t20); }
.foot nav a[aria-current="page"] { color: var(--brown); border-color: var(--t20); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .topline { padding: 18px 24px 0; }
  .doc { padding: 40px 24px 80px; }
  .foot {
    flex-direction: column; gap: 14px;
    align-items: center; text-align: center;
    padding: 18px 24px 26px;
  }
  .topline .crumb { gap: 10px; }
}

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