/* ==========================================================================
   Verified Metrics brand overrides (Phase 2: finance-terminal re-theme)
   Loaded AFTER main.min.css. Same-specificity rules → later wins.
   Source of truth: live verifiedmetrics.com (Webflow "vm-finance-terminal").
   ========================================================================== */

/* --- Fonts: headings Space Grotesk, body Plus Jakarta Sans --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  background-color: #04181f;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
}

/* --- Re-tint the neutral scale to brand teal (Tailwind reads these vars). ---
   Only the DARK end (bg/border) goes teal; the LIGHT end (body text) stays
   cool-light so copy keeps contrast on the new background. */
:root, .dark, html.dark {
  --color-neutral-950: #02141b;   /* deepest panels */
  --color-neutral-900: #04181f;   /* page / section background */
  --color-neutral-800: #0a2c38;   /* cards, nav glass, inputs */
  --color-neutral-700: #16434f;   /* borders, dividers, hover */
  --color-neutral-600: #2b5b68;   /* dots, muted fills */
  --color-neutral-500: #4c86a1;   /* muted icons / secondary text (brand blue-200) */
  --color-neutral-400: #a6c2cb;   /* body copy — cool light, readable on teal */
  --color-neutral-300: #cdd9dc;
  --color-neutral-200: #e6eef0;
}

/* --- Signature hero glow: turquoise + custard over deep teal --- */
.vm-hero-glow {
  background-color: #04181f;
  background-image:
    radial-gradient(72% 90% at 74% 22%, rgba(46, 229, 227, 0.18), transparent 58%),
    radial-gradient(58% 80% at 36% 4%, rgba(224, 219, 91, 0.09), transparent 60%);
  background-repeat: no-repeat;
}

