:root {
  color-scheme: light dark;
  --ink: #1c1c1e;
  --dim: #5c5c60;
  --bg: #fbfaf7;
  --panel: #ffffff;
  --rule: #e4e1da;
  --link: #1b6b4a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ececee;
    --dim: #a0a0a6;
    --bg: #131315;
    --panel: #1c1c1f;
    --rule: #2e2e33;
    --link: #57c493;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 20px 72px;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 660px; margin: 0 auto; }
header { padding: 56px 0 8px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 72px; height: 72px; border-radius: 16px; flex: none;
             box-shadow: 0 2px 10px rgba(0,0,0,0.28); }
.brand h1 { margin: 0; }
.inner .brand img { width: 44px; height: 44px; border-radius: 10px; }
@media (max-width: 480px) {
  .brand img { width: 56px; height: 56px; border-radius: 13px; }
}
h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 34px 0 10px; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p, li { color: var(--ink); }
.lede { font-size: 19px; color: var(--dim); margin: 0 0 8px; }
.dim { color: var(--dim); }
a { color: var(--link); }
nav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
      padding: 12px 0; margin: 24px 0 8px; font-size: 15px; }
nav a { margin-right: 18px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.card { background: var(--panel); border: 1px solid var(--rule);
        border-radius: 10px; padding: 18px 20px; margin: 20px 0; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule);
         font-size: 14px; color: var(--dim); }
code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace;
       background: var(--panel); border: 1px solid var(--rule);
       border-radius: 4px; padding: 1px 5px; }

/* Screenshots. Full bleed of the column, with a caption underneath. */
figure { margin: 28px 0; max-width: 560px; }
figure img,
figure video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #000;
}
/* The still is a sibling of the video, not a child: a child only appears
   when the browser cannot play video at all, which is not the same thing as
   somebody asking their machine to stop animating. Hidden by default, and
   swapped for the video when reduced motion is asked for. */
figure .still { display: none; }
@media (prefers-reduced-motion: reduce) {
  figure video { display: none; }
  figure .still { display: block; }
}
figcaption {
  font-size: 14px;
  color: var(--dim);
  margin-top: 8px;
}
/* The rack is portrait and would otherwise be a page of its own. */
figure.tall { max-width: 400px; }

/* The App Store call to action. */
.cta { margin: 26px 0 4px; }
.cta a, .cta span {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.cta a { background: var(--link); color: #fff; }
.cta a:hover { filter: brightness(1.08); }
/* Not a link until there is somewhere to go. A dead button that looks live is
   worse than an honest one that says "not yet". */
.cta span { background: var(--panel); border: 1px solid var(--rule); color: var(--dim); }
.cta .note { display: block; margin-top: 8px; font-size: 14px;
             font-weight: 400; color: var(--dim); }

/* The two apps, on Support and Privacy. A rule and a larger heading, so the
   headings beneath each one keep their own level. */
h2.app { font-size: 24px; margin: 52px 0 10px; padding-top: 20px;
         border-top: 2px solid var(--rule); }
h2.app:first-of-type { margin-top: 34px; }
.jump { margin: 0; }
.jump li { margin: 4px 0; }