/* Whistle download page. Reskins base.css for the app's own mark —
   dark charcoal + gold, sampled straight from the logo — while keeping
   the site's restraint: same two fonts, hairlines instead of shadows,
   lowercase mono labels. Not part of the main site's nav/footer. */

:root {
  --paper: #1c1c1e;
  --ink: #f4f1ea;
  --faint: #8f8a83;
  --hair: #333230;
  --gold: #f1b418;
}

.whistle {
  padding-top: 4.5rem;
  padding-bottom: 6rem;
}

.mark {
  display: block;
  border-radius: 14px;
}

h1 {
  font-size: 1.65rem;
  font-weight: 500;
  margin: 1.6rem 0 0;
}

.tagline {
  margin: 0.6rem 0 0;
  max-width: 26rem;
}

.btn {
  display: inline-block;
  margin: 1.8rem 0 0;
  padding: 0.65rem 1.3rem;
  background: var(--gold);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 150ms ease;
}
.btn:hover { opacity: 0.85; }
.btn:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 3px;
}

.req {
  margin: 1.3rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  max-width: 26rem;
}

.note {
  margin: 1.6rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
  color: var(--faint);
  font-size: 0.95rem;
  max-width: 28rem;
}

.screenshot {
  display: block;
  margin: 1.6rem 0 0;
  max-width: 28rem;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--hair);
}