/* Public pages (home, get the app, legal, learn): header, footer, long-form text */

.site-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 10px max(var(--gutter), calc((100vw - var(--wide-max)) / 2));
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border-light);
}
.site-nav .brand { margin-right: auto; }
.site-nav .brand span { font-size: 1.1rem; white-space: nowrap; }
.site-nav__links { display: flex; align-items: center; gap: var(--s-1); }
.site-nav__links a:not(.btn) {
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none; font-weight: 700;
}
.site-nav__links a:not(.btn):hover { background: var(--surface-2); color: var(--text); }
.site-nav__links a[aria-current="page"] { color: var(--coral-ink); }
.site-nav .btn { min-height: 42px; font-size: 1rem; }
@media (max-width: 760px) {
  .site-nav__links a:not(.btn) { display: none; }
}
@media (max-width: 380px) {
  .site-nav .brand span { display: none; }
}

.site-main { display: block; }
.wrap { width: 100%; max-width: calc(var(--wide-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Footer */
.site-footer {
  margin-top: var(--s-8);
  padding: var(--s-7) 0 calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 2px solid var(--border-light);
}
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
.site-footer h2 { font-size: var(--step-0); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a:not(.appstore) { color: var(--text-2); text-decoration: none; }
.site-footer a:not(.appstore):hover { color: var(--coral-ink); text-decoration: underline; }
.site-footer__brand p { color: var(--text-2); max-width: 36ch; }
.site-footer__fine { margin-top: var(--s-6); color: var(--text-muted); font-size: var(--step--1); }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* Long-form text (legal pages) */
.prose { max-width: 72ch; margin: 0 auto; padding: var(--s-6) var(--gutter) 0; }
.prose h1 { font-size: var(--step-5); margin-bottom: var(--s-2); }
.prose h2 { font-size: var(--step-2); margin: var(--s-6) 0 var(--s-2); }
.prose h3 { font-size: var(--step-1); margin: var(--s-5) 0 var(--s-2); }
.prose p, .prose li { color: var(--text); line-height: 1.65; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose .lede { font-size: var(--step-1); color: var(--text-2); }
.prose .meta { color: var(--text-muted); }
.prose .callout { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: color-mix(in oklab, var(--cactus) 10%, var(--surface)); border: 2px solid color-mix(in oklab, var(--cactus) 30%, transparent); }
.prose .callout p:last-child { margin-bottom: 0; }
.prose nav.toc { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface-2); }
.prose nav.toc ul { margin: 0; }

.site-footer .site-footer__fine a { text-decoration: underline; }