/* Website palette follows GoMapped 2.1.7.0/design_tokens.py.
   The approved logo retains its original #104A64 artwork. */
:root {
  --ink: #172b37;
  --teal: #155b73;
  --mint: #eaf2f5;
  --paper: #f5f7f8;
  --line: #dfe6eb;
  --muted: #5b6e7b;
  --dark-canvas: #132935;
  --dark-surface: #152733;
  --dark-quiet: #10222e;
  --dark-text: #edf5fa;
  --dark-muted: #afc4d1;
  --dark-line: #3a5363;
  --dark-soft: #243c49;
  --aqua: #87cee7;
}

header {
  background: var(--dark-quiet);
  border-color: var(--dark-line);
  color: var(--dark-text);
}
header .brand { letter-spacing: -.7px; }
header .brand img {
  background: #fff;
  border-radius: 9px;
  padding: 4px;
  margin-right: 3px;
}
header nav a { color: var(--dark-muted); }
header nav a:hover { color: var(--dark-text); }
header .button, .hero .button, .button-light {
  color: var(--dark-quiet);
  background: var(--aqua);
}
header .button:hover, .hero .button:hover, .button-light:hover {
  color: var(--dark-quiet);
  background: var(--dark-text);
}
.hero-band {
  background: var(--dark-quiet);
  color: var(--dark-text);
}
.hero { padding-top: 84px; padding-bottom: 92px; }
.hero .eyebrow, .hero h1 span { color: var(--aqua); }
.hero .status-dot { background: #91d8bb; }
.hero .hero-detail, .hero .platform { color: var(--dark-muted); }
.hero .intro { color: var(--dark-text); }
.hero .text-link { color: var(--dark-text); }
.hero .text-link:hover { color: var(--aqua); }
.hero .play-small { color: var(--aqua); border-color: var(--dark-line); }
.hero-visual {
  background: var(--dark-surface);
  border-color: var(--dark-line);
  border-radius: 12px;
}
.hero .route-label { color: var(--aqua); }
.hero .code-route {
  background: var(--dark-soft);
  border-color: var(--dark-line);
  color: var(--dark-text);
}
.hero .tiny { color: var(--dark-muted); }
.hero .code-route > div:first-child strong, .hero .route-arrow { color: var(--aqua); }
.hero .caret { background: var(--aqua); }
.hero .app-frame { border-color: var(--dark-line); box-shadow: none; }
.hero .window-bar {
  background: var(--dark-canvas);
  color: var(--dark-muted);
  border-bottom: 1px solid var(--dark-line);
}
.hero .window-bar i { background: var(--dark-line); }
.hero .visual-caption { color: var(--dark-muted); }
.benefit-strip { background: var(--mint); }
.workflow-choice.active, .workflow-panel { background: var(--mint); }
.step { color: var(--teal); }
.workflow-panel, .workflow-panel img, .tag { border-color: var(--line); }
.quick-section, .final-cta {
  background: var(--dark-canvas);
  color: var(--dark-text);
}
.quick-section .eyebrow, .final-cta .eyebrow { color: var(--aqua); }
.quick-section p:not(.eyebrow), .final-cta p:not(.eyebrow) { color: var(--dark-muted); }
.keyboard kbd {
  background: var(--dark-soft);
  border-color: var(--dark-line);
  color: var(--dark-text);
}
.final-cta .button { margin-top: 2px; }
.skip { color: var(--ink); }
:focus-visible { outline-color: var(--teal); }
header :focus-visible, .hero-band :focus-visible, .quick-section :focus-visible,
.final-cta :focus-visible { outline-color: var(--aqua); }

@media (max-width: 800px) {
  .hero { padding-top: 54px; padding-bottom: 54px; }
}
@media (max-width: 480px) {
  header .brand img { padding: 3px; border-radius: 7px; }
  .hero { padding-top: 45px; padding-bottom: 45px; }
}