/* The app's own palette, so the site and the thing it describes are not two
   different products. Values from MonitorPalette's dark scheme. */
:root {
  --page: #0E1116;
  --card: #171B22;
  --hairline: #262C36;
  --ink: #EEF1F5;
  --ink2: #A2ABB8;
  --ink3: #6B7482;
  --accent: #6EA3FF;
  --good: #3DD68C;
  --slow: #F2C14E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px 80px; }
header { padding: 64px 0 8px; }
h1 { font-size: 2.6rem; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; margin: 44px 0 12px; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; margin: 26px 0 8px; color: var(--ink); }
p, li { color: var(--ink2); }
.lead { font-size: 1.2rem; color: var(--ink2); margin: 0 0 26px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
nav { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
nav a { color: var(--ink3); font-size: 0.95rem; }
nav a.here { color: var(--ink); }
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 20px; margin: 18px 0; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 22px 0; }
.tool { background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; }
.tool b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 3px; }
.tool span { color: var(--ink3); font-size: 0.9rem; }
.shots { display: flex; gap: 14px; overflow-x: auto; padding: 8px 0 18px; }
.shots img { width: 232px; border-radius: 16px; border: 1px solid var(--hairline); flex: 0 0 auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; color: var(--ink); }
footer { border-top: 1px solid var(--hairline); margin-top: 56px; padding-top: 20px; color: var(--ink3); font-size: 0.9rem; }
.updated { color: var(--ink3); font-size: 0.92rem; }

/* The hero: the App Store preview, playing itself. It is the first thing a
   reader meets because it is the only asset that shows the app moving —
   Pulse is a tool whose point is that the figures change, and a still of it
   is a table. Muted and looping, because a page that makes noise is a page
   people close. Fifteen seconds and 1.1 MB, which is what makes autoplaying
   it reasonable. */
.hero { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; padding: 8px 0 6px; }
.hero video { width: 300px; border-radius: 28px; border: 1px solid var(--hairline); display: block; background: #000; }
.hero .say h1 { margin-top: 0; }
@media (max-width: 680px) {
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .hero video { width: 100%; max-width: 320px; margin: 0 auto; }
}

/* The minute-long film, further down the page. `preload="none"` and no
   autoplay: it is eight megabytes against the hero's one, it carries music,
   and it has an ending rather than being a loop. A page that starts eight
   megabytes of somebody's mobile data before they have asked for anything
   is a page that has taken a liberty — and two videos playing themselves at
   once is a page nobody can read. */
.film video { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
              border: 1px solid var(--hairline); display: block; background: #000; }
.filmnote { color: var(--ink3); font-size: 0.9rem; margin-top: 10px; }
.shots img { width: 232px; }
figure { margin: 0; flex: 0 0 auto; width: 232px; }
figure figcaption { color: var(--ink3); font-size: 0.82rem; margin-top: 8px; line-height: 1.45; }

/* The App Store link. Present before the app is, because the URL is built
   from the App Store Connect record's id and that id exists from the moment
   the record does — so the link is correct now and starts working the day
   review passes, with nothing to remember to change. Until then it lands on
   a page saying the app is not available, which is the truth. */
.store { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
         padding: 12px 20px; border-radius: 999px; background: var(--accent);
         color: var(--page); font-weight: 600; font-size: 1rem; }
.store:hover { text-decoration: none; filter: brightness(1.08); }
.store svg { width: 20px; height: 20px; fill: currentColor; }
.soon { display: block; color: var(--ink3); font-size: 0.86rem; margin-top: 10px; }