/* === WAYPOINT COLOUR THEME === */
/* Palette: Teal #2E7D6F · Light surface #F0FAF8 */

:root {
  --bg: #FFFFFF;
  --surface: #F0FAF8;
  --border: #C8E6E2;
  --text: #1C1C1E;
  --text-muted: #4A6B65;
  --accent: #2E7D6F;

  --hero-bg: #2E7D6F;
  --hero-text: #FFFFFF;
  --hero-p-opacity: 0.88;

  --store-bg: #1B5E55;
  --store-text: #FFFFFF;
}

/* Nav accent */
nav { border-bottom-color: #C8E6E2; }
.nav-links a:hover, .nav-links a.active { color: #2E7D6F; }

/* Hero text overrides (white on dark teal) */
.app-hero .tagline { color: rgba(255, 255, 255, 0.88); }
.coming-soon { color: rgba(255, 255, 255, 0.6); }

/* Divider */
.divider { background: #2E7D6F; }

/* Feature cards */
.features-grid .feature-card { background: #F0FAF8; }

/* Muted store badge for platforms not yet available */
.btn-store-soon {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Dev status badge */
.dev-status-badge {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.3rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
}