/* The app's own palette and face, so the site and the product look related. */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* The site is light, whatever the visitor's system is set to. */
  color-scheme: light;
  --ink: #1a181b;
  --ink-secondary: #98969b;
  --ink-tertiary: #c7c5ca;
  --page: #fffeff;
  /* The sky at the top of the clip: what the browser's own bars are tinted
     with, and what shows when the page is pulled past its top edge. */
  --sky: #6183b1;
  --card: #fffeff;
  --hairline: rgba(26, 24, 27, 0.07);
  --accent: #14adfa;
  /* The fill of the app's primary button, and the text on it. */
  --charcoal: #343235;
  --on-charcoal: #fffeff;
  /* The width of the welcome screen, a phone's worth of page. */
  --column: 480px;
  --side-pad: 22px;
  --top-pad: 26px;
  --wordmark-height: 34px;
  /* Where the signs begin: clear of the wordmark, whatever the window. */
  --sign-top: calc(var(--top-pad) + var(--wordmark-height) + 30px);
}

* {
  box-sizing: border-box;
}

/* The welcome screen is one screen of sky over white: pulled past the top it
   keeps showing sky, past the bottom, page. The legal pages, which have no
   sky, keep the plain background.

   The background of the root is laid like tiles from the top of the page, up
   as well as down. A tile only as tall as the page starts again with sky right
   under the footer, and Safari on iPhone shows that as a blue strip behind its
   toolbar whenever the window is taller than the page (the App Store banner
   makes it so). So a tile is four windows tall: three of page, then one of
   sky, which is the one that lands above the top edge. */
html:has(.welcome) {
  background: linear-gradient(to bottom, var(--page) 0 75%, var(--sky) 75%) 0 0 / 100% 400vh;
}

body {
  margin: 0;
  /* The sky runs the whole width of the window, which must not put a bar
     along the bottom. */
  overflow-x: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The welcome screen: the sky at the top, the promise and the button at the
   bottom, laid out the way the app's first screen is. */
.welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--column));
  min-height: 100svh;
  margin: 0 auto;
  padding: var(--top-pad) var(--side-pad) 20px;
}

/* The sky runs the full width of the window and takes whatever room the
   promise and the button leave. It is pulled up a little, the way the app
   lifts its clip. */
.sky {
  position: relative;
  z-index: 0;
  /* It takes exactly the room the words leave, so the page is one screen. */
  flex: 1 1 0;
  min-height: 180px;
  max-height: 520px;
  width: 100vw;
  /* It starts at the top of the page, twenty pixels above it, so no edge of
     the clip is ever in sight but the one it fades out on. */
  margin-top: calc(-1 * (var(--top-pad) + var(--wordmark-height) + 20px));
  margin-inline: calc(50% - 50vw);
  /* An ellipse wider and taller than the band, hung from the top edge: the
     sides and the top run off the window, so the only curve in sight is the
     one the sky ends on at the bottom. */
  --fade: radial-gradient(
    115% 105% at 50% 0%,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.8) 74%,
    rgba(0, 0, 0, 0.25) 87%,
    transparent 97%
  );
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

.sky-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The signpost stands in the middle of the band, its pole running out of the
   bottom of it. */
.signpost {
  position: absolute;
  top: var(--sign-top);
  left: 50%;
  translate: -50% 0;
  height: calc(100% - var(--sign-top) + 22px);
  width: auto;
  /* On a wide window the band is short, and the signs stop growing. */
  max-width: 92vw;
}

.brand,
.hero,
.welcome footer {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  justify-content: center;
}

.brand img {
  display: block;
  width: 78px;
  height: auto;
}

.hero {
  padding-top: 24px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 9.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.hero .lede {
  margin: 0 auto 26px;
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-secondary);
}

/* The app's primary button: a charcoal capsule catching light along its top. */
.appstore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 28px;
  border-radius: 999px;
  background-color: var(--charcoal);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 50%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  color: var(--on-charcoal);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.appstore:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .appstore:hover {
    transform: translateY(-1px);
  }
}

.apple {
  width: 20px;
  height: 20px;
  /* The mark hangs a touch high next to a line of text. */
  margin-top: -2px;
}

.welcome footer {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
  text-align: center;
}

.welcome footer nav {
  justify-content: center;
  gap: 20px;
}

/* Legal pages reuse the old shell and only need readable prose. */
main.prose {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.prose header {
  padding-bottom: 72px;
}

.prose .wordmark {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: -0.01em;
}

.prose h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.prose .updated {
  margin: 0 0 40px;
  color: var(--ink-tertiary);
  font-size: 15px;
}

.prose h2 {
  margin: 36px 0 10px;
  font-size: 20px;
  font-weight: 600;
}

.prose p,
.prose li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.prose a {
  color: var(--accent);
}

.prose footer {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

footer a {
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: 16px;
}

footer a:hover {
  color: var(--ink);
}

.copyright {
  margin: 20px 0 0;
  color: var(--ink-tertiary);
  font-size: 15px;
}

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