/* Final palette: white reading surfaces, quiet neutrals, charcoal and amber. */
:root {
  --white: #fff;
  --soft-gray: #efefed;
  --ink: #242628;
  --dark: #242628;
  --muted: #64676a;
  --line: #dcddde;
  --dark-line: #505355;
  --dark-muted: #c6c8c8;
  --on-media-muted: #dcddde;
  --input-border: #858b8e;
  --amber: #ffc14f;
  --amber-hover: #ffce76;
  --amber-ink: #8a5a0a;
}

html { background: var(--soft-gray); }
main,
.site-header,
.mobile-nav,
.hero,
.partners,
.detection-section,
.platform,
.about-hero,
.about-story {
  background: var(--white);
}

/* Keep a warm off-white interval around coverage; make the remaining
   grays neutral so they do not pull the palette back toward green. */
.workflow, .about-team, .platform-frame { background: var(--soft-gray); }
.hero-photo-caption div > span { color: var(--on-media-muted); }
.coverage-facts > div { border-color: var(--line); }
.performance-strip > div:nth-child(n+4) { border-color: var(--dark-line); }
.platform-title span { color: var(--muted); }
.mobile-nav { box-shadow: 0 15px 20px #24262810; }

/* Amber reads as an accent on charcoal. A deeper shade of the same hue
   keeps small labels and keyboard focus legible on white and pale gray. */
.workflow-outcomes .eyebrow { color: var(--amber-ink); }
:focus-visible { outline-color: var(--amber-ink); }
.hardware :focus-visible,
.coverage-visual :focus-visible,
.hero-media :focus-visible,
.about-principles :focus-visible,
.testimonial :focus-visible,
.site-footer :focus-visible { outline-color: var(--amber); }
.button:not(.button-dark):hover { background: var(--amber-hover); }
.about-cta > .button:hover, .button-dark:hover { background: #3a3d3f; }

/* A white form and neutral field outlines complete the light interface. */
.demo-dialog { background: var(--white); }
#demo-form input { background: var(--white); border-color: var(--input-border); }
#demo-form input:focus-visible { outline-color: var(--amber-ink); }

/* Give recruiting and the demo invitation separate visual weight. */
.about-cta { background: var(--white); }
.about-cta p { color: var(--muted); }