/* Wander-Points brand overrides.
 *
 * Loaded *after* style.css, which is a byte-identical copy of the
 * Velo-Points stylesheet (kept in sync by ../sync-shared.sh). Everything the
 * two sites share lives there; only what genuinely differs lives here, so a
 * layout fix made on one site lands on both.
 *
 * The one thing that differs is the accent. Velo's is the in-app iOS system
 * blue; Wander's is the colour of a wandelknooppunt marker — sampled straight
 * out of the app's own captures (#d9480f on the map discs, and the walking
 * figure on the Watch idle screen). The warm-grayscale chrome, the dark hero
 * and the type scale are unchanged on purpose: these are sibling products,
 * not two unrelated brands.
 */
:root {
  --accent:      #d9480f;   /* wandelknooppunt marker orange, from the app */
  --accent-deep: #b03a0a;   /* hover / pressed */
  --route:       #e6b852;   /* the sandy route line the app draws */
}

/* style.css hardcodes the blue wash on hero feature cards (rgba of #007aff)
   because a var() can't be given an alpha there. Restate it in orange. */
.feature.is-hero { background: rgba(217, 72, 15, 0.05); }

/* TestFlight pill in the hero CTA. Wander-only: the cycling site dropped this
   class when the app was approved and now ships an App Store badge instead.
   It lives here rather than in the shared style.css so syncing that file back
   from public/ never has to carry it. Swap the whole .hero-cta block in
   index.html for an .appstore-badge once Wander-Points is live. */
.beta-note {
  display: inline-block;
  padding: 11px 21px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  color: var(--hero-text);
  font-weight: 600;
  font-size: 0.95rem;
}
.beta-note::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}