:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --rule: #d2d2d7;
  --link: #0066cc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --rule: #424245;
    --link: #2997ff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
header img { width: 48px; height: 48px; border-radius: 11px; }
header a { color: var(--text); text-decoration: none; font-weight: 600; }
h1 { font-size: 34px; line-height: 1.15; margin: 8px 0 4px; }
h2 { font-size: 21px; margin: 32px 0 8px; }
.updated { color: var(--muted); margin: 0 0 24px; }
.summary { border-left: 3px solid var(--rule); padding: 4px 0 4px 16px; color: var(--muted); }
a { color: var(--link); }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }

/* Home page */
.hero { padding: 8px 0 4px; }
.hero-title { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.hero .app-icon { width: 104px; height: 104px; border-radius: 23px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.hero h1 { font-size: 34px; margin: 0 0 4px; }
.tagline { font-size: 19px; line-height: 1.3; font-weight: 600; margin: 0; }
.lede { color: var(--muted); font-size: 18px; margin: 0 0 16px; }
.badge { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-weight: 600; font-size: 15px; text-decoration: none; }
.badge-note { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
/* The beta is a side door, not the way in: outlined rather than filled, so the App Store button stays the loudest
   thing on the page. */
.badge-quiet { background: transparent; color: var(--text); border: 1px solid var(--muted); }
.photo { width: 100%; border-radius: 16px; display: block; margin: 16px 0; }
.features { list-style: none; padding: 0; margin: 0; }
.features li { margin: 0 0 20px; }
.features strong { display: block; font-size: 19px; }
.cta { font-size: 19px; }
.caption { color: var(--muted); font-size: 14px; text-align: center; margin: -8px 0 28px; }
video.photo { background: #000; aspect-ratio: 16 / 9; }
/* A screen recording: shown at about the size of a phone rather than stretched across the column. */
.phone { display: block; width: 100%; max-width: 300px; margin: 16px auto; border-radius: 20px; background: #000;
  aspect-ratio: 660 / 1412; }
.setups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 28px; }
.setups figure { margin: 0; }
.setups img { width: 100%; border-radius: 12px; display: block; }
.setups figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 6px; }
@media (max-width: 420px) { .setups { gap: 8px; } }
/* The photo stands beside the words, with the text in its own column rather than wrapping underneath: this
   section is someone talking, not another feature. */
.about { display: flex; align-items: flex-start; gap: 20px; margin: 16px 0; }
.about > div { flex: 1; min-width: 0; }
.about p:first-child { margin-top: 0; }
.mug { flex: none; width: 150px; height: 200px; border-radius: 14px; object-fit: cover; }
@media (max-width: 420px) { .about { gap: 14px; } .mug { width: 108px; height: 144px; } }
@media (max-width: 420px) {
  .hero-title { gap: 14px; }
  .hero .app-icon { width: 84px; height: 84px; border-radius: 19px; }
  .hero h1 { font-size: 30px; }
  .tagline { font-size: 16px; }
}

/* Four videos loop on this page. Anyone who has asked their phone to stop animating things gets the poster frames
   instead, which is what Low Power Mode already shows and is no loss: they are stills of the same moment. */
@media (prefers-reduced-motion: reduce) {
  video {
    animation-play-state: paused;
  }
}

/* "Try Stan's other apps" (generated; see ~/Developer/stan-apps-footer). Its own padding assumes it spans the
   window, but here it sits inside main's 16px gutter, so the horizontal padding would double and inset the block
   from every other section. Zeroed from this side rather than by editing the generated block.
   `main .sj-apps` not `.sj-apps`: the block inlines its <style> later in the document, so an equal-specificity
   rule here would lose on source order. */
main .sj-apps { padding-left: 0; padding-right: 0; }