/* One stylesheet, no build step. The site is four static pages; anything more
   would be machinery around three paragraphs of text. */
:root {
  --bg: #ffffff;
  --card: #f2f3f5;
  --text: #111111;
  --muted: #666666;
  --border: #e5e5e5;
  /* The one colour that is ours rather than the system's.
     Blue on purpose, and not orange, green or red: those three already mean
     something in the app — attention, checked in, stop — and a brand colour
     that is also a signal stops being either. Blue is the furthest from all
     three at a glance, which is what matters on a phone held at a door.
     6.7:1 against white, and every use below puts --bg on top of it, which is
     white here and near-black in dark mode. Both pass comfortably. */
  --accent: #1D4ED8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --card: #141414;
    --text: #ffffff;
    --muted: #999999;
    --border: #222222;
    /* Lighter, because the same blue on near-black is too dark to read and the
       text on top of it is now --bg, which is near-black here. 7.8:1 for the
       colour, 8.3:1 for the text on it. */
    --accent: #60A5FA;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 680px; margin: 0 auto; }

header { padding: 56px 0 8px; }
header a { text-decoration: none; color: var(--text); }
/* Generous type is most of what "designed" means, and it costs nothing but
   space. clamp so a phone gets a headline that fits and a laptop gets one with
   presence, without a media query for each. */
h1 { font-size: clamp(32px, 6vw, 40px); line-height: 1.15; letter-spacing: -1px; margin: 0 0 8px; }
h2 { font-size: 23px; letter-spacing: -0.4px; margin: 44px 0 10px; }
h3 { font-size: 17px; letter-spacing: -0.2px; margin: 28px 0 6px; }
p, li { color: var(--text); }
/* One sentence under the headline saying what the thing is, before the page
   starts explaining how to use it. */
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); margin: 0 0 8px; max-width: 34em; }
.hero { color: var(--accent); margin: 8px 0 4px; }
.muted { color: var(--muted); }
small { color: var(--muted); font-size: 14px; }

a { color: inherit; }

/* The tint was #f7f7f8 against a white page — close enough that the panel did
   not read as one. More padding, a rounder corner and no hairline: the fill is
   doing the separating now, which is why it has to be visible. */
.card {
  background: var(--card);
  border-radius: 20px;
  padding: 28px;
  margin: 28px 0;
}

/* Fully round, and big enough to look chosen rather than defaulted. Full width
   on a phone, because a button somebody presses one-handed at arm's length
   should not be a small target in the middle of a line. */
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 999px;
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 560px) {
  .button { display: block; width: 100%; }
}

code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 14px;
  word-break: break-all;
}

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}
footer a { margin-right: 16px; }