/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 *
 * NAV: always-dark (#1C2B3A solid) — logo-light on ALL pages
 *       nav link color: light (#EDF2F7) on ALL pages
 *
 * index.html:       dark → dark-alt → light → white → light → dark → light → light-alt → dark → dark-alt
 * product.html:     dark → light → white → light → dark
 * how-it-works.html: light → white → light-alt → light → dark
 * specialties/*.html: light → white → dark
 * security.html:    dark → light → white → light-alt → dark
 * pricing.html:     light → white → light → dark
 * integrations.html: light → white → light-alt → dark
 * for-groups.html:  light → white → light-alt → dark
 * for-cmios.html:   dark → light → white → light-alt → dark
 * about.html:       light → white → light → dark → light-alt
 * careers.html:     light → white → light-alt
 * contact.html:     light → white
 * blog/index.html:  light → white → dark
 * blog/article.html: light
 * login/*.html:     dark (with white panel nested inside)
 * status.html:      light → white
 * legal/*.html:     light
 *
 * ADJACENT SAME-POLARITY SEPARATORS:
 *   index: dark→dark-alt (border-bottom / subtle shade step)
 *   index: dark→dark-alt (cta-section) — amber border top
 * ═══════════════════════════════════════════════════════════════ */

/* ═══ CSS CUSTOM PROPERTIES ═══ */
:root {
  /* Brand palette */
  --nvyx-slate:             #1C2B3A;
  --nvyx-slate-alt:         #243242;
  --nvyx-amber:             #E8A030;
  --nvyx-amber-aa-light:    #A8690A;
  --nvyx-amber-aa-dark:     #F0B94D;
  --nvyx-blue:              #3B7DD8;
  --nvyx-blue-aa-light:     #2060B0;
  --nvyx-blue-aa-dark:      #6BA4E8;

  /* Foreground tokens */
  --nvyx-fg-light-primary:  #1C2B3A;
  --nvyx-fg-light-secondary:#4A5E72;
  --nvyx-fg-light-muted:    #7A8FA3;
  --nvyx-fg-dark-primary:   #EDF2F7;
  --nvyx-fg-dark-secondary: #94AABF;
  --nvyx-fg-dark-muted:     #627A90;

  /* Background tokens */
  --nvyx-bg-light:          #F7F9FC;
  --nvyx-bg-light-alt:      #EEF2F7;
  --nvyx-bg-white:          #FFFFFF;
  --nvyx-bg-dark:           #1C2B3A;
  --nvyx-bg-dark-alt:       #243242;
  --nvyx-bg-amber-tint:     #FFF8EC;

  /* Border tokens */
  --nvyx-border-light:      #D5DDE6;
  --nvyx-border-dark:       #2C3F52;

  /* Typography */
  --nvyx-font-heading:      'Plus Jakarta Sans', sans-serif;
  --nvyx-font-body:         'Inter', sans-serif;
  --nvyx-font-mono:         'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Spacing */
  --nvyx-section-pad:       100px;
  --nvyx-section-pad-sm:    64px;
  --nvyx-container:         1200px;
  --nvyx-card-pad:          28px;
  --nvyx-gap:               24px;
}

/* ═══ RESET & BASE ═══ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--nvyx-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--nvyx-fg-light-primary);
  background: var(--nvyx-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nvyx-page--dark-top {
  background: var(--nvyx-bg-dark);
}

body.nvyx-page--light-top {
  background: var(--nvyx-bg-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ═══ TYPOGRAPHY ═══ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nvyx-font-heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(36px, 5vw, 54px); line-height: 1.1; }
h2 { font-size: clamp(28px, 3.5vw, 38px); line-height: 1.2; }
h3 { font-size: clamp(20px, 2.5vw, 26px); line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.45; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ═══ CONTAINER ═══ */
.nvyx-container {
  max-width: var(--nvyx-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ═══ SECTION BASE CONTEXTS ═══ */
.nvyx-section--dark {
  background: var(--nvyx-bg-dark);
  color: var(--nvyx-fg-dark-primary);
  padding: var(--nvyx-section-pad) 0;
}

.nvyx-section--dark-alt {
  background: var(--nvyx-bg-dark-alt);
  color: var(--nvyx-fg-dark-primary);
  padding: var(--nvyx-section-pad) 0;
}

.nvyx-section--light {
  background: var(--nvyx-bg-light);
  color: var(--nvyx-fg-light-primary);
  padding: var(--nvyx-section-pad) 0;
}

.nvyx-section--light-alt {
  background: var(--nvyx-bg-light-alt);
  color: var(--nvyx-fg-light-primary);
  padding: var(--nvyx-section-pad) 0;
}

.nvyx-section--white {
  background: var(--nvyx-bg-white);
  color: var(--nvyx-fg-light-primary);
  padding: var(--nvyx-section-pad) 0;
}

/* ═══ EYEBROW LABELS ═══ */
.nvyx-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.nvyx-section--light .nvyx-eyebrow,
.nvyx-section--light-alt .nvyx-eyebrow,
.nvyx-section--white .nvyx-eyebrow {
  color: var(--nvyx-amber-aa-light);
}

.nvyx-section--dark .nvyx-eyebrow,
.nvyx-section--dark-alt .nvyx-eyebrow {
  color: var(--nvyx-amber-aa-dark);
}

/* ═══ SECTION HEADINGS — context scoped ═══ */
.nvyx-section--light h2,
.nvyx-section--light h3,
.nvyx-section--light-alt h2,
.nvyx-section--light-alt h3,
.nvyx-section--white h2,
.nvyx-section--white h3 {
  color: var(--nvyx-fg-light-primary);
}

.nvyx-section--light p,
.nvyx-section--light-alt p,
.nvyx-section--white p {
  color: var(--nvyx-fg-light-secondary);
}

.nvyx-section--dark h2,
.nvyx-section--dark h3,
.nvyx-section--dark-alt h2,
.nvyx-section--dark-alt h3 {
  color: var(--nvyx-fg-dark-primary);
}

.nvyx-section--dark p,
.nvyx-section--dark-alt p {
  color: var(--nvyx-fg-dark-secondary);
}

/* ═══ SECTION HEADER CENTERING ═══ */
.nvyx-section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.nvyx-section__header h2 {
  margin-bottom: 16px;
}

/* ═══ BUTTONS ═══ */
.nvyx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-family: var(--nvyx-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}

.nvyx-btn--primary {
  background: var(--nvyx-amber);
  color: var(--nvyx-slate);
  border: 2px solid transparent;
}
.nvyx-btn--primary:hover {
  background: #d48f25;
  color: var(--nvyx-slate);
}

.nvyx-btn--outline-dark {
  background: transparent;
  color: var(--nvyx-fg-dark-primary);
  border: 2px solid var(--nvyx-border-dark);
}
.nvyx-btn--outline-dark:hover {
  border-color: var(--nvyx-amber-aa-dark);
  color: var(--nvyx-amber-aa-dark);
}

.nvyx-btn--outline-light {
  background: transparent;
  color: var(--nvyx-fg-light-primary);
  border: 2px solid var(--nvyx-border-light);
}
.nvyx-btn--outline-light:hover {
  border-color: var(--nvyx-amber-aa-light);
  color: var(--nvyx-amber-aa-light);
}

.nvyx-btn--ghost-dark {
  background: rgba(255,255,255,0.08);
  color: var(--nvyx-fg-dark-primary);
  border: 2px solid transparent;
}
.nvyx-btn--ghost-dark:hover {
  background: rgba(255,255,255,0.14);
}

.nvyx-btn--amber-secondary {
  background: rgba(232,160,48,0.15);
  color: var(--nvyx-amber-aa-dark);
  border: 2px solid rgba(232,160,48,0.3);
}
.nvyx-btn--amber-secondary:hover {
  background: rgba(232,160,48,0.25);
}

.nvyx-btn--sm {
  padding: 10px 20px;
  font-size: 13px;
}

.nvyx-btn--lg {
  padding: 16px 36px;
  font-size: 16px;
}

/* ═══ BADGES & TAGS ═══ */
.nvyx-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.nvyx-badge--amber-light {
  background: var(--nvyx-bg-amber-tint);
  color: var(--nvyx-amber-aa-light);
}

.nvyx-badge--slate-dark {
  background: rgba(255,255,255,0.1);
  color: var(--nvyx-fg-dark-secondary);
}

/* ═══ DIVIDERS ═══ */
.nvyx-divider {
  border: none;
  border-top: 1px solid var(--nvyx-border-light);
  margin: 0;
}

.nvyx-divider--dark {
  border-top-color: var(--nvyx-border-dark);
}

/* ═══ FORM BASE ═══ */
.nvyx-form-group {
  margin-bottom: 20px;
}

.nvyx-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--nvyx-fg-light-primary);
  margin-bottom: 6px;
}

.nvyx-form-input,
.nvyx-form-select,
.nvyx-form-textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--nvyx-border-light);
  border-radius: 6px;
  font-family: var(--nvyx-font-body);
  font-size: 15px;
  color: var(--nvyx-fg-light-primary);
  background: var(--nvyx-bg-white);
  transition: border-color 0.18s ease;
  box-sizing: border-box;
}

.nvyx-form-input:focus,
.nvyx-form-select:focus,
.nvyx-form-textarea:focus {
  outline: none;
  border-color: var(--nvyx-blue);
}

.nvyx-form-textarea {
  min-height: 140px;
  resize: vertical;
}

.nvyx-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5E72' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Dark-context form inputs (login/signup) */
.nvyx-form-input--dark {
  border-color: var(--nvyx-border-dark);
  background: var(--nvyx-slate-alt);
  color: var(--nvyx-fg-dark-primary);
}

.nvyx-form-input--dark::placeholder {
  color: var(--nvyx-fg-dark-muted);
}

.nvyx-form-input--dark:focus {
  border-color: var(--nvyx-blue-aa-dark);
}

.nvyx-form-label--dark {
  color: var(--nvyx-fg-dark-secondary);
}

/* ═══ RESPONSIVE UTILITIES ═══ */
@media (max-width: 768px) {
  :root {
    --nvyx-section-pad: var(--nvyx-section-pad-sm);
  }

  .nvyx-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .nvyx-hide-desktop {
    display: none !important;
  }
}