/* One stylesheet for four pages. They share a header, a footer and a palette, and the
   alternative is the same eighty lines pasted four times and drifting apart.

   The palette is the app's: navy #0f1733, teal #04c3b5, off-white #f9f9f8 - read out of
   the brand artwork rather than eyeballed, so the site and the app are one product.

   Dark is the default and light is the override, matching the app, which was built dark
   first. Both are painted explicitly: a page that sets only one of them inherits whatever
   the browser felt like for the other. */

:root {
  --ink: #f5f7fa;
  --ink-dim: #9aa5bd;
  --ground: #0f1733;
  --raised: #182247;
  --line: #26315c;
  --teal: #04c3b5;
  --teal-ink: #062522;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #0f1733;
    --ink-dim: #5a6480;
    --ground: #f9f9f8;
    --raised: #ffffff;
    --line: #e2e4ea;
    /* Darker than the app's teal. #04c3b5 on white is 2.1:1, which fails text contrast;
       this is 3.9:1 for links and passes as a button ground with white on top. */
    --teal: #0a8f86;
    --teal-ink: #ffffff;
  }
}

* { box-sizing: border-box; }

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

.wrap { max-width: 640px; margin: 0 auto; }

header { padding: 56px 0 40px; text-align: center; }
header img.shoe { width: 76px; height: auto; margin: 0 auto 18px; }
header img.wordmark { width: 190px; height: auto; margin: 0 auto; }
header a { display: block; text-decoration: none; }

h1 { font-size: 27px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 12px; }
h2 { font-size: 19px; letter-spacing: -0.005em; margin: 36px 0 10px; }
h3 { font-size: 16px; margin: 24px 0 6px; }
p  { margin: 0 0 14px; }
a  { color: var(--teal); }

.lede { font-size: 18px; color: var(--ink-dim); margin-bottom: 28px; }
.dim  { color: var(--ink-dim); }
.small { font-size: 14px; }

ul { padding-left: 22px; margin: 0 0 14px; }
li { margin-bottom: 7px; }

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 20px;
}

.center { text-align: center; }

.button {
  display: inline-block;
  background: var(--teal);
  color: var(--teal-ink);
  font-weight: 600;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}
.button.quiet {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--line);
}

footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--ink-dim);
}
footer a { color: var(--ink-dim); margin: 0 9px; }

/* Two shoes, one shown. A `picture` element would be tidier, but `prefers-color-scheme`
   in a `source media` attribute is not carried everywhere this has to render - an
   in-app browser inside iMessage among them. */
.on-light { display: none; }
@media (prefers-color-scheme: light) {
  .on-dark  { display: none; }
  .on-light { display: block; }
}