/* ═══════════════════════════════════════════════════════════════════════════
   NYNCH BRAND OVERRIDES — loaded last in <head>
   Forces Direction B over any page-level <style is:global> declarations.
   Anything that survives the cascade in nynch-design.css needs an entry here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Headlines: sentence case, display font, soft weight ─────────────────── */
h1, h2, h3, h4, h5, h6,
.hero h1, .hero h2,
.page-hero h1, .page-hero h2,
.section-header h1, .section-header h2,
.problem-header h1, .problem-header h2,
.capabilities-header h1, .capabilities-header h2,
.cta-content h1, .cta-content h2,
.capability-content h3,
.feature-card h3, .timeline-item h3,
.lead-magnet-visual .big-text,
.comparison-col-title,
.bento-cell h3, .bento-cell h2,
.differentiator-card h3,
.faq-flat h2, .faq-flat h3,
.use-case-card h3,
.integrations-grid h3 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  word-spacing: 0 !important;
}

h1, .hero h1, .page-hero h1, .cta-content h1 { letter-spacing: -2.5px !important; }
h2, .section-header h2, .cta-content h2, .problem-header h2, .capabilities-header h2 { letter-spacing: -1.5px !important; }
h3, .capability-content h3, .feature-card h3, .timeline-item h3 { letter-spacing: -0.8px !important; }

/* ── Italic-blue accent ──────────────────────────────────────────────────── */
.accent,
h1 .accent, h2 .accent, h3 .accent,
.hero h1 .accent, .page-hero h1 .accent,
.cta-content h2 .accent,
.section-header h2 .accent {
  color: var(--blue) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: -2px !important;
}

/* ── Eyebrow chip pattern ─────────────────────────────────────────────────── */
.eyebrow,
.hero-eyebrow,
.section-header .eyebrow,
.page-hero .eyebrow,
.problem-header .eyebrow,
.capabilities-header .eyebrow,
.cta-content .eyebrow,
.capability-content .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

.eyebrow::before,
.hero-eyebrow::before,
.section-header .eyebrow::before,
.page-hero .eyebrow::before,
.problem-header .eyebrow::before,
.capabilities-header .eyebrow::before,
.cta-content .eyebrow::before,
.capability-content .eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--blue) !important;
  box-shadow: none !important;
  animation: none !important;
  margin: 0 !important;
}

/* Variant eyebrows */
.problem-header .eyebrow {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}
.problem-header .eyebrow::before { background: var(--red) !important; }

.cta-content .eyebrow,
.hero-use-case .eyebrow {
  background: var(--green-soft) !important;
  color: var(--green) !important;
}
.cta-content .eyebrow::before,
.hero-use-case .eyebrow::before { background: var(--green) !important; }

.hero-about .eyebrow {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
}
.hero-about .eyebrow::before { background: var(--amber) !important; }

/* ── Page-level body copy that was forced to white ───────────────────────── */
body, p, li, span, dd {
  color: var(--ink-2);
}
body { color: var(--ink); }
h1, h2, h3, h4, h5, h6 { color: var(--ink) !important; }

.hero-sub,
.problem-header p,
.capabilities-header p,
.capability-content p,
.cta-content p,
.section-header p,
.page-hero p {
  color: var(--ink-2) !important;
}

.hero-sub strong,
.cta-content p strong,
.section-header p strong { color: var(--ink) !important; }

/* ── Banners that were dark-gradient / glow ──────────────────────────────── */
.hero,
.page-hero,
.cta-section,
.trust-bar,
.problem,
.capabilities,
.focus10,
.comparison,
.differentiators,
.integrations,
.lead-magnet,
.faq,
.faq-flat,
.section-light {
  background: transparent !important;
}

/* ── Retire dark<->light transition strips ────────────────────────────────
   Page-level CSS adds 120px-tall .dark-to-light-transition and
   .light-to-dark-transition divs between sections to fade between dark and
   cream backgrounds. In Direction B both ends are cream so the gradient is
   invisible, but the 120px height is still creating dead bands. */
.dark-to-light-transition,
.light-to-dark-transition {
  display: none !important;
}

