/* ScrollWager — legal and support pages.
   Every foundation value here is lifted from App/DesignSystem/Colors.swift so
   the site and the app are one surface, not two that resemble each other. */

:root {
  /* Foundation — Colors.swift Surface */
  --canvas: #0a0a0b;
  --surface: #141416;
  --raised: #1c1c1f;
  --divider: #2d2d32;

  /* Ink — Colors.swift Ink. `muted` is the ONE deviation from the app:
     #757379 measures 4.2:1 on canvas, which fails AA for the small meta text
     this page sets it in. The app gets away with it because it uses that tone
     on larger type. Lightened to clear 4.5:1 rather than kept for the sake of
     matching a number nobody can read. */
  --ink: #f6f5f2;
  --ink-secondary: #b4b1b5;
  --ink-muted: #8b8990;

  /* The single accent on these pages, and it has exactly one job: marking the
     line between what stays on the phone and what leaves it. The app's
     behavioural accents (progress green, streak amber, broken red) are
     deliberately NOT imported — there is no progress, no streak and no broken
     day on a privacy page, and a borrowed signal is worse than none.
     Colors.swift Emblem.ice, 7.7:1 on canvas. */
  --line: #7fa6c8;

  --measure: 68ch;
  --gutter: 20px;

  /* Type: the system stack resolves to SF Pro on the devices this traffic
     actually comes from (App Store listing, on a phone) — the app's own face,
     no webfont request, and therefore no third-party hit from a page whose
     whole subject is that we don't do that. Display character comes from
     weight and tracking, matching Typography.swift heroTitle (32/bold/-0.6). */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead {
  border-bottom: 1px solid var(--divider);
  padding: 22px 0;
  margin-bottom: 48px;
}

.wordmark {
  display: inline-block;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.masthead nav {
  float: right;
  font-size: 15px;
}

.masthead nav a {
  color: var(--ink-secondary);
  margin-left: 18px;
  text-decoration: none;
}

.masthead nav a:hover { color: var(--ink); }

.masthead::after { content: ""; display: table; clear: both; }

main { padding-bottom: 72px; }

.foot {
  border-top: 1px solid var(--divider);
  padding: 28px 0 56px;
  color: var(--ink-muted);
  font-size: 14px;
}

.foot a { color: var(--ink-secondary); }

/* ---------- type ---------- */

h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 12px;
}

h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 44px 0 12px;
  scroll-margin-top: 24px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 26px 0 8px;
}

p, li { color: var(--ink-secondary); }

p { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 20px; }

li { margin-bottom: 8px; }

strong { color: var(--ink); font-weight: 600; }

a { color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 2px; }

a:focus-visible, .wordmark:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 3px;
  border-radius: 3px;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 8px;
}

.stamp {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: 40px;
}

/* Section numbers are kept because legal text is referenced by number
   ("see section 6"), not because numbering looks tidy. */
.num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-right: 10px;
  letter-spacing: 0.04em;
}

/* ---------- the ledger: this page's one signature element ----------
   The honest shape of this product's privacy story is a boundary, so the
   boundary is what gets drawn. Both sides carry equal typographic weight —
   colouring the reassuring half and greying the other would be spin. The
   accent marks the line itself. */

.ledger {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 24px;
  margin: 0 0 40px;
}

.ledger h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.ledger-side + .ledger-side { margin-top: 24px; }

.ledger ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
}

.ledger li {
  color: var(--ink-secondary);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}

.ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--ink-muted);
}

.boundary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--line);
}

.boundary::before, .boundary::after {
  content: "";
  height: 1px;
  background: var(--line);
  opacity: 0.55;
  flex: 1;
}

/* ---------- contents ---------- */

.toc {
  border-left: 1px solid var(--divider);
  padding: 2px 0 2px 18px;
  margin: 0 0 44px;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  columns: 2;
  column-gap: 28px;
}

.toc li { margin-bottom: 6px; break-inside: avoid; }

/* Two columns stop paying for themselves once the entries wrap to two lines
   each, which they start doing below ~360px. Measured, not guessed. */
@media (max-width: 360px) {
  .toc ol { columns: 1; }
}

.toc a { color: var(--ink-secondary); text-decoration: none; }

.toc a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- contact ---------- */

.contact {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 24px;
  margin: 0 0 40px;
}

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

.mail {
  display: inline-block;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ink);
  padding: 10px 0;
  text-decoration-color: var(--line);
}

/* ---------- unfilled facts ----------
   Deliberately loud. A placeholder that ships is worse than a page that
   obviously is not finished. */
.todo {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: #3a1d1c;
  border: 1px dashed #e0574f;
  color: #ffb9b3;
  font-family: var(--mono);
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ---------- answers ---------- */

.qa { border-top: 1px solid var(--divider); padding-top: 22px; margin-top: 22px; }

.qa h3 { margin-top: 0; }

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

/* ---------- home ---------- */

.home-links {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}

.home-links li { margin-bottom: 2px; }

.home-links a {
  display: block;
  border-top: 1px solid var(--divider);
  padding: 20px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.home-links li:last-child a { border-bottom: 1px solid var(--divider); }

.home-links a span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: 2px;
}

.home-links a:hover { color: var(--line); }

.home-links a:hover span { color: var(--ink-secondary); }

/* ---------- wider screens ---------- */

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  body { font-size: 18px; }
  h1 { font-size: 44px; }
  .ledger { padding: 32px; }

  /* Two columns only where there is room for the line to actually read as a
     divide between them. */
  .ledger-grid { display: flex; align-items: stretch; gap: 32px; }
  .ledger-side { flex: 1; }
  .ledger-side + .ledger-side { margin-top: 0; }

  .boundary {
    flex-direction: column;
    margin: 0;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
  }

  .boundary::before, .boundary::after { width: 1px; height: auto; }
}

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