/* Copied from Openfields Ask (openfieldsapp/openfields-ask, styles/globals.css at 3c43f3c), the family's design system;
   change it there first. Left out here: Ask's New chat button and the wallet pill (this page has no wallet). */

/*
 * The typeface ships with the site, as Ask's pages/_app.tsx does it: Montserrat,
 * SIL Open Font License 1.1, copyright 2011 The Montserrat Project Authors.
 * Never from Google's servers (that sends each visitor's address to a third party).
 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Openfields design system, as Openfields Ask uses it.
 *
 * Small on purpose: a few tokens and the primitives every screen is built
 * from. Type and space carry the design; colour is kept for meaning: the one
 * primary action, focus, and state. The palette keeps the family's midnight
 * and LUNA gold (lib/ui/theme.ts carries the same values for code).
 *
 *   type     12 · 13 · 15 · 16 · 20 · 28 · 36, weights 400 · 500 · 600
 *   space    4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64
 *   radius   8 small controls · 12 controls and menus · 16 surfaces · full for chips and icon buttons
 *   height   32 small · 40 default · 48 large; icon buttons 36, 40 on touch
 *   motion   150 / 200 / 250 ms on one easing; only work in progress loops
 */

:root {
  color-scheme: dark;

  --bg: #07090f;
  --bg-1: #10131c;
  --bg-2: #181c27;
  --bg-3: #212633;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-3: rgba(255, 255, 255, 0.22);

  --fg: #f3f1ec;
  --fg-2: #aeaba3;
  --fg-3: #85827b;

  --accent: #ffd83d;
  --accent-hi: #ffe36e;
  --on-accent: #1a1405;
  --positive: #3ddc97;
  --caution: #ffb347;
  --negative: #ff6b7a;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;

  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;

  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;
  --h-icon: 36px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-1: 150ms;
  --d-2: 200ms;
  --d-3: 250ms;
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);

  --top-h: 56px;
  --column: 680px;
  --gutter: 16px;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (pointer: coarse) { :root { --h-icon: 40px; } }

/* ── Base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-lg) / 1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
svg { flex: none; }
::selection { background: rgba(255, 216, 61, 0.3); color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.of-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.of-num { font-variant-numeric: tabular-nums; }
.of-note { font-size: var(--t-sm); line-height: 1.5; color: var(--fg-2); }
.of-error { font-size: var(--t-sm); line-height: 1.5; color: var(--negative); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.of-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-md); padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-2);
  background: transparent; color: var(--fg);
  font-size: var(--t-md); font-weight: 500; line-height: 1; white-space: nowrap;
  user-select: none;
  transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.of-btn:active:not(:disabled) { transform: scale(0.985); }
.of-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.of-btn[aria-busy='true'] { cursor: progress; opacity: 1; }
.of-btn--primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.of-btn--primary:hover:not(:disabled) { background: var(--accent-hi); }
.of-btn--secondary { background: var(--bg-2); border-color: var(--line); }
.of-btn--secondary:hover:not(:disabled) { background: var(--bg-3); border-color: var(--line-2); }
.of-btn--quiet { color: var(--fg-2); }
.of-btn--quiet:hover:not(:disabled) { color: var(--fg); background: var(--bg-2); }
.of-btn--sm { height: var(--h-sm); padding: 0 12px; border-radius: var(--r-1); font-size: var(--t-sm); }
.of-btn--lg { height: var(--h-lg); padding: 0 20px; font-size: var(--t-lg); }
.of-btn--block { width: 100%; }

.of-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--h-icon); height: var(--h-icon); padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg-2);
  transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.of-icon-btn:hover:not(:disabled) { background: var(--bg-2); color: var(--fg); }
.of-icon-btn:active:not(:disabled) { transform: scale(0.94); }
.of-icon-btn:disabled { cursor: default; }

.of-chip {
  display: inline-flex; align-items: center; flex: none;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--fg-2);
  font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.of-chip:hover:not(:disabled) { color: var(--fg); background: var(--bg-1); border-color: var(--line-3); }
.of-chip:disabled { cursor: default; }


.of-spin { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: of-spin 700ms linear infinite; }

/* ── Disclosure: what most people never need, one click away ─────────── */

