:root {
  color-scheme: dark;
  --kw-bg: #030504;
  --kw-surface: #0a0f0d;
  --kw-surface-2: #101613;
  --kw-surface-3: #151b17;
  --kw-ink: #f4f7f1;
  --kw-soft: #c3cbc3;
  --kw-muted: #828d84;
  --kw-line: rgba(244, 247, 241, .13);
  --kw-line-strong: rgba(244, 247, 241, .22);
  --kw-signal: #38d8ff;
  --kw-signal-dark: #1689a8;
  --kw-shadow: 0 28px 80px rgba(0, 0, 0, .36);

  /* Legacy microsite aliases. */
  --bg: var(--kw-bg);
  --panel: var(--kw-surface);
  --panel-2: var(--kw-surface-2);
  --panel-3: var(--kw-surface-3);
  --ink: var(--kw-ink);
  --soft: var(--kw-soft);
  --muted: var(--kw-muted);
  --line: var(--kw-line);
  --green: var(--kw-signal);
  --cyan: var(--kw-signal);
  --gold: var(--kw-signal);
  --coral: var(--kw-signal);
  --blue: var(--kw-signal);
  --accent: var(--kw-signal);
  --shadow: var(--kw-shadow);
}

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(56, 216, 255, .052), transparent 440px),
    linear-gradient(90deg, rgba(244, 247, 241, .026) 1px, transparent 1px),
    linear-gradient(rgba(244, 247, 241, .022) 1px, transparent 1px),
    var(--kw-bg) !important;
  background-size: auto, 38px 38px, 38px 38px, auto !important;
  color: var(--kw-ink);
}

body,
button,
input,
textarea,
select {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
}

body, a, button, p, h1, h2, h3, li, dt, dd, span, strong {
  overflow-wrap: anywhere;
}

input, select, textarea, button, a, label {
  min-width: 0;
}

.top-nav,
.kw-nav,
.guide-nav {
  min-height: 58px;
  border-bottom-color: rgba(56, 216, 255, .14) !important;
  background:
    linear-gradient(90deg, rgba(5, 7, 6, .94), rgba(5, 7, 6, .80) 58%, rgba(5, 7, 6, .58)) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .30);
  backdrop-filter: blur(16px);
}

.nav-links a,
.kw-nav-links a,
.guide-links a,
.button,
.kw-button {
  border-radius: 8px;
  letter-spacing: 0;
}

.nav-cta,
.kw-nav-cta,
.button.primary,
.kw-button.primary,
.guide-cta,
button.primary,
[type="submit"].primary {
  border-color: rgba(56, 216, 255, .62) !important;
  background: var(--kw-signal) !important;
  color: #061216 !important;
}

.hero-shell,
.hero-grid,
.kw-hero,
.guide-hero {
  background: transparent;
}

.hero-copy h1,
.kw-title,
.guide-hero h1 {
  color: var(--kw-ink);
  letter-spacing: 0;
}

.hero-lede,
.lead,
.kw-lede,
.guide-lede,
.section-copy p,
.reviewer-copy p,
.scale-copy p,
.route-data-grid p,
.component-card p,
.principle-card p {
  color: var(--kw-soft);
}

.eyebrow,
.kw-eyebrow,
.panel-kicker,
.console-header span,
.kw-console-head span,
.guide-console-head span,
.metric-label,
.meter-label,
.route-data-grid span,
.card-metrics dt,
.review-metrics dt,
.scale-scorecard dt {
  color: var(--kw-signal) !important;
  letter-spacing: 0;
}

.review-console,
.kw-console,
.gtm-console,
.impact-console,
.guide-console,
.path-shell,
.path-form,
.path-rail,
.review-panel,
.route-system,
.scale-copy,
.component-card,
.principle-card,
.product-detail,
.concept,
.recommendation,
.deck-preview,
.readiness-shell,
.privacy-band,
.workflow-grid article,
.route-table article,
.guardrail-grid article,
.step-panel,
.metric-stack article,
.hero-board,
.concept-board,
.os-dashboard {
  border-color: var(--kw-line) !important;
  border-radius: 8px;
  background: rgba(10, 15, 13, .82) !important;
  box-shadow: var(--kw-shadow);
}

.field input,
.field select,
.field textarea,
input,
select,
textarea {
  border-color: var(--kw-line) !important;
  background: rgba(5, 7, 6, .66) !important;
  color: var(--kw-ink) !important;
}

.field span,
label span,
.status-line,
small,
.rail-note,
.deck-drop em,
.file-drop em,
.logo-copy small {
  color: var(--kw-muted) !important;
}

.metric-stack strong,
.hero-stats strong,
.deck-proof-strip strong,
.reviewer-metrics strong,
.guide-dashboard strong,
.mini-metrics strong,
.score-ring strong,
.meter-panel strong,
.console-flow article span,
.step-list li span,
.lesson-grid article span,
.flow-card span,
.route-table strong,
.microsite-route-table strong {
  color: var(--kw-signal) !important;
}

.console-flow article,
.guide-flow-card,
.step-list li,
.lesson-grid article,
.hero-stats span,
.deck-proof-strip div,
.metric-stack article,
.route-data-grid article,
.operating-list span,
.metric-strip span,
.card-metrics div,
.review-metrics div,
.scale-scorecard div,
.checklist label,
.checkbox-line,
.file-drop,
.deck-drop {
  border-color: var(--kw-line) !important;
  border-radius: 8px;
  background: rgba(241, 245, 240, .035) !important;
}

.is-active,
.console-flow article.is-active,
.guide-flow-card.is-active,
.step-list li.is-active,
.product-tabs button.is-active,
.os-products button.is-active {
  border-color: rgba(56, 216, 255, .58) !important;
  background: rgba(56, 216, 255, .10) !important;
  color: var(--kw-ink) !important;
}

svg path,
.route-system path,
.flow-line {
  stroke: rgba(56, 216, 255, .50) !important;
}

.swatch-card[style*="#77"],
.swatch-card[style*="#ef"],
.swatch-card[style*="#ff"],
.swatch-card[style*="#7b"],
.swatch-card[style*="#d9"] {
  outline: 2px solid rgba(56, 216, 255, .3);
}

@media (max-width: 720px) {
  .top-nav,
  .kw-nav,
  .guide-nav {
    min-height: 56px;
  }

  .nav-links a:not(.nav-cta),
  .kw-nav-links a:not(.kw-nav-cta),
  .guide-links a:not(.guide-cta) {
    display: none;
  }
}