/* The same paper the app is printed on: warm off-white by day, warm near-black
   by night, never pure white and never pure black. One column, one thing to
   read at a time. */
:root {
  --page: #f7f4ef;
  --ink: #1b1916;
  --soft: #1b191699;
  --rule: #1b19161f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #121110;
    --ink: #efece6;
    --soft: #efece699;
    --rule: #efece61f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 28px 80px;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

header {
  max-width: 34rem;
  margin: 0 auto;
  padding: 64px 0 40px;
}

h1 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

h2 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 44px 0 10px;
}

p { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 1.1rem; }
li { margin-bottom: 8px; }

.lede { color: var(--soft); }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 48px 0 24px;
}

footer {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--soft);
  font-size: 0.82rem;
}

nav { margin-top: 20px; font-size: 0.95rem; }
nav a { margin-right: 18px; }

/* The mark: a full stop.
   It used to be the one on the app icon as well, and that sentence stood here
   for a while after it had stopped being true — the icon is an hourglass now.
   The dot stays because it is doing a different job: this is a full stop set
   above a line of prose, at thirteen pixels, and an hourglass at that size on a
   page of text is a favicon that has wandered into the copy. If the two are
   ever to be the same mark again it is the page that would have to change
   around it, which is a decision about the page and not about the icon. */
.mark {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink);
  margin-bottom: 26px;
}

/* The front page. Everything above is shared with the privacy and support
   pages; what follows is only used by index.html and de/index.html. */
header.wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px 0 0;
}
header.wide nav { margin-top: 0; }
header.wide nav a { margin: 0 0 0 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; }
.icon { border-radius: 10px; display: block; }

.hero { padding: 64px 0 28px; }
.hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 18px; }
.hero .lede { font-size: 1.1rem; margin-bottom: 26px; }
.badge { display: inline-block; line-height: 0; }
.badge img { height: 54px; width: auto; }
.facts { color: var(--soft); font-size: 0.85rem; margin-top: 14px; }

.shots {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-width: 62rem;
  margin: 8px auto 20px;
  padding: 4px 0 12px;
}
.shots figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
.shots img { display: block; width: 190px; height: auto; border-radius: 14px; }

table.rule { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 0.95rem; }
table.rule th { text-align: left; font-weight: 500; color: var(--soft); }
table.rule th, table.rule td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule); }

details { border-bottom: 1px solid var(--rule); padding: 12px 0; }
details summary { cursor: pointer; font-weight: 500; }
details p { margin: 10px 0 4px; color: var(--soft); }

.cta { margin-top: 40px; }
footer p { margin-bottom: 8px; }