/* The plain pages around the app (about, Frutiger Aero, old Mac looks):
   readable by anyone and any crawler, no scripts needed. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.6 'Nunito', ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
  color: #0b2540;
  background: #dff1ff radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #c9ecff 40%, #7fcdfb 100%) fixed;
}
a { color: #0b5fd0; }
.site { max-width: 820px; margin: 0 auto; padding: 24px 18px 60px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 26px; font-weight: 800; }
.site-nav a { color: #0b2540; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .logo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2rem; margin-right: auto; }
.site-nav .logo img { width: 34px; height: 34px; border-radius: 10px; }
.hero { text-align: center; padding: 20px 0 10px; }
.hero img.icon { width: 120px; height: 120px; border-radius: 30px; box-shadow: 0 16px 40px -12px rgba(0, 60, 150, 0.5); }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 16px 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; margin: 34px 0 10px; }
h3 { margin: 22px 0 6px; }
p { margin: 0 0 14px; }
.lede { font-size: 1.15rem; max-width: 60ch; margin: 0 auto 18px; }
.pane {
  padding: 20px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 12px 30px -16px rgba(0, 40, 100, 0.35);
  margin: 18px 0;
}
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, #7fd0ff, #1e9bff 55%, #0b6fd8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px -6px rgba(0, 90, 200, 0.6);
}
.btn.ghost { color: #0b2540; background: rgba(255, 255, 255, 0.85); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 24px -12px rgba(0, 40, 100, 0.5); display: block; }
.shots figcaption { font-size: 0.85rem; text-align: center; margin-top: 4px; color: #3c5a7a; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.grid .pane { margin: 0; }
.pane h3:first-child { margin-top: 0; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.small { font-size: 0.9rem; color: #3c5a7a; }
footer { margin-top: 40px; font-size: 0.9rem; color: #3c5a7a; text-align: center; }
footer a { color: inherit; }
details { margin: 8px 0; }
summary { cursor: pointer; font-weight: 800; }