/* One stylesheet for every page and every app.

   The palette is the company's, sampled from the logo: navy #102038 for the
   mark, #0050d8 through #2890f8 for the gradient in the V. It used to be
   PocketFix's zinc and yellow, which was right when this was one app's site
   and wrong the moment it became the company's. An app's own theme lives in
   the app; this is the page that has to sit above all three of them. */

:root {
  --ink: #102038;
  --ink-soft: #4a5a72;
  --ink-faint: #64738a;
  --ground: #ffffff;
  --ground-soft: #f7f9fc;
  --line: #dfe5ee;
  --accent: #0b4fd4;
  --accent-ground: #eef4ff;
  --radius: 10px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2f8;
    --ink-soft: #a3b0c2;
    --ink-faint: #7d8a9c;
    --ground: #0e1626;
    --ground-soft: #172136;
    --line: #2a3548;
    /* Lifted off the logo blue: #0050d8 is too dark to read on this ground. */
    --accent: #5da2fb;
    --accent-ground: #14233d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────────────────────── */
header.site {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 48px;
}
header.site .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
header.site a { color: var(--ink); text-decoration: none; font-weight: 600; }
header.site nav { margin-left: auto; display: flex; gap: 18px; }
header.site nav a { color: var(--ink-soft); font-weight: 400; font-size: 15px; }
header.site nav a:hover { color: var(--accent); }

/* ── Logo ───────────────────────────────────────────────────────────── */
/* The artwork is trimmed to its bounding box, so the breathing room is this
   plate's padding rather than baked into the file. The plate is white because
   the mark is navy: transparency would not help in dark mode, it would just
   put a dark navy logo on a dark background. A light-on-dark variant of the
   logo is the real fix, and then this rule reduces to a media query. */
.logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--radius);
}

/* The company index only. Gives the logo and tagline room to be a header
   rather than the first paragraph of a document. */
.hero {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.hero .lede { margin-bottom: 24px; font-size: 1.2rem; }

/* ── Type ───────────────────────────────────────────────────────────── */
h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: 1.3rem; letter-spacing: -0.01em; margin: 40px 0 12px; }
h3 { font-size: 1.02rem; margin: 28px 0 6px; }
p, li { max-width: var(--measure); }
p { margin: 0 0 16px; }
a { color: var(--accent); }
.lede { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 32px; }
.meta { font-size: 14px; color: var(--ink-faint); }

/* ── Blocks ─────────────────────────────────────────────────────────── */
.features { display: grid; gap: 2px; margin: 32px 0; }
.feature {
  background: var(--ground-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 10px;
}
.feature h3 { margin: 0 0 6px; }
.feature p { margin: 0; color: var(--ink-soft); }

.callout {
  background: var(--accent-ground);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 28px 0;
}
.callout p:last-child { margin-bottom: 0; }

.faq { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.faq h3 { margin-top: 0; }
.faq p { color: var(--ink-soft); margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; }
td:first-child { white-space: nowrap; font-weight: 500; }
.scroll { overflow-x: auto; }

/* ── App cards ──────────────────────────────────────────────────────── */
/* The whole card is the link, so the tap target is the card rather than a
   few words of text — this list is the main thing the page is for. */
.applist { list-style: none; padding: 0; margin: 24px 0 0; }
.applist li { margin-bottom: 12px; }

.app {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ground-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.app:hover { border-color: var(--accent); transform: translateY(-1px); }
.app:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* iOS masks icons to a squircle; 22% of the box is the usual approximation. */
.app img {
  width: 64px;
  height: 64px;
  border-radius: 22%;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.app-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-name { font-weight: 600; font-size: 1.05rem; color: var(--accent); }
.app-tagline { color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
  .app:hover { transform: none; }
}

/* Visible to screen readers and search, not on screen. */
.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;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 24px 0 48px;
  font-size: 14px;
  color: var(--ink-faint);
}
footer.site a { color: var(--ink-soft); }
footer.site p { margin: 0 0 6px; }

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  header.site { margin-bottom: 32px; }
}