/* Linked by every page, after any page styles. Holds the global header and
   footer and the App Store offer, so they look the same everywhere. Each page
   defines the --ink, --muted, --basil, --paper, --surface and --line tokens. */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 30; padding: 8px 14px; border-radius: 8px; background: var(--surface); }

.site-head, .site-foot { width: min(712px, 100% - 48px); margin-inline: auto; }
.site-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px 0; }
.site-nav a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.site-nav [aria-current] { font-weight: 650; text-decoration: underline; text-underline-offset: 0.25em; }
.site-nav .brand {
  margin-right: auto;
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-nav .pill {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--basil);
  color: var(--paper);
  font-size: 0.92rem;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .site-nav .pill { color: #10241a; } }
/* Below 768 px, iPhone Safari's Smart App Banner (apple-itunes-app) is the
   download invite, so the header pill steps aside. The brand and three links
   need about 315 px, so the nav keeps wrapping: under 375 px the brand takes
   the first row and the links the second, rather than stranding one link. */
.site-nav .pill { display: none; }
@media (min-width: 768px) { .site-nav .pill { display: inline-flex; } }
@media (max-width: 767px) { .site-nav { gap: 14px; } }
@media (max-width: 374px) {
  .site-nav { row-gap: 4px; }
  .site-nav .brand { flex-basis: 100%; }
}

.site-foot {
  margin-top: 48px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}
.site-foot p { margin: 0 0 6px; }
.site-foot a { display: inline-block; padding: 4px 0; color: var(--muted); text-decoration: underline; }
nav.crumbs a { display: inline-block; padding: 4px 0; }

/* Apple's badge with the price line directly beneath it. */
.app-offer { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.app-offer--center { align-items: center; text-align: center; }
.app-offer .store-badge { display: inline-block; border-radius: 8px; line-height: 0; }
.app-offer .store-badge:focus-visible { outline: 3px solid var(--basil); outline-offset: 3px; }
.app-offer .store-badge img { display: block; width: 144px; height: 48px; }
.app-offer .pricing { margin: 0; max-width: 34em; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

/* The sticky App Store bar keeps to one line down to 320 px wide screens. */
.sticky-cta { white-space: nowrap; font-size: clamp(0.8rem, 3.9vw, 1rem); }

@media (max-width: 560px) { html { scroll-padding-bottom: 100px; } }