/*
 * VeloExpense website — 2026 brand layer (VeloTech Suite Brand Guidelines, Oct 2026).
 * Loaded AFTER each page's own <style> block, same pattern as veloledger.ai and velocrm.ai.
 * Page styles keep their structure; their old teal values were swapped onto the pulse-*
 * ramp (hue 222; primary = L 0.55 #007e9c). This file then turns the dark bands, CTA bands
 * and footers light, makes buttons soft-strong (pulse-200 fill / pulse-800 ink), sets eyebrows
 * and footer headings in Josefin Sans, and draws the logo halo. Never put white text on a light
 * brand fill.
 */
:root {
  --p-50: #e7f9ff; --p-100: #cceffb; --p-200: #a4e3f9; --p-300: #68cdee; --p-400: #27b5dc;
  --p-600: #0088a8; --p-700: #006881; --p-800: #004d61;
  --p-primary: #007e9c;
  --p-button: var(--p-200); --p-on-button: var(--p-800); --p-button-hover: var(--p-300);
  --velo-ink: #211c2b; --tagline: #6e6a7c; --muted-fg: #5d5a66; --border: #e6e4ea; --canvas: #f7f7f9;
  --halo: 164,227,249;
  --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;
}
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #2a2731; }
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.01em; }

/* ---------- Logo: stroke wordmark + halo (8.74 x cap height) ---------- */
.vt-logo { position: relative; isolation: isolate; display: inline-flex !important; align-items: center; line-height: 0;
  padding: 0 !important; background: none !important; text-decoration: none; }
.vt-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; }
.footer-logo.vt-logo::before { width: 153px; height: 153px; }
.vt-wordmark, nav .vt-wordmark, .vt-logo img.vt-wordmark { position: relative; height: 22px !important; width: auto !important; max-width: none !important; display: block; margin: 0 !important; }
.footer-logo .vt-wordmark, footer .vt-wordmark { height: 20px !important; }
@media (max-width: 480px) { nav .vt-wordmark { height: 19px !important; } }