.of-disclosure > summary {
  display: inline-flex; align-items: center; gap: 4px;
  list-style: none; cursor: pointer; border-radius: 6px;
  font-size: var(--t-sm); color: var(--fg-3);
  transition: color var(--d-1) var(--ease);
}
.of-disclosure > summary::-webkit-details-marker { display: none; }
.of-disclosure > summary:hover { color: var(--fg-2); }
.of-disclosure > summary svg { transition: transform var(--d-2) var(--ease); }
.of-disclosure[open] > summary svg { transform: rotate(90deg); }
.of-code {
  margin: 8px 0 0; padding: 12px 14px; max-height: 280px; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2);
  font: 400 0.78rem / 1.55 var(--mono); color: var(--fg-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Menus ─────────────────────────────────────────────────────────── */

.of-menu { position: relative; }
.of-pop {
  position: absolute; z-index: 60; top: calc(100% + 8px);
  min-width: 240px; padding: 6px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  transform-origin: top; animation: of-pop var(--d-1) var(--ease) both;
}
.of-pop[hidden] { display: none; }
.of-pop--end { right: 0; }
.of-pop-label { padding: 10px 10px 6px; font-size: var(--t-xs); font-weight: 500; color: var(--fg-3); }
.of-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--h-md); padding: 8px 10px;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--fg);
  font-size: var(--t-md); font-weight: 500; text-align: left;
  transition: background-color var(--d-1) var(--ease);
}
.of-pop-item:hover { background: var(--bg-2); }
.of-pop-item > svg:last-child { margin-left: auto; color: var(--fg-3); }
.of-pop-sep { height: 1px; margin: 6px -6px; background: var(--line); }

.of-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.of-seg > button {
  height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-2);
  font-size: var(--t-sm); font-weight: 500; transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.of-seg > button:hover:not(:disabled) { color: var(--fg); }
.of-seg > button[aria-checked='true'] { background: var(--bg-3); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.of-seg > button:disabled { cursor: progress; }

/* ── Modal: centred; a sheet from the bottom on a phone ─────────────── */

.of-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 3, 8, 0.72); backdrop-filter: blur(6px);
  animation: of-fade var(--d-2) var(--ease) both;
}
.of-modal {
  width: min(100%, 400px); max-height: min(88vh, 640px); overflow: auto; padding: 24px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--shadow-pop); animation: of-rise var(--d-3) var(--ease) both;
}
.of-modal:focus { outline: none; }
.of-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.of-modal-title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.of-modal-sub { margin-top: 4px; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-2); }
.of-modal-head .of-icon-btn { margin: -6px -8px 0 0; }
@media (max-width: 560px) {
  .of-overlay { place-items: end stretch; padding: 0; }
  .of-modal { width: 100%; max-height: 88vh; border-radius: var(--r-3) var(--r-3) 0 0; border-bottom: 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); animation-name: of-sheet; }
}

/* ── Shell ─────────────────────────────────────────────────────────── */

.of-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.of-top {
  position: sticky; top: 0; z-index: 50; height: var(--top-h);
  background: rgba(5, 7, 15, 0.92); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--d-2) var(--ease);
}
.of-top[data-scrolled='true'] { border-bottom-color: var(--line); }
.of-top-in { display: flex; align-items: center; gap: 4px; max-width: calc(var(--column) + 2 * var(--gutter)); height: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.of-top-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.of-brand {
  display: inline-flex; align-items: center; gap: 10px; height: var(--h-md); margin-left: -8px; padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer;
  font-size: var(--t-md); letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color var(--d-1) var(--ease);
}
.of-brand[aria-expanded='true'] { background: var(--bg-2); }
/* On touch screens a tapped name would keep its hover. */
@media (hover: hover) { .of-brand:hover { background: var(--bg-2); } }
.of-brand-chev { display: inline-grid; margin-left: -4px; color: var(--fg-3); transition: transform var(--d-2) var(--ease); }
.of-brand[aria-expanded='true'] .of-brand-chev { transform: rotate(180deg); }
.of-brand img { width: 24px; height: 24px; border-radius: 50%; }
.of-brand-word b { font-weight: 600; }
.of-top-link { display: inline-flex; align-items: center; height: var(--h-icon); padding: 0 12px; border-radius: 999px; font-size: var(--t-sm); font-weight: 500; color: var(--fg-2); transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease); }
.of-top-link:hover { color: var(--fg); background: var(--bg-2); }
.of-top-link[aria-current='page'] { color: var(--fg); }
@media (max-width: 640px) {
  .of-top-link { display: none; }
}

