/*
 * VeloLedger website — 2026 brand layer (VeloTech Suite Brand Guidelines, Oct 2026).
 *
 * Loaded AFTER each page's own <style> block, so every override for the new
 * edition is reviewable in this one file (same pattern as velocrm.ai). Page
 * styles keep their structure; their old hue-222 hex values were swapped onto
 * the ledger-* ramp (hue 158; primary = L 0.55 #008754). This file then:
 *   - swaps the raster logo for the stroke wordmark + CSS halo (nav + footer)
 *   - turns the dark navy bands, CTA bands and footer light (ledger-50 + halo)
 *   - makes buttons soft-strong (ledger-200 fill / ledger-800 ink, hover
 *     ledger-300; no gradients, no lift), eyebrows Josefin Sans, cards flat
 * Never put white text on a light brand fill. Halos only behind the logo,
 * headlines and the light bands.
 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

:root {
  --l-50: #ebfaf0; --l-100: #d3f1de; --l-200: #b1e6c6; --l-300: #80d3a4; --l-400: #56bc86;
  --l-600: #00925a; --l-700: #007044; --l-800: #005331;
  --l-primary: #008754;            /* L 0.55 — links, active, accents (white ink passes) */
  --l-button: var(--l-200); --l-on-button: var(--l-800); --l-button-hover: var(--l-300);
  --velo-ink: #211c2b; --tagline: #6e6a7c; --muted-fg: #5d5d5d; --border: #dedede; --canvas: #f5f5f5;
  --halo: 177, 230, 198;           /* ledger-halo (stop 200) as an RGB triplet */
  --halo-stops: rgba(var(--halo), .5), rgba(var(--halo), .42) 35%, rgba(var(--halo), .28) 60%,
                rgba(var(--halo), .13) 80%, rgba(var(--halo), .04) 93%, rgba(var(--halo), 0);
  --eyebrow-font: 'Josefin Sans', 'Plus Jakarta Sans', sans-serif;
  /* Sibling products in their 2026 colours (stop 700, white ink passes) */
  --velo-rose: #1c5fa1;            /* VeloCRM, hue 252 */
  --velo-teal: #4f53a2;            /* VeloPulse, hue 278 */
  --velo-amber: #006881;           /* VeloExpense, hue 222 */
}

/* ---------- Logo: stroke wordmark + halo (8.74 x cap height ≈ 169px) ---------- */
.nav-logo, nav .logo { position: relative; isolation: isolate; }
.nav-logo::before, nav .logo::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 169px; height: 169px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-stops)); pointer-events: none;
}
.logo-img.vt-wordmark, .footer-logo-img.vt-wordmark { height: 22px; width: auto; max-width: none; }
@media (max-width: 480px) { .logo-img.vt-wordmark { height: 19px; } }
.footer-logo { background: none; padding: 0; border-radius: 0; }