/* --- Accent: template pure yellow #ff0 → brand custard #fff57d --- */
.bg-\[\#ff0\] { background-color: #fff57d; }
.text-\[\#ff0\] { color: #fff57d; }
.after\:bg-\[\#ff0\]:after { background-color: #fff57d; }
.checked\:border-\[\#ff0\]:checked { border-color: #fff57d; }
.hover\:text-\[\#ff0\]:hover { color: #fff57d; }
.focus\:text-\[\#ff0\]:focus { color: #fff57d; }
.hover\:border-\[\#ff0\]:hover { border-color: #fff57d; }
.lg\:hover\:border-\[\#ff0\]:hover { border-color: #fff57d; }
.lg\:focus\:border-\[\#ff0\]:focus { border-color: #fff57d; }
.group-hover\:border-\[\#ff0\]:is(:where(.group):hover *) { border-color: #fff57d; }
.group-focus\:border-\[\#ff0\]:is(:where(.group):focus *) { border-color: #fff57d; }
.hs-selected\:text-\[\#ff0\].selected,
.selected .hs-selected\:text-\[\#ff0\] { color: #fff57d; }
.hover\:before\:to-\[\#ff0\]\/10:hover:before { --tw-gradient-to: rgba(46, 229, 227, 0.12); }
.focus\:before\:to-\[\#ff0\]\/10:focus:before { --tw-gradient-to: rgba(46, 229, 227, 0.12); }

/* --- Global keyboard focus ring: the template's focus:outline-hidden leaves
   every interactive element (nav links, CTA pills, footer links, carousel
   arrows, wizard controls, card links) with zero visible focus indicator.
   Single rule, applies sitewide, no HTML changes needed. --- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  box-shadow: 0 0 0 2px #04181f, 0 0 0 4px #fff57d;
  outline: none;
}

/* --- Mobile/tablet header: below lg the nav wraps into two rows (logo, then
   CTA + hamburger). Without a row gap the CTA pill sits flush against the
   logo's descenders. One row can't fit: logo ~300px + CTA group ~207px. --- */
@media (max-width: 1023px) {
  header nav { row-gap: 0.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; }
}

/* --- Brand logo sizing --- */
.vm-logo { height: 1.6rem; width: auto; }
.vm-logo-footer { height: 1.4rem; width: auto; }
.vm-logomark { height: 1.9rem; width: auto; }

/* --- Client "trusted by" logos: files are pre-rendered white (alpha preserved)
   so they read on the dark strip without a CSS filter. Muted until hover.
   Heights are set PER LOGO, normalized for equal visual mass: intrinsic aspect
   ratios range from 2.1:1 (Pershing, stacked mark) to 10.4:1 (Abound, thin
   wordmark), so a single shared height renders them wildly unbalanced. --- */
.vm-client-logo {
  opacity: 0.8;
  transition: opacity 0.2s ease;
  height: calc(var(--logo-h, 28px) * var(--logo-scale, 1));
  width: auto;
}
.vm-client-logo:hover { opacity: 1; }
.vm-logo-pershing { --logo-h: 48px; }
.vm-logo-betatron { --logo-h: 34px; }
.vm-logo-omvc     { --logo-h: 27px; }
.vm-logo-bridges  { --logo-h: 24px; }
.vm-logo-hsbc     { --logo-h: 26px; }
.vm-logo-abound   { --logo-h: 20px; }
/* Card contexts (success-story / stories cards) run slightly smaller. */
.vm-logo-card { --logo-scale: 0.85; }
@media (max-width: 767px) {
  .vm-client-logo { --logo-scale: 0.75; }
  .vm-logo-card   { --logo-scale: 0.7; }
}

/* ==========================================================================
   Consent Banner (Phase 1: Necessary + Analytics)
   Source: design-handoff.md "Component: Consent Banner", design-tokens.json.
   Structural HTML is static per page (assets/js/consent.js wires state);
   only the category rows are rendered by JS into #vm-consent-categories.
   ========================================================================== */

/* Fixed-bottom bar. z-index 45 (token: zIndex.consentBanner), deliberately
   below the header's z-50 -- they sit at opposite viewport edges. */
/* Round 10: compact bottom-corner card replaces the full-width bottom bar.
   Mobile: spans the viewport minus 1rem margins; >=480px: caps at 28rem.
   Equal-prominence Accept/Reject and no-auto-dismiss behavior unchanged. */
.vm-consent-card {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 28rem;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.vm-consent-banner {
  z-index: 45;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), opacity 300ms cubic-bezier(0.2, 0, 0, 1);
}
.vm-consent-banner.is-visible { transform: translateY(0); opacity: 1; }
/* Exit motion is opacity-only, no translateY (design-tokens.json motion.consentBanner.exit). */
.vm-consent-banner.is-hiding {
  transform: translateY(0);
  opacity: 0;
  transition: opacity 200ms ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .vm-consent-banner,
  .vm-consent-banner.is-visible,
  .vm-consent-banner.is-hiding {
    transform: none;
    transition: opacity 150ms ease;
  }
  /* Manage-preferences expand/collapse becomes instant, no height/opacity animation. */
  .vm-consent-banner .hs-collapse { transition: none !important; }
}

/* Equal-prominence secondary button (color.button.outline). NOT a low-emphasis/
   ghost style -- same visual mass as the custard-filled primary CTA it sits next to. */
.vm-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  transition: background-color 150ms ease;
}
.vm-btn-outline:hover { background-color: rgba(255, 255, 255, 0.08); }

/* Native role="switch" toggle for Analytics (and, Phase 2, Marketing). No
   Preline toggle class is verified-compiled on this site, so this is bespoke. */
.vm-consent-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  border-radius: 9999px;
  cursor: pointer;
  background-color: #16434f; /* consentToggle.trackOff (alias border.default) */
  transition: background-color 150ms ease;
}
.vm-consent-toggle.is-on { background-color: #fff57d; } /* consentToggle.trackOn (alias accent.custard) */
.vm-consent-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background-color: #FFFFFF; /* consentToggle.thumb */
  border: 2px solid #04181f; /* separated from the track by background.base, not elevation */
  transition: transform 150ms ease;
}
.vm-consent-toggle.is-on .vm-consent-toggle__thumb { transform: translateX(20px); }
.vm-consent-toggle:focus-visible {
  box-shadow: 0 0 0 2px #04181f, 0 0 0 4px #fff57d;
  outline: none;
}

/* Necessary row: locked, non-interactive -- a badge, not a toggle a user could
   mistake for an opt-in control (consentToggle.trackDisabled, alias border.muted). */
.vm-consent-locked {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: 9999px;
  background-color: #2b5b68;
  color: #e6eef0;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}