/* Tokens and page chrome, shared by every document on the site.
   The look is the app's: white ground, black ink, the system type ramp, and a
   raised surface is white plus a hairline rather than a tinted fill.
   See CLAUDE.md `Design Target`. Landing layout lives in `_home.css`, the
   legal/support layout in `_doc.css`. */

/* The brand is set in Anton, the same face `BrandWordmark` uses in the app.
   SIL Open Font License, see assets/fonts/Anton-OFL.txt. Subset to caps and
   digits, which is everything a wordmark ever sets. */
@font-face {
  font-family: 'Anton';
  src: url('/assets/anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #000;
  --ink-2: #3c3c43;
  --muted: #6b6b70;
  --rule: #e5e5ea;
  --faint: #c7c7cc;
  --ground: #fff;
  --bed: #f6f6f6;
  --raised: #efeff1;
  --panel: #0b0b0d;
  --on-panel: rgba(255, 255, 255, .66);
  --accent: #005dbf;
  --accent-on-panel: #4da3ff;
  --accent-ink: #fff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(0, 0, 0, .16);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .06), 0 28px 60px -20px rgba(0, 0, 0, .28);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 5vw, 40px);
  --page: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fff;
    --ink-2: #d8d8dc;
    --muted: #98989f;
    --rule: #2c2c2e;
    --faint: #48484a;
    --ground: #000;
    --bed: #101012;
    --raised: #1c1c1e;
    --panel: #161619;
    --on-panel: rgba(255, 255, 255, .66);
    --accent: #3e9dff;
    --accent-on-panel: #4da3ff;
    --accent-ink: #00121f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 12px 32px -12px rgba(0, 0, 0, .9);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .7), 0 28px 60px -20px rgba(0, 0, 0, 1);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hidden until it is tabbed to, which is the one moment it is wanted. */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 30;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}

.skip:focus-visible { top: 12px; }

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

/* --- wordmark ----------------------------------------------------------- */

.wordmark {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.lockup img { width: 30px; height: 30px; }
.lockup .wordmark { font-size: 25px; }

/* --- site header -------------------------------------------------------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
}

.site-head nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  font-size: 15px;
}

/* The call is excluded rather than fought with: this rule outweighs `.btn` on
   specificity, so without the `:not` it strips the button's padding and repaints
   its label in the links' grey. */
.site-head nav a:not(.btn) {
  color: var(--muted);
  text-decoration: none;
  padding: 10px 0;
  transition: color .2s var(--ease);
}

.site-head nav a:not(.btn):hover { color: var(--ink); }

/* In the bar the call is the App Store's `Get` pill - a compact control, fully
   rounded, one step down in type - and not the page button it shares a class
   with. See CLAUDE.md `Design Target`: #EFEFF1 is that pill's fill. */
.site-head .btn {
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
}

/* On a phone the row is the wordmark and the call, and nothing else. Three
   text links beside them wrap into each other at 390px, and the two that go
   are already reachable by scrolling. */
@media (max-width: 640px) {
  .site-head nav a:not(.btn) { display: none; }
  .site-head .btn { min-height: 44px; padding: 0 16px; font-size: 16px; }
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

.btn-quiet {
  background: var(--raised);
  color: var(--ink);
}

/* --- site footer -------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(64px, 10vw, 120px);
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 15px;
}

.site-foot .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
/* The brand keeps its own ink down here rather than inheriting the footer's
   grey - a greyed-out wordmark reads as a disabled control. */
.site-foot .lockup { color: var(--ink); }
.site-foot .lockup:hover { text-decoration: none; }
.site-foot .fine { margin: 20px 0 0; font-size: 14px; }

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