/* ── Tighten section vertical padding sitewide ──────────────────────────────
   Many page-level <style> blocks force `padding: 100px 0` per section. Combined
   with the next section also having 100px top, we get 200px+ of dead space
   between sections. Bring this down to ~64px each side for a tighter rhythm. */
.cta-section,
.problem,
.capabilities,
.focus10,
.comparison,
.differentiators,
.integrations,
.lead-magnet,
.faq,
.faq-flat,
.trust-bar,
.social-proof,
.section-light,
.section-pad {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

@media (max-width: 768px) {
  .cta-section,
  .problem,
  .capabilities,
  .focus10,
  .comparison,
  .differentiators,
  .integrations,
  .lead-magnet,
  .faq,
  .faq-flat,
  .trust-bar,
  .social-proof,
  .section-light,
  .section-pad {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Disable giant absolutely-positioned dark glow orbs that page styles add */
.hero::before, .hero::after,
.page-hero::before, .page-hero::after,
.cta-section::before, .cta-section::after,
.problem::before, .problem::after,
.capabilities::before, .capabilities::after {
  display: none !important;
}

/* ── Inline dark CTA buttons / blocks scattered in page markup ───────────── */
/* `.demo-cta-wrap`, `.cta-card-dark`, `.dark-cta`, etc. — common patterns */
.demo-cta-wrap a,
.demo-cta-wrap {
  background: var(--surface-warm) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.demo-cta-wrap strong,
.demo-cta-wrap a strong { color: var(--ink) !important; }
.demo-cta-wrap small,
.demo-cta-wrap a small,
.demo-cta-wrap div { color: var(--ink-3) !important; }

/* ── Dark cards that wrap product UI (the homepage hero card) ────────────── */
.hero-card-inner {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}
.hero-card-inner * { color: inherit; }
.hero-card-label { color: var(--blue) !important; }
.hero-card-metric { color: var(--ink) !important; }
.hero-card-item-label { color: var(--ink-2) !important; }
.hero-card-insight { background: var(--blue-soft) !important; }
.hero-card-insight-text { color: var(--ink-2) !important; }
.hero-card-insight-text strong { color: var(--blue) !important; }

/* ── Logo / wordmark in nav — keep ink, not white ────────────────────────── */
.nav-logo,
.footer-brand .nav-logo {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
}

/* ── Buttons: 10px radius, green primary ─────────────────────────────────── */
.btn,
.btn-primary,
.btn-ghost,
.btn-outline,
.cta-primary,
.cta-secondary {
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: -0.1px !important;
}

.btn-primary {
  background: var(--green) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border: 1px solid var(--green) !important;
}
.btn-primary:hover {
  background: var(--green-hover) !important;
  border-color: var(--green-hover) !important;
  box-shadow: 0 8px 24px -8px rgba(5, 150, 105, 0.45) !important;
}

.btn-ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}

/* ── Form inputs that were dark-themed ───────────────────────────────────── */
input.form-input, textarea.form-input, select.form-input {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}
input.form-input::placeholder, textarea.form-input::placeholder {
  color: var(--ink-4) !important;
}

/* ── FAQ items — old toggle was mono ─────────────────────────────────────── */
.faq-toggle, .faq-q-toggle {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.faq-question, .faq-q-question {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: -0.2px !important;
  color: var(--ink) !important;
}

/* ── Footer — ink not white ──────────────────────────────────────────────── */
.footer { background: var(--bg) !important; }
.footer-col-title {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
}

/* ── Trust bar / monospace labels everywhere ─────────────────────────────── */
.trust-bar-label,
.social-proof-label,
.mockup-title,
.timeline-item-step,
.pricing-card-tier {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Scrub any leftover IBM Plex Mono refs ───────────────────────────────── */
[style*="IBM Plex Mono"],
[style*="'IBM Plex Mono'"] {
  font-family: var(--font-body) !important;
}

/* ── Big "ghost number" section dividers — soften to cream ───────────────── */
.section-divider .ghost-number {
  color: var(--surface-warm) !important;
  font-family: var(--font-display) !important;
  text-shadow: none !important;
}

/* ── Pulse animations on dots — keep but use blue not red ───────────────── */
.live-dot, .pulse-dot {
  background: var(--green) !important;
}