/* ---------- Nav ---------- */
nav.scrolled { box-shadow: none; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .92); }
.nav-links a { color: #454150; }
.nav-links a:hover, .nav-links a.active { color: var(--l-primary); }
.nav-links a.active::after { background: var(--l-primary); }
.nav-cta, .nav-cta:hover {
  background: var(--l-button); color: var(--l-on-button); border-radius: 8px; box-shadow: none; transform: none;
}
.nav-cta:hover { background: var(--l-button-hover); }
.lang-toggle { border-color: var(--border); color: var(--velo-ink); border-radius: 8px; }
.lang-toggle:hover { background: #fff; border-color: var(--l-primary); color: var(--l-primary); }

/* ---------- Buttons: soft-strong, flat, 8px ---------- */
.btn { border-radius: 8px; }
.btn-primary, .form-submit, .cta-button, .final-cta a, .newsletter-form button,
.pricing-card.featured .card-cta, .cta-block a, .final-cta .btn-primary, .cta-section .btn-primary {
  background: var(--l-button); color: var(--l-on-button); border-color: transparent; box-shadow: none;
}
.btn-primary:hover, .form-submit:hover, .cta-button:hover, .final-cta a:hover, .newsletter-form button:hover,
.pricing-card.featured .card-cta:hover, .cta-block a:hover, .final-cta .btn-primary:hover, .cta-section .btn-primary:hover {
  background: var(--l-button-hover); color: var(--l-on-button); transform: none; box-shadow: none; text-decoration: none;
}
.btn-secondary, .card-cta { background: #fff; color: var(--velo-ink); border: 1px solid var(--border); border-radius: 8px; }
.btn-secondary:hover, .card-cta:hover { background: #fff; color: var(--l-primary); border-color: var(--l-primary); }
.currency-button.active { background: var(--l-button); color: var(--l-on-button); box-shadow: none; }

/* ---------- Gradient text accents → solid primary ---------- */
.hero h1 .accent, .hero-content h1 .accent, .integration-copy h2 .accent {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--l-primary);
}

/* ---------- Eyebrows / section labels: Josefin Sans, wide tracking, ledger-700 ---------- */
.section-eyebrow, .eyebrow, .article-tag, .category-title + .eyebrow {
  font-family: var(--eyebrow-font); font-weight: 400; letter-spacing: .3em; color: var(--l-700);
}
.article-tag { background: none; border: 0; padding: 0; border-radius: 0; }

/* ---------- Heroes: white with a halo behind the headline ---------- */
.hero::before { background: radial-gradient(circle 460px at 24% 42%, var(--halo-stops)), #fff; }
.hero:not(:has(.hero-content)) { background: radial-gradient(circle 460px at 50% 40%, var(--halo-stops)), #fff; }
.article-hero { background: radial-gradient(circle 420px at 30% 40%, var(--halo-stops)), #fff; border-bottom: 1px solid var(--border); }
.hero h1, .hero-content h1, .section-header h2, .article-hero h1, .feature-card h3, .integration-copy h2 { color: var(--velo-ink); }
.integration-story, .trust-section { background: var(--canvas); }
.stats { background: var(--l-50); }

/* ---------- Cards: plain border, no lift, no coloured accents ---------- */
.feature-card, .info-card, .faq-card, .resource-card, .related-card, .unlock-card, .mcp-spoke, .pricing-card { border-radius: 8px; }
.feature-card:hover, .info-card:hover, .faq-card:hover, .resource-card:hover, .related-card:hover,
.unlock-card:hover, .mcp-spoke:hover, .pricing-card:hover {
  transform: none; box-shadow: none; border-color: var(--l-300);
}
.feature-icon, .info-icon, .trust-icon, .integ-icon {
  background: var(--l-50); color: var(--l-primary); border: 1px solid var(--l-100); border-radius: 8px; box-shadow: none;
}
.feature-icon .vt-ic { width: 26px; height: 26px; }
.vt-ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.ai-icon { color: var(--l-primary); }
.ai-icon .vt-ic { width: 28px; height: 28px; }
.testimonial-card { border-left: 1px solid var(--l-100); border: 1px solid var(--l-100); border-radius: 8px; background: var(--l-50); }
.testimonial-card::before { color: var(--l-primary); }
.testimonial-avatar { background: var(--l-button); color: var(--l-on-button); }
.post .callout { border-left: 1px solid var(--l-100); border: 1px solid var(--l-100); border-radius: 8px; }

/* ---------- MCP diagram / fabric bar: light hub, no navy ---------- */
.mcp-diagram { box-shadow: none; border-radius: 12px; }
.mcp-hub, .fabric-bar {
  background: radial-gradient(circle 200px at 50% 50%, var(--halo-stops)), var(--l-50);
  color: var(--velo-ink); border: 1px solid var(--l-200); box-shadow: none;
}
.mcp-hub h4 { color: var(--velo-ink); }
.mcp-hub small { color: var(--muted-fg); opacity: 1; }
.dashboard-header { background: var(--velo-ink); }

/* ---------- Former dark navy bands → light ledger-50 with a centred halo ---------- */
.ai-section, .guardrail, .newsletter-section {
  color: var(--velo-ink);
  background: radial-gradient(circle 560px at 50% 18%, var(--halo-stops)), var(--l-50);
  border-top: 1px solid var(--l-100); border-bottom: 1px solid var(--l-100);
}
.ai-section::before { display: none; }
.ai-section .section-header h2, .guardrail .section-header h2, .newsletter-section h2 { color: var(--velo-ink); }
.ai-section .section-header p, .guardrail-inner p, .newsletter-section p { color: var(--muted-fg); }
.guardrail-inner strong { color: var(--l-700); }
.ai-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; backdrop-filter: none; }
.ai-card:hover { background: #fff; transform: none; border-color: var(--l-300); }
.ai-card h4 { color: var(--velo-ink); }
.ai-card p { color: var(--muted-fg); }
.newsletter-form input { border: 1px solid var(--border); }

/* ---------- CTA bands → light ---------- */
.final-cta, .cta-section, .cta-block, .map-card {
  color: var(--velo-ink);
  background: radial-gradient(circle 420px at 50% 30%, var(--halo-stops)), var(--l-50);
  border-top: 1px solid var(--l-100); border-bottom: 1px solid var(--l-100); box-shadow: none;
}
.cta-block, .map-card { border: 1px solid var(--l-100); border-radius: 12px; }
.map-card::before { display: none; }
.final-cta h2, .cta-section h2, .cta-block h3, .map-card h3, .map-card h4 { color: var(--velo-ink); }
.final-cta p, .cta-section p, .cta-block p, .map-card p { color: var(--muted-fg); }
.email-input { border: 1px solid var(--border); }
.email-input:focus { outline: 2px solid var(--l-300); }

/* ---------- Pricing: featured card light with a primary border ---------- */
.pricing-card.featured {
  background: #fff; color: var(--velo-ink); border: 2px solid var(--l-primary); box-shadow: none; transform: none;
}
.pricing-card.featured:hover { transform: none; }
.pricing-card.featured .card-name, .pricing-card.featured .price,
.pricing-card.featured .features-list li::before, .pricing-card.featured .features-list li strong { color: var(--l-primary); }
.pricing-card.featured .card-desc, .pricing-card.featured .price-period { color: var(--muted-fg); }
.pricing-card.featured .features-list { border-color: var(--border); }
.pricing-card.featured .features-list li { color: #454150; }
.popular-badge { background: var(--l-button); color: var(--l-on-button); box-shadow: none; }

/* ---------- Footer: light ledger-50 band with a centred halo ---------- */
footer {
  position: relative; overflow: hidden; color: var(--muted-fg); border-top: 1px solid var(--border);
  background: radial-gradient(circle 520px at 50% 0%, var(--halo-stops)), var(--l-50);
}
.footer-section h4 { color: var(--velo-ink); }
.footer-section a, .footer-section p, footer p, footer .footer-links a { color: var(--muted-fg); }
.footer-section a:hover, footer .footer-links a:hover, .footer-bottom a { color: var(--l-primary); }
.footer-bottom { border-top-color: var(--border); color: var(--tagline); }
.footer-logo .footer-logo-text { color: var(--velo-ink); }

/* ---------- Fixes found in the visual pass ---------- */
/* Inline eyebrows that used --light-indigo (meant for the old navy bands) */
.section-eyebrow[style*="light-indigo"] { color: var(--l-700) !important; }
/* Emoji-era icon boxes: compact 48px tiles, not full-width bars */
.integ-icon, .trust-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; font-size: 0; margin: 0 auto .75rem;
}
.info-icon { display: inline-flex; align-items: center; justify-content: center; }
/* Comparison tables: light ledger-100 header instead of a navy bar */
thead { background: var(--l-100); color: var(--l-800); }
th.us { color: var(--l-primary); }
/* Pricing feature lists: block items so <strong> doesn't split into a flex column */
.features-list li { display: block; position: relative; padding-left: 1.7rem; }
.features-list li::before { position: absolute; left: 0; top: .5rem; }
/* White text on the old success green failed contrast → soft-strong */
.save-badge, .cost-save { background: var(--l-button); color: var(--l-on-button); }
/* No coloured left rules on cards */
.info-card, .testimonial-card { border-left: 1px solid var(--border); }
.testimonial-card { border-color: var(--l-100); }
/* Partner tags are not a Velo product: neutral ink, not VeloPulse purple */
.integ-tag.partner { background: #454150; }