/* ============================================================
   CRM Revenue Capture — page-level styles
   Foundations come from colors_and_type.css. This file only adds
   reset rules, keyframes, and the hover/focus states that the
   original prototype expressed as inline pseudo-state attributes.
   ============================================================ */

html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--navy-900); }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(167, 139, 250, 0.3); }

@keyframes flowDash { to { stroke-dashoffset: -24; } }
@keyframes nodePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Buttons */
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }

.btn-outline-crm:hover { border-color: var(--pillar-crm); color: var(--pillar-crm); }

.btn-outline:hover { border-color: var(--brand-green); color: var(--brand-green); }

/* Nav dropdowns */
.nav-dropdown-link:hover { background: var(--navy-700); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  padding-top: 8px;
  min-width: 200px;
  z-index: 60;
}
.nav-dropdown-menu--solutions { min-width: 248px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }

/* Form inputs */
.input-field { outline: none; }
.input-field:focus { border-color: var(--pillar-crm); }

/* FAQ accordion */
.faq-chevron { transition: transform 200ms var(--ease-out); }
.faq-chevron.is-open { transform: rotate(180deg); }
.faq-panel[hidden] { display: none; }

.contact-thanks { display: flex; }

#contact-form-wrap[hidden],
#contact-thanks[hidden] { display: none; }

/* ============================================================
   Responsive — this page is built almost entirely from inline
   styles (legacy prototype export), so the mobile fixes below
   target those literal inline declarations via attribute
   selectors rather than rewriting 300+ inline attributes.
   ============================================================ */

@media (max-width: 900px) {
  .crm-nav-toggle { display: inline-flex !important; }
  .crm-nav-menu {
    display: none !important;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    background: var(--navy-900);
    border-bottom: 1px solid var(--stroke-1);
    padding: 12px 24px 24px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    z-index: 100;
  }
  .crm-nav-menu.is-open { display: flex !important; }
  .crm-nav-menu > a,
  .crm-nav-menu > .nav-dropdown { width: 100%; }
  .crm-nav-menu > a { padding: 12px 4px; }
  .crm-nav-menu__cta { display: inline-flex !important; margin-top: 8px; }
  .crm-nav-cta-desktop { display: none !important; }
  .crm-nav-row { grid-template-columns: auto auto !important; justify-content: space-between !important; padding-left: 24px !important; padding-right: 24px !important; }
  .nav-dropdown-menu { position: static !important; padding-top: 0 !important; }
  .nav-dropdown-menu > div { box-shadow: none !important; }

  section[style*="padding:96px 80px"],
  div[style*="padding:96px 80px"] { padding: 56px 24px !important; }
  div[style*="padding:0 80px"] { padding-left: 24px !important; padding-right: 24px !important; }
  div[style*="padding:120px 80px 110px"] { padding: 48px 24px 40px !important; }
  div[style*="padding:64px 80px 32px"] { padding: 48px 24px 24px !important; }
  div[style*="padding:18px 64px"] { padding: 14px 20px !important; flex-wrap: wrap !important; justify-content: center !important; }
  section[style*="padding:0 80px 96px"] { padding: 0 24px 56px !important; }

  div[style*="grid-template-columns:1.05fr 0.95fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  div[style*="grid-template-columns:1fr 1.5fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  .crm-footer-grid { grid-template-columns: 1fr 1fr !important; row-gap: 32px !important; }
  .crm-footer-bottom { grid-template-columns: 1fr !important; gap: 16px !important; text-align: left !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1fr;gap:14px"] { grid-template-columns: 1fr !important; }

  div[style*="padding:64px"][style*="border-radius:18px"] { padding: 32px 24px !important; }
}

@media (max-width: 520px) {
  .crm-footer-grid { grid-template-columns: 1fr !important; }
  h1[style*="font-size:60px"] { font-size: 38px !important; }
  h2[style*="font-size:52px"] { font-size: 32px !important; }
  h2[style*="font-size:56px"] { font-size: 34px !important; }
}