/* ---------- Nav ---------- */
nav, nav.scrolled, .nav-bar { background: rgba(255, 255, 255, .92) !important; box-shadow: none !important; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.nav-links a { color: #454150; }
.nav-links a:hover, .nav-links a.active { color: var(--p-primary); }
.lang-toggle { border: 1px solid var(--border) !important; color: var(--velo-ink) !important; border-radius: 8px !important; background: #fff !important; }
.lang-toggle:hover { border-color: var(--p-primary) !important; color: var(--p-primary) !important; }
.french-banner { background: var(--p-50) !important; color: var(--velo-ink) !important; border-bottom: 1px solid var(--p-100); }
.french-banner * { color: var(--velo-ink) !important; }

/* ---------- Buttons: soft-strong, flat, 8px ---------- */
.btn, .cta-button, .nav-cta, .card-cta, .contact-sales, .form-submit, .pricing-cta, .btn-cta, .btn-print { border-radius: 8px !important; }
.btn-primary, .nav-cta, nav .cta-button, .cta-button, .form-submit, .contact-sales, .pricing-card.featured .card-cta,
.final-cta .btn-primary, .pricing-cta, .price-cta, .btn-cta, .currency-button.active, .currency-btn.active, .toggle-option.active, .segment.active {
  background: var(--p-button) !important; color: var(--p-on-button) !important; border-color: transparent !important; box-shadow: none !important; }
.btn-primary:hover, .nav-cta:hover, .cta-button:hover, .form-submit:hover, .contact-sales:hover, .pricing-card.featured .card-cta:hover,
.final-cta .btn-primary:hover, .pricing-cta:hover, .price-cta:hover, .btn-cta:hover {
  background: var(--p-button-hover) !important; color: var(--p-on-button) !important; transform: none !important; box-shadow: none !important; }
.btn-secondary, .card-cta, .btn-print { background: #fff !important; color: var(--velo-ink) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.btn-secondary:hover, .card-cta:hover, .btn-print:hover { color: var(--p-primary) !important; border-color: var(--p-primary) !important; transform: none !important; }
.toggle-slider, input:checked + .toggle-slider { box-shadow: none; }

/* ---------- Heroes: white with a halo behind the headline ---------- */
.hero { background: radial-gradient(circle 520px at 24% 45%, var(--halo-stops)), #fff !important; color: var(--velo-ink) !important; }
.hero::before, .hero::after { display: none !important; }
.hero:not(:has(.hero-content)), .hero:has(> .container), .cover, header.header, .page-header { background: radial-gradient(circle 480px at 50% 40%, var(--halo-stops)), #fff !important; }
.hero h1, .hero h2, .hero-content h1, .cover h1, header.header h1, .page-header h1 { color: var(--velo-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.hero p, .hero-content p, .hero .subtitle, .hero .lead, .cover p, header.header p, .page-header p { color: var(--muted-fg) !important; }
.hero .article-meta, .hero .article-meta * { color: var(--muted-fg) !important; }

/* ---------- Eyebrows / small labels: Josefin Sans, wide tracking, pulse-700 ---------- */
.section-eyebrow, .eyebrow, .social-proof-text, .product-badge, .featured-badge {
  font-family: var(--eyebrow-font) !important; font-weight: 400 !important; letter-spacing: .28em !important; text-transform: uppercase; }
.social-proof-text { color: var(--p-700) !important; font-size: .8rem !important; }
.social-proof { background: #fff !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.logo-placeholder { background: #fff !important; color: var(--velo-ink) !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; font-size: .8rem !important; opacity: 1 !important; filter: none !important; padding: .45rem 1rem !important;
  width: auto !important; min-width: 0 !important; height: auto !important; white-space: nowrap; }
.company-logos { flex-wrap: wrap; justify-content: center; gap: .6rem !important; }

/* ---------- Icons ---------- */
.vt-ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex: none; }
.module-icon, .feature-icon, .ai-feature-icon, .ai-icon, .badge-icon, .integration-icon, .integration-badge .icon, .info-card .icon, .contact-info .icon {
  background: var(--p-50) !important; color: var(--p-primary) !important; border: 1px solid var(--p-100) !important; border-radius: 8px !important;
  box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; }
.module-icon, .feature-icon, .ai-icon, .badge-icon, .integration-icon { width: 48px !important; height: 48px !important; }
.ai-feature-icon, .integration-badge .icon, .info-card .icon, .contact-info .icon { width: 40px !important; height: 40px !important; min-width: 40px; }
.module-icon .vt-ic, .feature-icon .vt-ic, .ai-icon .vt-ic, .badge-icon .vt-ic, .integration-icon .vt-ic { width: 24px; height: 24px; }
.integration-badge .icon { margin: 0 auto .5rem; }
.btn-print .vt-ic { width: 16px; height: 16px; margin-right: 6px; }
.map-card h3 .vt-ic { width: 20px; height: 20px; margin-right: 6px; color: var(--p-primary); }

/* ---------- Cards: plain border, no lift, no coloured edges ---------- */
.module-card, .feature-card, .ai-card, .pricing-card, .card, .info-card, .faq-item, .integration-card, .product-card, .integration-badge, .badge, .stat-card, .checklist-item {
  border-radius: 8px !important; box-shadow: none !important; }
.module-card, .feature-card, .card, .info-card, .integration-badge, .badge, .stat-card { border: 1px solid var(--border) !important; background: #fff !important; }
.module-card:hover, .feature-card:hover, .ai-card:hover, .pricing-card:hover, .card:hover, .info-card:hover, .integration-card:hover, .product-card:hover, .integration-badge:hover, .badge:hover {
  transform: none !important; box-shadow: none !important; border-color: var(--p-300) !important; }
.module-card h3, .feature-card h3, .card h3, .info-card h3, .badge h3, .stat-label { color: var(--velo-ink) !important; }

/* ---------- Former dark bands -> light pulse-50 with a centred halo ---------- */
.ai-section, .comparison-section.dark, .integration-section, .problem-section {
  background: radial-gradient(circle 560px at 50% 18%, var(--halo-stops)), var(--p-50) !important; color: var(--velo-ink) !important;
  border-top: 1px solid var(--p-100); border-bottom: 1px solid var(--p-100); }
.ai-section::before, .ai-section::after { display: none !important; }
.ai-section h2, .ai-section h3, .ai-section h4, .ai-section .section-header h2, .ai-section .section-title, .ai-card h3 { color: var(--velo-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.ai-section p, .ai-section .section-header p, .ai-section .section-subtitle { color: var(--muted-fg) !important; }
.ai-feature, .ai-card { background: #fff !important; border: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; backdrop-filter: none !important; border-radius: 8px !important; }
.ai-feature h4, .ai-card h3 { color: var(--velo-ink) !important; }
.ai-feature p, .ai-card p { color: var(--muted-fg) !important; }
.stats { background: #fff !important; }
.stat-number { color: var(--p-primary) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.stat-description { color: var(--muted-fg) !important; }

/* ---------- CTA bands -> light ---------- */
.final-cta, .final-cta-section, .cta-section, .trust-section, .footer-cta {
  background: radial-gradient(circle 440px at 50% 30%, var(--halo-stops)), var(--p-50) !important; color: var(--velo-ink) !important;
  border-top: 1px solid var(--p-100); border-bottom: 1px solid var(--p-100); box-shadow: none !important; }
.final-cta h2, .final-cta-section h2, .cta-section h2, .trust-section h2, .footer-cta h2, .footer-cta h3 { color: var(--velo-ink) !important; }
.final-cta p, .final-cta-section p, .cta-section p, .trust-section p, .footer-cta p { color: var(--muted-fg) !important; }
.final-cta .btn-secondary, .final-cta-section .btn-secondary { background: #fff !important; }
.email-input { border: 1px solid var(--border) !important; }
.map-card { background: radial-gradient(circle 360px at 50% 40%, var(--halo-stops)), var(--p-50) !important; color: var(--velo-ink) !important; border: 1px solid var(--p-100); border-radius: 12px !important; }
.map-card * { color: var(--velo-ink) !important; }

/* ---------- Pricing ---------- */
.pricing-card.featured { background: #fff !important; color: var(--velo-ink) !important; border: 2px solid var(--p-primary) !important; transform: none !important; }
.pricing-card.featured :is(.card-name, .price, .pricing-card-name) { color: var(--p-primary) !important; }
.pricing-card.featured :is(.card-desc, .price-period, li) { color: var(--muted-fg) !important; }
.popular-badge, .pricing-badge, .featured-badge, .savings-badge, .save-badge { background: var(--p-button) !important; color: var(--p-on-button) !important; box-shadow: none !important; }
thead, thead tr, th { background: var(--p-100) !important; color: var(--p-800) !important; }
.check { color: var(--p-primary) !important; }

/* ---------- Cross-sell page: VeloLedger in its own green ---------- */
.product-card.velopulse .product-badge { background: var(--p-button) !important; color: var(--p-on-button) !important; }
.product-card.veloledger .product-badge { background: #b1e6c6 !important; color: #005331 !important; }
.included-note { background: var(--p-50) !important; color: var(--velo-ink) !important; border: 1px solid var(--p-100); }

/* ---------- FAQ (home page) ---------- */
.vt-faq { max-width: 1200px; margin: 0 auto; padding: 5rem 2rem; }
.vt-faq .section-header, .vt-faq .section-title { margin-bottom: 2.5rem; }
.vt-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vt-faq-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.4rem 1.5rem; }
.vt-faq-item h3 { font-size: 1.05rem; color: var(--velo-ink); margin-bottom: .5rem; }
.vt-faq-item p { font-size: .95rem; color: var(--muted-fg); line-height: 1.65; }
@media (max-width: 760px) { .vt-faq-grid { grid-template-columns: 1fr; } }

/* ---------- Footers: light pulse-50 with a centred halo ---------- */
footer, .footer { position: relative; overflow: hidden; color: var(--muted-fg) !important; border-top: 1px solid var(--border);
  background: radial-gradient(circle 520px at 50% 0%, var(--halo-stops)), var(--p-50) !important; }
footer h3, footer h4, .footer h4 { color: var(--velo-ink) !important; font-family: var(--eyebrow-font) !important; font-weight: 400 !important; letter-spacing: .2em !important; text-transform: uppercase; font-size: .8rem !important; }
footer a, footer p, footer li, .footer p { color: var(--muted-fg) !important; }
footer a:hover, .footer-bottom a { color: var(--p-primary) !important; }
.footer-bottom { border-top-color: var(--border) !important; color: var(--tagline) !important; }
.footer-badge { background: #fff !important; color: var(--velo-ink) !important; border: 1px solid var(--p-100) !important; border-radius: 999px !important; }
.social-icon { background: #fff !important; color: var(--velo-ink) !important; border: 1px solid var(--border); }

/* ---------- Small screens: wide tables scroll inside themselves, toggles wrap ---------- */
@media (max-width: 768px) { .lang-toggle, nav .nav-cta, nav .cta-button { display: none !important; } }
/* Article pages have no hamburger menu: let their nav links scroll sideways instead of widening the page */
@media (max-width: 768px) { nav:not(:has(.hamburger)) .nav-links { display: flex !important; overflow-x: auto; flex-wrap: nowrap; gap: 1.1rem !important; max-width: 100%; scrollbar-width: none; justify-content: flex-start !important; } nav:not(:has(.hamburger)) .nav-container { flex-wrap: wrap; gap: .6rem; } }
@media (max-width: 640px) {
  .post table, .table-wrapper table, article table, .content-section table, main table, .comparison-section table { display: block; overflow-x: auto; max-width: 100%; }
  .currency-toggle-container, .toggle-container { flex-wrap: wrap; justify-content: center; gap: .5rem; }
}