.of-next { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -12px; }

/* The family: every Openfields app, one menu away from the name. */
.of-apps { left: 0; width: 560px; padding: 8px; }
.of-apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.of-app-item { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 10px; transition: background-color var(--d-1) var(--ease); }
.of-app-item:hover { background: var(--bg-2); }
.of-app-item b { display: flex; align-items: center; gap: 6px; font-size: var(--t-md); font-weight: 500; }
.of-app-item b svg { color: var(--accent); }
.of-app-item span { font-size: var(--t-sm); line-height: 1.4; color: var(--fg-3); }
.of-apps-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-2); }
.of-apps-foot a:hover { color: var(--fg); }
@media (max-width: 640px) {
  .of-apps { position: fixed; top: calc(var(--top-h) - 4px); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--top-h) - 8px); overflow: auto; }
  .of-apps-grid { grid-template-columns: 1fr; }
}

.of-main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.of-foot { width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.of-foot-in { padding-top: 24px; border-top: 1px solid var(--line); }
.of-foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--t-sm); color: var(--fg-2); }
.of-foot-links a:hover, .of-foot-links a[aria-current='page'] { color: var(--fg); }
.of-foot-note { margin-top: 12px; max-width: 72ch; font-size: var(--t-xs); line-height: 1.6; color: var(--fg-3); }

/* ── Long-form pages: how it works, privacy, terms ─────────────────── */

.of-prose { padding: 48px 0 64px; }
.of-prose h1 { font-size: clamp(1.75rem, 5vw, var(--t-3xl)); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.of-prose-meta { margin-top: 8px; font-size: var(--t-sm); color: var(--fg-3); }
.of-prose-lede { margin-top: 12px; font-size: var(--t-lg); line-height: 1.6; color: var(--fg-2); }
.of-prose h2 { margin: 48px 0 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.of-prose h3 { margin: 28px 0 0; font-size: var(--t-lg); font-weight: 600; }
.of-prose p, .of-prose ul, .of-prose ol, .of-prose dl { margin-top: 12px; }
.of-prose h3 + p { margin-top: 6px; }
.of-prose p, .of-prose li, .of-prose dd { font-size: var(--t-lg); line-height: 1.7; color: var(--fg-2); }
.of-prose ul, .of-prose ol { display: grid; gap: 8px; padding-left: 1.25em; }
.of-prose li::marker { color: var(--fg-3); }
.of-prose strong { font-weight: 600; color: var(--fg); }
.of-prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.of-prose a:hover { text-decoration-color: var(--fg-2); }
.of-prose code { padding: 2px 6px; border-radius: 6px; background: var(--bg-2); font-family: var(--mono); font-size: 0.85em; color: var(--fg); }
.of-prose dl { display: grid; grid-template-columns: 8rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.of-prose dt, .of-prose dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.of-prose dt { font-weight: 500; color: var(--fg); }
@media (max-width: 560px) {
  .of-prose { padding-top: 32px; }
  .of-prose dl { grid-template-columns: minmax(0, 1fr); }
  .of-prose dt { padding-bottom: 0; border-bottom: 0; }
  .of-prose dd { padding-top: 2px; }
}

.of-crash { display: grid; justify-items: center; gap: 12px; max-width: 28rem; margin: 0 auto; padding: 20vh var(--gutter) 48px; text-align: center; }
.of-crash-title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; }
.of-crash .of-btn { margin-top: 8px; }
.of-crash .of-code { text-align: left; }

/* ── Motion ────────────────────────────────────────────────────────── */

@keyframes of-fade { from { opacity: 0; } }
@keyframes of-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes of-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes of-sheet { from { transform: translateY(100%); } }
@keyframes of-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}