/* Light since Oct 12, matching index.html (Bevel). Tokens started as app/Vert/Design/Theme.swift. Nothing here is
   invented for the web: ground, surface, raised, hairline, the two text greys
   and the accent are the app's tokens, with the app's measured contrast.
   System font (SF Pro on Apple devices), bold display, tabular numbers,
   sentence case. One accent, #FE5000, with #0D0D0D on it (white fails, 3.3:1). */

:root {
  --ground:   #ffffff;
  --surface:  #f1f2f4;
  --raised:   #f7f7f8;
  --hairline: rgb(0 0 0 / .08);
  --text:     #161616;
  --text-2:   #5c5c5f;
  --text-3:   #8a8a8e;   /* decoration only */
  --accent:   #fe5000;   /* 5.9:1 */
  --accent-hover: #ff6a24;
  --on-accent:#0d0d0d;
  --btn:      #161616;   /* index.html's Bevel dark pill */

  --r: 20px;             /* Theme.cardRadius */
  --pad: 6px;            /* Theme.cardInset */
  --r-row: calc(var(--r) - var(--pad));
  --gutter: 20px;        /* Theme.gutter */
  --max: 1240px;

  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }

.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus: a double box-shadow, the first fakes the gap. Never animates in. */
:focus-visible { outline: none; transition: none; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent); }

/* ---------- nav ---------- */
/* No bar, no line under it. The wordmark and the one action sit on the
   page's own ground. */
.nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max); margin: 0 auto;
  padding: 14px var(--gutter);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-size: 22px; font-weight: 700;
  min-height: 44px; border-radius: 10px;
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }

/* ---------- buttons ---------- */
/* The app's primary button: a full accent plate, #0D0D0D type. Press scale is
   solved for edge travel: .98 on a ~200px button moves each edge ~2px. */
.btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--btn); color: #f4f4f5;
  font: 500 16px/1 var(--font);
  text-decoration: none; cursor: pointer; user-select: none;
}
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.btn:active { transform: scale(.98); }
@media (hover: hover) {
  .btn:hover { background: #2a2a2c; }
  .btn.ghost:hover { background: var(--surface); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .16s var(--ease-out), transform .16s var(--ease-out); }
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- footer ---------- */
/* Shape is translate-landing's: no card, links in columns, then the name set
   huge and cropped by a wrapper shorter than the line, on the page's bottom edge. */
.foot { margin-top: 120px; }
.foot-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
.foot-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.foot-brand p { color: var(--text-2); font-size: 15px; max-width: 32ch; }
.foot-cols { display: flex; gap: 56px; }
.foot-col h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
@media (max-width: 520px) { .foot-cols { gap: 28px; } }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  color: var(--text-2); text-decoration: none; font-size: 15px;
}
@media (hover: hover) { .foot-col a:hover { color: var(--text); } }
.rights { margin: 28px 0 0; padding: 0 var(--gutter); text-align: center; font-size: 13px; color: var(--text-2); }
.wordmark-crop {
  position: relative; overflow: clip;
  height: 15vw; margin-top: 24px;
  user-select: none; pointer-events: none;
}
.wordmark {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font-size: 27vw; font-weight: 800; line-height: .82;
  color: var(--surface); white-space: nowrap;
}

/* ---------- prose pages (privacy, terms, support) ---------- */
.prose { max-width: 680px; margin: 0 auto; padding: 40px var(--gutter) 0; }
.prose h1 { font-size: clamp(40px, 7vw, 64px); margin-bottom: 14px; }
.prose .updated { color: var(--text-2); font-size: 15px; margin-bottom: 40px; }
.prose h2 { font-size: 24px; margin: 44px 0 12px; line-height: 1.15; }
.prose p, .prose li { color: #3a3a3c; }
.prose p + p, .prose ul + p { margin-top: 12px; }
.prose ul { padding-left: 20px; margin: 12px 0 0; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose .lead { font-size: 20px; color: var(--text); line-height: 1.4; }
.callout {
  margin-top: 28px; padding: 20px 22px;
  background: var(--surface); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.callout p { color: var(--text); }