/* The privacy and terms pages: a quiet reading page in the landing page's colours.
   The dark bar is the missed-call side, the reading ground is the kept-job side. */
:root {
  --l-bg: #14100D;  --l-surface: #201914;  --l-ink: #F4EADF;  --l-soft: #BBA999;  --l-accent: #FF7438;
  --r-bg: #EDF2F5;  --r-surface: #FFFFFF;  --r-ink: #0D1B29;  --r-soft: #4A5B6B;  --r-accent: #C2410C;

  --sc-canvas: var(--r-bg);
  --sc-ink: var(--r-ink);
  --sc-ink-soft: var(--r-soft);
  --sc-accent: var(--r-accent);
  --sc-accent-ink: var(--r-surface);
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;

  --edge: clamp(1.25rem, 4.5vw, 5rem);
  --measure: 44rem;
  --r-tail: 5px;
  --tap: 44px;          /* the smallest a link is drawn to tap */
  --rule: color-mix(in oklab, var(--r-ink) 14%, var(--r-bg));
  --shadow-card: 0 1px 2px rgba(13,27,41,.06), 0 12px 28px -18px rgba(13,27,41,.35);
}

body { background: var(--r-bg); color: var(--r-ink); }

/* ------------------------------------------------------------------ bar -- */
.bar { background: var(--l-bg); color: var(--l-ink); --sc-accent: var(--l-accent); }
.bar__in { max-width: calc(var(--measure) + 2 * var(--edge)); margin: 0 auto; padding: 1rem var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mark { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }   /* the two-tone mark, on a full-size tap target */
.mark span { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; padding: 0.38rem 0.6rem; line-height: 1; }
.mark span:first-child { border-radius: var(--r-tail) 0 0 var(--r-tail); background: var(--l-surface); color: var(--l-ink); padding-right: 0.06rem; }
.mark span:last-child { border-radius: 0 var(--r-tail) var(--r-tail) 0; background: var(--r-surface); color: var(--r-ink); padding-left: 0.06rem; }
.bar a.back { color: var(--l-ink); font-size: 0.92rem; min-height: var(--tap); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ doc -- */
.doc { max-width: calc(var(--measure) + 2 * var(--edge)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--edge) 3rem; }
.doc h1 { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.03em; line-height: 0.98;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); margin: 0; text-wrap: balance; }
.doc .meta { font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--r-soft); margin: 1rem 0 0; }
.doc h2 { font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 750; letter-spacing: -0.015em; line-height: 1.15;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); margin: 2.6rem 0 0.8rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); text-wrap: balance; }
.doc h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 0.5rem; }
.doc p, .doc li { font-size: 1.04rem; line-height: 1.62; text-wrap: pretty; }
.doc p { margin: 0 0 0.9rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: 0.45rem; }
.doc li::marker { color: var(--r-accent); }
.doc a { color: var(--r-accent); }
.doc strong { font-weight: 600; }

/* The short version, first: what most readers came for. */
.short { background: var(--r-surface); border-radius: var(--sc-r-md); box-shadow: var(--shadow-card); padding: clamp(1.2rem, 3vw, 1.8rem); margin: 2rem 0 0; }
.short h2 { margin: 0 0 0.8rem; padding: 0; border: 0; }
.short ul { margin: 0; }

/* The safety line stands apart from the legal text around it. */
.safety { background: var(--l-bg); color: var(--l-ink); border-radius: var(--sc-r-md); padding: 1rem 1.2rem; margin: 1.2rem 0; --sc-accent: var(--l-accent); }
.safety p { margin: 0; }
.safety strong { color: var(--l-accent); }

/* ----------------------------------------------------------------- foot -- */
.foot { max-width: calc(var(--measure) + 2 * var(--edge)); margin: 0 auto; padding: 1.6rem var(--edge) 2.4rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.86rem; color: var(--r-soft); }
.foot a { color: var(--r-soft); min-height: var(--tap); display: inline-flex; align-items: center; }
.foot a[aria-current="page"] { color: var(--r-ink); text-decoration: none; font-weight: 600; }
.foot span { min-height: var(--tap); display: inline-flex; align-items: center; }